Tecnologie client e server side - Introduzione al web, Schemi riassuntivi di Sistemi Informatici. Università degli Studi di Roma Tor Vergata
ElenaP
ElenaP

Tecnologie client e server side - Introduzione al web, Schemi riassuntivi di Sistemi Informatici. Università degli Studi di Roma Tor Vergata

24 pagine
13Numero di download
1000+Numero di visite
100%su 1 votiNumero di voti
1Numero di commenti
Descrizione
INTRODUZIONE AL WEB, www, php, http, HTML (HyperText Markup Language), HTML 4, css, fogli di stile, javascript e linguaggi di scripting, DOM: document object model, DHTML, xml, Java, ActiveX, browser, RIA rich intranet a...
20 punti
Punti download necessari per scaricare
questo documento
Scarica il documento
Anteprima3 pagine / 24
Questa è solo un'anteprima
3 pagine mostrate su 24 totali
Scarica il documento
Questa è solo un'anteprima
3 pagine mostrate su 24 totali
Scarica il documento
Questa è solo un'anteprima
3 pagine mostrate su 24 totali
Scarica il documento
Questa è solo un'anteprima
3 pagine mostrate su 24 totali
Scarica il documento

1

Tecnologie client side

1.INTRODUZIONE AL WEB Il progetto WWW • Partito nel 1989, il World Wide Web è un enorme deposito di informazioni disponibili via Internet il web è un sistema di documenti ipertestuali collegati tra loro e pubblicati sulla rete Internet, cui un utente può accedere per consultare pagine contenenti testo, immagini ed elementi multimediali.

• Per consultarle gli utenti necessitano di programmi interattivi detti browser, che utilizzano un’interfaccia di tipo point and click un web browser è un sw che abilita la visualizzazione di pg web ospitate su un server : essi interpretano i tag html per stabilire le caratteristiche delle pg e per costruire i link ipertestuali

• Le informazioni visualizzate dai browser sono ipertesti multimediali t.c.: cliccando sugli oggetti selezionabili, gli utenti visualizzaziono informazioni un doc ipertestuale è un testo al cui interno sono presenti dei collegamenti che rendono possibile la creazione di percorsi di navigazione attraverso cui l’ut accede in modo dinamico alle info.

• Il WWW è un middleware che agisce su Internet e si basa su 3 tecnologie: - Uniform Resource Locator (URL), - Hypertext Transfer Protocol (HTTP), - Hypertext Markup Language (HTML)

Il protocollo http • L’architettura alla base del www è cl/s:

- il C è il browser web: ha il ruolo di inoltrare le rich - il S è identificato univoc da 1 indirizzo IP e da 1 URL: è preposto alla risp delle rich ut

• L’http definisce le regole di trasmissione delle info sulla rete internet: questo protocollo def il meccanismo di rich/risp • Paradigma HTTP:

- Connessione: C stabilisce una connessione con S - Richiesta: C manda un sms di richiesta al S - Risposta: S risponde con un risultato - Chiusura: C o S chiude la connessione

• La rich di una pag complessa si traduce in 1 molteplicità di rich più semplici che il C inoltra alla S: corrispondenza univoca tra rich e file (es: 1pg con 10 img rich di 11 file) • HTTP è stateless: ogni connessione è gestita come una sessione autonoma ed indipendente, quindi le connessioni vengono chiuse qnd 1 rich è soddisfatta probl: non è possibile conservare lo stato dell’ut

2

Tecnologie client-side • Le tecnologie client-side si distinguono in fx del livello di logica applicativa

a. Tecnologie Thin Client - HTML - XML / XSL - JavaScript / VBscript

gestiscono gli aspetti di presentazione di contenuto permettono la realizzazione di controlli e animazioni per una migliore interazione (scripting) non permettono gestione/elab dati

b. Tecnologie Thick (o Fat) Client - Applet Java - Active-X - Macromedia Flash

Consentono interazioni / animazioni più accattivanti Permettono la comunicazione e l’interazione con l’ambiente server permettono gestione/elab dati

• Evoluzione storica delle tecno client-side: - ‘90: prima release HTML regole sintattiche semplici che ne favoriscono l’adozione - ’95: HTML 2.0: scontro di interessi tra e SWhouse che impedisce lo sviluppo della specifica - ’99: HTML 4.0  HTML diventa 1 stnd internazionale - ’00: XHTML  w3c inizia a riformulare l’HTML usando l’XML per rendere i doc HTML

>mente stnd per essere gestiti dai parser  sviluppo parallelo di tecnologie accessorie a HTML per potenziarne ed arricchirne le Cp: JavaScriptVbscript, applet JAVA CSS Flash

Da web1.0 a web 2.0 • Il web è in continua evoluzione: si creano sw di sempre > qualità e complessità.  transazione da wb1,0 a web 2.0 identificata con il passaggio tra siti web con interfacce semplici e contenuti creati degli editor a siti con interfacce ricche, complesse e con contenuti proposti dagli ut • Cambiamenti secondo 2 macro var:

1. la tecnologia: da un’interfaccia semplice a pg web interattive in grado di dialogare con il S senza ricaricare le pg AJAX e Adobe Flash

2. modalità di creazione dei contenuti: passaggio da un paradigma di editing topdown (solo gli editori pubblicano) ad un modello bottom up (dove sono gli ut a contribuire)  wikipedia, youtue flickr

3

2. HTML HTML (HyperText Markup Language) Linguaggio di mark-up usato per descrivere il contenuto dei doc ipertestuali: metodologia stnd per la strutturazione di info di tipo testuale che prevede la denotazione di parti di testo in funzione del loro ruolo nella pagina e la possibilità di

aggiungere form interattivi, immagini,….

• caratteristiche linguaggio di marcatura -non di programmazione- per ipertesti in cui gli elementi strutturali di un documento sono definiti da "marcatori" (<TAG>) iniziali e finali, che ne determinano al momento della visualizzazione le caratteristiche grafiche e i collegamenti ipertestuali (Hyperlink)

Esempio

I file HTML sono file di testo (ASCII) con l’estensione .html o .htm  la struttura del doc è ad albero: composizione gerarchica dei tag • Modello di funzionamento:

DTD document type definition • Per ogni doc HTML deve incominciare con la DTD: fornisce al B l’URL delle specifiche HTML che sono utilizzate nel documento. • la DTD contiene una grammatica che spec quale contenuto è permesso, indica quindi quali: - elementi - attributi - proprietà è lecito utilizzare

Caratteristiche HTML • Elementi -Un documento HTML è composto da elementi -Un ELEMENTO è racchiuso tra 2 tag che ne indicano l’inizio e la fine: <html> … </html> -Alcuni elementi hanno solo il tag di inizio: <br> (interruzione di riga) -Il contenuto di un ELEMENTO può essere: Testo o altri elementi nidificati

4

• Attributi - consentono di definire caratteristiche e proprietà di un ELEMENTO adattandolo al contesto del

documento - sono sempre nel formato nome_attributo=“valore”: <IMG SRC=“sfondo1.gif” ALIGN=“center” > - alcuni attributi sono comuni a molti elem: “id” “class” “style” - I browser permettono di usare attributi proprietari (sconsigliato poiché x browser diversi si hanno risultati diversi) • Immagini Per inserire immagini si utilizza il tag <IMG> , l’attributo srcper specifica dov’è il file da inserire

<IMG src=“images/logo.jpg”> Il browser richiede al server il file e provvede a visualizzarlo ove si trova il tag <IMG>

-rif assoluto: def univoca della localizzazione del file indipendente dalla macchina -rif relativo: def della localizzazione dei contenuti relativamente alle pagina in oggetto (cartella associata alla pg) -

Caratteristiche degli elementi Sono l’atomo principale della sintassi: gli elementi sono le strutture cui è dedicata la funzione di formattare i dati • Possiedono 2 proprietà che devono rispettare specifiche regole:

- Il contenuto - Gli attributi

• Sono classificati in 4 gruppi: 1.Headings: Elementi di struttura - definiti dai tag <H1>….<H6>: sono utilizzati per differeziare le diverse parti del testo in fx della

loro importanza - visualizzati da diversi browser con variazioni nelle dimensioni e nello stile, ma cmq in proporzione - si può variare lo stile (grassetto-sottolineato…) all’interno dell’elemento 2.Stili fisici: elementi di presentazione Sono marcatori che descrivono le proprietà grafiche del testo vincolandolo ad avere un determinato aspetto in termini di: -Stile del carattere -Dimensione -Colore

( all’inizio erano ‘unico modo per spec le mod di rappr del testo, oggi si utilizzano i fogli di stile ) 3.Stili logici Descrivono che funzione ha una parte di testo, anziché stabilire come viene visualizzato. Sarà il browser a decidere 4.Hyperlink • I link ipertestuali Permettono di esprimere i collegamenti tra diversi doc web rimandando: - ad un'altra parte dello st doc -ad 1 altro doc -ad un doc su un diverso server • L’ Anchor tag: specifica un collegamento ipertestuale: -HREF: attributo che definisce il link cui è collegato il testo -Il testo contenuto in <…> è quello mostrato agli utenti

5

Modello di funzionamento • per effettuare file si usa il formato URL:sequenza di caratteri che identifica univoc una risorsa sul web. È composto da 3 parti: 1. tipo di server = il protocollo usato (es:http) 2. nome dell’host in cui si trovano i dati 3. path o nome file della risorsa

tipo server://nomehost/nomefile

• per rich 1 pg web: 1. l’ut spec l’URL 2. il B chiede al S il dc 3. il S invia il doc attraverso il protoc http 4. -quando il B vede il riferimento all’img

richiede al S la risorsa indicata ( protoc http) 5. il S identifica l’img e la invia le img sono file separati dal doc HTML (meccanismo identico se l’URL è indicata non esplicitam ma attraverso un click di 1 link)

-

Form HTML • per raccogliere informazioni (esplicite) dagli utenti si definiscono le voci da inserire incluse tra i tag: <FORM></FORM> • Il passaggio dei dati dal B al S avvienecon 2 mod: 1. method=“get”: i dati vengono spediti al server associati

all’URL della pagina successiva; la stringa può contenere MAX 255 caratteri;

2. Se method=“post”: i dati vengono passati in uno streaming separato; il form può contenere una quantità illimitata di caratteri.

<FORMmethod="get"action="http://ww w.xyz.com/pagina.asp">...</FORM> <FORM method=“post"action="http://www.xyz.c om/pagina.asp">

tag fondamentali per la definizione degli elementi di un form: <INPUT>: utilizzato per aggiungere caselle di testo, checkbox, pulsanti d invio <SELECT>: utilizzato per aggiungere Menù a tendina (caselle combinate) <TEXTAREA>: utilizzato per campi che prevedono l'inserimento di molto testo

Struttura doc HTML

- Inizia con il doc type -<html1>include tt gli elem della pg

-<head> da indicazioni sulla pg e contiene:

1-<title> è il titolo dell pg visualizz sulla

barra superiore 2- data di pubblic e data di scad e keywords

-<body> costituisce il contenuto della pg

-<p> contiene i paragrafi

-<a> indica i link -<img> indica le img

-<obj> indica la presenza di 1 oggetto (

flash movie)

6

Standard HTML • Nasce la necessità di standardizzare il linguaggio per garantire che la rappresentazione della pagina sia omogenea consorzio W3C • Nuove versioni di HTML: - HTML 1.0: formattazione, liste, riferimenti ipertestuali, immagini - HTML 2.0: tabelle, form di inserimento dati, frames, mappe client-side - HTML 3.0: tabelle avanzate, font, allineamento del testo, sub/superscript, testo attorno a immagini -HTML 4.0: cascading style sheets, simboli matematici

Limiti HTML 2 macro elem:

1. impossibilità di una interazione con lut senza prima caricare la pg impossibile validare i dati di un form senza prima spedirli al server ( intro di JavaScript&co.)

2. mancanza di separazione tra contenuto e presentazione poco agevole fare modifiche al testo ( introduzione di XML e XSL)

7

3. I FOGLI DI STILE HTML 4 e CSS • HTML 4 introduce, mediante il concetto nuovo di Cascading Style Sheet un primo livello di separazione tra: - elementi grafici - markup “strutturale” • Il cascading style sheets è un linguaggio usato per descriverle modalità di presentazione di doc scritti con linguaggi basati su marcatori tra cui HTML • È il primo tentativo di separare il contenuto dalla presentazione tc:

- HTML definisce i contenuti - CSS specifica gli aspetti di presentazione

• vantaggi: -pulizia del codice: riduzione delle ripetizioni -omogeneità dell’aspetto grafico della pagina -modifica rapida dell’aspetto di tutti gli elementi con = stile -possibilità di gestire più tipi di visualizzazioni per la medesima pagina utilizzando più versioni di CSS

CSS CSS: specifica della presentazione grafica separata dal contenuto • costituito da

- differenti livelli tc ciascuno è costruito a partire dal quello precedente aggiungendo nuove funzionalità (CSS1 CSS2CSS3….)

- differenti profili costruiti per soddisfare le esigenze di diversi C (disp mobili, stampanti…)

• 3 concetti: 1. -Style Sheet: specifica testuale di regole di

formattazione da applicare al testo 2. -Pattern: configurazione di elementi del testo 3. -Azione: specifica dell’aspetto grafico da

applicare ad un pattern • E’ possibile definire gli stili: - all’interno della pagina web (inadatto se + pagine devono usare lo stesso insieme di stili)

-in un file a parte (.css) collegato ad una o più pagine HTML mediante un opportuno <link>: <link rel=“stylesheet” type=“text/css” href=“style.css”> • I CSSsn composti da regole per definire gli aspetti visivi e il posizionamenti degli elementi nella pg tc permettono:

1. di selezionare elementi 2. di selezionare classi 3. di selezionare id

8

Mediante l’utilizzo degli stili, anziché specificare per ogni porzione di testo le caratteristiche di visualizzazione, è possibile collegarlo ad uno stile predefinito i CSS attraverso una avanzata gestione dei contenuti migliorano sensibilmente l’aspetto delle pg web

Evoluzioni CSS • I CSS si sono sviluppati in unione con HTML4:nel 96’ nasce CSS1 E nel 97 CSS2 • diffusine limitata dalla scarsa CP dei B di gestire realmente questa specifica • ancora oggi nessun B ha pienam implume CSS2: ciò ha reso l’adozione di queste tecno difficile

9

4. JAVA SCRIPT Scripting language client side • JavaScript (Netscape) è un linguaggio di scripting (programmazione interpretata, non compilata) a metà tra - il più complesso Java - il più intuitivo HTML • È un linguaggio di programmazione client sde che viene eseguito all’interno dei B web usato per scrivere funzioni incluse nelle pg web • JavaScript non ha legami con Java: -Java è usato x applicazioni autonome: viene prima compilato (bytecode) poi eseguito su JVM -JavaScript viene inserito in mezzo al codice HTML(embedded code) e interpretato dal browser I due linguaggi hanno in comune sintassi (scritta direttamente nel codice web) ma è impossibile creare un programma complesso in JavaScript

Motivi della diffusione • la facilità d’uso permette di customizzare solo stnd creati da altri programmatori: esistono innumerevoli script pronti per essere customizzati. • Il codice semplice ed auto esplicativo • buon supporto offerto dalla quasi tot dei B questi elementi hanno reso JavaScript lo stnd de facto nello scripting V-side In risposta Microsoft ha proposto VBscripte Jscript.

Modello di funzionamento 1. la sintassi è scritta nel file HTML 2. il B attraverso un motore di scripting legge le arti in JavaScript

3. Esecuzione degli script • Le istruzioni in Javascript possono essere “lanciate” in esecuzione:

1. in maniera sequenziale all’interno della pagina HTML (l'esecuzione è automatica), per il codice all'interno degli script individuati dai tag <SCRIPT>(eventualmente da file esterni);

2. in seguito all'attivazione di un evento, come un click del mouse o la pressione di un tasto; 3. Al click di un link, nella forma: <A HREF="Javascript:comando"> 4. i valori di variabili Javascript possono essere richiamati dinamicamente dall'HTML includendoli

tra i caratteri &{e };%

10

Eventi • Tramite l’interazione con il DOM, con JavaScript è possibile produrre eventi all’interno di una

pagina: 1. apertura di una nuova finestra con caratt predef 2. validazione di form 3. sostituzione delle img al passaggio del mouse 4. creazione di menù dinamici

• gli aventi possono essere: attivati dai pulsanti del mouse attivati dal movimento del mouse attivati dalla tastiera legati alla selezione di elementi legati al ciclo di vita della pagina nel browser

• Ad un evento può essere associata: una sola istruzione un blocco di istruzioni (funzione)

Gli eventi, per poter interfacciare HTML con Javascript, sono inseriti nei tag HTML: <A HREF="pagina.html" onclick=“alert('ciao')” >Link</A>

DOM: document object model • Modello ad oggetti del doc indip dalla piattaforma e dal linguaggio usato per rappresentare la struttura della pg HTML o XML • Attrav il DOM è possibile trattare 1 pg HTML come un oggetto tipico dei linguaggio di progr OOP (obj oriented programming)

• JavaScript usa la struttura DOM dei doc per poterli manipolareè possibile tramite DOM: 1. accedere alle proprietà della pg:

2. validare indirizzi mail:

DHTML • L’HTML dinamico è una collezione di tecno utilizzabile simultaneamente per creare siti web interattivi e animati. Al suo interno ci sn: 1. la tecno di markup statico (HTML) 2. lo scripting lato C JvaScript 3. i ling di presentazione CSS 4. il DOM • 1 pg DHTML è tc la sua visualizzazione cambia dp che è stata caricata in risposta alla azioni dell’ut o in fx di 1 stra definita ex-ante • Si usa DHTML per:

- creare bottoni che cambiano quando si passa con il mouse

11

- creare dei menù dinamici - creare dei semplici giochi

• Adobe Flash ha sostituito DHTML in quanto è 1 tecnologia - + facile da sviluppare - Indip dal - Permette > interattività - Ha qualità grafiche>> - Permette di gestire periferiche diverse

12

5. XML Necessità di formato stnd • è un metalinguaggio che offre un metodo stnd per immagazzinare scambiare ed elaborare i dati: La necessità di uniformità dei formati nasce dal fatto che chiunque deve poter connettersi ad un insieme di dati sulla rete • i formati più diffusi sul web sono: 1. HTML: ha formato aperto tc - ness1 ne è proprietario 2. PDF: ha formato chiuso tc - Adobe ne è proprietario anche se le spec sono state pubblicate • Sono 2 formati di presentazione che descrivono come i dati dv essere visualizzati senza indicare cosa essi significano  problemi per l’indicizzazione con motori di ricerca: la mancanza di separazione tra contenuto e present genera dispersione dei dati XML fornisce 1 sol al problema def 1 modo per tenere traccio del senso logico dei dati in modo tale da permettere l’indicizzazione

XML VS HTML come l’HTML : • è un linguaggio descrittivo: descrive un contenuto ma non è in grado di indicare le operazioni da eseguire • contiene simboli di markup per descrivere i contenuti di una pagina o di un file diversamente da HTML:

HTML XML • descrive il contenuto di una pagina

Web in termini di come deve essere visualizzata e come deve avvenire l’interazione con essa

descrive i contenuti semantici, utilizzando un insieme di marcatori speciali descritti in un DTD(Document Type Definition) o in un XML-Schema: il contenuto è separato dagli aspetti di presentazione e interazione, delegati ai template o fogli di stile XSL(eXtensible Stilesheet Language)

• È standardizzato in modo rigido: utilizza un insieme fisso di tag

è estensibile in quanto non utilizza un insieme fisso di tag: i marcatori sono illimitati e auto-definibili

13

Caratteristiche XML • Fornisce un modo uniforme per descrivere, elaborare e pubblicare informazioni strutturate (standard del W3C) • È un metalinguaggio ovvero è 1 grammatica attraverso cui è possibile def strutture di dati: con XML è possibile creare linguaggi ad hoc con cui gli attori si scambiano info elab da strumti stnd ( parser) • XML scinde il contenuto informativo dalla sua rappresentazione grafica

• XSL :rappresenta graficamente il contenuto stile • XML: rappresenta il corpo testuale del documento tracciato • DTD: descrive la struttura semantica regole

DTD e XML SCHEMA La struttura di un documento XML può essere definita mediante -DTD(Document Type Definition) -XML-Schema

lo standard XML-Schema, sostitutivo dei DTD, permette una definizione più precisa dei tipi di dati contenuti nei singoli elementi XML

Un documento che - rispetta la sintassi del linguaggio XML si dice “well formed” - rispetta anche la sintassi definita da un particolare DTD o Schema è detto “valid” rispetto ad esso. la verifica di validità può essere effettuata in modo automatico utilizzando un parser XML (Il controllo non è obbligatorio).

Si usano 2 File: XML e DTD che consente di interpretare e verificare il contenuto XML: ogni elemento del file XML deve essere descritto nel corrispondente DTD

Il DTD può essere un file separato oppure può essere inserito nell’intestazione del file XML

XSL (XML Style Language) • XML è un contenitore di dati e metatag che non specifica alcuna indicazione sulle mod di rappres nec di 1 meccanismo che dato in input il file XML dia in output il doc formattato: uno dei metodi più diffusi di conversione è l’XSL (alt: client specifici, applet Java, Adobe Flash) • XSL è la versione per XML del concetto di fogli di stile (già presente nell’HTML con i CSS)  linguaggio per rappresentare l’output di XML formattato graficamente;  consente di convertire un doc XML in un altro XML o in un qualsiasi formato testuale (funzionalità aggiuntiva rispetto CSS)

14

 consente di adattare i contenuti presenti in un documento XML alla rappresentazione su diversi canali: HTML per il Web WML per un cellulare WAP C-HTML per un cellulare I-Mode PDF per la stampa su carta VoiceML per la sintesi vocale

XSL produce doc in diversi formati in relazione al particolare supporto

Ambiti applicativi Archiviazione e interscambio documenti: interrogazioni più mirate perché ogni elem è identificato come tag Modeling concettuale ed operativo: Interoperabilità tra applicazioni: middleware per integrare diversi sistemi Interscambio dati: se trasformo i dati in formato XML posso trasferirli in modo unitario Esistono innumerevoli linguaggi XML-based standard per le più diverse tipologie di applicazioni

Validazione e visualizzazione

Elaborazione XSL L’XSL può essere “applicato” dal server (S-side)o dal browser (C-side) Client side - il C chiede il doc e il S invia XML - il C id necessità di XSL e il S lo invia - il C id necessità di XSD e il S lo invia (3 richieste e 3 invii successivi) l’applicazione dello stile e la verifica di validità è fatta dal client

server side -il S trasf il file XMLin 1 HTML (o pDF) -invia il doc formattato al C

15

Caratteristiche doc XML 1. istruzione di processamento che indica tipo di

formato usato (sintassi)  nec per stabilire se well formed

2.a definizione DTD per indicare lo schema dati da seguire nec per stabilire se il doc è valid (anche se non valid viene gestito correttamente dal C purchè well formed) 2.b alternativa al DTD è XML-schema:stnd permette una def più precisa dei tipi di dati 3 tag greeting: è il primo contenitore di info

 segue 1 struttura ad albero con tag radice decomposto da n figli

Vantaggi e svantaggi XML Vantaggi

Motivi della diffusione

• formato di testo strutturato: contenuto+significato • compatibilità ottima on protocolli HHTP SMTP FTP • economicità della tecnologia • leggibilità da persona: possibilità di modifica diretta • flessibilità: metalinguaggio per def nuovi linguaggi • separazione di contenuto e logica • strumenti di validazione automatica stnd per tte le applicazioni (validating parser) • stnd aperto non proprietario • alta disponibilità di RU con competenze di XML • evoluzione simultanea con applicazioni di e- business • supporto di differenti lingue: facilitazione della diffusione internazionale

Svantaggi

• alta quantità di spazio occupata per rappresentare dati (contrappasso per leggibilità, indip dalla piattaforma, separazione da logica applicativa, presenza di metadati e def della struttura) • i linguaggi def a partire da XML possono essere proprietari: conseg frammentazione e duplicazione dei linguaggi • basso funzionamento con dati binari come le immagini (utile sl per testi) • considerato 1 modo regredito di memorizzazione dei dati rispetto ai DBMS:decentralizzazione dei dati fuori dalle efficienti strutture relazionali dei DB

16

5 JAVA

Il linguaggio Java Linguaggio di programmazione: - ad oggetti (derivato da C++), - multipiattaforma: progettato per essere eseguito su qualunque SO (purchè sia installato uno strato software chiamato Java Virtual Machine) A) PARADIGMA TRADIZIONALE  sw vincolato al SO

PROBLEMA Le applicazioni scritte e compilate per una particolare piattaforma non possono essere eseguite su altre. Per poter eseguire l’applicazione su un’altra piattaforma è necessario: 1. modificare il codice sorgente (per risolvere aspetti specifici relativi allo specifico sistema) 2. ricompilare l’applicazione per ottenere una nuova versione dell’eseguibile

B) PARADIGMA JAVA  sw portabile (requisito molto utile per applicazioni web che sono destinate a macchine molto differenti)

Per garantire la portabilità del software il Bytecode deve: - Istruzioni macchina della Java Virtual Machine, anziché del SO - Indipendente da hw, s.o., periferiche Lo stesso byte code può essere eseguito su tutte le piattaforme hardware e su tutti i SO per cui esiste una JVM

Applet Java • Si def applet un componente sw che viene eseguito all’interno di un web browser esecuzione in ambiante protettotc permette all’applet di svolgere sl poche fx risp ad 1 sw stnd

• Le applet Java sono dei veri e propri programmi Java (bytecode, con estensione .class) residenti su server e richiamabili mediante un opportuno tag nella pagina HTML:

<OBJECT title=“esempio" classid="java:xyz.class" width="300" height="200">

All’interno della pagina l’applet viene visualizzata in un rettangolo con dim specificate dal tag che “lancia” l’applet Il codice è eseguito da una particolare JVM attivata dal browser, chiamata Java plug-in

Modello di funzionamento

C chiama 1 pg HTML S restituisce la pg HTML specificata dall’URL C interpretando la pg, id l’esistenza di un bycode e lo richiede al S S invia il bycode C l’applet è elaborato sulla macchina client grazie al plug-in all’interno della JVM

17

Modello di sicurezza La JVM del Java plug-in, oltre ad eseguire il ByteCode Java, realizza anche un ambiente protetto (sandbox) per evitare che l’applet Java possa eseguire azioni dannose sulla postazione utente Sono considerate pericolose: - azioni di lettura e scrittura sul disco della postazione utente, - l’accesso a zone di memoria al di fuori del processo in cui viene eseguita l’applet Tali azioni sono però attivabili all’occorrenza, mediante: - firma digitale dell’applet e approvazione dell’utente - configurazione delle policy di sicurezza del Java plug-

Thick client Le applet Java, potendo anche interagire con il server, permettono la realizzazione di applicazioni Web: client più pesante perché esegue operazioni Un applet Java che dialoga con un server Java costituisce una classica applicazione di tipo client-server

Le applet sono quindi un modo per semplificare il deployment di client Java: - il client non deve essere pre-installato su tutte le postazioni utente, ma viene deployato a run-

time mediante download con la pagina Web (questo può essere un problema se il client è “corposo”, anche se il browser fa il “caching” delle applet)

- per l’aggiornamento dei client è sufficiente modificare la pagina HTML che invoca l’applet e deployare la nuova applet sul server: all’accesso dell’utente la nuova applet viene automaticamente scaricata dal browser

Le comunicazioni tra applet e server: - “tradizionalmente” si realizzano mediante RMI (protocolli di comunicazione Java): non usando

HTTP vengono tipicamente “bloccate” dai firewall - con i WebServices(XML su HTTP) è possibile by-passare i Firewall, ma è meno efficiente

(aumenta l’overhed di dati sulla rete)

Vantaggi • Permettono > interattivitàes: maschere di inserimento complesse, visualizzatori grafici • Indipendenza dalla piattaforma grazie alla JVMeseguiti su un qlq sistema operativo • Supporto da qualunque browser. • Esistenza di un ambiente protetto che salvaguarda la sicurezza dell’ut evitando azioni dannose sandbox • Sono conservate nella cache dei web in modo da essere ricaricate rapidamente in occasione di un successivo riutilizzo • Possono avere accaeso illimitato se consentito esplicitamente alla macchina • Esecuzione rapida della logica applicativa • Possibile utilizzo per applicazione real tima • Scaricate dal server non nec 1 preventiva istallazione Svantaggi • Nec di un Java plug-in non istallato di default sui B • Non possono essere eseguite in assenza di una JVM • Complessità per creare un’interfaccia di tipo applet Java • Accesso limitato al sistema per motivi di sicurezza • Possibile blocco delle applet da parte di amministratori • Spesso si richiedono versioni specifiche di java

18

7.ActiveX Caratteristiche • I controlli ActiveX sono la risposta Microsoft alla tecnologia applet Java, si differenzia da un applet Java in quanto:

- Non è bytecode ma codice compilato(file con estensione .dll) - Può essere eseguito solo in ambiente Microsoft(non è portabile) - Può essere scritto in un qualsiasi linguaggio(Visual Basic, C#,… incluso Java)

• Un controllo activeX è 1 componente sw riutilizzabile basato su Microsoft Component Obj (COM) interagibile su ogni applicazione predisposta , per estenderne le fx e le Cp fornisce ai progr della fx riusabili di tipo visuale (per rappr grafica all’ut delle info) • Il modello di funzionamento è simile a quello delle applet Java, ma:

- Codice compilato ( .dll) - Non c’è una sandbox Minore protezione da malicious code - Per compensare la minor sicurezza, introduce le funzionalità Autenticode®: certificazione

digitale degli ActiveX - Codice non portabile (solo su Microsoft) java: 1! Linguaggio & n piattaforme activex: n linguaggi & 1! Piattaforma ( non devo più precompilare in java ma posso usare 1 qlq linguaggio)

Elementi limitativi • Non compatibilità con applicativi nn M eseguibili slu da Internet Explorer: impossibilità i raggiungere 1 parte di utenti • Pericolosità: non esiste restrizione all’accesso e quindi se si scarica inavvertitamente un controllo scorretto, qst può danneggiare seriamente il sistema.

Modello di funzionamento

Browser plug-in • Plug-in: programma applicativo non autonomo che interagisce con un’applicazione principale per aggiungergli nuove fx • B Plug-in :Estensioni del browser che ne aumentano le funzionalità; consentono in particolare di: - inserire nuove tipologie di oggetti in pagine HTML (embedded object) Es: riprodurre filmati all'interno del browser - visualizzare nel browser documenti diversi dall’HTML (es. PDF Reader) - aggiungere una nuova barra degli strumenti o nuove voci di menu (es. Google Toolbar), • I plug-in possono comunicare con la pagina HTML mediante Javascript

19

• Alcuni plug-in sono predefiniti nel browser, altri devono essere scaricati e installati appositamente. • I plug-in sono specifici per il particolare browser

20

8. RIA RIA rich intranet applications • Sono applicazioni web che forniscono una user experience simile a quella fornita dalle applicazioni “desktop”: -animazioni -Interazioni con i dati senza refresh di pagina -autofill dei campi • Applic che trasferiscono al C l’onere di presentare i dati , mantenendo la logica applicativa sul S • Caratteristica base: si intro 1 layer di codice intermedio detto client engine tra Ce S

- è scaricato alla prima apertura della pg - opera come 1 estensione del B - fornisce fx di comunicazione con il S - ha in carico la visualizzazione dell’interfaccia UT

 complessivo miglioramento dell’interfaccia e delle Cp di risp del sistema

Comparazione con arch web trad • Applic web trad: centralizzano tutte le attività attorno ad un arch C/S trad con thin client tutto il carico computazionale è sul S e sul C rimane sl visualizzazione. Probl: tutta l’interazione deve passare dal S • Applic RIA: tecno che può eseguire delle istruzioni sul C evitando il continuo passaggio di dati vs il S

asseX: total costo f owernership asseY: usabilità 1. mainframe: poco costosi ma poco

usabili 2. C/S: costi >> per gestire una struttura

distribuita a frante di una >usabilità 3. WEB: è un compromesso tra

centralizzazione e usabilità: è cmq asso il grado di personalizzazione

4. RIA: si torna ad un livello alto di accentramento ma si mantiene una buona usabilità

Benefici • Ricchezza: offrono interfacce ut non ottenibili con HTMLfx aggiuntive che includono tt ciò che può essere implume elle applicazioni desktop • > interattività: non è + nec interagire con il S per ogni operazione e quindi si ottiene una rapidità di esecuzione >> • Bilanciamento del carico tra C e S: si risparmiano risorse sul S tc diminuiscono i tempi di risposta • Comunicazione asincrona: ilC può interagire con il S in modo asincrono senza bisogno che l’ut termini 1 qlc operazione si possono spostare dati tra C e S senza che l’ut aspetti • Efficienza di rete: riduzione del traffico di rete dato che un cl spec per 1 applicazione può decidere in modo più accurato quando i dati devono essere scambiati con il S

21

Problemi • Sandbox: RIA eseguite in un ambiente protetto e quindi hanno 1 accesso ristretto alle risorse del sistema • JavaScript disabilitato: spesso per far fx le RIC è nec la presenza di JavaScript, che però è talvolta disabilitato di default • Velocità dei C: per ottenere indip dalla piattaforma le RIC usano Javascript che però portano con sè un degrado delle prestazioni (come tutti i linguaggi interpretati) • Tempo per il download degli script: l’intelligenza aggiuntiva lato client deve essere scaricata dal S al C almeno per la prima volta di utilizzo • Scarsa visibilità dai motori di ricerca: spesso i motori di ricerca non sono in grado di indicizzare i contenuto delle rRIC

Tecnologie alternative • Possono essere implementate attraverso diverse tecnologie:

- AJAX - Flash MX - Flex 2.0 - Java web start - MS WPF - Eclipse

• Ambiti di utilizzo differenti e complementari: non esiste una tecnologia in assoluto superiore Asse X - alto: scarsa cp operativa ma alta cp di

gestione delle immagini - basso: scarsa cp di rappresentazione dei

contenuti ma alte prestazioni di elaborazione dei dati

Sap+flex

22

AJAX (asynchronuos JavaScript and XML) • Prima tecnologia lato client in grado di eseguire computazioni è Javascript. Da quando il suo uso è combinato con altri strumenti formando il DHTML è possibile realizzare RIA senza una sola unificta C-sideLa nuova tecnologia derivante è detta AJAX • Forte complessità alla base dalla nec di coordinamento di molte tecnologie  creazione di 1 framework AJX: strati applicativi intermedi che forniscono a propri morsetti delle fx complesse ma comuni a V differenti ( risolvo problemi coordinamento) • L’approccio AJAX non permette di creare applicazioni davvero RICH perche i è vincolati alle basse potenzialità di interazione presentazione del B - • Combinazione di tecnologie esistenti:

- XHTML - Java Script - CSS - DOM - XHTML http request object interazioni tra C e S su una parte della pg senza modificarla interamente

• Architettura applicativa:

• Modello di comunicazione: -modello C/S stnd: le elaborazioni Ce S sono tra loro separate e alternate lughi Dt in cui 1 ruolo è passivo -modello AJAX: permane cmq 1 Dt in cui una delle due applicazioni è passiva ma questo è molto ridotto parte dell’elaborazione è in locale tc ho una distribuzione più continua

• Osservazioni Aspetti positivi Aspetti negativi • Alcune implementazioni sembrano promettenti

• Il supporto di browser diversi può essere difficoltoso

23

• Il consumo di banda è ridotto • Possibilità di gestire funzionalità utente a passi successivi

• Necessità per gli sviluppatori di conoscere un ampio spettro di tecnologie

ADOBE flash Una tecno popolare per la realizzazione delle RIA è ADOBE Flash • Tenc del 96 nata con l’obiettivo di realizzare una applicazione:

- per realizzare animazioni - per creare banner pubblicitari - per creare giochi

• in t si è sviluppata fino ad diventare 1 ambiente complesso - per realizzare interi siti web - per la creazione di RIA - per la creazione di applic per dispositivi mobili  i prog realizzati in Flash sono detti “filmati Flash” • le evoluzioni:

- creazione di 1 ling di scripting - la possibilità di fare parsing di doc XML - la possib di scambiare dati con S in modo asincrono - la possibilità di generare filmanti dinamicamente

Flex • FLEX :gruppo di tecno appositamente studiate per supportare lo sviluppo di RIA basate su Flash: la possibilità di creare runtime i filmeti ha costituito 1 step fond per lo sviluppo di RIA perche permetteva di def i filmati in fx delle rich degli ut • Flex permette di creare interfacce ut attraverso MXML • vantaggi

- incorpora nativamente componenti di utilità generale che permette 1 sviluppo di sw rapido - è indip dal B: grazie al plug-in che diventa 1 strato intermedio tra il filmato e il B il

programmatore non deve preocc dell’esistenza di diversi B ma può focalizz sul sul filmato - ampio spettro di fx disponibili: molti componenti riutilizzabili - popolarità: sia dal pvd del # di programmatiri che degli u - plug-in leggero - ampie potenzialità di interazione con l’ut che migliorano l’esperienza di navigazione

Confronto tecnologie tecno in grado di aumentare la potenzialità di interattività del B web:

24

Web 2.0 Con web 2.0 si fa rif ad una seconda generazione di servizi internet based che enfatizza gli aspetti di collaborazione e condivisine tra gli utenti Il termine oggi ha un’accezione molto + ampia e sfumata tc coinvolge diversi aspetti:

Il web 2.0 è: • Un insieme di modalità attraverso cui è possibile erogare intere applicazioni unicamnte mediante browser internet come ambiante applicativo tc nulla risiede un PC client ma l’intera logica applicativa appartiene al server Google applications • Controllo degli utenti delle info pubblicate sul dito YOUTUBE • U architettura di partecipazione democratica che incoraggia gli ut a aggiungere valore all’applicazione Google maps • Un interfaccia utente altamente interattiva basata su RIA GOOGLE MAIL Problemi

1. enfasi eccessiva sul termine? Vedi hype cylce 2. ampio disaccordo sui trend attuali e sulla

correttezza del termina web 2.0

3. assenza di un unico driver che guidi l’implementazione non esiste un player di rifermento ma tante case i competizione tra loro con soluzioni differenti

Questa è solo un'anteprima
3 pagine mostrate su 24 totali
Scarica il documento