Paolo Macchi. App mobile a cura di Serena Arena Jessica Olgiati

Transcript

1 Paolo Macchi App mobile a cura di Serena Arena Jessica Olgiati Tecno 3 - Le applicazioni Client-Server ISIS Facchinetti 2015

2 Questo testo è pubblicato sotto licenza Creative Commons - Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Unported - Per le condizioni consulta: Le utilizzazioni consentite dalla legge sul diritto d'autore e gli altri diritti non sono in alcun modo limitati da quanto sopra. Il documento è scaricabile da sezione download, per fini esclusivamente didattici e non commerciali Segnalazioni di errori, critiche e consigli sono molto graditi e possono essere inoltrati a paolo.macchi@libero.it, oppure lasciando un commento al momento del download per gli studenti registrati. ISIS Cipriano Facchinetti via Azimonti, Castellanza (VA) - Tel fax info@isisfacchinetti.it Convenzioni usate nel testo: rappresenta una curiosità, un approfondimento NOTA rappresenta una nota rappresenta una esercitazione o esempio link di riferimento Rappresenta un codice o dei risultati o una segnalazione storica 1

3 Sommario 1 Tecniche per applicazioni client-server 4 Calcolo distribuito (Distributed Computing) 4 Messaggi e protocolli 4 Architettura Client/Server 5 Architettura Peer-to-Peer 6 2 TCP: le primitive di servizio e i socket 8 Progettazione e programmazione di un socket 9 I socket in ambiente Linux (C) 11 Un esempio significativo: chat 11 La programmazione dei socket in Java 13 Stream socket (TCP) 14 Esempi Client-Server 16 N.0 Echo (basilare) Client-Server 16 Esempio 1: Eco (1) del messaggio 18 Esempio 2 echo (2) del server su client 21 Esempio 3 Gioco degli indizi 23 Server multiclient 26 La programmazione dei socket in ambiente Microsoft 34 Un progetto client-server: Risiko 37 Server 38 Client 39 Protocollo di comunicazione 39 Implementazione 43 3 App per sistemi mobili 45 Intro 45 Tipi di App 45 Panoramica sui principali O.S. per dispositivi mobili 46 Note preliminari sui Sistemi Operativi 46 Android 48 ios 49 BlackBerry Tablet OS 50 Windows Phone 51 4 Sviluppare le APP 53 Phongap 53 Phonegap: come partire 54 Creare un progetto 55 Esempio di progetto semplice (senza periferiche) 60 Esempio di progetto con periferiche 62 5 Web Service 63 Appendice I linguaggi e le applicazioni Web 65 da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità 66 Accessibilità e usabilità 66 Siti Web per la comunicazione in azienda 68 Ipertesto e Web 68 Struttura dei siti 68 Analisi dei bisogni dell utente 69 Design dell applicazione 69 Metodologie per il Web design 70 Client-Side 72 Il documento Web: HTML e CSS 72 HTML5 72 Fogli di Stile (CSS) 73 Scripting lato Client 75 Il Document Object Model (DOM) 75 2

4 DOM e HTML 75 DOM e XML 78 Analisi di file XML 82 XML per tutti gli usi 84 Server-Side: la generazione di pagine dinamiche 85 CGI (Common Gateway Interface) (rfc 3875) 85 Estensione delle capacità del server WEB 88 Servlet Java 88 Scripting lato server 89 Il Pattern MVC Mash-up e Web Services Content Management System 102 WordPress 102 XML+JavaScript = AJAX 104 Librerie Javascript 107 La libreria JQuery 108 3

5 1 Tecniche per applicazioni clientserver Calcolo distribuito (Distributed Computing) Le elaborazioni di dati su larga scala spesso hanno bisogno di coordinare gli sforzi tra più computer. Un'applicazione di calcolo distribuito è un modo di coordinare più computer interconnessi ma indipendenti per eseguire un calcolo congiunto. Diversi computer sono indipendenti, nel senso che essi non condividono direttamente la memoria. Invece, essi comunicano tra loro tramite messaggi, informazioni trasferite da un computer a un altro, tramite una rete. Applicazione distribuita Definizione: Applicazione costituita da due o più processi che eseguono in parallelo su macchine distinte connesse da una rete di comunicazione I processi che costituiscono una applicazione distribuita cooperano sfruttando i servizi forniti dalla rete di comunicazione Messaggi e protocolli I messaggi inviati tra i computer sono sequenze di byte. I messaggi possono richiedere o inviare dati, segnalare situazioni anomale etc. In tutti i casi, il computer mittente deve codificare le informazioni in modo che il computer ricevente possa decodificarle e interpretarle correttamente. Per fare ciò, i computer adottano un protocollo che conferisce significato ai messaggi. Un protocollo è un insieme di regole per la codifica e l interpretazione dei messaggi. Entrambi i computer di invio e ricezione devono condividere la semantica di un messaggio. Molti protocolli specificano un particolare formato in cui alcuni bit, o byte, in posizioni fisse indicano campi particolari. I protocolli determinano le regole che possono essere applicate tra computer remoti. Principali architetture basate su scambio messaggi: Architetture client-server o Componenti distinti in due tipi: client e server o I server erogano un servizio o I client sfruttano tale servizio o Comunicazioni basate su scambio messaggi Esempio: il web Client: il browser Server: il demone http che fornisce i documenti ai client Architetture peer-to-peer o Componenti indifferenziati: agiscono tanto da richiedenti di un servizio quanto da fornitori di servizio o Comunicazioni basate su scambio messaggi Architetture a tre livelli (three-tiered architecture) o Tre tipologie di componenti: Client Server applicativo Data base o Comunicazioni basate su scambio messaggi Esempio: applicazioni di commercio elettronico 4

6 Architettura Client/Server L'architettura client/server è un modo per erogare un servizio da una fonte centrale. Un server fornisce un servizio e più client comunicano con il server per utilizzare tale servizio. In questa architettura, client e server hanno ruoli diversi. Il ruolo del server è quello di rispondere alle richieste di servizi da parte dei clienti, mentre il ruolo di un cliente è quello di emettere richieste e utilizzare la risposta del server per eseguire un compito. Lo schema seguente mostra l'architettura. Quando un web browser, ad esempio, visualizza il contenuto di una pagina web, diversi programmi in esecuzione sul computer indipendenti interagiscono tramite un architettura client / server. L'applicazione web browser sul computer di un utente ha il ruolo del cliente al momento della richiesta di una pagina web. Le applicazioni Client/Server Applicazioni Server o attendono connessioni: o aspettano messaggi in ingresso o eseguono un servizio (una applicazione) o restituiscono i risultati o Un server fornisce un servizio, anche a più client contemporaneamente. Applicazioni Client o stabiliscono la connessione o mandano un messaggio al server o aspettano la risposta o I clienti non hanno bisogno di conoscere i dettagli del modo in cui il servizio viene prestato, o come i dati che stanno ricevendo sono memorizzati sul server, e il server non ha bisogno di sapere come le sue risposte stanno per essere utilizzati. Caratteristiche del server: 5

7 Applicazione specializzata dedicata a fornire servizi di rete Parte con l'inizializzazione del sistema Gira su un computer remoto Aspetta richieste da client, cicla in attesa di richieste Accetta richieste da qualsiasi client, fornisce il servizio ad ogni client Ogni server é un processo indipendente, vengono gestiti simultaneamente più client Ogni servizio riceve un identificatore unico, sia i client che il server usano quell'identificatore : il server si registra mediante l'identificatore sullo strato di trasporto locale (TCP usa i numeri di porta del protocollo-protocol port numbers come identificatore). Il client richiede una sessione con quell'identificatore Caratteristiche del client: E' un'applicazione qualsiasi o diventa un client quando serve un servizio di rete o esegue anche altre elaborazioni Invocata direttamente dall'utente Gira sul computer locale dell'utente Attiva il contatto col server Può accedere a più servizi di rete Non richiede HW specializzato Scambi di messaggi: Il client invia una richiesta possibilmente con dei dati Il server invia una risposta, possibilmente con dei dati Il client può spedire richieste multiple, un server invia risposte multiple Il server può inviare risposte multiple a fronte di richieste semplici (es. video feed) Client e server si scambiano messaggi attraverso il protocollo di trasporto, TCP o UDP Le macchine Macchine sufficientemente potenti possono contenere più server Di solito pensiamo a client e server su macchine diverse, ma anche i sistemi su una singola macchina possono avere architetture client / server. Svantaggi Un inconveniente di sistemi client /server è che il server è un possibile punto critico: è l'unico componente con la possibilità di erogare il servizio e se si guasta il sistema si ferma. Un altro svantaggio di sistemi client-server è che le risorse di elaborazione possono diventare scarse se ci sono troppi clienti peggiornado le prestazioni. Python can make such a request directly using the socket module. >>> from socket import gethostbyname >>> gethostbyname(' ' ' The client then requests the contents of the web page from the web server located at that IP address. The response in this case is an HTML document that contains headlines and article excerpts of the day's news, as well as expressions that indicate how the web browser client should lay out that contents on the user's screen. Python can make the two requests required to retrieve this content using theurllib.request module. >>> from urllib.request import urlopen >>> response = urlopen(' >>> response[:15] b'<!doctype html>' Architettura Peer-to-Peer Il modello client / server è adatto per situazioni orientate ai servizi. Tuttavia, ci sono altri situazioni per i quali una più equa divisione del lavoro è una scelta migliore. Il termine peer-to-è usato per descrivere sistemi distribuiti in cui il lavoro è diviso tra tutti i componenti del sistema. Tutti i computer possono inviare e ricevere dati, e tutti contribuiscono con elaborazione e memoria. Un sistema distribuito aumenta la capacità di calcolo distribuito. 6

8 La divisione del lavoro tra tutti i partecipanti è la caratteristica di identificazione di un sistema peer-to-peer (paritario, ossia "peer"). Ciò significa che i pari devono essere in grado di comunicare tra loro in modo affidabile. Al fine di fare in modo che i messaggi raggiungere i destinatari, i sistemi peer-to-peer devono avere una struttura di rete organizzata. I componenti di questi sistemi collaborano per mantenere le informazioni sufficienti sulle posizioni di altri componenti per inviare messaggi a più destinatari. In alcuni sistemi peer-to-peer, il compito di mantenere la salute della rete viene assunta da un insieme di componenti specializzati. Talvolta si hanno sistemi che non sono puri sistemi peer-to-peer, perché hanno diversi tipi di componenti che svolgono funzioni diverse. Le applicazioni più comuni di sistemi peer-to-peer prevedono il trasferimento di dati e l'archiviazione dei dati, condivisione file, definita Peer to peer filesharing o P2P-Filesharing, come Gnutella, FastTrack. Per il trasferimento dei dati, ogni computer del sistema contribuisce a inviare dati attraverso la rete. Per la memorizzazione dei dati può accadere che l'insieme di dati potrebbe essere troppo grande o troppo prezioso per risisedere su un solo computer. Ogni computer memorizza una piccola parte dei dati, e ci possono essere più copie degli stessi dati su diversi computer: in caso di guasto i dati possono essere ripristinati da altre copie. Altre applicazioni peer-to-peer riguradno ad esempio il servizio voice- e video chat di cui Skype è un esempio di applicazione di trasferimento dati con un'architettura peer -to -peer. Quando due persone su diversi computer stanno avendo una conversazione Skype, le loro comunicazioni vengono trasmesse attraverso una rete peer- to-peer. Questa rete è composta da altri computer che eseguono l'applicazione Skype. Ogni computer conosce la posizione di alcuni altri computer nel suo vicinato. Un computer aiuta invia un pacchetto a destinazione mediante passaggio su un vicino che passa a qualche altro vicino, e così via, fino a quando il pacchetto raggiunge la destinazione prevista. Skype non è un sistema puro peer-to -peer. Una rete di supernodi è responsabile per la registrazione degli utenti e per le informazioni delle posizioni dei computer : la struttura di rete viene continuamente modificata quando gli utenti si collegano e scollegano. Vantaggi Non si deve acquistare un server con potenzialità elevate e quindi non se ne deve sostenere il costo Ogni utente condivide localmente le proprie risorse ed è amministratore del proprio client-server ("indipendenza") La velocità media di trasmissione dei dati è molto più elevata di una classica rete con sistema Server / Client, (questo tipo di condivisione diventa tanto più efficace tanti più sono i Client connessi, rispetto all architettura Server/Client, dove un elevato numero di Client connessi riduce la velocità di trasmissione dati per utente) Svantaggi ogni computer deve avere i requisiti per sostenere l'utente in locale e in rete, ma anche gli altri competenze ad ogni utente, soprattutto per quel che concerne la protezione La sicurezza degli accessi ai client viene gestita localmente su ogni macchina e non centralizzata, questo significa che una rete basata su utenti deve avere lo stesso archivio reimpostato in ogni client. NB nelle LAN l architettura peer-to-peer è appropriata solo per piccole reti domestiche, con una decina di computer prima che la manutenzione sia troppo onerosa e le prestazioni possano decadere streaming 7

9 2 TCP: le primitive di servizio e i socket Le applicazioni Web forniscono un meccanismo relativamente di alto livello per accedere alle risorse su Internet. A volte però, quando per esempio, si vuole scrivere un'applicazione client-server, i programmi richiedono una comunicazione di rete di livello inferiore, Nelle applicazioni client-server, il server fornisce alcuni servizi, come ad esempio l'elaborazione di query di database con l invio, ad esempio, delle quote azionarie. Il client utilizza il servizio fornito dal server, mostrando i risultati della query del database, offrendo all utente dei consigli per l acquisto delle azioni su cui investire. La comunicazione che avviene tra il client e il server deve essere affidabile: i dati non possono essere eliminati e devono arrivare sul lato client nello stesso ordine in cui il server ha inviato. TCP fornisce un canale di comunicazione point-to-point affidabile, per le applicazioni client-server. Per comunicare su TCP, un programma client e un programma server stabiliscono una connessione tra loro. A ogni stremità il programma si aggancia alla presa (socket) stabilendo una connessione. Per comunicare, il client e il server devono leggere e scrivere appoggiandosi al socket. Le applicazioni di rete dispongono di varie componenti che operano in modo indipendente. Le applicazioni sono sviluppate come processi che, per comunicare, devono invocare funzioni residenti nel sistema operativo (system call). Per creare interfacce indipendenti dal sistema operativo e renderle standard, si usano le API (Application Programming Interface). Tra le più diffuse e usate sono i socket di Berkeley (Berkeley Sockets) che comprendono una serie di librerie che effettuano la comunicazione tra processi di sistemi in rete. I socket Berkeley, nate su Unix nel 1983 e scritte in linguaggio C, vengono rilasciate solo nel Le API di Berkeley costituiscono lo standard de facto per i socket di rete. (liberamente tradotto da ) Il TCP implementa i Berkeley sockets (BSD) che costituiscono una libreria di funzioni per la comunicazione tra processi. Ogni sistema operativo o linguaggio (come Microsoft VisualBasic o Java) implementa le primitive in modo formalmente diverso ma sostanzialmente uguale. L applicazione chiede al sistema operativo di creare un socket, il sistema operativo lo crea e ne restituisce il descrittore al processo che lo usa in modo simile a un file (apertura, collegamento, Lettura, scrittura, chiusura). Alla fine l applicazione chiude il socket comunicandolo al sistema operativo. E' molto utile saper gestire i socket perchè ci permettono di realizzare applicazioni client/server proprietarie o standard (cioè che implementano gli RFC). Il primo tipo implementa un protocollo standard come ad esempio il protocollo FTP le cui caratteristiche sono descritte nella RFC 959. Il secondo costruisce un'applicazione proprietaria, che non si adatta agli standard RFC ma "inventa" una applicazione originale. La "Bidella-Sibilla" è un applicazione di pura fantasia in cui lo studente (client) chiede alla Bidella-Sibilla (Server) cosa gli capiterà quel giorno alla terza ora. "Alla terza ora avrai una sorpresa che sarà confermata alla fine della sesta", potrebbe rispondere la Bidella-Sibilla! In queste applicazioni è Il che prende tipicamente l'iniziativa contattando il server. Il server, però, dovrà essere in ascolto e dovrà prontamente reagire alle richieste che gli arrivano. Cosi' il server partirà prima del client per mettersi in attesa e predisporrà una porta (un socket) per accogliere le richieste del client che viene a "bussare" alla porta del server. Sotto è mostrata la procedura temporale che mette in relazione le primitive con le trame TCP che passano in linea. Si noti la fase di apertura, trasferimento dati e chiusura 8

10 In inglese What Is a Socket? A socket is one end-point of a two-way communication link between two programs running on the network. Socket classes are used to represent the connection between a client program and a server program. The java.net package provides two classes--socket and ServerSocket--that implement the client side of the connection and the server side of the connection, respectively. Normally, a server runs on a specific computer and has a socket that is bound to a specific port number. The server just waits, listening to the socket for a client to make a connection request. On the client-side: The client knows the hostname of the machine on which the server is running and the port number on which the server is listening. To make a connection request, the client tries to rendezvous with the server on the server's machine and port. The client also needs to identify itself to the server so it binds to a local port number that it will use during this connection. This is usually assigned by the system. If everything goes well, the server accepts the connection. Upon acceptance, the server gets a new socket bound to the same local port and also has its remote endpoint set to the address and port of the client. It needs a new socket so that it can continue to listen to the original socket for connection requests while tending to the needs of the connected client. On the client side, if the connection is accepted, a socket is successfully created and the client can use the socket to communicate with the server. The client and server can now communicate by writing to or reading from their sockets. An endpoint is a combination of an IP address and a port number. Every TCP connection can be uniquely identified by its two endpoints. That way you can have multiple connections between your host and the server. Progettazione e programmazione di un socket E' possibile, tramite i Socket, gestire direttamente una connessione di rete costruendo direttamente una applicazione Client e una Server. Questo paragrafo fornisce le basi per sviluppare un'applicazione di rete Client-Server basata sui Socket. La relazione tra Socket e TCP è approfondita nel capitolo del TCP. I Socket costituiscono l'interfaccia tra lo strato di applicazione e quello di trasporto. I socket costituiscono la struttura su cui si basa la programmazione in Internet. I socket possono essere definiti come le estremità di un canale di comunicazione : una coppia di processi che comunica attraverso la rete si serve di una coppia di socket, una per ciascun processo. Ogni socket è identificato dall indirizzo IP e dal numero di porta. Una porta puo essere,in modo astratto, definità come un oggetto in cui i processi introdurre e prelevare messaggi. La porta è identificata in modo univoco e puo essere assimilata a una mail-box. E' molto utile saper gestire i socket perchè ci permettono di realizzare applicazioni client/server proprietarie o standard (cioè che implementano gli RFC). Esistono, infatti. due tipi di applicazioni Client/Server. Il primo tipo implementa un protocollo standard (ad ex. FTP basandosi sulla RFC 959) sia dalla parte client che dalla parte server. Il secondo, al contratrio, costruisce un'applicazione proprietaria, che non si adatta agli standard RFC ma "inventa" una applicazione nuova ad ex. la "Sibille scolatica" in cui il programma client invia al server la data di nascita e il nome dell'utente e il server puo' rispondere cosi' "Alla terza ora avrai una sorpresa che sarà confermata alla fine della sesta!" Quando si usano i Socket dobbiamo servirci delle "porte" che sono il mezzo per far comunicare il livello applicativo con quello di trasporto. E' come se noi volessimo, all'interno della cucina in cui siamo, portare dei libri in camera: usciremo dalla porta della cucina, percorreremo il corridoio, busseremo alla porta della camera e vi entreremo: è l'accesso tramite le due porte che ci permette di trasferire i libri, o riceverli. Cosi' i socket ci offrono esattamente questa possibilità: il programmatore sa gestire benissimo il lato applicativo ma il controllo sul trasporto puo' farlo solo, sostanzialmente, tramite queste porte. Il client prende tipicamente l'iniziativa con il compito di contattare il server. Il server dovrà essere in ascolto di eventuali richieste e dovrà prontamente reagire a queste. Cosi' il server partirà prima del client per mettersi in attesa e predisporrà una porta (un socket) per accogliere le richieste del client che viene a "bussare" alla porta del server. Ogni socket è caratterizzato, come accennato, da un identificatore composto da: "INDIRIZZO IP dell'host + il n. della PORTA (a 16 bit)" Le porte minori di 1024 sono "Porte ben note" e sono usate per i servizi standard (ex. FTP:port 21; TELNET: port 23; SMTP: 25; HTTP: 80; (l'elenco delle porte si trova in RFC 1700)). Quando si costruisce un'applicazione proprietaria il programmatore dovrà fare attenzione a non usare porte standard ("ben note") ma a servirsi di altre. Si servirà di "primitive" che sono gli strumenti per agire (aprire, inviare, chiudere) le sessioni tra le porte. Nella creazione e utilizzo di un socket, Client e Server operano in modo complementare. Entrambi si servono delle primitive (mostrate in tabella sottostante), per la creazione della connessione, il passaggio dei dati e la chiusura. La tabella delle primitive con le relative azioni. Alcune di queste primitive sono caratteristiche del client, altre del server e altre ancora, sono comuni a entrambi: 9

11 PRIMITIVA (usata da ) SOCKET (clint/server) BIND (server) LISTEN (server) ACCEPT (server) AZIONE Crea un punto di accesso relativo al servizio (endpoint) e restituisce un descrittore di socket che è simile ad un descrittore di file assegna l indirizzo al socket creato e la porta prefissata. In genere viene eseguito solo sul server. Infatti la porta sul client è assegnata automaticamente dal Sistema Operativo Utilizzata per rendere il socket pronto ad accettare le richieste in arrivo. E un socket passivo, cioè non prende mai l iniziativa. Specifica il numero delle connessioni che possono essere servite. E utilizzata solo dai server. bloccante: arresta il mittente finchè non si realizza la connessione Permette ad un server di prendere la prima richiesta presente nella sua coda di ricezione. Se la coda è vuota resta bloccato in attesa di una connessione. Un nuovo descrittore di socket è assegnato automaticamente appena la connessione è accettata CONNECT (client) SEND (client/server) RECEIVE (client/server) CLOSE (client/server) Permette al client di aprire la connessione con il server. Il Sistema Operativo assegna automaticamente una porta. La funzione termina dopo la creazione della connessione Blocca il cclient e attiva la procedura di connessione : al completamento il client viene sbloccato Spedisce dati sulla connessione aperta Riceve dati sulla connessione aperta chiusura della connessione Il progetto di un client e di un server passa attraverso una serie di passi standard: Progettazione di un Client TCP Creazione di un socket Creazione della connessione TCP (3-way handshake) Lettura e scrittura sulla connessione Chiusura della connessione TCP (4-way handshake) Progettazione di un Server TCP Creazione di un socket con la scelta della porta TCP Ascolto sulla porta in attesa della richiesta da client Accettazione della richiesta di un client Letture e scritture sulla connessione Chiusura della connessione TCP Nota il socket di ascolto (listening socket) è quello creato dalla funzione socket: utilizzato per tutta la vita del processo in genere usato solo per accettare richieste di connessione 10

12 il socket connesso (connected socket) è quello creato dalla funzione accept: usato solo per la connessione con un certo client, usato per lo scambio dei dati con il client I socket in ambiente Linux (C) Un esempio significativo: chat Creare una applicazione client-server (ad ex personalizzare il Telnet creato per una chat) usando Socket in "C" con Linux. L'esempio riportato si riferisce al trasferimento di dati tra due processi che usano Socket con TCP. IL server accetta connessioni sulla porta Il server accetta stringhe tramite "read" e le visualizza tramite stdout, fino al ricevimento della stringa "quit". Alla fine il server risponde con la stringa "FATTO".Il client usa "write" per trasferire i dati. prelevati da stdin, sulla conessione. Il server è concorrente, cioè ad ogni nuova connessione accettata viene generato un figlio che la gestisce e il padre torna ad aspettarne una nuova (il massimo numero di connessioni in sospeso è fissato da CODA=3). (In grassetto sono evidenziate le primitive di socket.) Pseudo-codice: SERVER main() socket(indirizzo_ip, protocollo_tcp); bind(descrittore_socket) // associazione al socket del suo descrittore con il numero di porta listen(); //server pronto e in ascolto di una richiesta da Client while (1) // attesa di una connessione while (accept()); // client accettato if (!fork()) //creazione del del figlio che eredita dal padre il socket do read(sda, buff, BLEN); //leggi il dato del Client finchè while ("quit"); //termnon viene ricevuto quit // Input terminato write("fatto"); // invia a Client close(); //la sessione viene chiusa close(); //non si èp riusciti a creare il figlio: la sessione viene chiusa CLIENT main() socket(indirizzo_ip, TCP) //, se UDP: SOCK_SDGRAM port_server = 5517; //porta del server a cui connetersi 11

13 hp = gethostbyname("server"); //rilevazione ind. IP del server connect(); //Inserimento stringhe da inviare al server do leggi_stringa(); write(); // invio della stringa al server fional quit while ("quit"); read(); //leggi risposta dal server close(); //chiudi sessione Server: //by Re 5IB as 2003/04 #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <netdb.h> #include <stdio.h> #include <stdlib.h> #define BLEN 1024 #define CODA 3 int main() int sd, sda; /* Socket Descriptor, Socket Descriptor Accept */ int len; /* length */ struct sockaddr_in saddr; /* server address. struct socketaddr_in comprende: dominio (es. AF_INET, numero porta (2 byte), ind. IP (4 byte) 8 byte non utilizzati)*/ struct sockaddr caddr; /* client address */ char buff[blen] = '\0'; if ((sd = socket(af_inet, SOCK_STREAM, 0)) < 0) //indirizzi IP con TCP, se UDP: SOCK_SDGRAM printf("error: can't create socket\n"); exit(1); saddr.sin_family = AF_INET; //domini IP saddr.sin_port = 5517; //porta di accesso saddr.sin_addr.s_addr = INADDR_ANY; //qualsiasi ind. IP client accettato if (bind(sd, (struct sockaddr *)&saddr, sizeof(saddr)) < 0) //descrittore socket, puntatore al buffer in cui verrà copiato l'ind. del client chiamante, n. byte dell' ind. del client chiamante printf("error: can't bind\n"); exit(1); printf(".:: Server up & running ::.\n"); listen(sd, CODA); /* max CODA connections = n. max. connession in sospeso*/ printf("\too Max %d connections allowed Oo\n", CODA); while (1) /* wait for a connection */ while ((sda = accept(sd, &caddr,&len)) < 0); //ind. del client accettato e copiato in memoria if (!fork()) //il figlio eredita dal padre il descr. del socket e sarà rimosso solo alla terminazione del figlio do read(sda, buff, BLEN); printf("client: %s\n", buff); while (strcmp(buff, "quit")); //termina figlio al quit printf("input terminato\n"); write(sda, "Fatto", 10); close(sda); exit(0); close(sda); 12

14 Client: #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <netdb.h> #include <stdio.h> #include <stdlib.h> #define BLEN 1024 #define CODA 3 int main() int sd; /* Socket Descriptor */ int len; /* length */ struct sockaddr_in caddr; /* client address */ struct hostent *hp; char buff[blen]; if ((sd = socket(af_inet, SOCK_STREAM, 0)) < 0) //indirizzi IP con TCP, se UDP: SOCK_SDGRAM printf("error: can't create socket\n"); exit(1); caddr.sin_family = AF_INET; caddr.sin_port = 5517; //domini IP //porta del server a cui connetersi hp = gethostbyname("localhost"); //rilevazione ind. IP del server ex. bcopy(hp->h_addr, &caddr.sin_addr, hp->h_length); //caricamento ind. nella struttura di memoria da usare in connect if (connect(sd,(struct sockaddr *)&caddr, sizeof(caddr)) < 0) printf("errore nella connect!\n"); exit(1); printf("inserisci le stringhe che vuoi inviare al server.\n(quit per terminare)\n"); do scanf("%s", buff); write(sd, buff, BLEN); while (strcmp(buff, "quit")); //esci al quit read(sd, buff, BLEN); printf("dal server: %s\n", buff); close(sd); exit(0); La programmazione dei socket in Java Il pacchetto java.net package fornisce due classi: Socket and ServerSocket che implementano, rispettivamente, la parte client e la perte server di connessione alla rete. La classe ServerSocket, implementa, in particolare, un socket che i server possono utilizzare per ascoltare e accettare connessioni dai client. Nota: per le applicazioni Web, la classe URL e classi correlate (URLConnection, URLEncoder) sono probabilmente più appropriati rispetto alle classi di socket. In realtà, gli URL sono una connessione relativamente alto livello. Esistono due modi principali per comunicare in rete: - connectionless - connection oriented In corrispondenza a tali due modi di comunicazione si hanno i seguenti tipi di socket, rispettivamente: - Socket a datagrammi (Datagram) trasferiscono messaggi di dimensione variabile, preservando i confini, ma senza garantire ordine o arrivo dei pacchetti. Supportate nel dominio Internet dal protocollo UDP (User Datagram Protocol). Non instaurano una connessione tra client e server, e non verificano l'arrivo del dato o il ri-invio. Hanno il vantaggio di trasferire velocemente i dati. La classe Java che usa questo protocollo è DatagramSocket. 13

15 I dati sono impacchettati tramite la classe DatagramPacket. - Stream socket forniscono stream di dati affidabili ed ordinati. Nel dominio Internet sono supportati dal protocollo TCP (Transfer Control Protocol). Permettono di creare una connessione tra client e server con 2 canali (uno per ciascuna direzione). Le classi Java che usano questo protocollo sono Socket e ServerSocket. Stream socket (TCP) (cfr Socket Java E. Tramontana - 3/11/05 15/16 ) Client e server instaurano una connessione che consiste di due flussi di dati, uno per l'input ed uno per l'output. Le API invocate da client e server, per instaurare una connessione, sono diverse e quindi esistono classi di libreria Java diverse. Dal lato client vi è il processo che vuole instaurare una connessione per inviare e ricevere dati. - La classe Java che usa il client è Socket. - Dal lato server vi è un processo che attende una richiesta di connessione, la classe Java che usa è ServerSocket. La connessione è individuata da 4 elementi: indirizzo IP del client, porta del client, indirizzo IP del server, porta del server. NOTA STREAM JAVA (cfr. ) - Stream = canale di comunicazione tra un programma (Java) e una sorgente (destinazione) da cui importare (verso cui esportare) dati! L informazione viene letta (scritta) serialmente, con modalità FIFO (accesso sequenziale in lettura e scrittura) - Per leggere e scrivere servono due stream per un canale bi-direzionale: Il package java.io contiene classi che implementano gli stream. - Due gerarchie di classi: " Stream di caratteri: servono a leggere/scrivere sequenze di caratteri UNICODE a 16 bit " Stream di byte: servono a leggere/scrivere sequenze di byte (tipicamente dati): - La classe che permette la scrittura su uno stream è la classe PrintWriter. La classe PrintWriter ha diversi metodi che saranno comuni a chiunque abbia mai stampato qualcosa su consolle. Infatti la variabile out della classe System altri non è che un PrintWriter. Accediamo alla variabile out (di tipo PrintWriter) nella classe System e invochiamo il metodo println() che scrive sullo stream. 14

16 Allo stesso modo possiamo utilizzare PrintWriter per scrivere su qualsiasi stream. Ecco ad esempio come scrivere su di un file: File f= new File("miofile"); //apriamo un nuovo collegamento con il file. FileOutputStream fos= new FileOutputStream(f); //creiamo un outputstream con il file. PrintWriter pw=new PrintWriter(fos); //creiamo un nuovo printwriter per scrivere sull'outputstream del file passandogli come parametro l'output stream del file. pw.println("ciao"); //scriviamo la stringa ciao sul file. - Per leggere abbiamo bisogno di un input stream. Anche in questo caso abbiamo una analogia con la classe System. Infatti la variabile in all'intero della classe System è proprio un InputStream. Ma come per scrivere su uno stream abbiamo bisogno di un PrintWriter (per agevolarci) anche per leggere agilmente da uno stream utilizziamo un'altra classe: BufferedReader. Questa classe ha un costruttore che prende in input un InputStreamReader, la quale a sua volta prende in input uno InputStream. File f= new File("miofile"); /come prima apriamo il file. FileInputStream fis= new FileInputStream(f); //creiamo un nuovo input stream col file BufferedReader br= new BufferedReader(new InputStreamReader(fis)); //creiamo il nostro lettore di buffer String line=""; //creiamo una variabile dove salvare di volta in volta le varie righe dello stream //la funzione readline ritorna una linea dallo stream, ovvero una stringa fino al prossimo \n while((line=br.readline())!=null) System.out.println(line); //stampiamo la riga Server Dal lato server, bisogna creare una istanza di ServerSocket: ServerSocket serversocket = new ServerSocket(PORT); e dopo mettere il server in attesa di una connessione per mezzo di: Socket clientsocket = serversocket.accept() La chiamata ad accept() blocca il server fino a quando un client non instaura una connessione (tuttavia tramite il metodo setsotimeout(t) si può bloccare la accept() solo per t millisecondi). La accept() restituisce un oggetto di tipo Socket. Questo permette al server di usare gli stream che il client ha stabilito. clientsocket.getinputstream() Il server crea gli stream di input e di output per poter poi ricevere e trasmettere dati. Allo stream di input del client corrisponderà lo stream di output del server e viceversa (vedi figura). Una volta instaurata una connessione, la trasmissione dei dati avviene con gli stessi metodi sia nel client che nel server. Creazione stream di input (nel server): InputStreamReader isr = new InputStreamReader(clientSocket.getInputStream()); BufferedReader in = new BufferedReader(isr); Ricezione di dati dalla socket: in.readline(); Client Il client invoca il costruttore della socket, per creare la socket, specificando l'indirizzo e la porta dove risiede il processo server. 1. L'istanziazione della socket e quindi la chiamata al costruttore instaura la connessione con il server, a patto che il server sia già in esecuzione e pronto per ricevere questa connessione. Socket socket = new Socket(addr, PORT); con addr (di tipo InetAddress) e PORT (di tipo int) che identificano il processo server Se la creazione della stream socket ha successo, viene prodotta una connessione bidirezionale tra i due processi. L'apertura della socket è implicita con il costruttore. La chiusura deve essere chiamata esplicitamente ed è necessaria per non impegnare troppe risorse di sistema (ovvero connessioni). Il numero di connessioni che un processo può aprire è limitato e quindi conviene mantenere aperte solo le connessioni necessarie. - Il metodo della classe Socket per chiudere la connessione e disconnettere il client dal server è close() Altri metodi della classe Socket sono: InetAddress getinetaddress() restituisce l indirizzo remoto a cui lasocket è connessa InetAddress getlocaladdress() restituisce l indirizzo locale int getport() restituisce la porta remota int getlocalport() restituisce la porta locale 2. Dopo la connessione, il client crea uno stream di input, tramite getinputstream(), con cui può ricevere i dati dal server. La classe InputStreamReader converte un flusso di byte in unflusso di caratteri: InputStreamReader isr = new InputStreamReader(socket.getInputStream()); 15

17 Per migliorare l'efficenza, creiamo un buffer che consente di leggere un gruppo di caratteri: BufferedReader in = new BufferedReader(isr); Ovvero, allo stream del socket applichiamo i filtri InputStreamReader e BufferedReader Per leggere una linea dallo stream di input della socket: String s = in.readline() Questa ci restituisce la stringa inviata dal server. Il client crea anche uno stream di output con cui invierà i dati al server in modo analogo allo stream di input: OutputStreamWriter osw = new OutputStreamWriter(socket.getOutputStream()); BufferedWriter bw = new BufferedWriter(osw); PrintWriter out = new PrintWriter(bw, true); Per inviare una stringa sullo stream di output: out.println(s) 3. Quando la connessione non è più necessaria è bene che il client liberi la risorsa connessione. Per fare ciò chiude la socket con: out.close(); in.close(); socket.close(); Esempi Client-Server N.0 Echo (basilare) Client-Server /* SERVER * Copyright (c) 1995, 2013, Oracle and/or its affiliates. All rights reserved To change this license header, choose License Headers in Project Properties.. */ package echoserver1; import java.net.*; import java.io.*; // NB contiene classi che implementano gli stream /** * facchinetti67 */ public class EchoServer1 public static void main(string[] args) throws IOException if (args.length!= 1) System.err.println("Usage: java EchoServer <port number>"); System.exit(1); int portnumber = Integer.parseInt(args[0]); try ( ServerSocket serversocket = new ServerSocket(Integer.parseInt(args[0])); // server socket Socket clientsocket = serversocket.accept(); //blocca il server fino a quando un client non instaura una connessione // client crea lo stream di out per inviare dati al client e di in per riceverli dal client PrintWriter out = new PrintWriter(clientSocket.getOutputStream(), true); BufferedReader in = new BufferedReader( new InputStreamReader(clientSocket.getInputStream())); ) // ciclo di echo: legge stringa da client (in) e ne fa l eco al client (out) String inputline; while ((inputline = in.readline())!= null) out.println(inputline); 16

18 catch (IOException e) System.out.println("Exception caught when trying to listen on port " + portnumber + " or listening for a connection"); System.out.println(e.getMessage()); /* CLIENT * Copyright (c) 1995, 2013, Oracle and/or its affiliates. All rights reserved To change this license header, choose License Headers in Project Properties. */ package echoclient; import java.io.*; import java.net.*; /** * facchinetti67 */ public class EchoClient public static void main(string[] args) throws IOException if (args.length!= 2) System.err.println( "Usage: java EchoClient <host name> <port number>"); System.exit(1); String hostname = args[0]; int portnumber = Integer.parseInt(args[1]); try ( Socket echosocket = new Socket(hostName, portnumber); // Socket - identificazione processo server // client crea lo stream di out per inviare dati la server PrintWriter out = new PrintWriter(echoSocket.getOutputStream(), true); // client crea uno stream di inpu con cui può ricevere i dati dal server, InputStreamReader converte un flusso di byte in unflusso di caratteri. Crea un buffer che consente di leggere un gruppo di caratteri (in) : BufferedReader in = new BufferedReader( new InputStreamReader(echoSocket.getInputStream())); //standard input BufferedReader stdin = new BufferedReader(new InputStreamReader(System.in)) ) // ciclo di echo: legge stringa da tastiera (stdin) e la inoltra al server (out). Dal server riceve l eco (in) che mostra a video (System.out.println) String userinput; while ((userinput = stdin.readline())!= null) out.println(userinput); System.out.println("echo: " + in.readline()); //eco a video catch (UnknownHostException e) System.err.println("Don't know about host " + hostname); System.exit(1); catch (IOException e) System.err.println("Couldn't get I/O for the connection to " + hostname); System.exit(1); 17

19 Esempio 1: Eco (1) del messaggio (programmatore: Gurjinder Partola 2013 (Java)). L applicazione è composta dai due thread (fatti partire da un processo padre (Main)) di Server e Client. Il server, ricevuto un messaggio da client, ne fa l eco. Server L applicazione su Server si sviluppa secondo i seguenti passi (il codice è mostrato sotto): codice/spiegazione 1. server = new ServerSocket(port); Output a video [SERVER] Server avviato sulla porta 1111 creazione di un socket sulla porta passata come parametro dal programma di lancio (main)(nell esempio è la porta 1111) 2. client = server.accept(); [SERVER] In ascolto [SERVER] Connessione da Socket[addr=/ ,port=16224,localport=1111] il server si mette in ascolto (Listen) e accetta laconnessione 3. String message = in.readutf(); [SERVER] Ricevuto pacchetto: `Hello server :1111 =)` il messaggio viene e letto (dopo l inializzazione degli stream per l input e per l output (in, out)) 4. out.writeutf(echomessage); [SERVER] Invio pacchetto echo: `Hello client :16244 =)` invio del messaggio di echo a client 5. client.close(); chiusura della connessione ( e degli stream) Client L applicazione su Client si sviluppa secondo i seguenti passi : codice/spiegazione 1. server = new Socket(host, port); Output a video [CLIENT] Connesso a Socket[addr=localhost/ ,port=1111,localport=16224] creazione di un socket con l indirizzo (host) e porta (port) del server) e connessione al server 2. out.writeutf(message); [CLIENT] Invio pacchetto: `Hello server :1111 =)` creazione e invio del messaggio (dopo l inializzazione degli stream per l input e per l output (in, out)) 3. String echomessage = in.readutf(); [CLIENT] Ricevuto pacchetto echo: `Hello client :16224 =)` lettura del messaggio di echo ricevuto 18

20 4. server.close(); chiusura della connessione ( e degli stream) /* MAIN by Gurjinder Partola 2013 */ package net; public class Main public static void main(string[] args) ServerThread st = new ServerThread(1111); ClientThread ct = new ClientThread("localhost", 1111); try st.join(3600); ct.join(3600); catch (InterruptedException e) System.exit(0); /* CLIENT */ package net; import java.io.bufferedinputstream; import java.io.bufferedoutputstream; import java.io.datainputstream; import java.io.dataoutputstream; import java.io.ioexception; import java.net.socket; import java.net.unknownhostexception; public class ClientThread extends Thread /** * Socket del server */ private Socket server; /** * Input stream (dati in ingresso dal server) */ private DataInputStream in; /** * Output stream (dati in uscita verso il server) */ private DataOutputStream out; /** * Costruttore, crea una connessione al server con i parametri dati e avvia * il thread * host * Host del server port * Porta del server */ public ClientThread(String host, int port) try // Connessione al server server = new Socket(host, port); catch (UnknownHostException e) System.out.println("[CLIENT] Connessione fallita (Host error)."); catch (IOException e) 19

21 System.out.println("[CLIENT] Connessione fallita (I/O error)."); System.out.println("[CLIENT] Connesso a " + server.tostring()); // Avvio del thread public void run() try // Inizializzazione degli stream BufferedInputStream bin = new BufferedInputStream(server.getInputStream()); in = new DataInputStream(bin); BufferedOutputStream bout = new BufferedOutputStream(server.getOutputStream()); out = new DataOutputStream(bout); // Invio del messsaggio al server String message = "Hello server " + server.getinetaddress().gethostaddress() + ":" + server.getport() + " =)"; out.writeutf(message); out.flush(); System.out.println("[CLIENT] Invio pacchetto: `" + message + "`"); // Ricezione del messaggio di risposta proveniente dal server String echomessage = in.readutf(); System.out.println("[CLIENT] Ricevuto pacchetto echo: `" + echomessage + "`"); // Chiusura degli stream out.close(); in.close(); server.close(); catch (Exception e) System.out.println("[CLIENT] Errore durante la scrittura/lettura del pacchetto."); /* SERVER */ package net; import java.io.bufferedinputstream; import java.io.bufferedoutputstream; import java.io.datainputstream; import java.io.dataoutputstream; import java.io.ioexception; import java.net.serversocket; import java.net.socket; public class ServerThread extends Thread /** * Socket del server */ private ServerSocket server; /** * Socket del client */ private Socket client; /** * Input stream (dati in ingresso) */ private DataInputStream in; /** * Output stream (dati in uscita) */ private DataOutputStream out; /** * Costruttore, crea un server sulla porta data e avvia il thread * port * Porta del server */ 20

22 public ServerThread(int port) try // Creazione del server server = new ServerSocket(port); catch (IOException e) System.out.println("[SERVER] Errore durante l'avvio del server sulla porta " + port); System.out.println("[SERVER] Server avviato sulla porta " + port); // Avvio del thread public void run() System.out.println("[SERVER] In ascolto"); try client = server.accept(); catch (IOException e) System.out.println("[SERVER] Connessione fallita (I/O error)."); System.out.println("[SERVER] Connessione da " + client.tostring()); try // Inizializzazione degli stream BufferedInputStream bin = new BufferedInputStream(client.getInputStream()); in = new DataInputStream(bin); BufferedOutputStream bout = new BufferedOutputStream(client.getOutputStream()); out = new DataOutputStream(bout); // Ricezione del messaggio proveniente dal client String message = in.readutf(); System.out.println("[SERVER] Ricevuto pacchetto: `" + message + "`"); // Invio del messsaggio di risposta al client String echomessage = "Hello client " + client.getinetaddress().gethostaddress() + ":" + client.getport() + " =)"; out.writeutf(echomessage); out.flush(); System.out.println("[SERVER] Invio pacchetto echo: `" + echomessage + "`"); // Chiusura degli stream out.close(); in.close(); client.close(); catch (Exception e) System.out.println("[SERVER] Errore durante la lettura/scrittura del pacchetto."); Esempio 2 echo (2) del server su client il server riceve un messggio da client e lo rispedisce al mittente, cioè ne fa l eco. il server fa l eco di ciò che il client invia: il client invia il testo al server, e il server risponde con lo stesso. Il protocollo è molto semplice. Naturalmente se il vostro client dovesse parlare con un Server http, ad esempio, servirebbe qualcosa di più complesso. Tuttavia, le basi sono molto simili: 1. Aprire un socket. (Open a socket) 2. Aprire un flusso di input e output sul socket (Open an input stream and output stream to the socket.) 3. leggere e scrivere nel flusso. (Read from and write to the stream according to the server's protocol) 4 Chiudere i flussi. (Close the streams.) 5 Chiudere il socket. (Close the socket.) Solo il punto 3 differisce da cliente a cliente, a seconda del protocollo con il server. Gli altri punti rimangono in gran parte gli stessi. 21

23 import java.io.*; import java.net.*; public class EchoClient public static void main(string[] args) throws IOException Socket echosocket = null; PrintWriter out = null; BufferedReader in = null; try echosocket = new Socket("localhost", 11111); //Crea un nuovo oggetto Socket (echosocket). Il costruttore Socket richiede il nome della macchina e il numero di porta a cui si desidera connettersi //prepara per la lettura/scrittura di carateeri UNICODEsul socket out = new PrintWriter(echoSocket.getOutputStream(), true); // out: l'output del socket e apre PrintWriter su di esso in = new BufferedReader(new InputStreamReader( echosocket.getinputstream())); // in: il flusso di input del socket e aprebufferedreader su di esso System.out.println("Connesso al Server" + echosocket); catch (UnknownHostException e) System.err.println("Don't know about host..."); System.exit(1); catch (IOException e) System.err.println("Couldn't get I/O for " + "the connection to host..."); System.exit(1); BufferedReader stdin = new BufferedReader( new InputStreamReader(System.in)); String userinput; System.out.println("Digita un messaggio e riceverai l'eco dal Server. Per terminare digita 'ciao'" ); while ((userinput = stdin.readline())!= null) out.println(userinput); System.out.println("echo dal server: " + in.readline()); out.close(); in.close(); stdin.close(); echosocket.close(); import java.net.*; import java.io.*; public class KnockKnockServer public static void main(string[] args) throws IOException ServerSocket serversocket = null; try serversocket = new ServerSocket(11111); catch (IOException e) System.err.println("Could not listen on port: "); System.exit(1); System.out.println("Server in listen..."); Socket clientsocket = null; try clientsocket = serversocket.accept(); catch (IOException e) System.err.println("Accept failed."); System.exit(1); PrintWriter out = new PrintWriter(clientSocket.getOutputStream(), true); BufferedReader in = new BufferedReader( new InputStreamReader(clientSocket.getInputStream())); String inputline, outputline; System.out.println("acettato client "+clientsocket); while ((inputline = in.readline())!= null) outputline=inputline; 22

24 out.println(outputline); if (outputline.equals("ciao")) out.println("sconnessione"); System.out.println("sconnessione del Server "); break; out.close(); in.close(); clientsocket.close(); serversocket.close(); Esempio 3 Gioco degli indizi Server package knkkserver; /* * Copyright (c) 1995, 2008, Oracle and/or its affiliates. All rights reserved. */ import java.net.*; import java.io.*; public class KnockKnockServer public static void main(string[] args) throws IOException ServerSocket serversocket = null; try serversocket = new ServerSocket(44444); catch (IOException e) System.err.println("Could not listen on port: "); 23

25 System.exit(1); System.out.println("Il Server dice: La porta è aperta. Quando arrivi bussa!"); Socket clientsocket = null; try clientsocket = serversocket.accept(); System.out.println("Server: accettato collegamento"); catch (IOException e) System.err.println("Accept failed."); System.exit(1); PrintWriter out = new PrintWriter(clientSocket.getOutputStream(), true); BufferedReader in = new BufferedReader( new InputStreamReader( clientsocket.getinputstream())); String inputline, outputline; KnockKnockProtocol kkp = new KnockKnockProtocol(); outputline = kkp.processinput(null); outputline = "Bussa alla mia porta e attendi... (Quando il server dice'bye.'...)"; out.println(outputline); while ((inputline = in.readline())!= null) outputline = kkp.processinput(inputline); out.println(outputline); if (outputline.equals("bye.")) break; /*if(inputline.compareto("bye.")!= 0) out.println(inputline); else break;*/ outputline = "Server Close"; out.println(outputline); out.close(); in.close(); clientsocket.close(); serversocket.close(); Protocol package knkkserver; /*Il programma (Paolo Macchi 2014) è basato su : * * Copyright (c) 1995, 2008, Oracle and/or its affiliates. All rights reserved. */ public class KnockKnockProtocol private static final int WAITING = 0; private static final int SENTKNOCKKNOCK = 1; private static final int SENTCLUE = 2; private static final int ANOTHER = 3; private static final int NUMJOKES = 5; private int state = WAITING; private int currentjoke = 0; private String[] clues = "Miss Scarlett", "Professor Plum", "Colonnello Mustard", "Miss White", "Reverendo Green" ; private String[] answers = "Miss Scarlett, la rossa!", "Il prof già sospettato della morte di un suo collega!", "Il colonnello in pensione, già debitore a molte persone!", "C'è un candeliere qui", "Mi manca l'aria dentro il serbatoio..." ; 24

26 public String processinput(string theinput) //state = WAITING; //debug String theoutput = null; theoutput = "start protocol!"; //debug if (state == WAITING) theoutput = "Bussa!"; state = SENTKNOCKKNOCK; else if (state == SENTKNOCKKNOCK) //if (theinput.equalsignorecase("who's there?")) if (theinput.equalsignorecase("chi c'è in casa?")) theoutput = clues[currentjoke]; state = SENTCLUE; else theoutput = "(W)Immaginavo che dicessi \"Chi c'è in casa?\"! " + "Riprova a bussare..."; else if (state == SENTCLUE) if (theinput.equalsignorecase(clues[currentjoke] + " chi?")) theoutput = answers[currentjoke] + " vuoi un'altro indizio? (y/n)"; state = ANOTHER; else theoutput = "Immaginavo dicessi \"" + clues[currentjoke] + " chi?\"" + "! Riprova a bussare..."; state = SENTKNOCKKNOCK; else if (state == ANOTHER) if (theinput.equalsignorecase("y")) theoutput = "(A) Bussa!"; if (currentjoke == (NUMJOKES - 1)) currentjoke = 0; else currentjoke++; state = SENTKNOCKKNOCK; else theoutput = "Bye."; state = WAITING; //theoutput = "Khhhhhhhhhhhhhh!"; return theoutput; Client package knokclient; /* * Copyright (c) 1995, 2008, Oracle and/or its affiliates. All rights reserved. *. */ import java.io.*; import java.net.*; public class KnockKnockClient public static void main(string[] args) throws IOException Socket kksocket = null; PrintWriter out = null; BufferedReader in = null; try kksocket = new Socket("localhost", 44444); out = new PrintWriter(kkSocket.getOutputStream(), true); in = new BufferedReader(new InputStreamReader(kkSocket.getInputStream())); catch (UnknownHostException e) System.err.println("Don't know about host "); System.exit(1); catch (IOException e) System.err.println("Couldn't get I/O for the connection to "); 25

27 System.exit(1); BufferedReader stdin = new BufferedReader(new InputStreamReader(System.in)); String fromserver; String fromuser; while ((fromserver = in.readline())!= null) System.out.println("IL Server dice: " + fromserver); if (fromserver.equals("bye.")) break; fromuser = stdin.readline(); if (fromuser!= null) System.out.println("Client: " + fromuser); out.println(fromuser); System.out.println("Client Close"); out.close(); in.close(); stdin.close(); kksocket.close(); Server multiclient Quando un server accetta una connessione esso può generare un nuovo thread per servire la richiesta, mentre il thread originale continua a stare in attesa (su serversocket.accept()) diconnessioni da altri client. Questa soluzione (server paralleli-multithread ) permette di non perdere richieste di connessioni e di servire più client che fanno richieste in parallelo /* Server * Applicazione server che rimane in ascolto di nuove connessioni * Se riceve una richiesta di connessione da parte di un client ne delega la gestione e ritorna in acsolto */ package SeverMultiClient; import java.io.ioexception; import java.net.*; /** * Jo */ public class Server public static final int PORT = 11111; public static void main(string[] args) throws IOException ServerSocket s = new ServerSocket(PORT); System.out.println("Attivato sulla porta "+ s.getlocalport()+" e all'indirizzo "+s.getinetaddress()); while(true) System.out.println("-----IN ATTESA-----"); 26

28 Socket socket = s.accept(); ServerDelegato st = new ServerDelegato(socket); //genera thread per ogni client st.start(); /* * To change this template, choose Tools Templates * and open the template in the editor. */ package SeverMultiClient; import java.io.*; import java.net.*; /** * Thread ServerDelegato generato da server Jo */ public class ServerDelegato extends Thread Socket s; BufferedReader ins; PrintWriter outs; public ServerDelegato(Socket s) throws IOException this.s=s; ins = new BufferedReader(new InputStreamReader(s.getInputStream())); outs = new PrintWriter(new BufferedWriter(new OutputStreamWriter(s.getOutputStream())),true); public void run() try System.out.println("Comunicazione Avviata"); String client = ins.readline(); String str = ins.readline(); while(!str.equals("end")) outs.println(str); System.out.println("Ricevuto da "+client+" e rispedito " + str); str = ins.readline(); s.close(); catch (Exception e) System.err.println("Errore nel server"); public void GestisciClient() /* Client * To change this template, choose Tools Templates * and open the template in the editor. */ package SeverMultiClient; /** * Jo */ public class MainClient public static void main(string[] args) throws Exception Client c1=new Client("PrimoClient"); Client c2=new Client("SecondoClient"); System.out.println("Attivato client: "+ c1.getname()); 27

29 c1.start(); System.out.println("Attivato client: "+ c2.getname()); c2.start(); /* * Client che esegue la connessione ad un server */ package SeverMultiClient; import java.io.*; import java.net.*; /** * Jo */ public class Client extends Thread InetAddress a; Socket s; BufferedReader in; PrintWriter out; String nome; public Client(String nome) throws Exception this.nome=nome; a=inetaddress.getbyname(null); s = new Socket(a,Server.PORT); in = new BufferedReader(new InputStreamReader(s.getInputStream())); out = new PrintWriter(new BufferedWriter(new OutputStreamWriter(s.getOutputStream())),true); public void run() try out.println(nome); for(int i = 0; i < 10; i ++) out.println(i); System.out.println("Generato e spedito " + i + " da " + this.nome); String str; str = in.readline(); System.out.println(" Ricevuto " + str + " da " + s.getinetaddress().gethostname()); out.println("end"); s.close(); catch (IOException ex) System.err.println("Eccezione nel server"); ESERCIZI programma che implementi il gioco TRIS con protocollo client/server. Due client si sfidano tra loro. Idea di base: il client usa una invia al server una stringa con la posizione desiderata come coppia di coordinate: ad esempio (0,0) pulsante in alto a sinistra, (2,2) pulsante in basso a destra ecc. Il server, ricevuta la stringa, invia il carattere X o O a tutti i client (compreso quello che ha effettivamente inoltrato il messaggio) che, infine, dovrebbero aggiornare il rispettivo ambiente 1. Applicazioni Client-Server. Data un applicazione multiclient, metterne in evidenza cli aspetti più significativi (ruolo di server e client, vantaggi rispetto a un applicazione peer-to-peer, ecc.) che la caratterizzano e la rendono vantaggiosa 2. Riferendosi a un applicazione multiclient tra due concorrenti (ad esempio il gioco TRIS ) scrivere in pseudo-codice come sarà realizzata la struttura software dell applicazione che gira su server e che gestisce la richiesta dei client, tenendo conto il client usa una matrice 3x3 e invia al server una stringa con la posizione desiderata come coppia di coordinate: ad esempio (0,0) pulsante in alto a sinistra, (2,2) pulsante in basso a destra ecc. 28

30 3. Analizzare i vincoli e il valore aggiunto che una applicazione multiclient classica venga fatta girare su un sistema mobile Vincoli: Valore aggiunto: 1. Applicazioni Client-Server. Data un applicazione multiclient, metterne in evidenza cli aspetti più significativi (ruolo di server e client, vantaggi rispetto a un applicazione peer-to-peer, ecc.) che la caratterizzano e la rendono vantaggiosa 2. Riferendosi a un applicazione multiclient tra due concorrenti (ad esempio il gioco TRIS ) scrivere in pseudo-codice come sarà realizzata la struttura software dell applicazione che gira sui client che desiderano collegarsi al server, tenendo conto il client usa una matrice 3x3 e invia al server una stringa con la posizione desiderata come coppia di coordinate: ad esempio (0,0) pulsante in alto a sinistra, (2,2) pulsante in basso a destra ecc. 3. Nel caso una applicazione multiclient venga fatta girare su un sistema mobile, di quali sistemi operativi potrebbe servirsi? CìIn che cosa si differenziano questi sistemi operativi rispetto a quellii tradizionali? ESERCIZIO programma che implementi il gioco del tris con protocollo client/server. Idea di base: 4. il client usa una matrice 3x3 e invia al server una stringa con la posizione desiderata come coppia di coordinate: ad esempio (0,0) pulsante in alto a sinistra, (2,2) pulsante in basso a destra ecc. 5. Il server, ricevuta la stringa, invia il carattere X o O a tutti i client (compreso quello che ha effettivamente inoltrato il messaggio) che, infine, dovrebbero aggiornare il rispettivo ambiente 6. Applicazioni Client-Server. L applicazione server Battaglia Navale, gioca contemporaneamente contro due o più applicazioni utenti (client). Scrivere il pseudo-codice-java che, tenuto conto di tutte le primitive previste, sia in grado di realizzare l applicazione client-server: a fronte di una mossa di uno dei client il server risponde di conseguenza. Le mosse sono codificate sottoforma di riga,colonna 7. 2) Riferendosi all applicazione on line TRIS richiesta nel quesito 1, scrivere lo pseudo-codice del server che gestisce la richiesta dei client (multiclient). 3) Phonegap... Jessica senza codice ma solo teoria? Nel caso di applicazione mobile disegnare l interfaccia????? Vantaggi e svantaggi??? Su quali sistemi operativi gira (disegno)??? Lato Server Codice sorgente - presumibilmente Java 29

31 import java.io.*; import java.net.*; import java.util.*; public class TrisServer static final int MAX_CONNECTIONS = 2; static ArrayList <InputOutputServer> giocatori = new ArrayList <InputOutputServer>(); public static void main (String[] args) try ServerSocket s = new ServerSocket(8089); System.out.println ("In ascolto sulla porta "); while (true) if (giocatori.size()<max_connections) Socket incoming = s.accept(); System.out.println ("Collegato!"); giocatori.add(new InputOutputServer(incoming, giocatori)); Runnable r = giocatori.get(giocatori.size()-1); Thread t = new Thread (r); t.start(); System.out.println ("Connessioni correnti: "+giocatori.size()); catch (IOException e) e.printstacktrace(); import java.io.*; import java.net.*; import java.util.*; public class InputOutputServer implements Runnable private Socket incoming; private ArrayList <InputOutputServer> players; private PrintWriter out; private Scanner in; private String name; /* Contatore che viene incrementato ad ogni mossa effettuata. I valori dispari corrispondono ai turni del giocatore 1, i valori pari ai turni del giocatore 2.*/ private static int contagiocatore = 0; /* Contatore che viene incrementato ad ogni passo quando le mosse sono >= 5 Effettuare il controllo prima è inutile, non possono esserci vincitori.*/ private static int contamossa = 0; public InputOutputServer(Socket incoming, ArrayList giocatori) this.incoming = incoming; players = giocatori; public void run() try try InputStream instream = incoming.getinputstream(); OutputStream outstream = incoming.getoutputstream(); 30

32 in = new Scanner (instream); out = new PrintWriter(outStream, true); boolean done = false; out.println ("Scrivi il nome: "); if (in.hasnextline()) name = in.nextline(); System.out.println ("Ho ricevuto il nome "+name); while (!done && in.hasnextline()) String line; line = in.nextline(); if (line.equals("1-1")) if (contagiocatore%2 == 0) for (int i=0; i<players.size(); i++) players.get(i).out.println ("1-1 X"); contagiocatore++; contamossa++; finally incoming.close(); in.close(); out.close(); contagiocatore = 0; contamossa = 0; System.out.println ("Gioco finito! Aspetto nuove connessioni..."); catch (IOException e) e.printstacktrace(); Lato Client Codice sorgente - presumibilmente Java 31

33 import java.io.*; import java.net.*; public class TrisClient static Socket clientsocket; static int numeroporta = 8089; static String host = "localhost"; public static void main (String[] args) try clientsocket = new Socket (host, numeroporta); Runnable r = new InputOutputClient (clientsocket); Thread t = new Thread(r); t.start(); catch (UnknownHostException e) e.printstacktrace(); catch (IOException e) e.printstacktrace(); import java.awt.*; import java.awt.event.*; import java.io.*; import java.net.*; import java.util.*; import javax.swing.*; public class InputOutputClient implements Runnable private Socket incoming; private PrintWriter out; private Scanner in; public InputOutputClient(Socket s) incoming = s; public void run() try try InputStream instream = incoming.getinputstream(); OutputStream outstream = incoming.getoutputstream(); in = new Scanner (instream); out = new PrintWriter (outstream, true); Scanner tastiera = new Scanner (System.in); boolean done = false; String line; // Inserire il nome if (in.hasnextline()) line = in.nextline(); System.out.println (line); line = tastiera.nextline(); out.println(line); // Creo la finestra grafica 32

34 TrisFrame frame = new TrisFrame(outStream); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.setvisible(true); // Ricezione messaggi dal Server while (!done && in.hasnextline()) line = in.nextline(); frame.stampa(line); /* Ci sono almeno 5 simboli nella finestra. Qualcuno può aver vinto*/ if (line.equals("contamossa")) boolean esito = frame.controllovittoria(); if (esito==true) out.println("vittoria"); done=true; frame.dispose(); else if (line.equals("fine")) // Non ha vinto nessuno done = true; JOptionPane.showMessageDialog(frame, "Non vince nessuno!"); frame.dispose(); finally incoming.close(); in.close(); out.close(); catch (IOException e) e.printstacktrace(); private class TrisFrame extends JFrame private static final int LUNGHEZZA = 300; private static final int ALTEZZA = 300; private JPanel panel; private JButton casella11; private JButton casella12; private JButton casella13; private JButton casella21; private JButton casella22; private JButton casella23; private JButton casella31; private JButton casella32; private JButton casella33; private PrintWriter out; private OutputStream outstream; public TrisFrame (OutputStream outputstream) throws IOException outstream = outputstream; out = new PrintWriter (outstream, true); 33

35 else return false; La programmazione dei socket in ambiente Microsoft VB.net (Visul Basic 2008)(cfr. Documentazione Microsoft Visual Studio 2008) La Class Socket (System.Net.Sockets) Implementa l'interfaccia socket Berkeley. La classe Socket fornisce un insieme completo di metodi e proprietà per le comunicazioni in rete. Utilizzando un protocollo orientato alla connessione come TCP, il server può rimanere in attesa delle connessioni utilizzando il metodo Listen. Il metodo Accept elabora tutte le richieste di connessione in ingresso e restituisce un oggetto Socket che può essere utilizzato per comunicare dati con l'host remoto. Per specificare l'indirizzo IP locale e il numero di porta, si utilizza il metodo Bind prima del metodo Listen. Per stabilire una connessione con un host in attesa, si usa il metodo Connect. Per comunicare dati il metodo Send o il metodo Receive. Una volta completato l'invio e la ricezione dei dati, utilizzare il metodo Shutdown per disattivare l'oggetto Socket. Dopo aver chiamato il metodo Shutdown, chiamare il metodo Close per rilasciare tutte le risorse associate all'oggetto Socket. Nota: Se si sta creando un'applicazione relativamente semplice si possono usare direttamente i metodi TcpClient, TcpListener e UdpClient. Queste classi forniscono un'interfaccia semplice e intuitiva per le comunicazioni con l'oggetto Socket. Esempio 1- Nell esempio client-server che segue (che usa i socket Berkeley) il server (in modalità Consolle, risponde al client (un semplice terminale telnet che fornisce i comandi di prova e il comando di disconnessione:) 'importo classi Imports System.Net.Sockets Imports System.Net '*********************************************** ' server socket sincrono ' client stupido ' gennaio 2008 Susanna Anelli telnet --> open solo 2 comandi : help, com1,com2, disc '*********************************************** Module server4 Sub Main() ' create the socket: IPv4,...,TCP Dim listensocket As New Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp) Dim MySocket As New Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp) ' prepare bind the listening socket to the port Dim hostip As IPAddress = IPAddress.Parse(" ") Dim Port As String = "2000" Dim EP As New IPEndPoint(hostIP, Port) Dim buffer As Byte() 'buffer di ricezione Dim message As String 'stringa in cui depositare messaggio ottenuto con receive (buffer) Dim stringacom As String Dim how As SocketShutdown message = "" '*********************** '****** BIND *********** '*********************** listensocket.bind(ep) '************************* '****** LISTEN *********** '************************* ' start listening 'listensocket.listen(backlog) 'in ascolto su : 2000 listensocket.listen(1) Console.WriteLine("server in ascolto...attesa di richiesta connessione") Console.WriteLine("sono connesso??? 0", MySocket.Connected) '************************* '****** ACCEPT *********** '************************* 'attende richiesta per tempo indeterminato (-1), se arriva richiesta di connessione, accetta If (listensocket.poll(-1, SelectMode.SelectRead)) Then MySocket = listensocket.accept() 'connessione aperta => fare controllo reale su stato della connessione e gestire errori 34

36 If MySocket.Connected Then Console.WriteLine("richiesta accettata...connessione stabilita") End If End If MySocket.Send(System.Text.Encoding.ASCII.GetBytes("connessione stabilita" + vbcrlf)) MySocket.Send(System.Text.Encoding.ASCII.GetBytes("invia comando...(help)" + vbcrlf)) Do While MySocket.Connected '************************* '****** RECEIVE ********** '************************* ' se c'è qualcosa disponibile... buffer = New Byte(MySocket.Available) 'allora receive...in buffer 'a connessione chiusa intercettare l'errore Try MySocket.Receive(buffer, buffer.length, SocketFlags.None) Catch ee As Exception Console.WriteLine(ee.Message) End Try 'bufferizzo in messaggio i caratteri arrivati fino all'invio message += System.Text.Encoding.ASCII.GetString(buffer) 'quando arriva l'invio, interpreto comando : analisi sintattica + esecuzione 'suppongo che i comandi abbiano tutti lunghezza 4, per come definisco protocollo 'altrimenti cambio funzione e considero (tutto - crlf) stringacom = "comandi possibili :" + vbcrlf + "com1" + vbcrlf + "com2" + vbcrlf + "disc" + vbcrlf + "help" If (message.contains(vbcrlf)) Then message = Left(message, 4) 'comandi a caso di 4 ch Select Case message Case "com1" 'invio conferma comando ricevuto MySocket.Send(System.Text.Encoding.ASCII.GetBytes("ricevuto comando uno" + vbcrlf)) Console.WriteLine("comando uno") Case "com2" MySocket.Send(System.Text.Encoding.ASCII.GetBytes("ricevuto comando due" + vbcrlf)) Console.WriteLine("comando due") Case "help" MySocket.Send(System.Text.Encoding.ASCII.GetBytes(stringacom + vbcrlf)) Console.WriteLine("comando help") ' se comando disc: client chiede disconnessione. Implementare disc simmetrica Case "disc" Try Console.WriteLine("chiusura connessione effettuata con successo") MySocket.Shutdown(SocketShutdown.Both) MySocket.Close() Catch e As ObjectDisposedException Console.WriteLine("Caught: 0", e.message) End Try 'implementare chiusura simmetrica (o a tre vie) Case Else 'comando client non previsto MySocket.Send(System.Text.Encoding.ASCII.GetBytes("comando non previsto" + vbcrlf)) End Select 'stampo messaggio per verificarne la correttezza Console.WriteLine(message) 'per nuovo comando message = "" End If Loop 'finchè connessione è aperta, ricevo da client End Sub End Module Esempio2 Il server si limita a fare da eco ai messaggi inviati dal Client 35

37 Client Imports System.Net.Sockets Public Class frmclient Private sck As Net.Sockets.Socket Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load End Sub Private Sub cmdconnect_click(byval sender As System.Object, ByVal e As System.EventArgs) Handles cmdconnect.click Try sck = New Net.Sockets.Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp) sck.connect(txtremhost.text, txtremport.text) Catch ex As Exception MsgBox(ex.Message) End Try End Sub Private Sub cmdsend_click(byval sender As System.Object, ByVal e As System.EventArgs) Handles cmdsend.click Try sck.send(system.text.encoding.ascii.getbytes(txtmessage.text)) Catch ex As Exception MsgBox(ex.Message) End Try '''ricezione sull'invio Dim breadbuffer As Byte() = New Byte(sck.Available) Application.DoEvents() sck.receive(breadbuffer, breadbuffer.length, SocketFlags.None) ' convert to a string... Dim smessage As String = "" smessage = System.Text.Encoding.ASCII.GetString(bReadBuffer) + smessage ''display message... Txtrec.Text = smessage End Sub End Class Server Imports System.Net.Sockets Imports System.Net Module Module1 Sub Main() Dim Host As IPAddress = IPAddress.Parse(" ") Dim Port As String = "2000" Dim Daemon As New Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp) Dim Server As New IPEndPoint(Host, Int32.Parse(Port)) Daemon.Bind(Server) Daemon.Listen(5) Console.WriteLine("in ascolto...") Do ' poll for connections If Daemon.Poll(10000, SelectMode.SelectRead) Then ' a message is being sent-create a socket to read it... Dim clssocket As Socket = Daemon.Accept() ' read the message from the buffer... Console.WriteLine("accettata richiesta da server") Dim breadbuffer As Byte() = New Byte(clsSocket.Available) Dim smessage As String = "" Do 'Console.WriteLine("receiving...") clssocket.receive(breadbuffer, breadbuffer.length, SocketFlags.None) ' convert to a string... smessage = System.Text.Encoding.ASCII.GetString(bReadBuffer) 'display message... 36

38 Console.Write(sMessage) clssocket.send(system.text.encoding.ascii.getbytes(smessage)) Loop ' release socket... clssocket.close() Console.WriteLine("closed") clssocket = Nothing End If Loop End Sub End Module Un progetto client-server: Risiko ARCHITETTURA DEL SISTEMA La scelta dell'architettura del sistema è naturalmente una delle fase cruciali del progetto, in quanto da essa dipende tutto il funzionamento del sistema. Ci si trova di fronte a diverse possibilità: Architettura client-server, in cui c'è un server unico che mantiene lo stato del gioco ed a cui si collegano i vari client. Architettura peer-to-peer, in cui non c'è un server, o se c'è non ha conoscenza dello stato del gioco ma si 37

39 limita a ritrasmettere a tutti i giocatori i messaggi che riceve. Architettura ibrida, in cui si ha un server ma la maggior parte delle comunicazioni vengono fatte in modalità peer-to-peer. Prima di effettuare una scelta tra uno di questi modelli occorre fare alcune considerazioni. Inannzitutto si deve tenere in conto il numero di giocatori che possono partecipare ad ogni singola partita, in questo gioco il numero massimo di partecipanti è 6, il che comporterebbe nel caso di un'architettura peer-to-peer, un elevato numero di connessioni tra i vari giocatori, nonchè una più complicata gestione delle comunicazioni e delle disconnessioni. In secondo luogo, visto che si tratta di un gioco a turni e non real-time non sono richiesti particolari requisiti di velocità, e quindi anche un'architettura client-server potrà servire adeguatamente allo scopo. Inoltre, l'adozione di un'architettura client-server pura ha l'ulteriore vantaggio che lo stato del gioco viene totalmente mantenuto nel server, il che impedisce ad eventuali client "disonesti" di effettuare mosse in contrasto con le regole del gioco. Infatti, visto che ogni modifica di stato viene fatta sul server e solo in seguito comunicata ai client, il server è in grado di controllare le mosse fatte e segnalare errore nel caso tali mosse siano scorrette. Pertanto, sulla base delle considerazioni fatte ora, l'architettura adottata è quella client-server. Di seguito si riporta uno schema che raffigura i vari elementi del sistema e le interazioni fra di essi. Server Il server, che è unico nel sistema, deve essere in grado di gestire più partite contemporaneamente. Traducendo questo concetto nell'ambito della programmazione ad oggetti, si può dire che si utilizza una classe RisikoServer, la quale mantiene dei riferimenti a più classi RisikoGame. La classe RisikoServer costituisce un server vero e proprio, nel senso che accetta le connessioni da parte dei client e quindi permette agli utenti di accedere al gioco. Ogni volta 38

40 che un utente si connette, il server crea un agente (PlayerAgent) che si occupa di gestire completamente la comunicazione con l'utente. Una partita viene avviata dal server quando viene raggiunto un sufficiente numero di giocatori. La classe RisikoGame è quella che effettivamente implementa l'astrazione di partita ed infatti sè il contenitore dello stato della partita, vale a dire tutte le informazioni che riguardano i giocatori, come ad esempio, i territori occupati da ogni partecipante ed il relativo numero di armate, le carte possedute, le missioni, i turni, ecc. In base a quanto visto nella fase di analisi, relativamente alle varie mosse possibili attuabili dai giocatori, si può modellare ogni partita come un sistema a stati finiti, in cui ogni stato corrisponde ad uno stato del gioco. Gli stati sono i seguenti: NO_MOVE: questo stato significa che nessuna mossa è possibile da parte di nessun giocatore. Questo avviene prima che la partita abbia inizio prima che si raggiunga un sifficiente numero di giocatori oppure alla fine della partita, quando è stato proclamato un vincitore. PLACE_ARMIES: ci si trova in questo stato quando ci sono giocatori che hanno delle armate da posizionare. Questo si verifica all'inizio del gioco subito dopo la distribuzione delle armate ed anche all'inizio di ogni utrno di gioco. MUST_TRADE: questo si verifica quando il giocatore corrente possiede un numero di carte maggiore di 5 nel qual caso è obbligato a scambiarle prima di poter eseguire qualsiasi altra mossa. ATTACK: in questo stato il giocatore corrente può sferrare i suoi attacchi. WAITING_FOR_MOVE: questo stato viene raggiunto immediatamente dopo un attacco andato a buon fine (conquista di un territorio) e consiste nell'attendere che l'attaccante segnali quante armate intende muovere nel territorio appena conquistato. Questo perchè non è permesso che un territorio rimanga scoperto. Client Il client del gioco, come si può vedere dal precedente schema, è strutturato in due parti. La prima (RisikoClient) si occupa della comunicazione con il server, mentre la seconda (RisikoUI) costituisce l'interfaccia grafica che si occupa di gestire l'interazione con l'utente. Nel client viene mantenuta una copia dello stato della partita che però può essere modificato solamente modo indiretto in seguito a messaggi ricevuti dal server. Analogamente a quanto visto per il server, anche nel client si possono individuare diverse situazioni di gioco: WATCHING: in questo stato l'utente può solo guardare e si verifica prima dell'inizio o dopo la fine della partita, oppure quando il turno è di un altro giocatore. MUST_TRADE: il giocatore è obbligato a scambiare le carte. PLACE_ARMIES: l'utente deve posizionare le armate che ha a disposizione sui suoi territori. ATTACK: il giocatore può sferrare degli attacchi MOVE_ARMIES: il giocatore sta muovendo le sue armate da un territorio ad un altro. questa possibilità si verifica sia appena dopo una conquista, sia quando il giocatore decide di fare degli spostamenti (è consentito soltanto uno spostamento per ogni turno). Protocollo di comunicazione Il server ed i client ovviamente comunicano in modo bidirezionale, ed inoltre ogni messaggio transita sempre attraverso il server. Ad esempio, quando un utente attua una mossa agendo sulla propria interfaccia grafica, quest'ultima lo comunica al client che a sua volta invia le informazioni relative all'azione al server. Dal lato server queste informazioni vengono ricevute dal relativo agente che tenta di modificare lo stato della partita in base al comando ricevuto dall'utente. Se tale comando è lecito, lo stato viene modificato e di conseguenza tutti i client che partecipano alla partita ricevono una notifica di questo aggiornamento, sempre tramite l'agente. Se invece la mossa 39

41 non è lecita, viene inviato un messaggio di errore al giocatore che l'ha effettuata. Chiaramente nella maggior parte dei casi è opportuno evitare di inviare mosse illegali al server, per cui si prevede un controllo preventivo da parte del client. La comunicazione avviene in modo asincrono tramite scambio di messaggi. Naturalmente ci sono diversi tipi di messaggio, e di seguito se ne riporta l'elenco con il relativo significato. Ogni messaggio, è caratterizzato, oltre che dal tipo, anche da altre informazioni specifiche di quel tipo di messaggio. Ad esempio, un messaggio di attacco specifica qual è il territorio da cui parte l'attacco, qual è quello attaccato ed il numero di dadi usati, e così via. MESSAGGI DAL CLIENT AL SERVER Messaggio Significato JOIN_GAME ingresso in partita di un giocatore LEAVE_GAME abbandono (volontario) di un giocatore ATTACK attacco di un territorio, vengono specificati i territori di arrivo e di partenza ed il numero di dadi usati M_ATTACK attacco multiplo, analogo al precedente ma l'attacco procede fino a quando è possibile NUM_ARMIES comunicazione del numero di armate da spostare in un territorio appena conquistato PLACE_ARMIES posizionamento di una o più armate in un determinato territorio MOVE_ARMIES spostamento di una o più armate tra due territori adiacenti appartenenti allo stesso giocatore TRADE_CARDS scambio di una combinazione di carte END_TURN passaggio del turno al giocatore successivo MESSAGGI DAL SERVER AL CLIENT Messaggio Significato JOINED_GAME ingresso in partita di un giocatore, conseguente ad un messaggio JOIN_GAME inviato da un utente 40

42 END_GAME fine della partita, con indicazione di chi è il vincitore LEAVED_GAME abbandono da parte di un giocatore, può essere dovuto ad un abbandono volontario o a una disconnessione SEND_INFO inizializzazione di una partita, consiste nell'invio al client dello stato iniziale del gioco TURN comunicazione del turno corrente ADDED_ARMIES assegnazione di armate ad un certo giocatore, si verifica all'inizio di ogni turno o quando un giocatore scambia le carte PLACED_ARMIES posizionamento di armate in un territorio, conseguente ad un corrispondente messaggio PLACE_ARMIES inviato da un client MOVED_ARMIES movimento di armate, conseguente ad un corrispondente messaggio MOVE_ARMIES inviato da un client ATTACKED attacco, conseguente ad un corrispondente messaggio ATTACK (o M_ATTACK) inviato da un client ATTACK_RESULT risultato di un attacco, contiene le informazioni che indicano l'esito di un attacco, cioè il risultato dei dadi e le armate perse da attaccante e difensore nello scontro SEND_CARD invio di una carta ad un giocatore, in seguito alla conquista di un territorio SEND_CARDS invio di più carte ad un giocatore, in seguito al passaggio delle carte di un giocatore eliminato a quello che lo ha distrutto REMOVE_CARDS ritiro delle carte ad un giocatore, conseguente ad uno scambio di carte o all'eliminazione del giocatore TRADED_CARDS esito di uno scambio di carte, indica il giocatore che ha effettuato lo scambio e quante armate ha ricevuto in cambio, conseguente ad un messaggio TRADE_CARDS inviato da un client 41

43 MISSION invio della missione, usato nella preparazione della partita Ai precedenti messaggi vanno aggiunti messaggi di errore, che vengono inviati ad esempio, in seguito al tentativo di eseguire una mossa illegale. Il protocollo funziona nel seguente modo: Appena un client si connette invia un messaggio JOIN_GAME ed attende l'arrivo di tutti i partecipanti Quando tutti i giocatori sono arrivati, il server inizializza la partita stabilendo la successione dei turni, l'assegnazione dei territori, delle armate e delle missioni, etc., e spedisce queste informazioni a tutti i client, tramite i messaggi SEND_INFO e MISSION A questo punto ogni giocatore comincia ad effettuare il piazzamento delle armate che ha inizialmente a disposizione e lo notifica al server con il comando PLACE_ARMIES Quando tutte le armate sono state disposte sul planisfero, la partita ha inizio ed il server lo segnala mandando un messaggio TURN indicando qual è il giocatore a cui spetta muovere. Eventualmente prima di segnalare il turno, viene mandato un messaggio ADDED_ARMIES che assegna al giocatore le armate supllementari a cui ha diritto. Ad ogni turno, il giocatore corrente può fare le sue giocate, ovvero posiziona eventuali armate (PLACE_ARMIES), scambia le carte (TRADE_CARDS), attacca (ATTACK, M_ATTACK, NUM_ARMIES) e muove le armate (MOVE_ARMIES), fino alla fine del suo turno (END_TURN). Chiaramente per ognuno dei precedenti messaggi, il server controlla che lo stato del gioco sia compatibile con l'esecuzione dell'azione, e in tal caso attua i dovuti cambiamenti e notifica tutti i client (compreso quello che li ha generati) tramite i messaggi visti in precedenza. Il turno viene quindi via via passato in successione ai vari partecipanti fino a quando uno non è riuscito a completare la propria missione, evento che segna la fine della partita (END_GAME). Dalla precedente descrizione si possono distinguere due fasi in ogni partita. 1. Nella prima di fase, in cui i giocatori effettuano la disposizione iniziale delle armate, tutti i giocatori possono comunicare contemporaneamente sul server. 2. Nella seconda fase, invece, relativa al gioco vero e proprio c'è un solo giocatore (quello corrente) per volta che può comunicare col server. Questo significa che se uno degli altri partecipanti invia dei messaggi al server, riceverà certamente un messaggio di errore. 3. Un caso a parte è il messaggio LEAVE_GAME che può essere ricevuto in un qualsiasi momento e che va attuato in modo immediato. In particolare se il giocatore che ha lasciato la partita era proprio quello corrente si deve provvedere a passare il turno a quello successivo, altrimenti sarà sufficiente disattivarlo. Macchina a stati Domanda la macchina a stati va costruita su client o server o deve rappresentare l intero sistema C_S? 42

44 Implementazione Comunicazione client-server Per implementare la comunicazione bidirezionale tra client e server si sono usate le Socket di Java. In particolare il server crea una ServerSocket con la quale accetta le connessioni dei client, i quali ovviamente dovranno conoscere a priori la porta del server. Per ogni connessione viene generato un nuovo thread che si occuperà dell'interazione con quel client. Questo thread altro non è che il PlayerAgent visto in precedenza, pertanto si tratta di una classe che deriva dalla classe Thread e ne ridefinisce il metodo run(). Il RisikoClient ha dei metodi che vengono invocati tramite l'interfaccia grafica del gioco e che provvedono ad inviare i relativi messaggi all'agente presente sul server (ad esempio sendattack, sendmovearmies, ecc.), ed inoltre avrà un meccanismo asincrono (realizzato quindi con un altro thread) per leggere messaggi provenienti dall'agente. Sincronizzazione La gestione dello stato di una partita è un aspetto abbastanza delicato dell'applicazione, in quanto, data la presenza contemporanea di più giocatori, non si può escludere a priori che i partecipanti possano effettuare nello stesso momento delle operazioni incompatibili tra loro. E' quindi necessario introdurre un meccanismo per evitare che si creino dei conflitti. NOTA bisogna fare in modo che l'invocazione dei metodi sia mutuamente esclusiva, al fine di evitare la possibilità di raggiungere stati inconsistenti. Si pensi ad esempio al caso in cui, nella fase iniziale di disposizione delle armate, siano rimasti due giocatori con un solo carro armato da posizionare sulla mappa. In poche parole, si è in presenza di una sezione critica dovuta all'accesso contemporaneo di due processi ad una stessa risorsa. Un'altra corsa critica si può verificare ad esempio, durante il gioco, se un giocatore tenta di uscire (leavegame) mentre il giocatore che lo precede passa il turno (endturn). In questo caso potrebbe capitare che il turno venga assegnato ad un giocatore che non è più presente, con un conseguente blocco totale dello stato del gioco. La realizzazione della mutua esclusione in Java è molto semplice, infatti è stato sufficiente implementare tutti i metodi sopracitati come synchronized. In questo modo è il runtime di Java che garantisce che ci sia al più un solo thread alla 43

45 volta che sta agendo sullo stato della partita. Interfaccia utente L'interfaccia grafica del client (classe RisikoUI) (realizzata per mezzo del framework Swing di Java) presenta una finestra suddivisa in diverse parti contenenti differenti tipi di informazioni. In particolare è presente ovviamente un pannello contenente la mappa del mondo virtuale di Risiko con la relativa disposizione delle armate ed un pannello che visualizza le carte in possesso del giocatore e permette eventualmente lo scambio. Oltre a questi è presente un primo pannello che visualizza i messaggi provenienti dal server che aiutano il giocatore a seguire l'andamento del gioco, un secondo pannello che mostra la lista dei giocatori che partecipano alla partita con relative statistiche, un terzo pannello contenente i dadi ed i punteggi dell'ultimo lancio ed infine un pannello di controllo con il quale il giocatore può scegliere l'azione da compiere (attacco, movimento armate, fine turno, ecc.). 44

46 3 App per sistemi mobili Intro Il termine app, abbreviazione di " software applicativo " indica i programmi per dispositivi mobili, progettati per funzionare su smartphone e tablet. Le app sono nate come programmi di uso generale per applicazioni tradizionali come la posta elettronica, la rubrica dei contatti e il meteo. In poco tempo la comodità di disporre sul telefono di strumenti di questo genere ha portato a una richiesta sempre maggiore da parte degli utenti. Nel frattempo gli strumenti di sviluppo erano pronti per rispondere a queste richieste del pubblico e sono presto comparsi i giochi, il GPS, le app bancarie e finanziari e quelle perla prenotazione di eventi e l acquisto di biglietti. L'esplosione non si è più fermata e oggi abbiamo app di qualsiasi genere, compresi i social network, la gestione della musica e dei filmati, giornali e libri, app sanitarie... Le app sono programmi leggeri che si incentrano su una singola attività e, a differenza delle applicazioni web che operano all interno del browser, girano direttamente sul sistema operativo del dispositivo e sono sono tipicamente interattive. Sfruttano, le risorse interne dei tablet: schermo touch, microfoni, GPS, accelerometri, giroscopi e talvolta dispositivi e sensori esterni. Le app sono di solito scaricabili appoggiandosi a piattaforme di distribuzione delle applicazioni: Apple App Store, Google Play, Windows Phone Store, e BlackBerry App World. Alcune applicazioni sono gratuite, altre sono a pagamento. mentre altri devono essere acquistati. Di solito, vengono scaricati dalla piattaforma di un dispositivo di destinazione, ad esempio un iphone, BlackBerry, telefono Android o Windows Phone, ma a volte possono essere scaricati per computer portatili o computer desktop. Per le applicazioni a pagamento una percentuale sul prezzo ( % ) va al provider di distribuzione (come itunes ), mentre il resto va al produttore dell'applicazione. Tipi di App Nelle prime fasi del mercato degli smartphone, la maggior parte delle applicazioni sono state adattate per l'iphone. Con il passare del tempo, però, la quota di mercato per Android è cresciuta molto, così come il sistema operativo e la necessità di una funzionalità cross-platform è diventato un problema. Le app si possono classificare in tre tipi. ( ) App nativa: sviluppata esclusivamente per una particolare piattaforma o dispositivo di elaborazione Web App: messe a disposizione su Internet attraverso un browser. Le applicazioni Web sono generalizzate per più piattaforme e non vengono installate in locale App ibrida (hybrid app) combina elementi di entrambe le applicazioni native e web. Non è leagat al dispositivo. Di fatto incorpora un browser per l accesso ai contenuti online In questo contesto, relativo ai sistemi mobili, ci occuperemo di App Native e ibride. Le applicazioni web sono state trattate ampiamente nei precdenti capitoli. App nativa Una (mobile) app nativa è una applicazione che è scritta su misura per una specifica piattaforma e non funziona su altri smartphone. Per funzionare si serve direttamente delle funzioni del sistema operativo che gira sul dispositivo mobile su cui viene istallata e, spesso, si serve dei linguaggi e delle API offerte del produttore per avere accesso ai vari dispositivi tra cui la fotocamera o la rubrica. Inoltre alcune applicazioni possono essere usate in locale, senza una connessione Internet. Tali app sono codificate in un linguaggio di programmazione specifico, come Objective C per ios e Java per i sistemi operativi Android, o C# per Microsoft. Le applicazioni mobili native offrono velocità e alte prestazioni con un buon grado di affidabilità. Esse hanno accesso ai vari dispositivi del telefono, come la sua macchina fotografica e la rubrica. La maggior parte dei videogiochi o di app che hanno bisogno di buone prestazioni, sono applicazioni mobili native. Tuttavia, questo tipo di app hanno il limite di essere legate ad un solo tipo di sistema operativo, obbligando la società che le crea a rilasciare versioni duplicate che funzionano su piattaforme diverse. App ibrida Si tratta di un applicazione scritto in linguaggio multipiattaforma (cross-platform ) com è HTML5. Il vantaggio che si ottiene è quello di un applicazione che gira su dispositivi di produttori diversi essendo indipendente dal linguaggio specifico e dal sistema operativo. Questa soluzione ha delle importanti conseguenze. Questo tipo di applicazioni, infatti, hanno la compatibilità con i diversi sistemi operativi (cross platform), e possono comunque ancora accedere all hardware di un telefono usando particolari librerie. Il limite sta nelle presatzioni ridotte e non sempre aggiornate ai nuovi rilasci di sistemi operativi e driver di periferiche. Per lo sviluppo si ricorre spesso a piattaforme come Sencha, PhoneGap e MoSync. 45

47 Principali sistemi operativi per dispositivi mobili: Android (Google) ios (Apple) Windows Phone (Microsoft) BlackBerry OS (RIM/BlackBerry) Symbian OS (Nokia) Bada OS (Samsung) Panoramica sui principali O.S. per dispositivi mobili Note preliminari sui Sistemi Operativi L'accesso diretto all'hardware può essere anche molto complesso. Il Sistema Operativo e, in particolare il Kernel, nascondono le complessità dell hardware e rendono la macchina gradevole all utente. Pur nelle loro differenze c'è un elemento strutturale che accomuna ogni sistema operativo sia mobile sia desktop oggi in uso: il kernel ( nocciolo o fulcro in inglese). Naturalmente, ognuno dei sistemi operativi (Windows, Android, ios, Mac OS, ) ha un proprio kernel, realizzato in base alle necessità del sistema operativo stesso. Per funzionare, però, tutti hanno bisogno di questo componente. Utilizzando varie modalità di gestione tra le quali la comunicazione tra processi e le chiamate di sistema il kernel fa da ponte tra le componenti hardware di un computer come processore, RAM e hard disk e i programmi in esecuzione sul computer stesso. Data la sua rilevanza, è il primo programma ad essere caricato in memoria quando si accende un computer e l'ultimo ad essere chiuso in fase di spegnimento. (cfr. Wikipedia e altre fonti in rete) Il kernel I kernel implementano uno o più tipi di astrazione dall'hardware, il cosiddetto: Hardware abstraction layer. Queste astrazioni servono a "nascondere" la complessità e a fornire un'interfaccia pulita ed uniforme all'hardware sottostante, in modo da semplificare il lavoro degli sviluppatori. I kernel si possono classificare - in base al grado di astrazione dell'hardware - in almeno tre categorie (vedi figura sottostante): Kernel monolitici, che implementano direttamente una completa astrazione dell'hardware sottostante. Microkernel, che forniscono un insieme ristretto e semplice di astrazione dell'hardware e usano software (chiamati device driver o server) per fornire maggiori funzionalità. Kernel ibridi (o microkernel modificati), che si differenziano dai microkernel puri per l'implementazione di alcune funzioni aggiuntive al fine di incrementare le prestazioni. 46

48 I kernel ibridi, in particolare, sono essenzialmente dei microkernel che hanno del codice "non essenziale" al livello di spazio del kernel in modo che questo codice possa girare più rapidamente che se fosse implementato ad alto livello. Questo fu un compromesso adottato da molti sviluppatori di sistemi operativi. "Ibrido" implica che il kernel in questione condivida concetti architetturali e meccanismi tipici sia dei kernel monolitici che dei microkernel. Infatti la definizione di microkernel prevede che solo i servizi essenziali debbano risiedere nel kernel, e tutti gli altri servizi del sistema operativo, inclusi la gestione della memoria e l'input/output, dovrebbero operare in user mode in spazi di memoria separati. Tuttavia per ragioni di prestazioni quasi nessun sistema operativo dispone di un microkernel puro (l'unica eccezione è Mach). In Windows NT/Vista/Seven molti servizi sono implementati in kernel mode, fra i quali il file system, la gestione della memoria e anche la gestione della grafica. A livello di prestazioni e di sicurezza questo equivale ai kernel monolitici (ad esempio UNIX e Linux), ma permette una flessibilità maggiore. Il kernel di Windows dispone di uno scheduler preemptive. Nei sistemi tradizionali la struttura a buccia di cipolla (gerarchica) presiede le funzionalità del sistema operativo: dal kernel alla shell i livelli si parlano tramite primitive e i processi applicativi intervengono sullo strato piu elevato che fornisce i servizi di sistema. Nei sistemi basati sull approccio Client-Server è il sistema operativo stesso che viene suddiviso in piu processi, ciascuno dei quali realizza un unico insieme di servizi. Ad ex. server per la memoria, per la creazione dei processi, per la tempificazione dei processi etc. Ogni server gira in modo utente controllando se, per caso, un processo abbia richiesto i suoi servizi. Il Client, che può essere un altro componente del sistema, oppure un programma applicativo, chiede un servizio mandando un messaggio al server. Il Kernel, che gira in modo kernel, consegna il messaggio al server: il server esegue l operazione richiesta e risponde al client con un altro messaggio 47

49 Consideriamo in particolare l interfaccia tra il microkernel e l hardware, l HAL che costituisce la tecnologia ed i drivers che permettono a Windows di comunicare con l'hardware. Hardware Abstraction Layer (HAL) o strato di astrazione dall'hardware, è un insieme di funzioni di I/O il più possibile generiche e semplici, il cui compito è di tenere conto di tutte le differenze fra dispositivi fisici diversi al posto del programma che lo userà, nascondendogli la vera identità e natura di essi: per esempio il programma, invece di aprire personalmente un file chiederà all'hal di farlo per lui e l'hal, appena esaudita la richiesta, gli passerà un riferimento al file per la lettura (o lo leggerà per lui). Dotando un programma di un HAL se ne migliora la portabilità su altri tipi di computer/sistemi operativi e la funzionalità con dispositivi diversi, perché eventuali modifiche e adattamenti vanno fatti solamente nell' HAL senza toccare il codice del programma stesso; inoltre è relativamente facile aggiungere, all'occorrenza, una sezione all'hal per gestire un dispositivo che non era stato inizialmente previsto. Quindi i programmi non accedono mai alla memoria della scheda grafica quando devono modificare l'immagine mostrata sullo schermo. I programmi comunicano al sistema operativo le operazioni da compiere e il sistema operativo provvede a effettuare le modifiche necessarie. Questo consente di modificare l'hardware deposto alla visualizzazione senza dover modificare tutti i programmi. Basta modificare lo strato che accede all'hardware, questo comunemente viene chiamato driver. La HAL può essere utilizzata per emulare componenti non presenti nel sistema operativo o nell'hardware. Per esempio le moderne schede grafiche non gestiscono nativamente le modalità CGA, EGA o VGA. Queste modalità vengono emulate dall'hal che provvede a tradurre le istruzioni che gestiscono queste modalità in comandi comprensibili dalla scheda grafica. L'emulazione utilizzando una HAL viene utilizzata in molti sistemi per consentire la retro compatibilità con applicazioni arcaiche. Molte banche utilizzano computer moderni con programmi arcaici tramite programmi di emulazione che interpongono una HAL tra l'hardware moderno e il software arcaico. (note tratte ) Android Android è un sistema operativo mobile ( OS) inizialmente sviluppato da Silicon Valley con il nome di Android Inc. che nel 2005 viene acquisita da Google. Android possiede un set completo di software, che include il sistema operativo principale e software aggiuntivo. Modellato sul kernel di Linux, Android è stato rilasciato anche come codice open source (distribuito sotto licenza Apache 2.0). Lo sviluppo per Android può essere effettuata tramite Windows, Linux o Mac e usa prevalentemente il linguaggio Java. Google ha sviluppato Dalvik, una macchina virtuale appositamente studiata per Android. Dalvik esegue codice Java ricompilato e lo legge come Dalvik bytecode ed è stato progettato per ottimizzare la potenza della batteria e mantenere la funzionalità in un ambiente con memoria limitata e la potenza della CPU, come quella dei telefoni cellulari, netbook e tablet PC. 48

50 Per il supporto multimediale, Android in grado di eseguire la grafica 2D e 3D, audio e video in vari formati. Supportare input multi-touch e dispone del browser Google Chrome. Possiede interfaccce per televisori, auto, orologi (Android Wear), occhiali (Google Glass). Uno dei punti di forza di Android è la grande comunità di sviluppatori che progetta le applicazioni e migliora la capacità dei dispositivi. Queste applicazioni sono poi messe a disposizione tramite Android Market di Google. Android in sintesi La piattaforma è basata sul kernel Linux usa il database SQLite supporta lo standard OpenGL ES 2.0 per la grafica tridimensionale. Le applicazioni vengono eseguite tramite la Dalvik virtual machine (DVM), una Java virtual machine adattata per l'uso su dispositivi mobili: Applicazione Android : compilazione -> bytecode -> DVM -> esecuzione reale dell'applicazione Android Android è fornito di una serie di applicazioni preinstallate: un browser, basato su WebKit, una rubrica e un calendario. architettura di android - Architecture.svg.png, ios Come Mac OS X, è una derivazione di UNIX (famiglia BSD) e usa un microkernel XNU Mach basato su Darwin OS. ios ha quattro livelli di astrazione: il Core OS layer, il Core Services layer, il Media layer e il Cocoa Touch layer. Il sistema operativo occupa meno di mezzo Gigabyte della memoria interna del dispositivo. Il sistema operativo non aveva un nome ufficiale fino al rilascio della prima beta dell'iphone SDK il 6 marzo 2008; prima di allora, il marketing Apple affermava che "iphone usa OS X". Molti fanno utilizzo del termine idevice per riferirsi ai dispositivi che usano ios. Ogni App del mondo Apple ha bisogno del sistema operativo ios per andare in esecuzione. Come molti kernel moderni Darwin segue un approccio ibrido, contenendo caratteristiche sia di un microkernel che di un kernel monolitico. Difatti segue un approccio da microkernel per quanto riguarda la gestione dei servizi ma integra nello stesso microkernel ampie porzioni del sistema operativo per ridurre i tempi morti dovuti al passaggio di contesto. Questo approccio misto consente di rendere il sistema operativo più reattivo e veloce ma nel contempo lo rende più sensibile ad errori di programmazione del kernel. La maggior parte del codice viene eseguito al di fuori del kernel in modo da rendere lo sviluppo rapido e veloce. I singoli componenti sono scritti e testati in modo indipendente, difatti risulta più semplice testare una piccola porzione di codice piuttosto che analizzare il funzionamento di un modulo immerso in centinaia di migliaia di righe di codice appartenenti ad altri moduli. Inoltre questo approccio rende il sistema operativo meno sensibile a fallimenti dei singoli driver

51 Sistema Operativo ios è un sistema operativo Unix based pensato per girare su dispositivi mobili dotati di schermo multitouch ( iphone, ipod Touch e ipad). Da un punto di vista tecnico si basa su un kernel che è parente stretto del kernel Mach presente in OS X. Su di esso poggiano una serie di servizi ed api organizzati per livelli di astrazione. ( Al livello più basso (Core OS ) troviamo lo stack di derivazione BSD, quindi funzioni per IO, threading, gestione processi, sqlite etc. Dal livello Core Services in poi troviamo tecnologie sviluppate da Apple, in particolare Core Foundation che, come indica il nome, è la base su cui sono sviluppate molte delle api di livello più alto. Media contiene principalmente api c (Core Audio, Quartz, OpenGL ES etc etc) con la notevole eccezione di Core Animation, un motore avanzato per la gestione di animazioni sviluppato in objective-c. Al livello più alto troviamo infine Cocoa Touch, api completamente objective-c composta a sua volta da Foundation e UIKit. Foundation contiene le classi legate alla gestione/manipolazione/storage dei dati, ed in genere tutto quello che non riguarda l interazione con l utente o la visualizzazione. Questi due aspetti sono di competenza di UIKit. Qui troviamo infatti le classi legate alla gestione del multitouch ed alla renderizzazione su schermo, oltre ad una serie di widget grafici. ios è o una versione ottimizzata di OS X. BlackBerry Tablet OS E usato sul BlackBerry Playbook ed è basato su QNX. BlackBerry Tablet OS in sintesi Based on the proven QNX Neutrino RTOS, which powers mission-critical systems on the space station, government defense systems, life-saving medical devices and millions of in-car systems True microkernel OS The QNX Neutrino RTOS (realtime operating system) is so reliable because it is a true microkernel operating system. Reliable, high-performance kernel engineered for multi-core hardware Multi-threaded POSIX OS (Portable Operating System for Unix) for true multitasking Built from the ground up to run WebKit and Adobe Flash Built with the security, efficiency and seamless connectivity from the ground up you d expect from RIM. The QNX Neutrino RTOS is a full-featured and robust OS that scales down to meet the constrained resource requirements of realtime embedded systems. Its true microkernel design and its modular architecture enable customers to create highly optimized and reliable systems with low total cost of ownership. It offers the embedded industry s only field-proven, clean strategy for migrating from single-core to multi-core processing. Under QNX Neutrino, every driver, protocol stack, filesystem and application runs in the safety of memory-protected user space, outside the kernel. Virtually any component can fail and be automatically restarted without affecting other components or the kernel. No other commercial RTOS offers this degree of protection. 50

52 QNX Neutrino RTOS architecture Windows Phone (Molte informazioni di questo paragrafo sono tratte da: ) Windows Phone (8.1) è basata sul kernel di Windows NT. Utilizza il Core System di Windows, che è un sistema minimo di Windows che permette l avvio e l autenticazione, gestisce l'hardware e le risorse di rete e contiene le funzioni di sicurezza di basso livello. Per gestire le attività specifiche del telefono, il Core System è integrata da una serie di file binari specifici di Windows Phone che formano Mobile Core. Il diagramma seguente offre una panoramica di alto livello del sistema operativo, organizzato in strati. L avvio e la gestione delle librerie di basso livello per i driver sono contenute in una libreria di supporto (board support package - BSP ). Il nucleo del BSP è scritta dal produttore della CPU. Altri driver proprietari sono aggiunti per supportare l' hardware specifico delle componenti hardware sdel telefono. Unified Extensible Firmware Interface (UEFI), è il software di interfaccia tra il sistema operative e la piattaforma hardware. UEFI è il corrispettivo del Basic Input/Output System (BIOS), presente in origine nei PC. UEFI supporta la diagnostica remota, anche senza un altro sistema operativo. (Supporta molti tipi di processori (little-endianprocessors), tra cui, Itanium, x86, x86-64, ARM, ARM64.) Il kernel del sistema operativo provine da Windows opportunamente adattato ai sistemi mobili. Sopra il kernel sono i servizi di sistema e le strutture di programmazione che le applicazioni utilizzano. Nota: Per OEM(original equipment manufacturer ) in questo caso si intendono le aziende fornitrici responsabili dell aggiunta dei driver necessari per supportare l' hardware del telefono. 51

53 Interfaccia utente Windows Phone utilizza l interfaccia utente (Modern UI ) Microsoft. La schermata principale, Start, è da piastrelle (Live Tiles), che sono collegamenti ad applicazioni, funzioni o elementi individuali (contatti, pagine internet, applicazioni o altro) che l'utente può aggiungere, ridimensionare, spostare o eliminare. I Windows Phone sono organizzati in hub, locali ed online che mostrano gli elementi relativi alla categoria. Ad esempio, l'hub Foto contiene sia gli album creati scattando foto o facendo screenshot, sia quelli dell'account di social network con cui è sincronizzato. Windows Phone utilizza un sistema di gestione delle app in background diverso dagli altri sistemi operativi: le app presenti in background infatti non rimangono aperte e attive, vengono bensì "ibernate" nella memoria cache e quindi rimosse dalla RAM; tuttavia non vengono totalmente chiuse ma messe in pausa in modo da ritornare attive appena le si seleziona dalla schermatamultitasking. I vantaggi che si ottengono attraverso questo sistema sono: più autonomia della batteria, che si traduce in minor consumo di risorse hardware, RAM sempre libera e disponibile, assenza quasi totale di lag e vari rallentamenti. In questo modo l'utente può utilizzare tranquillamente il dispositivo senza chiudere le app in background. Tuttavia alcune app necessitano di un riavvio perché non sviluppate bene per questo tipo di sistema Windows Phone in sintesi Windows Phone utilizza la tecnologia multi-touch; l'inserimento del testo avviene per mezzo di una tastiera virtuale su schermo, esiste la dettatura vocale. Bing è il motore di ricerca predefinito sui telefoni dotati di Windows. Esiste l assistente vocale intelligente, chiamato Cortana e funziona unicamente con collegamento a internet e GPS; quando essi sono disattivati la pressione prolungata del tasto Cerca attiva TellMe. Per la navigazione in Internet, Windows Phone utilizza Internet Explorer Mobile basato su Explorer. Windows Phone supporta la sincronizzazione con Outlook, Hotmail, Yahoo! Mail, Gmail e LinkedIn nei protocolli POP e IMAP; Office Mobile permette l'interoperabilità con la versione desktop di Microsoft Office; Il sistema Xbox Live su Windows Phone porta una tipologia di esperienza tipo console, attraverso l'hub Giochi. Il Windows Phone Store viene usato per distribuire e vendere musica, video, ed applicazioni per Windows Phone Il problema principale per gli utenti di Windows Phone è stato la presenza di un minore numero di applicazioni presenti nel suo Store rispetto ai principali concorrenti, dovuta al tardo arrivo del sistema sul mercato in confronto a questi ultimi; divario che si è assottigliato nel corso del 2013 e del 2014 con l'arrivo di quasi tutte le principali applicazioni del mondo mobile. 52

54 4 Sviluppare le APP (a cura di Serena Arena e Jessica Olgiati) Lo sviluppo di applicazioni mobili richiede spesso l'utilizzo di ambienti di sviluppo integrati e di emulatori per testare le applicazioni sui telefoni cellulari su cui gli sviluppatori non possono avere accesso fisico. Per sviluppare applicazioni per i dispositivi mobili è necessario considerare i vincoli e le caratteristiche di questi dispositivi. I dispositivi mobili devono funzionare a batteria e hanno processori meno potenti di personal computer e hanno anche altre caratteristiche come il rilevamento della posizione e le telecamere. Inoltre i dispositivi mobili posseggono svariati tipi di sensori come quelli per il rilevamento della posizione, videocamere, accelerometri, giroscopi etc. che necessitano di una gestione specifica. Gli sviluppatori devono anche prendere in considerazione una vasta gamma di dimensioni dello schermo, delle specifiche hardware e relative configurazioni a causa della forte concorrenza nel software mobile e cambiamenti all'interno di ciascuna delle piattaforme. Lo sviluppo di applicazioni mobile puo' avvenire sia attraverso l'utilizzo di ambienti di sviluppo integrati specializzati, sia attraverso semplici file testuali per la èprogrammazione del codice. Le applicazioni mobili sono spesso provate all'interno di ambienti di sviluppo che utilizzano emulatori che, sebbene pesanti, forniscono un modo economico per testare le applicazioni sui telefoni cellulari di cui gli sviluppatori non possono avere accesso fisico. In particolare lo sviluppo di applicazioni per sistemi mobili prevede di disporre di ambienti di sviluppo proprietari (come Xcode per sistemi Apple che usano, tra gli altri, il linguaggio Objective-C per lo sviluppo delle applicazioni) o indipendenti (come PhoneGap). Phongap è una piattaforma open source e, ha la possibilità di creare applicazioni che si collegano a sistemi operativi diversi: ios di Apple, Android di Google, Windows, Symbian, BlackBerry ecc. PhoneGap permette di creare applicazioni che sfruttano tecnologie Web, basate su HTML, CSS e JavaScript. Xcode Apple PhoneGap In figura 4444 è mostrato l ambiente di sviluppo che si serve di PhoneGap per mostrare nel simulatore di ipad la scritta hello world. 53

55 Fig. 444 L ambiente PhoneGap con il simulatore per ipad Phonegap: come partire Scegliere l'ambiente di sviluppo o CLI (Command Line Interface) o Eclipse o Android Studio [con SDK: Scegliere la piattaforma per la quale sviluppare, tra le principali menzioniamo: o Android o IOS o Windows Phone Installazione dell'ambiente di sviluppo Installare l'sdk della piattaforma per cui sviluppare Installazione di Cordova/Phonegap Esempio: sviluppo per Android tramite CLI 1. Installazione dell'sdk Android: vedi istruzioni a 2. Installazione di Apache Cordova CLI [ I passi da compiere sono: 1. Node.js [ 2. git client [ 3. Cordova: da linea di comando [Linux: $ sudo npm install -g cordova]; [Windows: C:\>npm install -g cordova] Tools di sviluppo HTML5: per il layout e la navigazione Javascript, jquery: per il comportamento degli oggetti HTML CSS, jquerymobile (per interfacce web usabili su dispositivi mobile): per la grafica. In particolare jquerymobile aiuta nel creare oggetti dagli stili molto simili a quelli delle apppliazioni native. 54

56 Creare un progetto - Aprire la cmd in Windows, o un terminale in Linux - cd alla directory radice per l'app - $ cordova create hello com.example.hello HelloWorld - $ cd hello (directory creata al punto sopra) - aggiuta piattaforme: $ cordova platform add android - build app: $ cordova build android - run app: $ cordova run android (se il dispostitivo e' collegato, l'app parte su di esso, altrimenti partira' l'emulatore) La struttura dei file generati da Cordova cambia leggermente in base al sistema operativo utilizzato. In Linux possiede la struttura seguente: Mentre in Windows: I due file importanti da editare per la creazione dell'app sono: www/index.html e www/js/index.js. Vediamoli piu' in dettaglio di seguito tramite estratti da un'applicazione test. index.html Usato per l'impostazione del layout tramite HTML e CSS (puo' spesso risultare utile l'utilizzo del framework jquerymobile che mette a disposizione molte funzioni orientare al touch, proprio dei dispositivi mobili). Layout (index.html) <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Tag <head> 55

57 File importanti per il CSS: 1. css/index.css 2. jquery.mobile min.css Librerie: 1. jquery min.js 2. jquery.mobile min.js Tag <body> Comprende tutte le pagine (chiamate anche view) dell'app, gestite tramite appositi <div>; ciascuna ha un id univoco tramite il quale e' possibile spostarsi tra esse. La struttura base di una pagina e': 1. header 2. content 3. footer Prima di chiudere il body si trovano tre tag script essenziali per Cordova: Il file codova.js e' il link tra l'html dell'app e il framework di cordova che comunica con la piattaforma nativa (per esempio Android). Deve sempre precedere ogni file JavaScript, per essere sicuri dii aver prima caricato il framework. Il file index.js contiene il codice che da' vita agli oggetti HTML. Nell'esempio seguente abbiamo una home page con: 1. header che contiene un button exit per uscire dall'app 2. content che contiene quattro button che portano ciascuno ad una propria pagina ed un link ad una pagina di informazioni 3. footer Il body continua con altre pagine prima di essere chiuso. Da notare il CSS usato da jquerymobile: 1. data-role= page (o header, content, button, footer ) 2. data-transition= slide (tipo di transizione da una view all'altra) 3. data-icon= plus (simbolo dell'icona jquery, vedi documentazione per simboli disponibili) 4. data-iconpos= left (posizione dell'icona all'interno del button) 5. data-theme= a (possibili scelte tra 'a' e 'b', vedi documentazione per layout e colori utilizzati dalle due versioni, a e' default) 6. data-position= fixed (l'elemento resta fisso rispetto ai bordi dello schermo) 7. Una forma piu' compatta per descrivere il CSS e' tramite class con gli attributi desiderati: class= ui-btn ui-btn-b ui-corner-all. Per esempio: <div data-role="content"> e' equivalente a <div class="ui-content" role= main > 56

58 Il button 'Nuova scheda' porta alla pagina con id= scheda, qui una versione ridotta: Abbiamo il nuovo data-role= fielcontainer. Nelle altre view possiamo trovare altri data-role, come data-role="listview" (crea una view della lista), data-role="list-divider" (titolo per divisione liste). 57

59 index.js Il comportamento dei vari oggetti creati nel layout e' programmato in questo file. var app = // Application Constructor initialize: function() this.bindevents();, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindevents: function() document.addeventlistener('deviceready', this.ondeviceready, false);, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedevent' // function, we must explicitly call 'app.receivedevent(...);' ondeviceready: function() app.receivedevent('deviceready'); $("div").load(function() navigator.notification.alert("benvenuto"); ); $("#vedi").click( function() $("#nascosto").css("visibility",'visible'); );. ); $(document).ready(function() appomat.app.initialize(); ); L'app e' avviata da app.initialize();: che attende l'evento deviceready: 58

60 ed esegue la funzione ondeviceready:... che contiene tutte le azioni da far eseguire ai vari oggetti dell'app. Seguono le funzioni scritte specificatamente per l'app e quelle di callback (onsuccess, onerror, ). In base alle funzioni specifiche del device che vogliamo utilizzare dobbiamo installare i relativi plugin di cordova come spiegato nella sezione Installazione Plugin. Per ogni plugin consulatre la relativa documentazione per conoscere le funzioni messe a disposizione [ I Plugin I plugin sono da installare quando si e' interessati ad utilizzare specifiche funzioni del device, come la vibrazione, gestione della batteria, gps, ecc. La struttura del comando da righa di comando per l'installazione del plugin di nome PluginName e': $ cordova plugin add PluginName Tra I principali plugin troviamo quelli elencati di seguito, con il relativo comando di installazione da righa di comando: 1. Informazioni di base del dispositivo: $ cordova plugin add org.apache.cordova.network-information 2. Dialog box: $ cordova plugin add org.apache.cordova.dialogs 3. Network connection: $ cordova plugin add org.apache.cordova.network-information 4. Battery status: $ cordova plugin add org.apache.cordova.network-information 5. Geolocation: $ cordova plugin add org.apache.cordova.geolocation 6. Accelerometer: $ cordova plugin add org.apache.cordova.device-motion 59

61 7. Camera: $ cordova plugin add org.apache.cordova.camera 8. Globalization: $ cordova plugin add org.apache.cordova.globalization 9. File: $ cordova plugin add org.apache.cordova.file 10. Vibration: $ cordova plugin add org.apache.cordova.vibration 11. Contacts: $ cordova plugin add org.apache.cordova.contacts Esempio di progetto semplice (senza periferiche) o Bottone/testo in uscita La struttura dei file generati da Cordova sotto Windows possiede la struttura seguente: I file di interesse si trovano sotto la cartella www e sono Index html Index.css Index.js ESEMPIO DI APPLICAZIONE: Vedi/Nascondi INDEX.HTML INDEX.CSS... <body> <div class="app"> <button id='vedi'>vedi</button> <button id='nascondi'>nascondi</button> <p id='nascosto'>testo</p> </div> <script type="text/javascript"> app.initialize(); </script> </body> #nascosto... visibility: hidden; 60

62 INDEX.JS... $("#vedi").click( function() $("#nascosto").css("visibility",'visible'); ); $("#nascondi").click( function() $("#nascosto").css("visibility",'hidden'); );... L interfaccia dell app (generata attraverso il codice di index.html) contiene due bottoni e un testo. Inizialmente il testo non è visibile (proprietà settata attraverso il codice di index.css) La pressione del bottone vedi rende il testo visibile e l effetto opposto si ottiene premendo il bottone nascondi. Attraverso il codice di index.js riportato qui sopra, si definisco le azioni che l app deve compiere quando vengono rilevati alcuni eventi. In particolare, quando si verifica l evento on click sul bottone identificato dall id vedi, l azione che verrà compiuta è quella di modificare il valore della proprietà css visibility del tag identificato dall id nascosto, nel nostro caso il divi contenente il testo Riassumendo 61

63 <head> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <button id= b > Cliccami </button> <div id= d > test </div> </body> HTML document.addeventlistener('deviceready', ondeviceready, false); function ondeviceready () document.getelementbyid( b ).addeventlistener( click, cliccato, false); function cliccato() var div= document.getelementbyid( d ); div.innerhtml= hai cliccato ; div.style.backgroundcolor = "green" JS #d background-color:red CSS Esempio di progetto con periferiche - Vibra $("#vibra").click( function() navigator.notification.vibrate(2000); ); Alert - (geo) - (bussola) - (meteo) - (Accelerometro) - Video/voce

64 5 Web Service Un Web Service (servizio web), secondo la definizione data dal World Wide Web Consortium (W3C), è un sistema software progettato per supportare l'interoperabilità tra diversi elaboratori su di una medesima rete ovvero in un contesto distribuito. Il consorzio OASIS (Organization for the Advancement of Structured Information Standards) ed il W3C sono i principali responsabili dell'architettura e della standardizzazione dei Web Service. La ragione principale per la creazione e l'utilizzo di Web Service è il "disaccoppiamento" che l'interfaccia standard esposta dal Web Service. Le applicazioni possono essere attuate in maniera "trasparente" all'interfaccia tra i due sistemi. I Web service hanno inoltre guadagnato consensi visto che, come protocollo di trasporto, possono utilizzare HTTP "over" TCP sulla porta 80; tale porta è, normalmente, una delle poche (se non l'unica) lasciata "aperta" dai sistemi firewall. vantaggi interoperabilità tra diverse applicazioni software su diverse piattaforme hardware standard e protocolli "open" in formato testuale HTTP per il trasporto dei messaggi facilmente utilizzati, in combinazione l'uno con l'altro per formare servizi "integrati" e complessi riutilizzo di infrastrutture ed applicazioni già sviluppate e sono (relativamente) indipendenti da eventuali modifiche delle stesse Svantaggi non esistono standard consolidati per applicazioni critiche quali, ad esempio, le transazioni distribuite le performance legate all'utilizzo dei Web Service possono essere minori di quelle riscontrabili utilizzando approcci alternativi di distributed computing quali Java RMI, CORBA, o DCOM L'uso dell'http permette ai Web Service di evitare le misure di sicurezza dei firewall (le cui regole sono stabilite spesso proprio per evitare le comunicazioni fra programmi "esterni" ed "interni" al firewall). Scambio dati XML Messaging: tutti i dati scambiati sono formattati mediante "tag" XML in modo che gli stessi possano essere utilizzati ad entrambi i capi delle connessioni; il messaggio può essere codificato conformemente allo standard SOAP ( *) è un protocollo leggero per lo scambio di messaggi tra componentisoftware) Descrizione del servizio: l'interfaccia pubblica di un Web Service viene descritta tramite WSDL (Web Services Description Language) un linguaggio basato su XML usato per la creazione di "documenti" descrittivi delle modalità di interfacciamento ed utilizzo del Web Service. (*) SOAP (Simple Object Access Protocol) SOAP può operare su differenti protocolli di rete, ma HTTP è il più comunemente utilizzato, su cui è incapsulato il relativo messaggio. SOAP si basa sul metalinguaggio XML Come esempio, mostriamo come un Client può formattare un messaggio SOAP per richiedere informazioni su un prodotto da un immaginario Web Service che simula un magazzino. <soap:envelope xmlns:soap=" <soap:body> <getproductdetails xmlns=" <productid>827635</productid> </getproductdetails> </soap:body> </soap:envelope> Quello che segue è il testo con il quale il 'warehouse' web service potrebbe inviare il suo messaggio di risposta con le informazioni richieste. <soap:envelope xmlns:soap=" <soap:body> <getproductdetailsresponse xmlns=" <getproductdetailsresult> <productname>toptimate, set da 3 pezzi</productname> <productid>827635</productid> <description>set di valigie; 3 pezzi; poliestere; nero.</description> <price>96.50</price> <instock>true</instock> </getproductdetailsresult> </getproductdetailsresponse> </soap:body> 63

65 </soap:envelope> NOTA A Web API is a development in Web services where emphasis has been moving to simpler representational state transfer (REST) based communications. RESTful APIs do not require XML-based Web service protocols (SOAP and WSDL) to support their interfaces. In mobile devices, HTML5 is often used for mobile websites and mobile applications on mobile operating systems such as Firefox OS, Sailfish OS, Tizen, and Ubuntu Touch. It provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more. After observing the trend of mobile game app in the market, various people have started looking for the finest approach in game application development that can reach maximum users, is cost-effective and gives the best user-experience. 64

66 Appendice I linguaggi e le applicazioni Web Quali sono i linguaggi che Web usa per le sue pagine? C è differenza nei linguaggi usati sul browser e su un server? Cosa si intende per pagine statiche e dinamiche? Cosa sono le pagine attive? Una pagina Web è solo un documento o possiamo vederla come un insieme di oggetti manipolabili? Qual è la differenza tra un linguaggio lato client come JavaScript e uno lato server come PHP? Il capitolo ha il solo scopo di mostrare come le tecniche di programmazione applicate prima alla parte client, sul browser, e poi alla parte server, rendano un semplice testo di presentazione, una pagina attiva a tutti gli effetti, permettendo l interattività dell utente e lo scambio di informazioni in tempo reale. Per la loro potenzialità e uso quasi universale si è fatto riferimento, soprattutto, a linguaggi di script quali JavaScript, per la parte client e PHP per il lato server. Il capitolo non ha invece alcuna pretesa di essere un manuale di programmazione. Per questo si consiglia di riferirsi all enorme letteratura che si trova in Internet e nelle pubblicazioni specialistiche. Un riferimento, su tutti, potrebbe essere il sito w3schools.com che permette facilmente di provare direttamente online esercizi e test. Le applicazioni Web si basano su una molteplicità di componenti hardware e software, che vanno dai server ai dispositivi di rete, dai protocolli ai linguaggi di programmazione, dalle interfacce utenti agli standard di comunicazione. Gli ngredienti per queste applicazioni sono, da una parte il protocollo HTTP per il trasferimento delle informazioni in rete e, dall altra, il linguaggio HTML per la scrittura degli ipertesti. HTML e HTTP, hanno svolto egregiamente il loro compito per molto tempo permettendo la generazione e trasmissione di pagine statiche, cioè dei file scritti in codice HTML che descrivono testi e ipertesti, grafica e immagini. Da soli però, risultano insufficienti per la gestione di applicazioni anche leggermente più complesse dove è richiesta l interattività dell utente. L interattività e la possibilità di separare i contenuti dalla loro presentazione diventano gli assi portanti delle richieste a cui occorre far fronte. Sul lato client (Client-Side) sono comunemente usate tecnologie per la creazione di pagine attive: fogli di stile (CSS), usati per dare maggior potere espressivo alle pagine, XML il linguaggio usato per la descrizione strutturata di documenti, programmi (Script) come JavaScript, insieme ad AJAX. In particolare HTML5 è ormai lo standard, sponsorizzato dal W3C, universalmente riconosciuto e adottato per le applicazioni mobili, cioè usate su smartphone e tablet. D altro canto le pagine dinamiche, generate sul momento lato server (Server-Side), consentono di creare e modificare testi, aggiungere o eliminare voci, scrivere in un forum, chattare in social network. Per fare ciò ci si basa su tecnologie quali gli script, lato Server, basati su CGI, servlet Java, ASP, PHP, Java Server Page... Anche le architetture software si sono arricchite di modelli di programmazione a strati come MVC (Model View Control), con Java 2 Entrprise Edition, Zend Framework e Microsoft.NET. La figura sottostante mostra un esempio di procedura che attiva uno scrpit lato server (in linguaggio PHP), sia uno script lato client (in linguaggio LavaScript). Nei prossimi capitoli discuteremo a fondo queste attività. 65

67 Fig.kk (1) Il browser chiama l applicazione hello.php presente nel sito (2) Il server esegue l applicazione e produce il codice HTML che, (3) viene inviato al browser che (4) processa lo scripy JavaScript da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità La caratteristica di HTTP, cioè quella di essere un protocollo stateless, e l insieme limitato dei comandi per l interfaccia uomo-macchina del linguaggio HTML, hanno portato a una facilità d uso inferiore rispetto alle tradizionali applicazioni desktop. Le applicazioni Rich Internet Application (RIA), insieme all avvento di HTML5, tendono a possedere le caratteristiche e le funzionalità delle tradizionali applicazioni per computer desktop senza però necessitare dell'installazione di applicativi sul disco fisso, ma servendosi solo del browser. Nelle RIA l elaborazione dei dati, soprattutto per ciò che riguarda l interfaccia uomo-macchina, è realizzata lato Client, dal Browser. Ciò fornisce risposte veloci e pronte all utente, alleggerendo il server remoto da tutti quei tipi di elaborazione che possono essere effettuati con successo anche localmente. Più precisamente, il concetto di ricchezza ( Rich ), si svolge su due fronti: il modello dati e l interfaccia utente. Un modello dati più ricco significa che è possibile maneggiare strutture dati piu complesse a lato client svincolando il server da sovraccarico e permettendo una modalità asincrona dei dati in modo che le risposte del server non sono più intere pagine ma solo frammenti dinamici di esse. La ricchezza dell interfaccia utente garantisce un avvicinamento sia estetico che funzionale alle applicazioni desktop potendo interagire dinamicamente con le strutture dei dati. l interfaccia utente riveste un ruolo strategico legato all accessibilità e usabilità delle applicazioni Web perché noi, come utenti finali, ci basiamo molto sull impatto visivo e sulla semplicità d uso dell applicazione. In questo contesto concentriamoci, per prima cosa, sulle pagine HTML, insieme alle applicazioni lato client. Accessibilità e usabilità Per accessibilità, come recita ufficialmente il sito del W3C Italia ( si intende la fruibilità di servizi e contenuti di un sito Web da una qualsiasi tipologia d'utente, anche da persone con ridotta o impedita capacità sensoriale e motoria, persone che possono trovare un grande beneficio e supporto nell accesso dei contenuti e nella comunicazione tramite Internet. L usabilità prevede una serie di regole per ottenere semplicità e chiarezza che, come suggerisce l ISO 9241, determinano l'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. ( In questa definizione l efficacia indica l accuratezza e la completezza con cui gli utenti possono raggiungere I loro obiettivi, mentre l efficienza riguarda le risorse 66

68 necessarie per farlo e la soddisfazione si riferisce al comfort e al grado di accettabilità dell esperienza d uso. Nel 2000 Jakob Nielsen, un'autorità di riferimento per il design interattivo, pubblicò Web Usability, un bestseller internazionale che cambiò per sempre il modo di pensare il Web. Nielsen, ha definito cinque principi fondamentali di usabilità: 1. Apprendibilità: la facilità di apprendimento delle funzionalità e del comportamento dell applicazione 2. Efficienza: il livello di produttività ottenibile dopo che l utente ha appreso il funzionamento del sistema 3. Memorizzabilità: la facilità di ricordare le funzionalità del sistema in modo che l utente casuale possa ritornarvi dopo un periodo di non uso senza aver bisogno di un nuovo periodo di apprendimento 4. Riduzione degli errori: la capacità del sistema di prevenire gli errori e di aiutare l utente a non compierne; se l utente sbaglia ugualmente, deve essere messo in grado di rimediare in modo facile e veloce 5. Soddisfazione dell utente: la misura in cui l utente trova il sistema piacevole da usare. Lo stesso Nielsen ha anche proposto una valutazione euristica del sistema. Essa consente di analizzare le specifiche di un sistema in riferimento a delle euristiche, o linee guida, ossia i principi consolidati di buona progettazione e ergonomia. La valutazione euristica consiste in un giudizio da parte degli esperti valutatori sull aderenza o meno dell interfaccia alle linee guida di usabilità. Le linee guida, basandosi sulle caratteristiche cognitive e comportamentali degli individui durante l interazione con il sistema informativo, definiscono e descrivono le proprietà di un sistema che possa essere definito usabile. Un prodotto è usabile quando consente di raggiungere, in poco tempo e con buona tolleranza agli errori, gli scopi per i quali gli utenti lo utilizzano. nota La valutazione euristica (eurìstico = dal greco «trovare, scoprire»: qualsiasi procedimento non rigoroso, a carattere approssimativo, intuitivo, analogico, che consente di prevedere o rendere plausibile un risultato) è un metodo detto discount, in quanto consente di comprendere in tempi rapidi i principali problemi di usabilità nell interazione con il sistema (per esempio: assenza o non correttezza dei feedback sulle azioni, comprensibilità del linguaggio utilizzato, efficacia dei supporti alla navigazione). Tali risultati possono rappresentare un primo screening delle criticità di interazione dei siti. La valutazione euristica è un metodo ispettivo, ovvero viene applicato da esperti di usabilità. Altri metodi prevedono invece il coinvolgimento attivo degli utenti (per esempio, cognitive walkthrough) e valutazione basata su scenari); tra essi il più noto è il test di usabilità. *eurìstico agg. [der. del gr. εὑρίσκω «trovare, scoprire»] (pl. m. -ci). qualsiasi procedimento non rigoroso (a carattere approssimativo, intuitivo, analogico, ecc.) che consente di prevedere o rendere plausibile un risultato, il quale in un secondo tempo dovrà essere controllato e convalidato per via rigorosa Il test di usabilità consente di valutare nel dettaglio le performance e le reazioni dell utente nei diversi stadi di sviluppo del sistema tramite l uso dei prototipi e fornisce indicazioni per le modifiche da apportare nelle fasi successive di design-redesign. Per condurre un test di usabilità bisogna compiere una serie di passi fondamentali, come indicato di seguito: 1. Definire gli obiettivi del test (generici o specifici) 2. Definire il campione dei soggetti che partecipano al test. Il numero di valutatori influenza il numero dei problemi di usabilità individuabili 3. Selezionare test case rappresentativi delle attività che gli utenti svolgeranno sul sistema 4. Decidere i criteri di valutazione dell usabilità (qualitativi e quantitativi) 5. Predisporre l ambiente di testing e verificare che il prototipo supporti i test case selezionati 6. Eseguire il test, documentandone lo svolgimento (registrazione audio o video, appunti scritti, log delle interazioni) 7. Analizzare i risultati La definizione dei test case è una fase cruciale e anche difficile visto il numero di possibili situazioni. Alcuni approcci per questa definizione si basano sui modelli legati al mondo dell intelligenza artificiale. Il planning, per esempio, è più goal-oriented e permette, una volta definito lo stato finale, di ricostruire i cammini che portano a quello stato, eventualmente definendo anche il punto iniziale. In alternativa vi sono approcci basati su event-flow, sulla definizione cioè di test case sulla base della sequenza di azioni che devono essere compiute. In pratica, la costruzione di pagina Web deve sottostare ad alcune regole basilari, tra cui: possedere un intestazione con titolo, sottotitolo e logo possedere un menu per la navigazione o un sommario mostare il percorso effettuato per raggiungere la pagina e per tornare all origine (una sorta di filo di Arianna o "briciole di pane" (breadcrumb) che come nella favola, permettano a Pollicino di non perdere la strada (fig hhhh) fig hhhh breadcrumb : pollicino che semina briciole di pane per ritrovare la strada di casa testo con i contenuti e le immagini e ogni altro oggetto grafico o sonoro piè di pagina con le meta informazioni relative, ad esempio, al costruttore del sito, alle tecnologie usate, alla data di pubblicazione, alle notizie relative al copyright Ciò consente all utente di : capire immediatamente di quale tipi di sito si tratti consultare il menu o l indice disporre del percorso effettuato per arrivare alla pagina accedere facilmente ai contenuti 67

69 trovare le informazioni accessorie Siti Web per la comunicazione in azienda Info remixate da User Interface and Design (EUCIP Core B4) di Susanna Anelli Ipertesto e Web Il concetto di ipertesto è centrale nelle applicazioni Web. Un ipertesto è un documento che può essere consultato in modo non lineare. La prima definizione di ipertesto è di Vannevar Bush, in un breve saggio pubblicato nel 1945 sulla Atlantic monthly, intitolato As we may think, Bush teorizzava l ipertestualità trenta anni prima che fosse tecnicamente realizzabile. L intuizione, prodigiosa, nella sua semplicità, riguardava la contraddizione tra il modo in cui noi pensiamo, associativo e analogico, e la modalità assurdamente sequenziale, lineare, con cui siamo (eravamo!!!) stati abituati a utilizzare le informazioni sulla base della tradizione testuale: un documento dopo l altro, un libro dopo l altro, una pagina dopo l altra. L ipertesto asseconda l atteggiamento conoscitivo del lettore, che assume una posizione centrale rispetto all utilizzo delle informazioni. Non più costretto a seguire la linearità testuale, capitolo dopo capitolo, il lettore sceglie quali nodi del reticolo ipertestuale è interessato a visitare. Il presupposto tecnico dell ipertestualità è l elettronica, che consente un passaggio quasi istantaneo da un nodo all altro. Il presupposto organizzativo è la struttura associativa del reticolo. I link che collegano un nodo all altro sono frutto delle scelte attuate in sede di progettazione. Clliccando su un link (punto sensibile) l utente accede al documento (o alla parte di documento) desiderato. Un sito Web è un ipertesto, ovvero un insieme di pagine html leggibili con l ausilio di un interfaccia elettronica, in maniera non sequenziale, tramite collegamenti ipertestuali (link) attivabili con un clic su un breve brano di testo o su un immagine. I collegamenti ipertestuali costituiscono una rete di informazioni che permette percorsi di lettura alternativi. Tutte le pagine Web funzionano secondo i principi dell ipertesto. Quando hanno una natura multimediale gli ipertesti si chiamano ipermedia. Durante la progettazione di un sito bisogna cercare di evitare di riproporre la linearità per lasciare al fruitore spazi di scelta e determinazione autonoma dei percorsi. Struttura dei siti Nei siti è possibile individuare alcuni oggetti comuni. Tradizionalmente ogni sito presenta una home page (index) cioè la pagina principale da cui è possibile accede alle diverse sezioni o aree di contenuto in cui il sito è organizzato. Per mantenere una certa omogeneità nella fruizione, tutte le pagine di un sito presentano una grafica coordinata per l organizzazione dei contenuti. Solitamente nella parte superiore, la top bar, è presente il titolo del sito che si ripete per ogni pagina, insieme a un titolo di secondo livello che specifica meglio il contenuto della singola pagina. Nella parte inferiore vi è la bottom bar, in cui solitamente sono indicate le informazioni sul copyright, la data di ultimo aggiornamento, i contatti, le informazioni tecniche sulla creazione e amministrazione del sito. Tra queste due barre sono raccolti i contenuti del sito accompagnati da una side bar (posta solitamente a sinistra) in cui sono presenti alcuni strumenti a supporto della navigazione tra le pagine e della ricerca di informazioni, o anche link a pagine di aiuto. Un componente tradizionale, posto sia nella side bar sia nella top bar di un sito Web, è il motore di ricerca, che consente, attraverso l indicizzazione di tutto il sito, un accesso diretto al contenuto che si sta cercando mediante il box per la ricerca libera. Oltre a questi elementi ce ne possono essere altri. Per esempio in un sito per il commercio elettronico c è un gruppo di funzionalità per operazioni come selezione prodotto da mettere nel carrello, acquisto con carta di credito, La diffusione dei siti Web evidenzia anche il fatto che ogni organizzazione moderna, pubblica o privata, non può fare a meno di dotarsi di un sito Web. Andare on-line ormai è divento un imperativo di comunicazione cui è difficile sottrarsi, anche se la cattiva gestione di questo canale comunicativo può portare una serie di danni tangibili e intangibili consistenti. Innanzitutto è bene sapere che il canale Web non è affatto neutrale rispetto alle politiche di comunicazione e agli obiettivi che un organizzazione persegue. Detto questo, è possibile distinguere due funzioni principali che un sito Web può svolgere all interno di un organizzazione: il supporto alla comunicazione esterna e il supporto alla comunicazione interna. I siti Web per la comunicazione si distinguono in base all obiettivo che perseguono. I siti di comunicazione pura, generalmente, hanno il compito di attivare una presenza Web per un azienda o un organizzazione pubblica/privata. Si tratta di siti prevalentemente informativi che non offrono una grande quantità di contenuti. Sono molto simili a delle brochure sul Web. Al contrario, i siti di commercio elettronico hanno l obiettivo, spesso duplice, di sostenere la strategia comunicativa di un azienda in Rete e offrire un catalogo virtuale dei prodotti e dei servizi offerti, con la possibilità di acquistarli a distanza. Esiste poi la classe dei siti istituzionali/informativi, che hanno l obiettivo di comunicare, a tutti gli utenti interessati, informazioni utili e di servizio. Altre tipologie di siti sono rappresentate dalle gallerie virtuali, dagli album, dai repository di video. Il Web è il luogo ideale per depositare e condividere immagini e filmati: si pensi, per esempio, a YouTube o a Flickr. Casi molto particolari sono i blog e i mash-up. Si tratta di siti auto-gestita un utente emittente, che trasmette ai destinatari i suoi contenuti come puro testo scritto (blog) oppure come associazione di contenuti di formato diverso quali testi, video e immagini (mash-up), senza un architettura informativa esplicita sottostante, ma in base alle intuizioni e alle conoscenze dell emittente. I siti Web possono essere usati per la comunicazione interna di un azienda/organizzazione. In questo caso le applicazioni Web caratterizzano l interazione degli utenti di una Intranet aziendale. Un Intranet è una rete chiusa (locale), che serve un unica azienda, e le applicazioni Web 68

70 disponibili tramite questa rete supportano principalmente le attività dei dipendenti dell azienda. In altre parole, un Intranet è una struttura di rete interna all azienda che sfrutta le stesse caratteristiche e le tecnologie del Web. Poiché le Intranet sono utilizzate per il supporto dei processi lavorativi interni alle organizzazioni, sono progettate in modo da proteggere la rete aziendale interna da intrusioni esterne. Una classe particolare di applicazioni è rappresentata dai siti disponibili su Internet all esterno dell azienda, ma accessibili solo dal personale di quell azienda. Si tratta in questo caso di applicazioni dedicate allo scambio di dati, alla gestione di cataloghi, al reperimento in remoto di informazioni riservate. Per queste applicazioni si usa Extranet, ovvero una rete privata che si basa su protocolli Internet e sulle infrastrutture pubbliche per effettuare transazioni commerciali di tipo business-to-business o anche per integrare sistemi informativi distribuiti geograficamente sul territorio. Agli utenti di queste applicazioni, generalmente, è assegnata una specifica autorizzazione che consente loro di accedere in remoto alle informazioni e ai dati necessari per lo svolgimento di una certa attività lavorativa. In questo ambito, i protocolli di sicurezza in grado di rendere sicura la comunicazione ricoprono un ruolo importante, in quanto la natura confidenziale delle informazioni scambiate attraverso la rete, mal si concilia con la natura aperta di Internet. Occorre conoscere i bisogni principali degli utenti target, in particolare se l applicazione Web è di tipo business e si rivolge non tanto a utenti, ma a clienti. Analisi dei bisogni dell utente L analisi dei bisogni delle classi di utenza di un sito Web dovrebbe dare una riposta alle seguenti domande: Di cosa hanno bisogno gli utenti che visitano il sito? Quali strategie si possono mettere in atto per fidelizzare l utente? ( ) Qual è l equipaggiamento tecnologico e software che l utente medio userà per accedere all applicazione? Esistono diverse tecniche per l indagine dei bisogni delle classi di utenza specifiche cui un applicazione Web intende rivolgersi, quasi tutte mutuate dalle tecniche usate nelle scienze sociali (etnografia, psicologia, ma anche statistica ed economia). Le tecniche di data mining e Web Usage Analysis sono invece state impiegate con successo soprattutto nei progetti di re-design di applicazioni Web esistenti, per le quali erano disponibili i file di log delle interazioni degli utenti. Ecco un elenco abbastanza completo delle tecniche impiegabili per l analisi dei requisiti degli utenti: analisi del benchmarking: riguarda l indagine, attraverso strumenti specifici di confronto, delle similarità e delle differenze che esistono tra un applicazione e quelle individuate come sue dirette competitor. Si tratta di un tipo d indagine desk che mira a ricavare spunti interessanti per la progettazione di servizi e processi da valutare singolarmente e da approfondire nella successiva fase di analisi, attraverso il confronto diretto con il target dell iniziativa. L uso dei dati provenienti da questo tipo di indagine riguarda soprattutto le scelte di funzionalità e del modello d interazione di un applicazione interviste aperte: consentono l indagine diretta dei bisogni della propria utenza attraverso un colloquio informale con alcuni rappresentanti di sottogruppi specifici di utenti. La tecnica prevede la preparazione a priori di un gruppo di domande, la conduzione delle interviste e l analisi ex-post delle informazioni ottenute, per individuare i trend principali lungo il campione considerato e le classi fondamentali di bisogni espressi. L uso dei dati provenienti da questo tipo di indagine riguarda soprattutto le scelte di funzionalità e il modello d interazione dell applicazione che si sta sviluppando questionari: strumento flessibile per quanto riguarda la lunghezza, che raggruppa una serie di domande chiuse e/o aperte da sottoporre a campioni molto grandi di rappresentanti delle classi di utenza dell applicazione che si vuole progettare. Le differenze fondamentali rispetto all intervista aperta sono due: la dimensione del campione e il trattamento dei dati, che nel secondo caso è di natura quantitativa (statistica descrittiva). L uso dei dati provenienti da questo tipo di indagine riguarda soprattutto le scelte di funzionalità dell applicazione e il suo modello d interazione. Indagini settoriali: indagini approfondite su settori specifici di interesse, che vengono spesso investigati con l aiuto di aziende specializzate nella produzione di questo tipo di dati. L indagine di settore mette insieme tecniche diverse, sia qualitative sia quantitative, per fornire una descrizione dell andamento di tutti gli indicatori economico-sociali che caratterizzano il settore investigato. L uso di questo tipo di studio è legato alla fase che precede l indagine vera e propria dei bisogni degli utenti e l implementazione dell applicazione Web, e riguarda soprattutto le scelte relative al posizionamento dell applicazione rispetto ai propri competitor e a scelte di marketing Data mining: queste tecniche possono essere utilizzate per le applicazioni Web esistenti e in uso; i dati provenienti dal data mining possono rappresentare il punto di partenza per l apertura di cicli di re-design di applicazioni Web che non rispondono adeguatamente alle esigenze dei clienti di un azienda Web usage analysis: si tratta di tecniche di osservazione statistica dei file di log di un applicazione Web che consentono, a livelli diversi di dettaglio, di indagare i comportamenti degli utenti sul Web e di rilevare eventuali errori dell applicazione. Le tecniche di Web usage analysisi si applicano alle applicazioni già disponibili al utente finale e per le quali si prevede la registrazione dei dati dei file di log. I dati che si possono ottenere variano dalla raccolta di dati statistici descrittivi, come per esempio il numero di pagine visitate, alla raccolta di dati sui percorsi navigazionali degli utenti delle applicazioni Web. L analisi di questi dati può mettere in luce aree di intervento per il miglioramento delle applicazioni: per esempio, pagine che non vengono mai accedute o loop in un camino navigazionale. Design dell applicazione Il coinvolgimento dell utente finale nel processo di design dell applicazione che si intende progettare è una raccomandazione abbastanza problematica da rispettare sia in fase di raccolta dei requisiti, sia durante il processo di sviluppo, per il sostegno ai cicli iterativi di design-valutazione. In effetti, un campione rappresentativo delle classi di utenza cui il sito si rivolge dovrebbe essere costantemente coinvolto nel processo di sviluppo in modo da poter essere utilizzato anche nelle fasi di valutazione dell applicazione, soprattutto attraverso i test di usabilità. Il coinvolgimento degli utenti durante tutto il processo di sviluppo di un sito Web consente di correggere i punti deboli prima del suo rilascio definitivo, abbassando in questo modo i costi legati al rilascio di applicazioni non usabili. Di contro, il cattivo design di un sito Web porta al non soddisfacimento degli obiettivi di comunicazione che l azienda si era proposta di perseguire attraverso il sito stesso. L ipotesi peggiore che si può formulare a questo proposito è che l azienda fallisca la comunicazione (interna o esterna) attraverso il canale Web che quindi gli utenti percepiscano una comunicazione distorta e inadeguata. Nel dettaglio uno degli svantaggi tipici di un cattivo sito Web, per i siti di marketing e commercio elettronico, è costituito dalla mancata fidelizzazione dell utente/cliente. In pratica, un cattivo design può condurre un utente a non tornare mai più su un determinato sito aziendale. In questo caso i motivi del fallimento sono diversi. Tra i principali si ricordano: l incapacità di comunicare i propri obiettivi, la propria missione, la propria visione l offerta di funzioni non adeguate o scorrette che non consentono all utente di raggiungere i propri obiettivi (per esempio, acquistare un prodotto in cinque minuti) la scarsa usabilità dell applicazione, che può comportare problemi di cattiva navigazione, cattiva comprensione e inaccessibilità dei contenuti Un altro svantaggio tipico legato a siti basati su un cattivo design è il livello di in usabilità dell applicazione, che spesso è alla base della cattiva percezione di 69

71 un azienda o di un organizzazione da parte dei suoi clienti/utenti finali. Nello specifico, la cattiva percezione è legata a un esperienza negativa di interazione che può anche dipender da problemi di accessibilità del sito, quali: disponibilità: il sito è sempre attivo e disponibile agli utenti? Monitoraggio: l accesso al sito è adeguatamente monitorato? Aggiornamento: il sito viene costantemente aggiornato e migliorato? Relazioni con gli utenti: le relazioni con gli utenti sono adeguatamente presidiate? Tempi di accesso: i tempi di accesso sono adeguati? Reperibilità: il sito è facile da trovare? Sono molti gli esempi di cattivo design reperibili sul web. Esistono anche siti dedicati alla raccolta degli esempi più significativi di bad design. (cercare su google bad design web ) Metodologie per il Web design Dopo aver individuato il pubblico a cui un sito e l applicazione sono rivolti, i progettisti o gli analisti saranno impegnati in una conoscenza diretta degli utenti (o meglio di un campione rappresentativo di essi) nel contesto in cui le attività che l applicazione dovrà sostenere sono portate a termine. L obiettivo di questa fase è comprendere i bisogni, le difficoltà e le motivazioni che le persone hanno in particolari situazioni in cui l applicazione sarà utilizzata. Ma soprattutto, si potrà elaborare un buon modello mentale dell applicazione. In questo modo l applicazione verrà realizzata in modo tale che gli utenti finali, fin dalle prime intenzioni, si sentiranno a loro agio e non troveranno difficoltà legate all apprendimento del funzionamento del sito. La necessità di fornire un buon modello del sito può essere perseguita attraverso la raccomandazione di non fornire una quantità eccessiva di messaggi sull interfaccia. Anzi, sarebbe il caso di strutturare ogni pagina in maniera tale che essa consenta immediatamente, a chi la sta utilizzando, di comprendere le funzionalità, i contenuti e la navigazione disponibile. L ideale sarebbe che a ogni pagina corrispondesse un unico messaggio e che le strutture di navigazione e di interazione fossero sempre presenti e sempre uguali in qualsiasi punto dell applicazione l utente si trovi. Questo per evitare che l utente venga travolto da troppe informazioni e, di conseguenza, non sia in grado di trovare quello che cerca. Di particolare importanza è il ruolo del colore all interno di un sito. Innanzitutto il codice colore sfruttato da un applicazione dovrebbe essere sempre lo stesso. I link dovrebbero avere un unico colore così come le aree cliccabili e la barra di navigazione persistente. Bisogna inoltre ricordare che i colori saranno visualizzati con dispositivi diversi. Esempi di scelte di colori non ottimali sono il testo azzurro su sfondo blu o giallo sul fondo bianco. Queste scelte potrebbero incidere enormemente sulla leggibilità dei testi a video. Sempre su questa linea si raccomanda l uso di contenuti brevi, chiari e precisi. La maggior parte delle persone, quindi degli utenti di Internet, ha grosse difficoltà a leggere a video per molto tempo. In generale, si consiglia di scegliere sempre combinazioni a forte contrasto: l esempio più estremo è il testo nero sul fondo bianco (e viceversa). In generale, l intero sistema di navigazione tra le pagine del sito dovrebbe essere pensato in modo da risultare chiaro per il visitatore medio. Il sistema di navigazione dovrebbe consentire di raggiungere, senza addentrarsi in troppi livelli, tutte le zone di interesse. Diversi studi dimostrano un fatto incontrovertibile. Se un sito è usato per vendere qualcosa o in ogni caso vuole convincere gli utenti a ritornare, la navigazione è il fattore chiave che gli utenti considerano per decidere se quel sito merita o meno la loro fiducia. Riguardo a questo aspetto di navigazione delle pagine, i progettisti fanno spesso riferimento alla cosiddetta architettura informativa. L architettura informativa è un diagramma che mostra i contenuti (i backbone) dell applicazione Web e la struttura e la logica di relazione che li caratterizza e su cui il sito si basa. Più in generale un sito usabile dovrebbe essere caratterizzato da una buona architettura informativa in grado di comunicare le relazioni tra i contenuti del sito e il modo in cui questi ultimi sono espressi. Quindi, fornendo un contesto per la navigazione, l architettura informativa deve rendere comprensibile il contenuto informativo del sito. I modelli base a cui i progettisti di siti Web fanno riferimento nella costruzione dell architettura informativa sono : il modello lineare (adatto per percorsi vincolati), il modello gerarchico ( che offre percorsi mutuamente esclusivi) e il modello a rete (navigazione libera) In generale i siti interattivi si basano sulla combinazione di questi modelli, e la scelta è fatta in base ai contenuti, agli obiettivi e ai bisogni degli utenti a cui il sito è rivolto. L architettura informativa definisce e condiziona il design della navigazione di un sito Web, ovvero tutti i possibili percorsi ipertestuali che l utente potrà seguire. Quando si progetta la navigazione di un sito si possono considerare vari aspetti, tra cui: i bisogni degli utenti che si aspettano certe suddivisioni la semplice visione del quadro d insieme per il visitatore la rintracciabilità delle sezioni corrette in relazione all informazione cercata Un buono schema di navigazione globale dovrebbe rispondere immediatamente alle tre domande principali che ogni utente ha in mente quando visita una pagina: Dove sono (il presente)? Dove posso andare (il futuro)? Dove sono stato (il passato)? Le strutture di navigazione fondamentali per un sito Web sono le strutture d accesso gerarchico e l accesso diretto. Il primo caso descrive una modalità di navigazione tramite la quale l utente segue una gerarchia di link (un percorso navigazionale) fino ad arrivare al contenuto che sta cercando. Nel secondo caso si rende disponibile all utente l accesso diretto al contenuto ricercato, tramite un link in home page che porta direttamente a una pagina di contenuto o mediante la ricerca basata su un motore. Con il linguaggio HTML è semplice creare collegamenti costituiti da puro testo (i link classici) e/o da pulsanti. Ogni sito dovrebbe poi avere alcune strutture navigazionali fisse, a partire dalla barra di navigazione strutturale o persistente. Si tratta di un insieme di link globali, cioè visibili all utente a qualsiasi livello egli si trovi, che consente di muoversi molto velocemente lungo tutti i livelli del sito. Una seconda struttura navigazionale fissa è il path di navigazione seguito (briciole di pane) che indica il percorso specifico seguito dall utente fino a un determinato punto dell architettura informativa dell applicazione. Tramite questa struttura l utente è in grado di muoversi lungo il percorso che ha seguito fino a un dato momento dell interazione, sia andando indietro sia spostandosi in avanti. Infine, la mappa del sito consente una visione unica, completa e in forma testuale dell albero di navigazione del sito. Anche per le interfacce web i principi di usabilità definiti da Nielsen possono essere applicati e interpretati come segue: l apprendibilità delle applicazioni web dovrebbe essere interpretata come la possibilità di individuare facilmente nell home page i contenuti e i servizi resi disponibili dall applicazione, nonché di trovare rapidamente informazioni specifiche utilizzando i link disponibili per la navigazione dell ipertesto. Ogni pagina nel front-end dell ipertesto, inoltre, dovrebbe essere composta in modo tale che i contenuti siano facili da comprendere e i meccanismi di navigazione possano essere rapidamente identificati. L efficienza delle applicazioni Web si misura dal fatto che, quando l utente desidera raggiungere alcuni contenuti, dovrebbe poterlo fare nel modo più 70

72 veloce possibile attraverso link disponibili (riduzione al minimo del numero di clic). Inoltre, dopo aver visualizzato una pagina, gli utenti dovrebbero essere in grado di orientarsi e comprendere il significato della pagina in relazione al punto della navigazione in cui si trovano. La memorizzabilità significa che, dopo un periodo di non uso, gli utenti dovrebbero essere ancora in grado di orientarsi nell ipertesto, per esempio grazie all aiuto di barre di navigazione che puntino ai link strutturali dell applicazione, ovvero alle categorie di contenuto fondamentali che compongono il sito. Per esempio, se l utente sta navigando un applicazione di commercio elettronico, la categoria prodotti dovrebbe essere sempre raggiungibile da qualsiasi punto del sito. Riduzione degli errori significa che l utente deve essere messo in grado di raggiungere il proprio obiettivo senza che posano intervenire a ostacolarlo errori nel flusso dell interazione con il sistema. Questo si può ottenere ricorrendo a soluzioni di design che costringano l utente all esecuzione delle azioni corrette quando vi è il rischio di ingenerare errori gravi o irreversibili. (si pensi, per esempio, all immissione di dati personali, coordinate bancarie e simili). Inoltre, è opportuno progettare in modo dettagliato il feedback del sistema, in modo da informare sempre l utente dell eventuale errore commesso e suggerirgli le azioni future da compiere per porvi rimedio. Tra gli errori che possono causare un interruzione nel flusso d interazione si possono annoverare sia quelli che derivano da scelte di implementazione o tecnologiche sbagliate, sia errori causati da soluzioni inefficaci nel design dell interfaccia. Nel primo caso si pensi, per esempio, ad applicazioni la cui visualizzazione richiede l uso di plug-in non installati sul PC dell utente (l accesso al sito viene quindi impedito) oppure all esecuzione di alcune transazioni di acquisto; oggi molti siti prevedono un feedback puntuale che informa l utente sulla necessità di installare un plug-in particolare per continuare l interazione. Nel secondo caso si pensi a scelte sbagliate nel design dei link (nel colore o nell etichetta) che possono portare l utente alla navigazione di collegamenti errati che non gli consentono di raggiungere il suo obiettivo o che, nei casi peggiori, lo conducono in pagine dell applicazione da cui non è più possibile tornare indietro (dead end). La soddisfazione dell utente si riferisce alla situazione in cui gli utenti percepiscono di avere il controllo sull ipertesto, grazie alla comprensione dei contenuti e dei comandi disponibili. Ciò consente loro di raggiungere gli obiettivi preposti in maniera efficace ed efficiente, senza dover vivere l esperienza, spesso frustrante nel Web, di seguire percorsi di navigazione inutili, di non riuscire mai a trovare ciò che si sta cercando, di essere sopraffatti dalla quantità di informazioni disponibili, di perdere il proprio tempo. In accordo con l approccio dell usability engineering, il modo più efficiente di aumentare l usabilità dei sistemi informatici è progettare per l usabilità fin dalle prime fasi dello sviluppo. Una soluzione pratica è tentare di applicare alcuni criteri generali che suggeriscono come un applicazione debba essere organizzata per essere conforme ai requisiti di usabilità. Anche la qualità delle pagine singole e del loro contenuto è fondamentale. Innanzitutto, il test inserito deve essere privo di errori di battitura. In questo caso, strumenti di controllo ortografico sono ormai integrati all interno di quasi tutti i web editor. Un altro degli elementi fondamentali che definiscono la qualità di una pagina è il grado di indipendenza dal particolare browser. Una pagina deve essere visualizzabile in modo corretto e possibilmente sempre con lo stesso layout anche con browser differenti. A questo scopo la definizione di xhtml fornisce un aiuto in quanto definisce una grammatica che ogni browser è in grado di validare e che ogni pagina deve rispettare. Il W3C ha messo a disposizione degli sviluppatori, dei valida tori di codice che analizzano il codice html e css e forniscono informazioni rispetto all aderenza del proprio codice agli standard. Questo garantisce che una pagina validata possa essere visualizzata senza problemi su qualsiasi browser. Un ulteriore indice di qualità di una pagina Web riguarda la sua dimensione in termini di byte: non deve essere composta da troppi elementi che richiedono un tempo di caricamento elevato. Infatti, anche se ormai quasi tutte le città siano state cablate in fibra ottica o presentano linee ADSL o HDSL, in molte zone (soprattutto nei piccoli centri) si dipende ancora dal doppino telefonico e dai modem a 56Kbps per l accesso a Internet. Tutto il processo di sviluppo di un sito Web, è supportato da specifici strumenti, considerato che i CASE tool presentati difficilmente trovano applicazione nel caso di siti Web. Al momento un qualsiasi applicativo in grado di gestire testo e immagini (Power Point, Photoshop, =può essere usato dal progettista per una bozza della struttura del sito, lo schema della navigazione e il modello delle pagine Web. Molto più matura è la situazione degli editor di pagine html. Sebbene html possa essere scritto con qualsiasi editor di testo, gli strumenti specializzati offrono vantaggi.. Esistono due tipi di editor: gli editor testuali e gli editor visuali (questi ultimi chiamati WYSIWYG: What You See Is What You Get). Esempi : Adobe Dreamweaver, Quanta Plus. Uno sviluppatore di pagine html deve anche avere software per realizzare le componenti grafiche (Photoshop, The Gimp, ) o audio. Gli editor presentano anche svantaggi: L uso di strumenti che si basano sulla grafica può trarre in inganno riguardo al modo in cui le pagine possono essere visualizzate. Ciò che appare in fase di composizione o di preview è solo uno dei modi in cui il documento può essere visualizzato dall utente. Gli editor aggiungono informazioni non richieste Il file html ottenuto con un editor grafico deve essere controllato perché potrebbe contenere errori Alcuni editor eliminano i tag che non comprendono Difficilmente creano pagine accessibili e usabili L uso di questi strumenti è preceduto dalla fase di prototipazione che è molto importante. I prototipi Web sono usa e getta costruiti su carta o slide Power Point. Il prototipo ha lo scopo di aiutare a comprendere: qual è il ruolo che un applicazione Web goca nella vita di un utente? Quale dovrebbe essere il suo Look&Feel? Quali funzionalità dovrebbe implementare? Quale efficacia hanno, per gli utenti finali, le funzionalità individuate? Tra gli strumenti usati per creare prototipi usa e getta si citano gli storyboard e i rough draft. Gli Story board rappresentano descrizioni testuali delle funzionalità di un applicazione e del odello di interazione previsto tra l utente e il sistema in forma di vignette sequenziali. Si tratta di prototipi cartacei la cui funzione principale è sostenere la comunicazione tra i progettisti e il resto del team di progetto dell applicazione Web, per descrivere i comportamenti del sistema in interazione con gli utenti finali. Il loro impiego è previsto nelle fasi iniziali del design di un applicazione, quando ancora non esiste alcun prototipo funzionante. I prototipi rough draft si riferiscono alle tecniche, già esistenti nel contesto della scrittura, di abbozzare, in maniera non definitiva, una serie di idee senza descriverle approfonditamente, ma in modo abbastanza eficace da consentire, alla prima revisione, di comprendere ciò che si intendeva e di poterlo descrivere in dettaglio, o eventualmente depennarlo dai contenuti del testo che si sta preparando. 71

73 Client-Side Il documento Web: HTML e CSS HTML (.htm,.html) è un linguaggio di markup, formato da speciali marcatori (tag) che permettono di qualificare gli elementi della pagina, consentendo l impaginazione, la formattazione e il collegamento tra testi. Ogni TAG ha una serie di proprietà che definiscono lo stile del TAG (colore, larghezza ). Queste proprietà sono gli attributi del tag, che, ad esempio assegnano un colore di sfondo a un campo (bgcolor), come in figura rrrr, per i campi nome e cognome : <table> <thead> <tr> <td bgcolor=#9acd32>nome</td> <td bgcolor=#9acd32>cognome</td> </tr> </thead> <tbody> <tr> <td> Mara</td> <td> Zinconi</td> </tr> <tr> <td> Aldo</td> <td> Polloni</td> </tr> </tbody> </table> Risultato ne browser Fig. rrrr codice HTML e output mostrato su browser HTML5 HTML5 è la nuova generazione di HTML sviluppato dal consorzio W3C ( ). Molti browser già ne implementano molte funzioni. Le principali regole si possono così sintetizzare: tutto è basato su HTML, CSS, DOM, e JavaScript non c è più la necessità di ricorrere a plugin nesterni (come Flash) Gestione degli errori Nuovi tag per rimpiazzare gli script Indipendente dalla piattaforma Le prinipali funzionalità si si possono così sintetizzare: Un nuovo elemento canvas per il disegno Elementi audio e video per la riproduzione di brani multimediali Miglior supporto di memorizzazione in locale Nuovi elementi per la gestione dei contenuti: article, footer, header, nav, section 72

74 Nuovi form di controllo: calendar, date, time, , url, search Il significato di tutto ciò risulta essere abbastanza evidente: la riproduzione di file audio e video diventa più facile e immediata senza la necessità di disporre di un software proprietrio come quello di Adobe, Flash, o dei mille plug-in per la riproduzione multimediale e di giochi su browser. Senza contare che Apple e Google sponsorizzano in pieno Html5! Un esempio di canvas ( <!DOCTYPE HTML> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:10px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(10,14); cxt.lineto(150,20); cxt.lineto(10,50); cxt.stroke(); </script> </body> </html> Fogli di Stile (CSS) L affollarsi di attributi che vengono associati ai vari campi all interno della pagina web, come succede nell esempio di fig rrrr nel tag td (<td bgcolor=#9acd32>), può generare confusione e ripetizioni tanto inutili, quanto dannose. I fogli di stile (CSS, Cascading Style Sheets) cercano di mitigare questi difetti introducendo regole di presentazione degli elementi nella pagina e separando il codice HTML, dagli attributi degli elementi (colore, grandezza, distanza, ecc.) Nello stesso modo in cui si mette una tovaglia diversa sopra lo stesso tavolo, così si applicando regole diverse allo stesso codice HTML si ottengono risultati, di volta in volta, diversi. L esempio in fig. 5555, mostra come applicando un CSS diverso alla stessa pagina HTML si ottengano risultati sorporendentemente diversi, passando da un pagina con tre righe, a una con tre colonne, senza toccare il codice HTML <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="style1.css" /> <title>il libro di sistemi</title> </head> <body> <!-- intestazione --> <div id="testata"><h1>il libro di Sistemi</h1></div> <hr /> <!-- corpo --> <div id="corpo"> <div id="corpo-col1">[il]</div> <div id="corpo-col2">[libro]</div> <div id="corpo-col3">[di Sistemi]</div> </div> <hr /> <!-- pie' di pagina --> <div id="piepagina"><p>pié di pagina test</p></div> </body> Fig a il codice HTML della pagina a cui sono applicati i CSS di fig. 5555b e 5555d BODY TEXT-ALIGN: center #testata MARGIN: 2em auto; WIDTH: 800px; COLOR: white; BACKGROUND-COLOR: black; TEXT-ALIGN: left #corpo MARGIN: 2em auto; WIDTH: 800px; 73

75 BACKGROUND-COLOR: green; TEXT-ALIGN: left #piepagina MARGIN: 2em auto; WIDTH: 800px; BACKGROUND-COLOR: blue; TEXT-ALIGN: left #corpo-col1, #corpo-col3 BACKGROUND-COLOR: yellow; #corpo-col2 Fig b il codice CSS ("style1.css") che produce tre righe mostrate in fig 5555-c Fig c il L output su browser che mostra le tre righe (riga gialla [il], verde [libro] e gialla [di Sistemi]) Cambiando, solo parzialmente, il css, senza alterare il codice html si passa da tre righe a tre colonne nel corpo del testo (fig d) #corpo-col1, #corpo-col3 float: left; width: 20%; BACKGROUND-COLOR: yellow; #corpo-col2 float: left; width: 60%; BACKGROUND-COLOR: green; Fig d il codice CSS ("style1.css") che produce tre colonne mostrate in fig 5555-e Fig e il L output su browser che mostra le tre colonne (colonna gialla a sinistra [il], verde in centro [libro] e ancora gialla a destra [di Sistemi]) 74

76 Scripting lato Client HTML e CSS non bastano a rendere una pagina HTML attiva, permettendo all utente di averne un controllo diretto e immediato: occorre di più. Occorre che il browser sia in grado di elaborare localmente dei programmi che siano capaci di rispondere agli eventi che arrivano direttamente da input, come premere un tasto o passare sopra un area sensibile, e di trattare il documento HTML non come semplice testo, ma come una serie di oggetti tra loro correlati. Introducendo script a lato client, cioè programmi eseguiti dal browser al momento del caricamento della pagina o quando l utente genera un certo evento, è possibile ottenere i risultati che ci siamo prefissati. I linguaggi piu noti sono JavaScript e VisualBasicScript di Microsoft. In particolare JavaScript, un linguaggio nato alla fine degli anni 90 per la creazione di piccoli effetti nelle pagine Web, è oggi rinato ed è diventato un asse portante delle attività interattive che si svolgono sul browser. In particolare, la pagina HTML è vista come una serie di oggetti che possono essere manipolati in molteplici modi. Il Document Object Model (DOM) Il DOM, è un modello che presenta i documenti come insieme di oggetti che possono essere creati, cancellati e modificati. Il DOM considera i vari tag presenti nella pagina, come una gerarchia di oggetti: un albero in cui ogni nodo è un oggetto e i link tra i nodi sono le relazioni padre-figlio tra gli oggetti. In questo modo è possibile navigare il documento per accedere a ogni nodo. Anche se originariamente DOM era nato per modificare gli elementi di una pagina HTML (e di questo tratteremo nel prossimo paragrafo), nel tempo si è evoluto permettendo di leggere e aggiornare documenti diversi, come gli XML (extensible Markup Language) usando specifiche standard definite da W3C. Il DOM espone a un linguaggio come Javascript, gli elementi della pagina HTML, compreso attributi e testo. Molti di questi oggetti dispongono di eventi, come il click del mouse, che possono venire associati a funzioni JavaScript per la loro elaborazione. La figura sottostante ttt1 mostra la relazione tra i nodi in un documento generico. Fig ttt1 la struttura di un documento DOM DOM e HTML Il DOM HTML definisce un modo standard per l'accesso e la manipolazione di documenti HTML. Il DOM presenta un documento HTML come una struttura ad albero. Nella fig. aaa1-a è presentata una pagina HTML, (index.html) che contiene alcuni elementi. La fig. aaa1-b mostra la pagina sottoforma di albero in cui l elemento (element) html corrisponde al nodo radice che ha i figli head e body. A sua volta body ha i figli p, img e script che, fra di loro, sono fratelli. <html> <head></head> <body> <p>..</p> <img src= /> <script src= ></script> </body> </html> Fig aaa1-a index.html 75

77 Aaa1-b gli elementi del DOM della pagina index.html. La pagina aperta nel browser è rappresentata dall oggetto Document La manipolazione dei nodi, in JavaScript, passa attraverso una serie di metodi che vengono applicati per generare contenuti nel Document (la pagina che è aperta nel browser), reperire e modificarne il contenuto, leggerne e scriverne gli attributi, creare e manipolare i nodi, gestire i CSS e gli eventi. Ad esempio il metodo document.write permette di scrivere nel documento un testo, compresi i tag HTML. <html> <body> <script type="text/javascript"> document.write("<h1>ciao,</h1><p>buona giornata!</p>"); </script> </body> </html> E possibile creare e rimuovere nodi e determinarne il nome e il valore con una serie di metodi predefiniti. Nella figura a2 sottostante viene creato un nuovo elemento di tipo div var mydiv=document.createelement( div ); mydiv.align= right ; fig a2 creazione di un nuovo div Possiamo ottenere i riferimenti agli elementi del DOM tramite alcuni utilissimi metodi, tra cui getelementbyid(id) che referenzia un elemento dato il suo idetificatore (fig. a3), getelementsbyname(name) che recupera tutti gli elementi con quel nome (fig. a4) e getelementsbytagname(tag) che recupera tutti i sottoelementi che posseggono quel tag, cioè restituisce, sottoforma di lista, i riferimenti a tutti gli elementi presenti sotto l elemento di partenza, indipendentemente dalla loro posizione (fig a4). var x=document.getelementbyid("myheader"); var testo= document.getelementbyid("myheader").innerhtml; fig a3 nella variabile x è var x=document.getelementsbyname("myinput"); var lis_div =document.getelementsbytagname("div"); alert(lis_div.length); fig a4 recupero di tutti gli elementi che posseggono il tag DIV all interno del documento HTML Per modificare il contenuto di un nodo, occorre prima identificare l elemento (ad esempio tramite tramite id) con getelementbyid e quindi applicare la proprietà innerhtml che consente di inserire codice HTML nell'elemento al quale viene applicato. In questo esempio viene creato un div, in esso viene inserito uno span con id= sp1 e vine posto nel body: var mydiv=document.createelement( div ); mydiv.innerhtml= <span id= sp1 >ciao</span> ; document.body.appendchild(mydiv); Tutti gli oggetti DOM hanno associato una serie di eventi come ad esempio onclick, onkeydown, onkeyup, onkeypress, ondblclick, onmouseout, onmouseover Nell esempio sottostante, la funzione catturavalore è chiamata nel caso in cui l utente clicchi con il mouse, rispettivamente, su un campo dati (nell esempio: h1 con id= pippo1 ) o su un bottone: <h1 id="pippo1" onclick="catturavalore()">clicca qui!</h1> <input type="button" onclick="catturavalore()" value="bottone!"/> Nell esempio che segue, il click sull immagine produce il cambio dell immagine e delle scritte che compaiono in due diversi <div>, come si vede nelle schermate sotto. <!DOCTYPE html> <html> <body> <script> function cambia() element=document.getelementbyid('midea') if (element.src.match("ideasi")) element.src="ideano.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far venire un'idea!"; 76

78 else element.src="ideasi.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far fuggire un'idea!"; </script> <img id="midea" onclick="cambia()" border="0" src="ideano.png" width="100" height="180"> <div id="ide"> <p>clicca l'immagine per far venire un'idea!</p> </div> </body> </html> Un esempio che mostra l uso di un bottone che mostra data e ora. <!DOCTYPE html> <html> <body> <script> function displaydate() document.getelementbyid("iddata").innerhtml=date(); function vedi(id) var txt=id.innerhtml; alert ("id: "+id); document.write(txt); </script> <button onclick="displaydate()">data/ora</button> <p id="iddata"></p> <h5 onclick="vedi(this)">clicca per vedere questo stesso testo </h5> </body> </html> Tra i molti eventi disponibili relativi a valori e bottoni, un evento diverso dai precedenti ma particolarmente importante e utile è onload: <body onload="loadxml()"> Si tratta di un evento che si scatena quando il browser ha terminato di leggere tutto il codice HTML della pagina che viene caricata. La lettura del documento avviene in sequenza dall alto al basso. A questo punto tutti gli elementi del DOM sono disponibili. Ciò è fondamentale perché, altrimenti, si potrebbero generare degli errori nel caso venissero chiamate funzioni o frammenti di codice non ancora caricati. ( ) DOM: un esempio completo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="it" > <head> <title> elementi_ridotto.html </title> <script type="text/javascript"> function catturavalore() var x=document.getelementbyid("myheader"); var av=x.getattribute("title") ; alert("attributo: "+ av +" "+"innerhtml: "+x.innerhtml); function catturaelementi() var x=document.getelementsbyname("myinput"); alert("valore bottone: "+x[0].value); 77

79 function catturatags() var lista_h2 = document.getelementsbytagname("h2"); for(i=0; i < lista_h2.length; i++) alert("valori h2: "+i + " - " + lista_h2[i].innerhtml) </script> </head> <body> <h1 id="myheader" title="attributo_title" onclick="catturavalore()">--clicca qui per il valore dell' ID MyHeader</h1> <input type="text" name="myinput" value="prova"/> <h2><i>-- clicca il bottone per getelementsbyname --</i></h2> <input type="button" onclick="catturaelementi()" value="bottone!"/> <h2 onclick="catturatags()">-- clicca qui per i valori di h2 --</h2> </body> </html> Ecco gli output che vengono mostrati all esecuzione della pagina: Output associato a ID, getvalue(): Output associato al Name, getelements(): Output associati al TAG, gettags(): DOM e XML L'XML, extensible Markup Language, creato dal W3C, ha lo scopo di descrivere documenti strutturati, dando la possibilità di realizzare atti di comunicazione che siano ad un tempo adatti agli umani ed all automazione (Degli Antoni). E proprio la natura autodescrittiva degli elementi di XML che danno questa possibilità. In prima battuta, un documento XML è simile ad un documento HTML, ma lo scopo è diverso e i tag XML vengono appositamente inventati in funzione delle informazioni che interessa rappresentare. La tabella sottostante confronta HTML con XML. Scopo HTML descrizione e formattazione di pagine web e, più in generale, di ipertesti è un linguaggio Scopo XML linguaggio di annotazione (Markup) che permette di creare gruppi di marcatori (tag set) personalizzati (MathML, XHTML, chemicalml, ecc..) meta linguaggio utilizzato per creare nuovi linguaggi, atti a descrivere documenti strutturati (Non è un linguaggio!). Formato standard per lo scambio dei dati - Supporto per la costruzione di formati specifici per gli usi più disparati Struttura: - insieme ben definito e ristretto di tag Struttura: propri tag definiti a seconda delle esigenze. - libero nel contenuto, piu rigido nella sintassi. Vantaggi: semplice struttura sintattica; possibilità di visualizzazione della pagina attraverso un browser Vantaggi: metalinguaggio per la creazione di linguaggi personalizzati che, tramite tag, incorpora oltre alla struttura sintattica anche una struttura semantica degli elementi. linguaggio, per applicazioni in rete, utilizzabile da qualsiasi sistema Ogni documento può contenere un'opzionale descrizione della sua grammatica (DTD -Document Type Definition- o XSD -XML Schema Definition- ) 78

80 Svantaggi: marcatore di identificazione per il browser ma non significa nulla per l'elemento stesso. Svantaggi: pericolo di proliferare in modo disordinato con i tag Per comprendere meglio le potenzialità di XML consideriamo un breve racconto di Leone Tolstoj: Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Spesso, per spiegare meglio il testo, dobbiamo comunicare ad altri le parti che lo compongono. In prima battuta potremmo usare colori e caratteri diversi: Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Potremmo caratterizzare il testo con tag specifici che ne aggiungano informazioni e ne indichino anche il significato: autore, tipo, titolo, introduzione, personaggi, morale della storia i Tag di XML nel racconto di Tolstoj Un esempio per la lettura del file XML contentente la storia di Tolstoj è il seguente: <?xml version="1.0" encoding="iso "?> <raccolta> <racconto> <autore> Lev Nikolaevic Tolstoj </autore> <titolo> I due cavalli </titolo> <intro>due cavalli tiravano ognuno il proprio carro. <chi cavallo="primo"> Il primo cavallo non si fermava mai; </chi> <chi cavallo="secondo"> ma l'altro sostava di continuo. </chi> </intro> <storia> Allora tutto il carico viene messo sul primo carro. <chi cavallo="secondo"> Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: <dialogo> "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." </dialogo> </chi> </storia> <morale> Quando arrivarono a destinazione, <chi persona="padrone"> il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" </chi> e così fece. </morale> </racconto> <racconto> <titolo> Ciao <chi persona="padrone"> marina </chi> </titolo> <storia> se questa pagina funziona, allora significa che forse <morale> ho imparato a usare xml </morale> </storia> 79

81 <chi persona="schiavetto"> tanti saluti, <autore> Luca </autore> </chi> </racconto> </raccolta> Con il file html che lo interpreta: <html> <head> <title> parser0-librixml.html </title> <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) //il DOM di explorer si basa su un oggetto ActiveX xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("favola.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //i browser di nuova generazione usano "document.implementation" come proprietà del DOM xmldoc=document.implementation.createdocument("","",null); xmldoc.load("favola.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage()//funzione che scorre e stampa a video il contenuto di un XML non omoge //ipotetico procedimento iterativo var strato1;//,strato2,strato2,strato4,strato5,strato6; for(i=0;xmldoc.childnodes[i];i++) strato1=xmldoc.childnodes[i]; printmessage(strato1);//chiama la funzione sul nodo esterno e itera gli altri //alert(strato1.nodevalue); function printmessage(strato)//algoritmo ricorsivo strato.setattribute("visited","true");//altrimenti i nodi vengono visitati più volte if(strato.nodename=="racconto") document.writeln('<br><br>'); var strato2; for(i=0;strato.childnodes[i];i++) strato2=strato.childnodes[i]; if(strato2.nodename=="#text" && strato2.nodevalue!=null)//writeln aggiunge righe senza sovrascrivere le precedenti //effettua il controllo sul nodo in cui il testo è contenuto e stampa di conseguenza if(strato.nodename=="autore") document.writeln('<b>'+strato2.nodevalue+'</b><br>'); if(strato.nodename=="titolo") document.writeln('<font size="6" color="red">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="morale") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="chi") if(strato.getattribute("persona")=="padrone") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); else document.writeln(strato2.nodevalue+'<br>'); if(strato.nodename=="intro" strato.nodename=="storia") document.writeln(strato2.nodevalue); if(strato.nodename=="dialogo") document.writeln('<i>'+strato2.nodevalue+'</i>'); if(strato2.nodename!="#text" && strato2.getattribute("visited")!="true") printmessage(strato2); </script> </head><body onload="loadxml()"> </body> </html> 80

82 In questo modo abbiamo ottenuto un testo piu ricco, che cattura le parti (gli elementi), costituiti da etichetta e testo, formando una struttura ad albero. Inoltre è ora possibile scorrere formalmente Il testo XML, alla ricerca dei suoi contenuti in modo da estrarne parti e sottoparti. Si noti, infine, che per speciificare meglio i tag, sono stati inseriti degli attributi (il cui valore è racchiuso tra apici: cavallo= secondo ) che hanno lo scopo di modificatore o specificatore dell elemento. 81

83 Analisi di file XML Da un punto di vista formale, un documento XML è descritto da comandi (tag) che ne rappresentano la struttura logica. L insieme di questi comandi è chiamato Markup: documento XML= Markup + Dati testuali scritti in UNICODE Markup= comandi per la rappresentazione logica del documento I tag, che si distinguono dai dati testuali perché sono racchiusi tra i delimitatori < >, identificano il tipo di elemento: Tag di apertura: <nometag> Tag di chiusura: </nometag> Tag vuoti: <nometag/> L elemento puo avere un identificatore univoco (ID) e gli attributi che lo caratterizzano nelle sue proprietà. <pacco id="l-dvd-5565" note="fragile!" /> Un documento è, di norma, costituito da piu elementi e sottoelementi strutturati ad albero con una radice (Root element), elementi padri (Parent), figli (Child) e fratelli (Siblings), fig ttt1. <?xml version="1.0" encoding="iso "?> <bibliotecamia> <libro categoria="poesia"> <nome>dante</nome> <cognome>alighieri</cognome> <titolo>la Divina Commedia</titolo> <edizione>fiorentine</edizione> </libro> <libro categoria="storia"> <nome>marco </nome> <cognome> Polo </cognome> <titolo>milione</titolo> <edizione>repubblica di Venezia</edizione> </libro> </bibliotecamia > fig. ttt1 il documento XML (libri.xml), sotto, e la rispettiva struttura grafica, sopra Come per un documento HTML ci sono vari modi per accedere ai nodi. E possibile navigare nell albero dei nodi e usare le relazioni di parentela, oppure con una identificazione diretta dell id e dei nomi con getelementbyid() e getelementsbytagname(), (fig. z1, z2, z3). document.getelementbyid("intro"); 82

84 Fig z1 getelementbyid() document.getelementsbytagname("p"); fig z2 getelementsbytagname() x=document.getelementbyid("introduzione"); document.write(x.firstchild.nodevalue); x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) document.write(x[i].innerhtml); document.write("<br />"); fig z3 navigazione nell albero dei nodi usando le relazioni di parentela (firstchild.nodevalue) ESEMPIO libri.xml Il programma che segue, controlla i nodi e trova il valore del nome e del cognome in libri.xml in fig ttt1, e li imposta nella pagina HTML (cfr ) <!DOCTYPE html> <html> <head> <script >function loadxmldoc(dname) if (window.xmlhttprequest) xhttp=new XMLHttpRequest(); else xhttp=new ActiveXObject("Microsoft.XMLHTTP"); xhttp.open("get",dname,false); xhttp.send(); return xhttp.responsexml; </script> </head> <body> <script> xmldoc=loadxmldoc("libri.xml"); document.write(xmldoc.getelementsbytagname("nome")[0].childnodes[0].nodevalue + "<br>"); document.write(xmldoc.getelementsbytagname("cognome")[0].childnodes[0].nodevalue + "<br>"); document.write(xmldoc.getelementsbytagname("titolo")[0].childnodes[0].nodevalue); </script> </body> </html> Output su browser Firefox- Mozilla (Attenzione: per motivi di sicurezza, alcuni browser, tra cui Google Chrome, prevedono che il file XML risieda su bserver per essere caricato nel browser!) NOTA XHTML (raccomandazione del W3C ) Molte pagine su Internet contengono HTML "cattivo", cioè mal strutturato o con tag non chiusi o inappropriati. XHTML (extensible HyperText Markup Language) è HTML scritto secondo il formato XML con un uso più restrittivo e rigoroso dei tag e secondo la visione fornita dal DOM e dai CSS. XHTML è quasi identica a HTML 4.01 ma con una versione più rigorosa ed è supportato da tutti i principali browser. 83

85 XML per tutti gli usi XML: formule matematiche Un esempio di inserimento in una pagina delle formule matematiche complesse. Basterà dichiarare il namespace relativo al linguaggio MathML e inserire nella pagina i tag specifici di quest'ultimo (il codice è tratto dal sito del W3C). <html xmlns=" xml:lang="en" lang="en"> <head> <title>a Math Example</title> </head> <body> <p>the following is MathML markup:</p> <math xmlns=" <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply> </math> </body> </html> XML: descrizione dell informazione musicale Presso l Università Statale di Milano è stato standardizzato il metodo per la descrizione dell'informazione musicale in X ML ( Ecco, nell esempio di fig. 555 uno stralcio della Grande sonate pathétique, Grave, measure 4 di Ludwig Van Beethoven codificato in XML: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE ieee1599 SYSTEM " <ieee1599 creator="laboratorio di Informatica Musicale" version="1.0"> <general> <description> <main_title>1st movement - Grave</main_title> <author type="composer">ludwig Van Beethoven</author> <number>1</number> <work_title>grande sonate pathétique</work_title> <work_number>opus 13</work_number> <date>1798/99</date> </description> </general> <logic> <spine> <event id="rclef" timing="0" hpos="0" /> <event id="lclef" timing="0" hpos="0" /> <event id="rkeysig" timing="0" hpos="0" /> <event id="lkeysig" timing="0" hpos="0" /> <event id="rh_01" timing="0" hpos="0" /> <event id="lh_01" timing="0" hpos="0" /> <event id="rh_02" timing="144" hpos="144" /> <event id="lh_02" timing="0" hpos="0" /> <event id="rh_03" timing="72" hpos="72" /> <event id="lh_03" timing="0" hpos="0" />... </spine> <los> <staff_list> <brackets marker="start_of_staff_group" shape="brace" group_number="1" /> <staff id="rh_staff" line_number="5"> <clef event_ref="rclef" shape="g" staff_step="2" /> fig. 555 uno stralcio della Grande sonate pathétique, Grave, measure 4 di Ludwig Van Beethoven codificato in XML XML: RSS RSS è l'acronimo di Really Simple Syndication ed è un dialetto di XML. Tutti i file RSS devono essere conformi alle specifiche XML 1.0, come pubblicato sul sito Web di W3C. La struttura di un documento RSS presenta alcuni campi obbligatori ed altri facoltativi. Al livello superiore, un documento RSS contiene l elemento <rss>, con un attributo obbligatorio che specifica la versione di RSS (nell esempio di fig.333 è la 2.0). Subordinato all'elemento <rss> è l elemento <channel>, che contiene le informazioni sul canale (metadati) e il suo contenuto. Altri elementi sono, ad esempio, title che specifica il titolo della notizia, link che 84

86 fornisce la URL della notizia e description che fornisce una descrizione della notizia. Un esempio è mostrato in fig.333 <?xml version="1.0" encoding="iso "?> <rss version="2.0"> <channel> <title>libro di Sistemi</title> <link> <description>il libro delle reti</description> <item> <title>lan</title> <link> <description>tutte le novità sulle LAN!</description> </item> <item> <title>wan</title> <link> </link> <description> Tutte le novità sulle WAN!</description> </item> </channel> </rss> Fig. 333 un esempio di RSS 2.0. L esempio mostra le notizie relative al Libro di Sistemi Server-Side: la generazione di pagine dinamiche L esigenza di disporre di pagine Web dinamiche supera le possibilità offerte dal protocollo HTTP, progettato per inviare richieste da browser a server e non per avere il controllo del processo delle risorse. Il modo più immediato e semplice è quello di far in modo che il server HTTP deleghi la costruzione della pagina a un programma (o script) residente sul server. Gli script permettono, normalmente, di raccogliere informazioni dall'utente, mediante maschere interattive (form) e inviarle al server perché le elabori. Per la realizzazione di questi programmi lato server (server side) vengono sfruttati linguaggi di scripting come ASP e PHP. Negli anni passati questi script erano realizzati sovente utilizzando programmi in C e Perl tramite la Common Gateway Interface. Partiamo proprio da queste ultime applicazioni per arrivare, successivamente, a illustrare sinteticamente il funzionamento dei linguaggi di scripting. CGI (Common Gateway Interface) (rfc 3875) Il codice oggetto di un programma CGI (solitamente con estensione.cgi,.exe o.pl) non è legato ad alcun linguaggio particolare, anche se C e PERL sono (o sono stati) i piu usati. Per evitare problemi di interfacciamento tra dati e programmi, la Common Gateway Interface (CGI) mette a disposizione uno standard che definisce il modo con cui devono essere passati i dati tra client e server. Ogni volta che un client invia al server la richiesta di esecuzione di un programma CGI, il server lo esegue in tempo reale, generando dinamicamente le risposte e restituendo il risultato sottoforma di pagina HTML (fig hhh). 85

87 Fig hhh Common Gateway Interface (CGI) mette a disposizione uno standard che definisce il modo con cui devono essere passati i dati tra client e server. fine La costruzione dinamica delle pagine si svolge in questo modo: 1. il browser invia una richiesta HTTP al server HTTPd 2. il server HTTPd chiama un programma che costruisce la pagina HTML 3. il programma invia la pagina al server HTTPd che la utilizza per assemblare la risposta HTTP 4. la risposta è inviata al browser Chiamata CGI tramite GET e POST La chiamata a un programma (con interfaccia) CGI può avvenire sia digitando sul browser il nome della URL (e attivando implicitamente una GET, fig. 5555), oppure inviando i dati, presenti nei campi di Input di un modulo (form) HTML. La action conterrà il nome dello script da far eseguire sul server. La modalità di invio potrà essere scelta tra GET e POST (esercizio wwww1bis-a). <A href=" method="get"> clicca per testcgi.exe </A> Fig 5555 Esempio di chiamata di testcgi.exe tramite con metodo GET e con il passaggio dei parametri V1 e V2 Il dati pervenuti al server vengono trattati diversamente nei casi che arrivino tramite GET o POST. Precisamente, i parametri passati da GET dopo il "?" vengono copiati nella variabile di ambiente QUERY_STRING. Le informazioni arrivate con POST sono inserite nell input standard e vengono prelevate dallo script come fossero state inserite nel buffer di tastiera. I due programmi che seguono nell Esercizio wwww1, mostrano il modo in cui uno script scritto in C, preleva dati pervenuti con il metodo GET (gettest.cpp ) e con il metodo POST (posttest.cpp) Esercizio wwww1 - Un esempio in C++ (con GET e POST) /* Coded by Broglia "xeon" Claudio * DISCLAIMER: THIS CODE IS FOR PERSONAL AND INFORMATIONAL USE * * This is a personal test about programming a basic and low-level cgi * using c++ (it has been tested with visual C++). * In the get example it reads query from evironment variable * "QUERY_STRING", putting it back to the browser after the * "CONTENT-TYPE" variable (required by how the cgi's works), that * specify the content that is sent back. * In the post example it first read the length of the query from the * environment variable "CONTENT-LENGTH" and then it reads "char by char" by stdin * the query, putting it back to the browser. * For more information about HTTP and its variable see RFC2616 * (HTTP/1.1). * Remember to activate "Execute" property of the cgi-bin dir where * you will put the executables. * */ // gettest.cpp #include <stdlib.h> #include <stdio.h> #include <conio.h> #include <string.h> int main(int argc, char **argv) //Getting query from environment (method GET) char *strquery=null; 86

88 strquery = getenv("query_string"); // it reads query from evironment variable //Putting stuff back to the browser printf ("Content-type: text/html\r\n\r\n"); printf ("<html>\n<head>\n</head>\n<body>\n"); if (strquery) printf ("%s",strquery); else printf ("QUERY_STRING è vuota..."); getch(); printf ("\n</body>\n</html>"); return 0; // posttest.cpp #include <stdlib.h> #include <stdio.h> #include <conio.h> int main(int argc, char **argv) //method POST: Getting query from Standard Input (STDIN) char strquery[100], *strconl; int cont=0, ch; strconl = getenv ("CONTENT_LENGTH"); //Reading length from env variable (variabili di ambiente) do ch = getchar(); // it reads "char by char" by stdin" strquery[cont]=(char) ch; cont++; while (cont < atoi (strconl)); strquery[cont]='\0'; printf("content-type: text/html \r\n\r\n"); printf ("<html>\n<head>\n</head>\n<body>\n"); if (strquery) printf ("%s",strquery); else printf ("QUERY_STRING è vuota..."); getch(); printf ("\n</body>\n</html>"); return 0; In Esercizio wwww1bisa è mostrato il codice del form che contiene la chiamata allo script testcgi.exe presente su server locale nella cartella test. Esercizio wwww1bis-a - Chiamata allo script testcgi.exe che usa il metodo GET, presente su server locale nella cartella test <html> <head> <title>cgitest</title> </head> <body> <form action=" method="get"> <p><input type="text" name="t1" size="20"></p> <p><input type="text" name="t2" size="20"></p> <p><input type="submit" value="invia"><input type="reset" value="reimposta"></p> </form> </body> </html> In fig www1bis-b è mostrato il form come compare su browser fig www1bis-b il form come compare su browser Sotto è mostrato il codice HTML prodotto dallo script-cgi: <html> <head> </head> <body> 87

89 T1=1234&T2=abcd </body> </html> Considerazioni su CGI I CGI hanno, almeno due problemi che ne limitano l efficienza: ad ogni richiesta HTTP il server genera un nuovo processo che viene poi terminato, perdendo traccia dello stato del sistema tra due richieste successive dello stesso utente, a meno di non salvare i valori in un DB. Inoltre, per l'utente medio, non è facile creare CGI e provarle. Inoltre, il provider non sempre permette l'esecuzione di script Perl o C che hanno possibilità di eseguire operazioni su disco e, di conseguenza, possono essere poco sicure. Una risposta a queste problematiche è quella di estendere il server Web con un motore di esecuzione delle applicazioni in modo da eseguire i programmi di risposta in modo più efficiente. Estensione delle capacità del server WEB Estendere un server Web permette di offrire un ambiente efficiente e persistente dove, ad esempio, le applicazioni possono essere eseguite senza essere terminate ad ogni richiesta. Il server Web conserva lo stato della sessione tramite degli identificatori in modo da trattare più richieste HTTP successive, come appartenenti a una unica sessione aperta dll utente. L estensione delle capacità di un server Web passa attraverso tecnologie diverse tra cui i Sevlet Java e gli scripting lato server. Nei prossimi pragrafi accenneremo al primo argomento e approfondiremo meglio la programmazione tramite scripting basandoci, in particolare, sul linguaggo PHP. Servlet Java Le Servlet sono classi di programmazione in linguaggio Java usate per estendere le funzionalità di un server Web. Esse vengono eseguita su server predisposti, i servlet conteiner. I servlet sono predisposti per rispondere a qualsiasi tipo di richiesta di tipo request/response : quando l utente ne fa richiesta, tamite l URL associata, il server elabora la richiesta e fornisce una risposta. Le Servlet API associate una Java Virtual Machine, permettono di eseguire programmi indipendenti dal tipo di server e del client. Il codice usato è, tipicamente, Java che può far uso di molteplici librerie, comprese quelle per l accesso al database o per la generazione di file XML, di cui parleremo nei prossimi paragrafi. Il server, funge da container, cioè dispone di un programma speciale, il servlet container che permette l esecuzione di servlet Java mantenendo i dati di sessione. I più usati, nel mondo Open Source, sono Apache Tomcat e JBoss e, tipicamente, rispondono sulla porta L'interazione tra un client e un'applicazione web che gira su server è illustrato nella Figura Il client invia una richiesta HTTP al server Web (1). Il server Web, che implementa Java Servlet, converte la richiesta in un oggetto HttpServletRequest. Questo oggetto (2) è fornito a un Web component, che interagisce con i componenti JavaBeans (3) o con il database (4) per generare i contenuti dinamici. Web component, genera una HttpServletResponse (5) permettendo la conversione di questo oggetto in una risposta HTTP che viene restituita al client (6). 88

90 Fig Servlet Java. Interazione tra un client e un'applicazione web che gira su server: 1. Il client invia una richiesta HTTP al server Web 2. Il server converte la richiesta in un oggetto HttpServletRequest che viene fornito al programma Web component 3. e 4. Web component interagisce con i componenti JavaBeans (3) o con il database (4) per generare i contenuti dinamici. 5 Viene generata una HttpServletResponse (5) permette la creazione di una pagina di risposta 6 tramite HTTP, la pagina HTML viene restituita al client Per creare un applicazione è necessario creare una classe che estende la classe base HTTPServlet. Ecco un semplicissimo esempio che crea una pagina HTML e la invia al browser. public class MioServlet extends HTTPServlet public void doget (HTTPServletRequest request, HTTPServletResponse response) throws ServletException, IOException PrintWriter out; String title = "CIAO A TUTTI"; response.setcontenttype("text/html"); response.setheader("pragma", "no-cache"); out = response.getwriter(); out.println("<html><head><title>"); out.println(title); out.println("</title></head><body>"); out.println("<h1>" + title + "</H1>"); out.println("<p>ciao A TUTTI"); out.println("</body></html>"); out.close(); Scripting lato server Le servlet sostituiscono, di fatto, le CGI fornendo un altissimo grado di astrazione di programmazione e sicurezza ma, in entrambi i casi, nella realizzazione della pagina è mescolato il codice per la generazione della parte dinamica con gli stessi tag HTML. E possibile avere un approccio differente mediante l uso di scripting-lato server. Tali scripting (da non confondere con quelli lato client, come ad esempio JavaScript, presentato nei paragrafi precedenti) permettono di inserire all interno di una pagina HTML le istruzioni di programmazione che, eseguite sul server, generano la parte dinamica per accedere ai dati, generare calcoli, comporre testi e così via. Per inserire del codice di script nella pagina HTML occorre racchiuderlo tra opportuni tag, ad esempio <?php e > oppure <% e > a seconda del linguaggio usato. Esistono, infatti, diversi linguaggi di script lato server, tra cui ASP di Microsoft, JSP (Java Server Pages) e PHP. Per le nostre esigenze ci soffermeremo maggiormente su PHP. La figura sss1 schematizza il funzionamento di uno scripting (nello specifico caso, un file PHP) e le fasi che si susseguono per la generazione di una pagine HTML da inviare al client Fig sss1 sequenza di operazioni per la elaborazone di uno script PHP: Il client fa una richiesta al server di esecuzione di test.php (1) Il demone HTTPD accetta la richiesta e reperisce il file in codice php (2) Il file php viene inviato al riconoscitore del codice PHP (3) Dal file.php viene scorporata la parte di codice PHP (racchiuso tra <?php e?> ) e inviata all interprete PHP (4) per l elaborazione del codice che può 89

91 prevedere l accesso a un file di dati o al database (5). L elaborazione di PHP genera un codice HTML che viene unito (6) alla parte di codice HTML della pagina, compreso eventuale codice script lato client, e inviata al client (7) E importante notare che il file test.php (in fig. sss1) che viene richiamato dal client su server NON è lo stesso della pagina inviata al client. Quest ultima è, infatti, il risultato dell'elaborazione, fatta dal server, del file test.php che è stato richiamato dal browser. La fig. nnnn1 mostra a sinistra il file test.php che è presente su server e che è richiamato dal browser. A destra è mostrata la pagina che il server ha prodotto e ha inviato al browser per essere mostrato a video (sotto). File test.php sul server html> <title> Test PHP </title> <body> <?php for ($i=1; $i<=6; $i++)?> <FONT SIZE = <?php print $i;?>> Test PHP </FONT> </BR> <?php?> Sorgente della pagina sul browser <html> <title> Test PHP </title> <body> <FONT SIZE = 1> Test PHP </FONT> </BR> <FONT SIZE = 2> Test PHP </FONT> </BR> <FONT SIZE = 3> Test PHP </FONT> </BR> <FONT SIZE = 4> Test PHP </FONT> </BR> <FONT SIZE = 5> Test PHP </FONT> </BR> <FONT SIZE = 6> Test PHP </FONT> </BR> </body> </html> </body> </html> Tab nnn1 Elaborazione del file test.php. Si deve notare la differenza tra il codice del file su server (a sinistra) e quello elaborato dal server e inviato al browser (a destra). Sotto l uscita mostrata a video sul browser. Nota Possiamo concludere che, sebbene i servlet e gli script lato-server, perseguono lo stesso obiettivo, c è una differenza di sostanza: i servlet contengono le istruzioni per stampare la pagina, mentre gli script contengono i tag HTLM e le istruzione per calcolare le variabili della pagina. Nei prossimi paragrafi passeremo brevemente in rassegna, dapprima i due linguaggi più usati per gli script lato server: PHP e ASP e infine alcune tecnologie usate per la generazione di applicazioni Web. Il PHP Il linguaggio PHP è un software open source, creato nel 1994 da Rasmus Lerdorf. L acronimo PHP sta per PHP: Hypertext Preprocessor. Gli script PHP vengono eseguiti dal server, di solito Apache, ma non solo. PHP supporta molti database tra cui MySQL e Oracle (la configurazione LAMP (Linux, Apache, MySQL, PHP) costituisce un grande punto di forza come ambiente di sviluppo!). Gli script sono costituiti da una pagina HTML nella quale viene inserito il codice di scripting che parte sempre con il tag <?php e termina con il tag?>. Un file PHP (che ha estensione ". php", ". php3", o ". phtml") contenente testo, tag e script, viene elaborato dal server e restituito al browser sottoforma di file HTML. L esempio che segue prende alcuni dati da un form (form1) e li converte in binario usando lo script secondform.php chiamato nella action del form : <form name="form1" id="ftest" method="post" action="secondform.php"> <label for="numero">numero:</label> <input name="numero" type="text" id="numero" size="4" /> <input name="submit" type="submit" class="button" value="submit" /> </form> <?php $numero=$_post[numero]; //secondform.php if ($numero == "" ) print " Introduci un NUMERO!!!!!!". "\n" ; else print " numero introdotto: $numero". "\n" ; echo '<br></br>'; $resultbin=decbin($numero); print " numero in binario : $resultbin"; 90

92 ?> Lettura delle informazioni da browser Un form HTML prevede una serie di campi che l utente deve completare e spedire all applicazione PHP, tramite una richiesta HTTP. Ad esempio, il contenuto di una casella di testo in un form, viene passato a PHP in una variabile con lo stesso nome. Per recuperarne il valore, PHP usa uno dei tre array $_REQUEST, $_POST oppure $_GET, come in questo esempio in cui vengono letti tutti i campi del form usando $REQUEST: <?php $a=$_request; print ("<b>lettura di tutti i campi del form</b></br>"); foreach ($a as $c => $var) print ("<b>$c</b>: $var<br>");?> Di norma, pero, i parametri di un form vengono letti tramite la loro chiave, come in questo esempio, che usa il metodo POST, Il form contenuto in benvenuto.htm, chiama il file benvenuto.php <html> <body> <form action="benvenuto.php" method="post"> Nome: <input type="text" name="name"><br> <input type="text" name=" "><br> <input type="submit"> </form> </body> </html> Benvenuto.php: <html> <body> Benvenuto <?php echo $_POST["name"];?><br> Ti sei registrato con il seguente indirizzo <?php echo $_POST[" "];?> </body> </html> Validazione dei campi di un form, tramite JavaScript: nel seguente esempio il file seguente (in formato.htm), prima di inviare il valore del campo Nome (fname) al file form-va-php.php presente sul server, controlla che questo campo non sia vuoto (cfr <!DOCTYPE html> 91

93 <html> <head> <script> function validaform() var x=document.forms["mioform"]["fnome"].value; if (x==null x=="") alert("campo vuoto non accettato"); return false; </script> </head> <body> <form name="mioform" action="form-va-php.php" onsubmit="return validaform()" method="post"> Nome: <input type="text" name="fnome"> <input type="submit" value="submit"> </form> </body> </html> form-va-php.php <html> <body> Benvenuto <?php echo $_POST["fnome"];?><br> Ciao </body> </html> L esempio che segue mostra come sia possibile in un unico programma php generare il form e rispondere al form da browser: <html> <head> <title>form integrato integrateform.php</title> </head> <body> <?php if(!isset($_post['submit'])) // FALSE: l'oggetto (submit) non esiste, è la prima volta!?> <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> La tua età: <input name="eta" size="2"> <input type="submit" name="submit" value="vai"> <?php else // TRUE: l'oggetto esiste, è stato inviato il form! $e = $_POST['eta']; //prendi l'oggetto arrivato if($e < 20) echo "baby"; elseif($e <40) echo "young"; else echo "perfect!";?> </body> </html> Si noti l uso della funzione isset() e della chiave PHP_SELF che restituisce il nome della pagina che ha effettuato la request HTTP, cioè il nome dello script, in modo tale che lo script richiami se stesso quando si preme sul tasto di Submit del form. L esempio la generazione di un form e la sua validazione tramite PHP ( : <!DOCTYPE HTML> <html> <head> <style>.error color: #FF0000; </style> 92

94 </head> <body> <?php // define variables and set to empty values $nameerr = $ err = $gendererr = $websiteerr = ""; $name = $ = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") if (empty($_post["name"])) $nameerr = "Name is required"; else $name = test_input($_post["name"]); // check if name only contains letters and whitespace if (!preg_match("/^[a-za-z ]*$/",$name)) $nameerr = "Only letters and white space allowed"; if (empty($_post[" "])) $ err = " is required"; else $ = test_input($_post[" "]); // check if address syntax is valid if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$ )) $ err = "Invalid format"; if (empty($_post["website"])) $website = ""; else $website = test_input($_post["website"]); // check if URL address syntax is valid (this regular expression also allows dashes in the URL) if (!preg_match("/\b(?:(?:https? ftp):\/\/ www\.)[-a-z0-9+&@#\/%?=~_!:,.;]*[-a-z0-9+&@#\/%=~_ ]/i",$website)) $websiteerr = "Invalid URL"; if (empty($_post["comment"])) $comment = ""; else $comment = test_input($_post["comment"]); if (empty($_post["gender"])) $gendererr = "Gender is required"; else $gender = test_input($_post["gender"]); function test_input($data) $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data;?> <h2>php Form Validation Example</h2> <p><span class="error">* required field.</span></p> <form method="post" action="<?php echo htmlspecialchars($_server["php_self"]);?>"> Name: <input type="text" name="name" value="<?php echo $name;?>"> <span class="error">* <?php echo $nameerr;?></span> <br><br> <input type="text" name=" " value="<?php echo $ ;?>"> <span class="error">* <?php echo $ err;?></span> <br><br> Website: <input type="text" name="website" value="<?php echo $website;?>"> 93

95 <span class="error"><?php echo $websiteerr;?></span> <br><br> Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> <br><br> Gender: <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">female <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">male <span class="error">* <?php echo $gendererr;?></span> <br><br> <input type="submit" name="submit" value="submit"> </form> <?php echo "<h2>your Input:</h2>"; echo $name; echo "<br>"; echo $ ; echo "<br>"; echo $website; echo "<br>"; echo $comment; echo "<br>"; echo $gender;?> </body> </html> form: il numero introdotto viene convertito in binario dallo script secondform.php chiamato nella action del form : <form name="form1" id="ftest" method="post" action="secondform.php"> <label for="numero">numero:</label> <input name="numero" type="text" id="numero" size="4" /> <input name="submit" type="submit" class="button" value="submit" /> </form> <?php $numero=$_post[numero]; //secondform.php if ($numero == "" ) print " Introduci un NUMERO!!!!!!". "\n" ; else print " numero introdotto: $numero". "\n" ; echo '<br></br>'; $resultbin=decbin($numero); print " numero in binario : $resultbin";?> Il seguente esempio controlla, invece, la variabile pervenuta con GET e risponde in formato XML al browser: <?php $q=$_get["id"]; header('content-type: text/xml'); echo '<?xml version="1.0" encoding="iso "?>'; // send XML response echo '<valid>'; if ($q!="") echo 'true'; else echo 'false'; echo '</valid>';?> Upload di file L esempio che segue mostra come PHP permette facilmente di ottenere un upload di un file sul server, via http. <html> <title>uploadform.php </title> 94

96 <body> <form action="uploadfile.php" method="post" enctype="multipart/form-data"> <label for="file">nome file:</label> <input type="file" name="file" id="file" /> <br/> <input type="submit" name="submit" value="invia file" /> </form> </body> </html> Si noti l attiributo type impostato a file, il metodo che deve essere obbligatoriamente POST e il metodo di codifica dei dati (enctype) con cui vengono passati i parametri tra client e server. <html> <title>uploadfile.php </title> <body> <?php if ($_FILES["file"]["error"] > 0) echo "Errore: ". $_FILES["file"]["error"]. "<br />"; else echo "Nome del file trasferito in Upload: ". $_FILES["file"]["name"]. "<br />"; echo "Tipo MIME: ". $_FILES["file"]["type"]. "<br />"; echo "Dimensione: ". ($_FILES["file"]["size"] / 1024). " Kb<br />"; echo "memorizzato in : ". $_FILES["file"]["tmp_name"];?> </body> </html> Il programma php (uploadfile.php) tratta il file ricevuto servendosi dei dati presenti nell array multidimensionale $_FILES, che contiene tutte le informazioni del file trasferito. con PHP L esempio mostra l invio di una tramite la funzione PHP mail: <?php $to = "paolo.macchi@libero.it"; $subject = " di prova!"; $message = " di Prova-Provata "; $from = "paolo.macchi@libero.it"; $headers = "Da:". $from; mail($to,$subject,$message,$headers); echo " inviata correttamente!";?> Controllo delle sessioni e Cookie Il protocollo http è stateless e non supporta il controllo dello stato tra una chiamata e l altra: Il browser invia una richiesta al server e ottiene la risposta. Il server dimentica subito di essersi rapportato con il client. In un sito statico cio non comporta alcun problema, ma non è cosi per i siti dinamici, dove, ad esempio, viene richiesto agli utenti di registrarsi o di fare degli acquisti usando un carrello elettronico. In questo caso, come fa il server a tenere traccia del contenuto del carrello se dimentica subito quello che ha fatto? Una tecnica consiste nell utilizzo delle sessioni, per collegare due richieste differenti che si riferiscono allo stesso client. La chiave di tutto risiede nel browser. L utilizzo delle sessioni permette al server di associare chiamate successive che arrivino dallo stesso client (browser), legandole al numero di processo (pid) del client sulla macchina che lo ospita. PHP è in grado di gestire le sessioni tramite un array con tutti i dati della sessione (session_start();) : il server genera un numero univoco che fa da indice a questo array. Il Client, a sua volta, ottenuto dal server questo numero univoco lo memorizza in un Cookie per poterlo rendere al server alla successiva richiesta. (Nel caso i cookies non vengano permessi il numero univoco è passato con i dati inviati dal form o appeso alla querystring). In questo esempio, che si rifà a viene impostata una sessione nella prima pagina (Nota: session_start() deve essere dichirata PRIMA del tag <html> ): <?php session_start(); echo 'Benvenuto nella pagina 1 che apre la sessione'; $_SESSION['favcolor'] = 'green'; $_SESSION['animal'] = 'cat'; $_SESSION['time'] = time(); echo '<br /><a href="se2.php">leggi i dati di sessione se il cookie è stato accettato</a>'; 95

97 //altrimenti... echo '<br /><a href="se2.php?'. SID. '">Leggi i dati di sessione tramite parametro, senza cookie</a>';?> <html> <body> aaaa </body> </html> La pagina successiva, conterrà magicamente i dati di sessione: <?php session_start(); echo 'Benvenuto nella pagina 2 che legge la sessione<br />'; echo $_SESSION['favcolor']; // green echo '<br />'; echo $_SESSION['animal']; // cat echo '<br />'; echo date('y m d H:i:s', $_SESSION['time']); // si puo' usare il SID qui echo '<br /><a href="se1.php">torna a scrivere la sessione</a>';?> Ed ecco un semplicissimo contatore di visite (almeno, fino a che non si esce dal browser!): <?php session_start(); if(isset($_session['visite'])) $_SESSION['visite']=$_SESSION['visite']+1; else $_SESSION['visite']=1; echo "visite=". $_SESSION['visite'];?> esempio classico di login login1.htm contiene il form per l accesso <html> <head> <title>login </title> <link rel="stylesheet" href="css.css"> </head> <body> ruertuutre <div id="container"> fhfgh <?php $utente= "UTENTE:"; $pass="password"; echo "<FORM ACTION = 'pag21.php?provenienza=1' method='post'>"; echo "Utente"."<input type='text' name='utente'size='20' value=''> <br>"; echo "Password"."<input type='password' name='pass'size='20' value=''> <br>"; echo "<INPUT TYPE=submit value='ok'>"; echo "</FORM>"; echo "<FORM ACTION = 'pag3.html' method='post'>"; echo "<INPUT TYPE=submit value='registrati'>"; echo "</FORM>";?> </div> </body> </head> </html> Login1.htm contiene il form che chiama pag21.php che controlla se l utente esiste e distingue l amministratore (admin) lanciandolo su una pagina diversa <?php session_start();?> <html> <head> <title>login </title> </head> 96

98 <body> <?php $login["luca"]="ciao"; $login["andrea"]="hello"; $login["admin"]="admin"; //Recupero username e password dal form $username = $_POST['utente']; $password = $_POST['pass']; $trovato=false; reset($login); while(list($elementkey, $Element) = each($login)) if($elementkey==$username && $Element==$password) $_SESSION['username'] = $username; $_SESSION['password'] = $password; echo "Benvenuto". $username; $trovato=true; if($username=="admin") echo "<FORM ACTION = 'pagadmin.php' method='post'>"; echo "<INPUT TYPE=submit value='continua'>"; echo "<FORM ACTION = 'pag5.php' method='post'>"; else echo "<FORM ACTION = 'pag4.php' method='post'>"; echo "<INPUT TYPE=submit value='continua'>"; echo "</FORM>"; break; if($trovato==false) echo "Utente non registrato. Devi registrarti"; echo "<FORM ACTION = 'pag2.php' method='post'>"; echo "<INPUT TYPE=submit value='registrati'>"; echo "</FORM>";?> </body> </head> </html> esempio di un carrello elettronico minimo, per la spesa con login (session) e cookies index.php <html> <head> <title>la spesa</title> </head> <body> <form action='check.php' method='post'> Inserisci username <input type='text' name='user' /> <input type='submit' value='entra' /> </form> </body> </html> check.php <?php session_start(); //utenti registrati $utenti['user1']='pass1'; $utenti['user2']='pass2'; $esiste=false; //true se utente registrato foreach($utenti as $key => $value) 97

99 if($_post['user']==$key) //utente registrato $esiste=true; $_SESSION['user'] = $_POST['user'];?> <html> <head> <title>la spesa</title> </head> <body> <?php if($esiste)?> Benvenuto <?php echo $_POST['user'];?> <form action='alimentari.php'> <input type='submit' value='vai alla spesa' /> </form> <?php else?> Non sei registrato <form action='index.php'> <input type='submit' value='torna al login' /> </form> <?php?> </body> </html> alimentari.php <html> <head> <title>la spesa</title> </head> <body> <h3>alimentari</h3> <form action='tecnologia.php' method='post'> <input type='checkbox' name='alim["pasta"]' value='0.85' /> Pasta (0.85 ) <input type='checkbox' name='alim["pesce"]' value='11' /> Pesce (11.00 ) <input type='checkbox' name='alim["carne"]' value='20' /> Carne (20.00 ) <input type='submit' value='avanti' /> </form> </body> </html> teconologia.php <?php $tot=0; foreach($_post['alim'] as $key => $value) $tot=$value+$tot; setcookie('alim',$tot,time()+3600);?> <html> <head> <title>la spesa</title> </head> <body> <h3>tecnologia</h3> <form action='cassa.php' method='post'> <input type='checkbox' name='tecn["stereo"]' value='30' /> Stereo (30 ) <input type='checkbox' name='tecn["cellulare"]' value='50' /> Cellulare (50 ) <input type='checkbox' name='tecn["astronave"]' value='1000' /> Astronave (1000 ) <input type='submit' value='vai alla cassa' /> </form> </body> </html> cassa.php <?php $tot=0; foreach($_post['tecn'] as $key => $value) $tot=$value+$tot; setcookie('tecn',$tot,time()+3600);?> 98

100 <html> <head> <title>la spesa</title> </head> <body> <h3>cassa</h3> <?php echo $_SESSION['user'];?> hai speso <?php echo $_COOKIE['alim'];?> per gli alimentari e hai speso <?php echo $tot;?> per la tecnologia. <br> Il totale alim+tot è <?php echo $_COOKIE['alim']+$tot;?> <?php if (isset($_cookie["tecn"])) echo " ecco ". $_COOKIE["tecn"]. "!<br>"; else echo " not found tecn<br>";?> <form action='paga.php' method='post'> <input type='submit' value='paga' /> </form> </body> </html> paga.php <html> <head> <title>la spesa</title> </head> <body> <h3>paga</h3> </br> alimentari cookie è <?php echo $_COOKIE['alim'];?> </br> tecnologia cookie è <?php echo $_COOKIE['tecn'];?> </br>il totale è <?php echo $_COOKIE['alim']+$_COOKIE['tecn'];?> </body> </html> Integrazione con il DataBase: PHP+MySQL Anche se PHP, almeno dalla versione 5, supporta una lunga serie di database (tra cui Oracle, SQL Sever, ODBC), il rapporto con MySQL è un rapporto privilegiato in quanto, storicamente, la maggior parte delle applicazioni WEB, basata su PHP, è costituita dall accoppiata PHP-MySQL. L accesso a MySQL può essere fatto tramite semplici e potenti funzioni. Gli esempi che seguono mostrano come accedere a una tabella del DB e operare semplici Query di estrazione dei dati. Lo script opera su un database di nome com_test che contiene la tabella libro che possiede i campi isbn, nome, cognome, edizione, titolo. L utente è test, cosi come la password. Il nome del server è hostmysql1. L esempio si connette al DB, estrae il valore dei campi e li mostra in una tabella: <?php print "Accesso al DB: "; $Host="hostmysql1"; //parametri di connessione a MySql $User=" test"; $Passwd="test"; $conn = mysql_connect ($Host, $User, $Passwd) or die ("Connessione a MySQL fallita."); $dbname = "com_test"; //nome del Database print " $dbname "; mysql_select_db($dbname, $conn) or die ("Connessione database ".$dbname." fallita."); $query= "SELECT * FROM edithsrl_com_test.libro l;"; //SQL query $result = mysql_query ($query, $conn) or die ("Errore nella Query<br>\n\tDB: ".$dbname."<br> \tquery: ".$query."<br>\n\tlink: ".$this- >conn."<br>\n\terrore MySQL: ".mysql_error()); $aa=mysql_num_rows($result); $r=0; print "<table>"; echo "<tr class='odd'>"; echo "<td>".isbn."</td> <td>".nome."</td> <td>".cognome."</td> <td>".edizione."</td> <td>".titolo."</td> <td>"; while ($rs=mysql_fetch_array($result)) if ($r%2==0) echo "<tr>"; else echo "<tr class='odd'>"; echo "<td>".$rs[0]."</td> <td>".$rs[1]."</td> <td>".$rs[2]."</td> <td>".$rs[3]."</td> 99

101 <td>".$rs[4]."</td> <td>"; echo "</td><td>"; $r++; echo "</tr>"; print "</table>"; if ($conn!=null) mysql_close($conn);?> Sul browser verrà mostrato : Accesso al DB: com_test ISBN Nome Cognome Edizione Titolo Paolo Macchi edisis il Telemacone Paulo Coelho Bompiani Il cammino di Santiago Lev Tolstoj Newton Compton Guerra e pace Alighieri Dante SEI Divina Commedia Osservando il codice si nota che: - il collegamento con l host su cui gira MySQL si ottiene con la funzione $conn = mysql_connect ($Host, $User, $Passwd) -ha come parametri il nome dell Host, l Utente e la Passwordtramite l oggetto che si ottiene come risposta di questa funzione, si seleziona l istanza del database (il server, infatti, può contenetere più di un database): mysql_select_db($dbname, $conn) - una volta selezionato il database possiamo operare con la query desiderata. Nel nostro caso: $result =mysql_query ($query, $conn) - con l oggetto $result, che contiene il risultato della query, possiamo, ad esempio, ottenere il numero di record interessati ed estrarre i valori dei campi. Nell esempio viene usata mysql_fetch_array($result) che restituisce il record ennesimo del result-set e incrementa il cursore indice. Si ottiene, quindi, un array costituito da tutti gli elementi del record estratti dalla query, anche, se si vuole, con chiavi diverse come permette la funzione stessa (cfr ) - la funzione mysql_close(), rilascia la connessione al database. ASP ASP sta per Active Server Pages. Il linguaggio ASP è un linguaggio di scripting lato server, creato nel 1997 da Microsoft. Gli script ASP vengono eseguiti sui server Microsoft (Internet Information Server). Un file ASP, che ha estensione ".asp", può contenere testo, tag HTML e script. Esso viene elaborato dal server e restituito al browser come file HTML. La pagina di uno script contiene, oltre ai normali tag HTML, gli speciali tag <% e %> che, contengono il codice di scripting che sarà scorporato ed elaborato dal server secondo una modalità analoga a quella di PHP (vedi fig. sss1). ASP interagisce con i database tramite ODBC (Open DataBase Connettivity). Nell'esempio mostrato sotto è rappresentato il codice per una interazione client - server in cui il browser invia al server, tramite form (fig bbb1), due dati: tipo di sito preferito e nome. Il programma ASP (invio.asp di fig. bbb2) riceve i dati ("nome" e "sito") tramite l'oggetto Request che costituisce l'elemento di connessione tra il client e il server, e li rimanda al browser per la loro visualizzazione, personalizzando cosi' l'accesso dell'utente. <html> <head> <title>nome</title> <meta HTTP-equiv="Content-Type" content="text/html; charset=iso "> <meta name="generator" content="microsoft FrontPage 3.0"> </head> <body> <font face="verdana" size="2"> <form action=" method="post"> <p>nome: <input name="nome" size="48"> </p> <p>sito Preferitor: <select name="sito" size="1"> <option>html.it </option> <option>gif-animate.it </option> <option>font.it </option> <option>emerchant.it </option> </select> </p> <p><input type="submit"> </p> </form> </font> </body> 100

102 </html> fig bbb1 form di inserimento (formperasp.htm) che chiama il file invio.asp <html> <head> <title>questa è una paginadi test con asp</title> </head> benvenuto, <%=Request.Form("nome") %> il tuo sito pref è, <%=Request.form("sito") %> </b></font></p> <-- N. B. </body> </html> fig bbb2 il file invio.asp chiamato dal form di inserimento Il Pattern MVC Talvolta l uso del semplice linguaggio allo stato puro, specie per siti di una certa rilevanza, risulta un po limitante. In questi casi è utile separare il codice dai dati e dalla presentazione. Il Model-View-Controller (MVC) è un pattern (un modello di progettazione) basato sulla separazione dei contenuti dalla rappresentazione e definisce tre metacomponenti che definiscono l applicazione: 5. il model fornisce i componenti per accedere ai dati utili all'applicazione, ad esempio un database; 6. il view, cioè i componenti per visualizzare i dati contenuti nel model e si occupa dell'interazione con utenti; 7. il controller che riceve i comandi dell'utente (in genere attraverso il view) e gestisce la logica dell applicazione Nel contesto Web i tre componenti si applicano al client (view), al server Web (controller) e alla persistenza di dati, cioè al database (model) 8. Approfondimento ZEND e STRUTS Cos è ZEND? Cos è Struts Zend Framework ZF ( è un framework (cioè una struttura di supporto software dotata di librerie di componenti e corredata da strumenti per il debugger) open source per lo sviluppo di applicazioni Web, ZF è scritto in linguaggio PHP 5 e orientato agli oggetti. L'architettura ZF è guidata dagli eventi che modellano il flusso dell'applicazione ZF fornisce un avanzato Model-View-Controller (MVC): Model - Questa è la parte dell'applicazione che definisce l accesso ai dati e ai database View - definisce ciò che viene presentato all'utente. La view ha il compito di formattare i dati da inviare al browser: qui è molto probabile trovare codice HTML Controller - lega l'intero pattern insieme. Manipola i modelli, al fine di decidere quale visualizzare in base alle richieste dell'utente e ad altri fattori. 101

103 Struts ( di Apache Software Foundation, è uno dei framework basato su servlet Java Struts mette a disposizione una certa tipologia di classi Action che sono dei JavaBeans (classi scritte in Java, usate per incapsulare molti oggetti in un singolo oggetto: il bean) con una particolare interfaccia che supporta il passaggio dei parametri tramite Request, Response. Struts centralizza il controllo con un unica servlet (Action Servlet) che distribuisce le richieste a piu Action specializzate per particolari operazioni. Struts fornisce un modello avanzato di MVC come si vede in figura 8888, un modello basato su una sorta di evento (Request)/azione (Action) in cui ogni richiesta del browser viene gestita dalla sottoclasse Action Struts, che determina quale azione associare alla richiesta, usando una mappa preconfigurata nel file struts-config.xml. Quando un utente invia, ad esempio, un form HTML, il framework Struts li prende in carico, valida e completa i valori accedendo al database (Buseiness Logic) fig il modello di funzionamento di Struts. Preso da Fine approfondimento Mash-up e Web Services La definizione che Wikipedia fornisce dà già un idea di cosa si intende per mash-up: un mash-up è un sito o un'applicazione Web di tipo ibrido, cioè tale da includere dinamicamente informazioni o contenuti provenienti da più fonti. Un esempio potrebbe essere un programma che acquisendo da un sito Web la lista di appartamenti li mostra utilizzando Google Maps per evidenziare dove gli stessi appartamenti sono localizzati. In pratica, si tratta di realizzare applicazioni che si servono di dati e di codice forniti da terze parti. Un semplice esempio è lo scambio che avviene nel caso di un feed-rss: un documento XML con le informazioni aggiornate, perviene ad un browser che lo elabora, lo filtra e lo mostra all utente. In altri casi si ricorre all interazione con un Web Service, che fornisce una serie di servizi ai quali si accede tramite appositi messaggi che, di norma, sono in formato XML. Google, ad esempio, offre una serie di servizi importanti (le API ) tra cui Blogger, Calendar e, molto note, le API di Google Maps, uno strumento gratuito per la gestione e manipolazione delle mappe e facilmente accessibile e integrabile nella pagina Web dell utente usando JavaScript Content Management System Un content management system (CMS), è un sistema software per la gestione dei contenuti, studiato per facilitare lo sviluppo di siti Web, di blog, di forum, di wiki, di pagine per il commercio elettronico e per lo scambio di informazioni e di conoscenze, in cui l amministratore del sito non deve necessariamente essere un esperto di programmazione. I CMS risiedono su server e hanno la caratteristica di avere una sezione (front end) che è quella che l utente che si collega al sito vede, e una sezione nascosta (mack end), aperta ai soli amministratori del sistema, che serve per organizzare le informazioni. I CMS dispongono spesso di moduli aggiuntivi (plugin) per funzioni specifice (slideshow, calendari condivisi, gestione eventi ecc.). Lo svantaggio è che non sono facilmente integrabili con le proprie applicazioni personali e sono un po legati a canoni standard. Ricordiamo alcuni nomi: Joomla, Drupal e WordPress che attualmente è uno dei CMS più semplici e versatili con una comunità mondiale attivissima. WordPress Anche se in origine WordPress è nato per creare blog, si è presto evoluto in un completo ed eccellente Content Management System, una applicazione Web, in grado di gestire dinamicamente i contenuti grazie a un pannello di controllo accessibile dall amministratore del sito ( si veda Basandosi su temi prestabiliti è possibile in poco tempo arricchire il proprio sito di articoli, pagine, documenti, recensioni, foto, filmati, messaggi, temi, commenti. Per orientarsi in WP è molto importante capire, almeno concettualmente, come è strutturato un tema (per un approfondimento si veda Joost de Valk: 102

104 Fig hhhj una tipica home page di WP è divisa in quattro macroaree: 9. header 10. loop 11. sidebar 12. footer fine dida Come si nota dall immagine (fig hhhj), una tipica home page di WP è divisa in quattro macroaree ciascuna delle quali con un significato preciso: 13. l header che contiene l intestazione del sito ed è tipicamente statico 14. il loop che è l area principale della pagina, in cui vengono mostrati i contenuti, cioè gli articoli (Post), che vengono estratti in modo ciclico dal database 15. la/e sidebar i cui contenuti vengono generati dai widget inseriti nelle sidebar dal pannello di amministrazione di WordPress 16. il footer che contiene le informazioni di fondo pagina. Queste aree corrispondono a file php che sono racchiusi nelle cartelle presenti sul server. Tali file sono modificabili sia dal pannello di controllo, che via codice php. In particolare sono interessanti i quattro file seguenti: 17. index.php, contiene il ciclo (loop) che legge da database i post più recenti e li mostra a video sotto forma di una lista in ordine cronologico dal più recente al più vecchio 18. single.php, usato per il controllo della pagina relativa al singolo post 19. archives.php, contiene gli elenchi di post divisi per categoria, tag, mese di pubblicazione o autore. 20. page.php, usato per visualizzare le pagine statiche WP esegue continuamente un loop per ogni nuovo post o pagina inserita o modificata dall amministratore (fig dddd1). Le operazioni del ciclo consistono nel ricercare nel database ed emettere a browser il titolo del post, il suo riassunto, il contenuto, l autore, la data di pubblicazione ed ogni altra informazione aggiuntiva. 103

105 (fig dddd1) Le operazioni del ciclo che WP esegue per ogni pagina o Post XML+JavaScript = AJAX L interattività con l utente ha trovato la sua massima espressione in AJAX ( Asynchronous JavaScript and XML ). Questa tecnica non è una nuova tecnologia ma utilizza una combinazione di: 21. HTML e CSS per il markup e lo stile 22. DOM (Document Object Model) per la manipolazione degli oggetti 23. XMLHttpRequest per l'interscambio asincrono dei dati tra il browser e il server Web 24. XML: in genere viene usato un file XML per lo scambio dei dati. Tale file viene generato dinamicamente da uno script lato server Nota Il vantaggio di usare AJAX ha un unico neo: bisogna fare attenzione alla larghezza di banda della connessione, perché, non tutti dispongono di una banda adeguata e il vantaggio dovuto all interattività potrebbe trasformarsi in una lentezze di caricamento dei dati inaccettabile, soprattutto se si hanno continue richieste al server. L oggetto XMLHttpRequest è il cardine delle applicazioni basate su AJAX. Esso possiede una serie di metodi (open, send, ecc) e proprietà (responsetext, responsexml, ecc) definiti dal W3C. Il classico problema di dover recuperare dati da server senza dover necessariamente ricaricare l intera pagina viene risolto tramite questo oggetto che permette di inviare al server una richiesta (Request) e di ottenere una risposta (Response). La procedura AJAX opera in tre passi successivi (fig. aja1): 25. sul browser una funzione JavaScript crea un istanza dell oggetto XMLHttpRequest. Questo oggetto include l URL del server da chiamare su cui risiede l applicazione e il dato che può essere inviato come parametro nella URL. Infine viene predisposta una funzione di callback. 26. Quando si invia la XMLHttpRequest la pagina HTML continua a processare gli eventi (gestione asincrona). Il server riceve la richiesta, la elabora e ritorna un file XML 27. Una volta ricevuta la risposta l oggetto XMLHttpRequest chiama la funzione di Callback preconfigurata. Questa funzione aggiorna la pagina HTML in base al documento XML. Le parti di pagina variate sono immediatamente aggiornate sul browser 104

106 28. Fig aja1 la procedura AJAX: una funzione JavaScript sul browser crea un istanza dell oggetto XMLHttpRequest e predispone una funzione di callback. 29. Il server riceve la richiesta, la elabora e ritorna un file XML 30. La pagina HTML è aggiornata in base al documento XML pervenuto. ESEMPIO Validazione con AJAX Capita spesso, in Internet, di inserire dati in un modulo preformattato (form) in cui i dati, normalmente, devono essere convalidati. E possibile che la convalida venga fatta attraverso un programma lato Client, ad esempio, in Java Script tramite il quale si va a verificare se un campo è numerico, oppure se il formato della è conforme. Tutto ciò va molto bene ma non sempre è sufficiente. Pensiamo, ad esempio, al controllo di un nome già registrato, o al codice di una carta di credito o a una qualsiasi informazione che risiede sul database del Server. In questi casi la tradizionale applicazione HTML prevede l invio della pagina al server, che elabora i dati e rinvia al Client una nuova pagina HTML che sostituisce (rinfresca) la pagina precedente con i risultati richiesti. Questa procedura, talvolta, risulta noiosa per l utente, soprattutto quando la pagina contiene qualche parametro errato: i tempi di reintroduzione dei dati e di rielaborazione si allungano di molto. Sarebbe molto comodo poter far convalidare un form al server senza rinfrescare l intera pagina ogni volta. Usando AJAX i dati possono essere convalidati pressochè in tempo reale, in modo interattivo, quando l utente digita i tasti nei campi presenti nel form della pagina HTML. In questo caso i dati sono processati Asincronamente dal server mentre la pagina HTML locale continua a processare gli eventi. Se l utente commette errori essi vengono istantaneamente segnalati dal server al client senza che l intera pagina HTML venga rinfrescata! Con AJAX può essere introdotto un controllo sull'evento onchange o su OnKeyUp della casella di testo: cio ci informerà tempestivamente che il nome inserito non è valido, magari evidenziando il testo in rosso (CSS + Javascript) oppure che va tutto bene, con il testo che si colora di verde. Nell esempio si ottiene una validazione positiva (bordo verde) e negativa (bordo rosso) nel momento stesso dell inserimento dei dati, ottenendo questoi risultato (fig hhh1-a, hhh1-b, hhh1-c) Fig hhh1-a l output su browser <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css">.bp_invalid color:red; 105