 |
J A V A Solo una tazzina, devo stare attento alla mia assunzione di caffeina. Oh, sì, mi da' energia, ma anche i tremori... nella mia pagina web? Certamente, perchè no? Tutti lo usano..." |
|
J A V A Solo una tazzina, devo stare attento alla mia assunzione di caffeina. Oh, sì, mi da' energia, ma anche i tremori... nella mia pagina web? Certamente, perchè no? Tutti lo usano..." |
Dopo questa lezione sarai in grado di:
La promessa di Java, quando fu introdotto dalla Sun Microsystems nei primi anni '90, era molto impegnativa, e, secondo alcuni, eccessiva. Appena riusciremo a scrivere linee di codice Java, ci renderemo conto del fatto che questo e' un nuovo linguaggio di programmazione che permette a ciascuno di noi di creare applicazioni, o "applet" che possono girare su ogni sistema, in ogni posizione che supporti la "Java Platform":
Con la tecnologia JavaTM, puoi usare la stessa applicazione su ogni tipo di macchina -- un PC, un Macintosh, computer in rete, o anche le nuove tecnologie tipo i telefoni a schermo con accesso a Internet.
Quindi un Java non ha bisogno di programmi extra per girare, quando e' richiesto, tutti i suoi componenti funzionali sono inviati attraverso un network a chiunque e dovunque se ne faccia richiesta, e quindi la tecnologia runtime di Java del ricevente completa le operazione e fa partire tutti gli ingranaggi.
Per saperne di più su Java, vedi http://java.sun.com/
| media type: | java | |
| cosa fa meglio: | strumenti, manipolazione dati, classifiche e grafici, controlli di navigazione interattiva, testi dinamici, effetti alterazione immagini. | |
| elementi da considerare | giudizio | commenti |
|---|---|---|
| "difficoltà" o barriera per creazione media | bassa  alta |
Per costruire il tuo Java applet devi conoscere il programma o avere accesso ad alcuni strumenti di tipo visivo per la costruzione delle applicazioni. Ci sono, comunque, diversi campionari web di Java applet di cui si puo' fare il download ed usare. |
| "ampiezza" di audience che puo' vedere il media | ristretta ampia |
Java e' ampiamente supportato dalle versioni successive alla 3.x dei browser, sebbene tenda a girare più lentamente e meno efficacemente sui Macintosh. Ci puo' essere in questo caso un lungo ritardo ed uno spazio vuoto mentre appare la scritta "Java loading" |
| consumo di banda | basso alto |
Dipende dal tipo di interazione e dalla complessità dalla complessità della performance. Quando una pagina include un Java applet, deve comunque caricare almeno 30 piccoli file che devono essere stati tutti scaricati prima dell'inizializzazione della pagina. |
Come menzionato alla lezione 27, a dispetto di nomi simili, Javascript-- linguaggio di browser scripting, e' abbastanza diverso da Java, linguaggio di programmazione per computer. JavaScript e' letteralmente interpretato riga per riga dal browser che vi accede. I Java applet sono scritti come codice macchina lineare che viene poi "compilato" o convertito in una applicazione run-time. Una applicazione compilata può essere più potente, sicura, e veloce che uno script interpretato, ma e' anche più complesso da creare.
Sfortunatamente, dietro un numero di usi ben integrati di Java, l'uso più comune che puoi trovare nel web e' un applet per la visualizzazione di una striscia di testo che scorre, orizzontalmente o verticalmente (vedi la lezione 17 per la nostra opinione a riguardo!), o l'effetto molto comune dell'aggiunta di movimenti "liquidi" ad una immagine.
Come abbiamo visto nella nostra precedente lezione su Shockwave, i Java file tendono ad essere scatole scure e chiuse sul cui funzionamento non dobbiamo nemmeno preoccuparci. Con alcuni applet possiamo alterare o controllare le loro funzioni attraverso le informazioni che mandiamo all'applet dal nostro codice HTML.
Questa lezione non tratterà gli aspetti creativi della programmazione Java, ma ti mostrerà come aggiungere un applet esistente al tuo web site.
Il semplice codice HTML per l'inclusione di un Java applet è
<APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY> </APPLET>
dove MyApplet.class è il nome del file di un file compilato di Java applet, e WIDTH Ed HEIGHT sono le dimensioni in pixel che l'applet occupa sullo schermo. Spesso, si possono includere altre informazioni che sono mandate all'applet via parametri:
<APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY> <param name="param1" value=my1Value> <param name="param2" value=my2Value> </APPLET>
dove ogni parametro ha un nome che l'applet ricerca ed un valore, che puo' essere una stringa o un numero:
<APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY> <param name="param1" value="Il Significato della Vita è il Formaggio; <param name="param2" value=129; </APPLET>
In fine, si puo' includere un testo che verra' visualizzato solo se il web browser non supporta Java (ricordati che il browser ignora tutto cio' che e' contenuto il tag che non capisce), simile all'uso dell'opzione ALT per <img ...> (lezione 7a) o il tag <NOFRAMES> (lezione 26).
<APPLET CODE=MyApplet.class WIDTH=XX HEIGHT=YY> <param name="param1" value=my1Value> <param name="param2" value=my2Value> Spiacenti, ma sembra che il tuo web browser non possa mostrarti
questo fortissimo Java applet. </APPLET>
Quindi ogni stringa di testo dentro i tag <APPLET>...</APPLET> è ignorato dai Java-enabled browser (dal momento che non è scritto come applet tag o parameter tag) ed è la sola porzione visualizzata da un Java-disabled web browser.
Nota: Se non possiedi il documento di lavoro dalla precedente lezione, scaricane una copia ora.
In questa lezione andremo ad usare un Java applet che ci permette di mandare un file grafico ad esso, e nella nostra pagina web, di vederla ingrandita e rimpicciolita con lo zoom. Le immagini che stiamo per usare sono rocce vulcaniche prese con uno speciale microscopio che ci permette di vedere i minerali e le strutture nella roccia. Nella nostra web page, possiamo usare un Java applet che funga microscopio virtuale.
L'applet qui usato e' chiamato "ImageZoom" e maggiori informazioni sono disponibili presso http://www.vivaorange.com/ImageZoom/. Questo applet e' gratuito per un uso non commerciale (l'abbiamo trovato usando uno dei siti elencati sotto, tra le fonti).
L'HTML generale per l'uso di questo applet è:
<applet code="ImageZoom.class" width="[larghezza]" height="[altezza]"> <param name="IMAGE" value="[allocazione file grafico]"> <param name="ZoomLevel" value="[numero livelli zoom permessi]"> <param name="PanSpeed" value="[velocità]"> <param name="Cursor" value="[cursore]"> <param name="Preload" value="[precaricamento]"> </applet>
dove:
Il file dell'applet, ImageZoom.class di per sè stesso e' di soli 5k, e l'immagine che usa viene letta come parametro, come le altre opzioni elencate sopra. Controlla il sito web sorgente per maggiori informazioni su questo applet.
<html>
<head>
<title>Microscopio Java</title>
</head>
<body bgcolor="#000000" text="#EEEEEE">
<center>
<applet code="ImageZoom.class" width=400 height=265 vspace=14>
<param name="IMAGE" value="pw_vis.jpeg">
<param name="ZoomLevel" value="6">
<param name="PanSpeed" value="4">
<param name="cursor" value="1">
<param name="Preload" value="on">
Spiacenti, ma il tuo web browser non può caricare questo Applet Java :-(
<p>Qui in fondo c'è una figura dell'esempio:<br>
<img src="pw_vis.jpg" width=400 height=265><p>
</applet>
<font face="verdana,helvetica" size="2">
<br>BISHOP TUFF: Parzialmente Fuso (Luce Visibile)
fai click per usare lo zoom, muoviti verso un capo per far scorrere l'immagine
</center>
</body>
</html>
NOTA: Stiamo usando solamente uno dei file grafici; più tardi, ti mostreremo un modo più dinamico per l'uso di questo applet. Abbiamo anche aggiunto un parametro vspace nel tag applet per permetterci di avere 14 pixels di "imbottitura" verticale sopra e sotto l'applet sulla pagina. (Questo e' simile a quello che abbiamo fatto con le immagini nella lezione 20)
Il file grafico misura 400x265 pixel. Abbiamo settato gli altri parametri per avere 6 livelli di zoom, livello di scorrimento a 4, il cursore a manina. Nota anche il testo che abbiamo inserito nel tag applet per fornire un feedback se la persona che visita il sito non ha un Java enabled browser. In questo modo, puo' almeno vedere il contenuto, sebbene non possa ingrandire e rimpicciolire l'immagine. Puoi verificarlo se guardi nelle opzioni internet, alla voce Java.
Ancora, su alcuni computer (specialmente Macintosh), gli applet spesso convertono il cursore usato in NetScape anche quando hanno finito con l'applet.
NOTA; Se ci sono dei problemi, confronta il tuo codice con il sorgente della pagina esempio.
Ora abbiamo visto come caricare l'applet ImageZoom con una immagine definita in modo da poter usare lo zoom e il pan come se si trattasse di un microscopio (in realtà in questo caso l'immagine sarebbe molto più nitida e sgranata; su un computer la allarghiamo semplicemente e cominciamo a vedere gli artefatti dei pixel grafici squadrati).
Ma possiamo fare qualcosa di più flessibile usando un po' di JavaScript per creare il codice HTML per l'applet, permettendoci di scegliere tra una serie di immagini da caricare nell'applet. Per maggiori informazioni su questo aspetto di JavaScript, rivedi la lezione 27b. Per impostarlo, andremo a creare una pagina coi frame (vedi la lezione 26) che sarà tipo:
| "stage" frame
contenuto ed applet sono visualizzati qui |
| "controls" frame
menu a tendina e codice JavaScript per scrittura contenuto frame superiore |
<html> <head> <title>Microscopio Roccia Vulcanica</title> </head> <frameset rows="*,70" border=0> <frame src="stage.html" name="stage" marginheight="12" marginwidth="12" scrolling="auto" noresize> <frame src="controls.html" marginheight="8" marginwidth="8" scrolling="no" noresize> </frameset> <noframes> <h2 align=center>NOTA: Questo sito usa i frame, ma sembra che
il tuo browser non supporti questa feature.</h2> </noframes> </html>
NOTA: Questo imposta una framed web page che ha un frame di fondo alto 70 pixels ed un frame superiore che usa il resto dello spazio della finestra. Nota anche i parametri marginheight e marginwidth che ti permettono di definire l'ammontare dell'"imbottitura" o spazio extra tra il contenuto di un frame ed il suo capo.
<html> <head> <title>Microscope Stage</title> </head> <body bgcolor="#000000" text="#FFFF00"> <center> <table width=80% height=80% border=0 align=center> <tr> <td align=center> <h1>Microscopio Roccia Vulcanica</h1> <font face="verdana,helvetica" size=3>Seleziona
un esempio di roccia dal seguente menu e fai click
su <b>carica Microscopio</b> per vedere come
apparirebbe in un microscopio petrografico. <p> Ogni volta che fai click con il mouse, la figura si ingrandisce.
Muovi il mouse verso i capi dell'immagine per scorrere
lungo questa (solo dopo che l'immagine e' stata
ingrandita almeno una volta). <p> Il microscopio richiede un Java-enabled web browser. </td> </tr> </table> </center> </body> </html>
NOTA: Questo e' solo un contenuto statico per il primo sguardo alla pagina completa. Nota come abbiamo usato la tecnica di dimensionamento tabelle introdotta alla fine della lezione 21 per centrare il contenuto.
<html>
<head>
<script language="JavaScript">
<!--
function scope( rockmenu ) {
// Called from menu to either load static content into the top frame
// or to dynamically write code for embedding a Java applet
// rock identifies the file name, blurb is the caption
rock = rockmenu[rockmenu.selectedIndex].value;
blurb = rockmenu[rockmenu.selectedIndex].text;
if (rock != "") {
// ignore blank menu values and reselect the first menu item
rockmenu.selectedIndex = 0;
if (rock== "help") {
// selected help, load the opening page
parent.frames[0].location.href="stage.html";
rockmenu.selectedIndex = 0;
} else if (rock== "close") {
// call function to close the microscope
close_scope();
rockmenu.selectedIndex = 0;
} else {
// load applet with selected image
with (parent.frames[0]) {
document.write('<html><head><title>' + blurb + '</title></head>');
document.write('<body bgcolor="#000000" text="#EEEEEE">');
document.write('<center><applet code="ImageZoom.class"');
document.write(' width=400 height=265 vspace=14>');
document.write('<param name="IMAGE" value="'+ rock +'.jpg">');
document.write('<param name="ZoomLevel" value="6">');
document.write('<param name="PanSpeed" value="4">');
document.write('<param name="cursor" value="1">');
document.write('<param name="Preload" value="on">' );
document.write('Spiacenti, ma il tuo web browser non puo\' caricare questo Applet Java :-(');
document.write('<p>Ecco almeno e\' una delle immagini dell\'esempio::<br>');
document.write('<img src="'+ rock +'.jpg" width=400 height=265><p>');
document.write('</applet>');
document.write('<font face="verdana,helvetica" size="2">');
document.write('<br>BISHOP TUFF: ' + blurb);
document.write('fai click per usare lo zoom, muoviti verso un capo per far scorrere l'immagine</center>');
document.write('</body></html>');
document.close();
}
}
}
}
function close_scope() {
// provide a confirmation dialog box before closing the window
if ( confirm( "Sei sicuro di voler chiudere il microscopio?" ) ) {
parent.close();
}
}
//-->
</script>
</head>
<body bgcolor=#333333 text=#FFFFFF link="#CCFFFF" vlink="#FFCC99">
<center>
<form>
<font face="verdana,helvetica" size=1>visualizzatore java
microscopio</font><br>
<select name="rock" onChange="scope(this)">
<option value="">Seleziona un esempio...
<option value="dw_vis">Tufo Bishop Fuso (luce visibile)
<option value="dw_pol">Tufo Bishop Fuso (luce polarizzata)
<option value="pw_vis">Tufo Bishop Parzialmente Fuso (luce visibile)
<option value="pw_pol">Tufo Bishop Parzialmente Fuso (luce polarizzata)
<option value="">------------------
<option value="close">Chiudi Microscopio
<option value="help">Aiuto
</select>
</form>
</center>
</body>
</html>
NOTA: Qui abbiamo un po' di codice! Il menu creato nel corpo del documento manda un messaggio ogni volta che e' cambiato, mandando un riferimento al menu. La funzione Javascript guarda al valore dell'elemento selezionato. Se è vuoto, allora non si fa niente. Se è "help", carichiamo semplicemente la prima pagina nel frame superiore. Se è "close" chiamiamo una funzione JavaScript che prima visualizza una finestra di dialogo per la conferma, e se la scelta è per OK, chiude l'intera finestra.
Tutto il lavoro più impegnativo è già fatto quando il menu manda il nome del file di una immagine. Noi allora riscriviamo tutto il codice HTML nel frame superiore per caricare l'applet con il nome del file specificato, e scriviamo un titolo usando il testo dal menu stesso.
Una volta che la tua pagina sia funzionante, abbiamo bisogno di aggiungere un link che la apra nella propria finestra web, come abbiamo fatto nelle precedenti lezioni multimediali.
<b>sezione sottile</b> e' uno strato di roccia tagliato cosi'in modo che risulti:
sottile da permettere alla luce del microscopio di passarci
attraverso e permettere a noi di vedere la struttura della roccia. <p> <br clear=right>
A Una <b>sezione sottile</b> e' uno strato di roccia tagliato cosi'
sottile da permettere alla luce del microscopio di passarci
attraverso e permettere a noi di vedere la struttura della roccia. <p> Per avere una visione piu' dettagliata delle rocce vulcaniche, prova il nostro <a href="#vr" onClick="window.open('../scope/index.html', 'scope', 'width=540,height=480,status,menubar')" onMouseOver="window.status='apri microscopio per roccia vulcanica'; return true">Microscopio Roccia Vulcanica</a> (richiede Java) <br clear=right>
Fai esperienza con l'applet ImageZoom usandolo per le tue pagine personali. Prova a vedere come funziona anche se si modificano alcuni parametri.
Sebbene Java possa essere un linguaggio di programmazione informatico ad alto livello, si possono trovare molti siti web che forniscono applet gratuiti che si possono usare in pagine personali.
Per altri riferimenti Java, vedi la nostra breve ma intensa, lista di Java tutorial. Poi, vedi anche il CNET Java Center, ma anche il il sito principale per Java della Sun.
Fai attenzione a come adesso sistemiamo tutto per avvantaggiarci della nuova generazione del design per pagine web... rivoluzioniamo HTML 4.0!
Writing HTML:
Lezione 29e: Una Tazzina di Java (da portar via)
©1994-1999 Maricopa Center for Learning and
Instruction (MCLI)
Maricopa
Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to
mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML