HTML-ul a impresionat dintotdeauna prin simplitate si utilitate.
Dar odata cu evolutia Internetului lucrurile au inceput sa se dezvolte, simplitatea a inceput sa devina prea „simpla”, si utilizatorii au inceput sa simta nevoia de pagini mai dinamice, mai colorate, mai interactive. Cum HTML-ul era destul de limitat din acest punct de vedere, a fost nevoie de intersectarea cu programarea, in speta cu scripting-ul, pentru a da viata paginii .html.
In plus, autorii paginilor au inceput sa urmareasca din ce in ce mai mult un scop, si anume acela de a atrage cat mai multi vizitatori. Cu toate ca acuratetea counter-elor putea fi pusa uneori la indoiala, este clar care sit este mai popular dintre unul cu 10.000 de vizitatori pe saptamana si unul cu 1.000. Crearea de pagini web a inceput sa se asemene unei curse de atragere a vizitatorilor pe o pagina anume. Competitia pentru vizitatori era din ce in ce mai aprinsa. Internetul devenise un fel de TV cu milioane de canale. Iti dai seama ca nu mai puteai atrage vizitatori printr-un text simplu, doua GIF-uri, trei linkuri, doua maquee-uri si poate un formular al carui text proaspat introdus a disparut misterios pe serverul sitului respectiv. Chiar si implementarea DHTML-ului sau a CSS-ului nu mai putea face fata cerintei tot mai mari pentru pagini colorate, dinamice si interactive.
Una dintre cele mai inovative tehnologii web la vremea respectiva a fost abilitatea de a furniza o aplicatie direct in browserul utilizatorului. Aceste mici programe cunoscute sub denumirea de applet-uri realizeaza mici instructiuni pe PC-ul client folosindu-se de actiunile realizate de utilizator cu ajutorul mausului sau a tastaturii. Poti sa inserezi applet-uri in documentul HTML folosind creatiile proprii realizate cu ajutorul limbajului de programare Java, sau sa descarci applet-uri gratuite care se gasesc pe Internet. In timpul executiei, aceste programe pot genera continut dinamic, pot sa interactioneze cu utilizatorul, sa valideze formulare sau chiar sa creeze ferestre si sa ruleze aplicatii independent de paginile HTML. Posibilitatile sunt de fapt nelimitate si tin foarte mult de cunostintele si imaginatia programatorului.
In randurile care urmeaza vei vedea niste exemple si modalitati simple de introducere a continutului executabil (applet-uri si scripturi) in documentul HTML (scrierea si depanarea acestor mici programe nu reprezinta insa subiectul articolului de fata, totusi am sa-ti dau cateva adrese unde vei putea gasi documentatie legata de acest subiect).
Introducerea applet-urilor a reprezentat schimbarea modelului tipic de comunicare web, in care serverele erau cele care efectuau majoritatea actiunilor, browserele nefiind altceva decat niste simple terminale de afisaj. Prin aparitia applet-urilor, tehnologia web s-a indreptat si catre partea clientului distribuindu-i acesteia cateva dintre operatiunile care in mod normal erau realizate de catre server.
Applet-urile reprezinta si un mod de extindere a duratei de viata a unei versiuni de browser, fara a fi nevoie sa treci la o versiune noua, asa cum se intampla cand dezvoltatorii introduc o extensie noua in HTML.
Applet-urile Java – programe extrase de pe server si executate in calculatorul utilizatorului – sunt o submultime din ceea ce in standardul HTML 4.01 se numesc incluziuni (fisierele .wav, .mp3, MPEG).
Eticheta universala cu care poti sa identifici si sa incarci un fisier este <object>. Odata descarcat, standardul HTML dicteaza browserului sa afiseze printr-un mecanism intern sau extern acea incluziune (browserele au integrat soft care sa afiseze GIF-urile si JPEG-urile, insa pentru anumite aplicatii este necesar un plugin special).
Sistemul este destul de simplu: browserul rezerva o portiune de display care poate fi controlata ca pozitionare si marime de catre utilizator, applet-ului ramanandu-i controlul asupra a ceea ce va apare inauntru.
In timpul executarii, applet-ul are acces la un segment limitat al PC-ului utilizatorului. De exemplu, applet-urile au acces la maus si tastatura si pot fi modificate de catre utilizator. In plus, pot sa initieze conexiuni in retea sau sa extraga date de pe alte servere din Internet. Numarul de applet-uri care pot fi plasate intr-un document este variabil; executia lor are loc in paralel si ele pot comunica unele cu celelalte. Daca browserul poate limita accesul la sitemul PC-ului gazda, applet-urile au in schimb control total asupra spatiului virtual din cadrul browserului.
Avantajele pe care le ofera aceste mici programe sunt destul de evidente: interfete mai convingatoare si atragatoare, posibilitatea de a crea seturi unice de meniuri, campuri de text etc. In momentul in care utilizatorul apasa un buton, applet-ul raspunde prin afisarea rezultatului intr-o anumita regiune a paginii, activand un alt program sau incarcand o pagina noua.
Exista totusi si anumite dezavantaje, de aceea este bine sa stii cand trebuie sa folosesti applet-uri si cand nu. Deoarece functionarea unui astfel de program are loc pe calculatorul client, normal ca se vor consuma resurse de procesare, iar in cazul unor programe mai complexe, performanta sistemului poate sa scada considerabil. In mod similar, un applet foloseste si resurse Internet pentru a indeplini sarcina pentru care a fost conceput, dar acest lucru va incetini traficul altor aplicatii. Pe de o parte este adevarat ca aceste programe aduc un plus de culoare unei pagini, dar te asigur ca, pe de alta parte, utilizatorilor care au conexiuni dial-up le va creste incet-incet tensiunea…
Crearea applet-urilor este o sarcina a programatorilor si nu o munca pe care trebuie sa o realizeze autorii HTML. Limbajul care domina de ceva vreme incoace acest segment este Java. Dezvoltat de Sun Mycrosystems, compania californiana din Mountain View, Java este un limbaj de programare orientat pe obiecte, in care clasele pot fi utilizate si reutilizate pentru a crea aplicatii complexe. Situl http://java.sun.com/ este cel mai bun loc unde poti afla multe din secretele acestui limbaj de programare.
In continuare am sa-ti dau o lista de adrese unde poti gasi applet-uri gratuite si multe alte informatii utile legate de acest subiect:
www.jpowered.com/index.htm
http://javaboutique.internet.com/
www.javapowered.com/werks.html
www.javafile.com/
http://freewarejava.com/
www.free-applets.com/
www.ericharshbarger.org/java/
www.codebrain.com/
www.thefreesite.com/Free_Java_JavaScript/
www.javascriptkit.com/java/
www.6sense.com/applets/
www.bodo.com/Applets/
www.freewarejava.com/applets/index.shtml
www.better-homepage.com/java/java-applets.html
In continuare iti prezint codul unui astfel de applet realizat in Java care va afisa o linie orizontala care-si schimba culoarea treptat si in mod repetitiv culoarea:
public class GridHR extends Applet implements Runnable {
int num = 50;
Image offImage;
Graphics offScreen;
Graphics onScreen;
boolean raised = true;
Thread thread;
int red;
int green;
int blue;
int count;
Dimension d;
Color bgColor = new Color(0xFFFFFF);
int rmin = 0×00;
int rmax = 0xFF;
int gmin = 0×00;
int gmax = 0xFF;
int bmin = 0×00;
int bmax = 0xFF;
int minInterval = 10;
int maxInterval = 100;
int gap = 4;
public void init() {
String s = getParameter(”number”);
if (s != null) num = Integer.parseInt(s);
s = getParameter(”bgColor”);
if (s != null) bgColor = new Color(Integer.parseInt(s, 16));
s = getParameter(”red”);
if (s != null) {
StringTokenizer st = new StringTokenizer(s, “,”);
if (st.hasMoreElements()) rmin = Integer.parseInt((String)st.nextElement(), 16);
if (st.hasMoreElements()) rmax = Integer.parseInt((String)st.nextElement(), 16);
}
s = getParameter(”green”);
if (s != null) {
StringTokenizer st = new StringTokenizer(s, “,”);
if (st.hasMoreElements()) gmin = Integer.parseInt((String)st.nextElement(), 16);
if (st.hasMoreElements()) gmax = Integer.parseInt((String)st.nextElement(), 16);
}
s = getParameter(”blue”);
if (s != null) {
StringTokenizer st = new StringTokenizer(s, “,”);
if (st.hasMoreElements()) bmin = Integer.parseInt((String)st.nextElement(), 16);
if (st.hasMoreElements()) bmax = Integer.parseInt((String)st.nextElement(), 16);
}
s = getParameter(”interval”);
if (s != null) {
StringTokenizer st = new StringTokenizer(s, “,”);
if (st.hasMoreElements()) minInterval = Integer.parseInt((String)st.nextElement());
if (st.hasMoreElements()) maxInterval = Integer.parseInt((String)st.nextElement());
}
s = getParameter(”gap”);
if (s != null) {
gap = Integer.parseInt(s);
if (gap < 0) gap = 0;
}
s = getParameter(”raised”);
if (s != null) raised = Boolean.getBoolean(s);
d = size();
offImage = createImage(d.width, d.height);
offScreen = offImage.getGraphics();
onScreen = getGraphics();
int amp = maxInterval – minInterval;
red = (int)(Math.random() * amp) + minInterval;
green = (int)(Math.random() * amp) + minInterval;
blue = (int)(Math.random() * amp) + minInterval;
offScreen.setColor(bgColor);
offScreen.fillRect(0, 0, d.width, d.height);
for (int i = 0; i < num; i++) {
offScreen.setColor(nextColor());
offScreen.fill3DRect(0, 0, d.width / num – gap, d.height, raised);
offScreen.copyArea(0, 0, d.width, d.height, d.width / num, 0);
}
}
public void start() {
if (thread == null) {
thread = new Thread(this);
thread.start();
}
}
public void stop() {
if (thread != null) {
thread.stop();
}
thread = null;
}
public void paint(Graphics g) {
if (offImage != null) {
g.drawImage(offImage, 0, 0, null);
}
}
private Color nextColor() {
count++;
return new Color(
(int)((rmax – rmin) * ((Math.sin(2 * Math.PI * count / red) + 1) / 2) + rmin),
(int)((gmax – gmin) * ((Math.sin(2 * Math.PI * count / green) + 1) / 2) + gmin),
(int)((bmax – bmin) * ((Math.sin(2 * Math.PI * count / blue) + 1) / 2) + bmin));
}
public void run() {
while (true) {
offScreen.copyArea(0, 0, d.width, d.height, d.width / num, 0);
offScreen.setColor(nextColor());
offScreen.fill3DRect(0, 0, d.width / num – gap, d.height, raised);
onScreen.drawImage(offImage, 0, 0, null);
try {
thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
Raspunsul celor de la Microsoft a fost ActiveX, o tehnologie de creare de applet-uri care defineste interactiunea dintre serverele web, clienti si aplicatii Microsoft Office. Pentru mai multe detalii referitoare la aceasta tehnologie consulta pagina www.microsoft.com /com/tech/ActiveX.asp.
Daca pana acum am discutat despre continut executabil care avea in comun faptul ca datele si motoarele de rulare a programelor erau separate de browser si de documentul HTML, este cazul sa trec la JavaScript.
Fata de ce am discutat pana acum, JavaScript este diferit: poti sa presari secvente de cod pe tot parcursul documentului sau poti sa atasezi unei etichete un bloc compact de cod. Indiferent de cum procedezi, nu ai nevoie de date sau programe separate de documnetul HTML. Browserele sunt cele care interpreteaza diferitele instructiuni JavaScript. Ca si in cazul limbajului de programare Java, nu-mi propun aici sa descriu in detaliu limbajul de scripting JavaScript, ci doar sa-i fac o mica prezentare si sa dau unul sau doua exemple simple pe care sa le poti integra imediat in pagina ta web.
Prin intermediul etichetei <script> introduci un cod JavaScript in documentul HTML. Continutul din cadrul etichetelor <script>…</script> este interpretat de browser ca date sau instructiuni JavaScript, din aceasta cauza nu poti plasa cod HTML intre aceste etichete. In cazul in care-ti scapa totusi ceva cod, browserul va afisa un mesaj de eroare.
Poti sa incluzi mai multe taguri <script> intr-un document, fie in cadrul etichetei <head>, fie in interiorul etichetei <body>; oricum browserul executa instructiunile in ordinea in care acestea apar. O modalitate des intalnita in programarea JavaScript este utilizarea unui singur script in interiorul etichetelor <head>…</head> pentru a defini functii comune si variabile universale pentru documentul respectiv, iar ulterior sa apeleze la acestea prin intermediul instructiunilor raspandite pe parcursul documentului.
Scriptul prezentat in continuare iti permite ca atunci cand dai un clic pe o imagine sa ii maresti dimensiunile, respectiv sa o readuci la dimensiunile initiale printr-un alt clic.
<html><head><title>Pagina_WEB</title></head>
<BODY><script>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;}
</script><img border=”0″
src=”d:\Images\08.gif”
width=”100″
height=”100″
onclick=”zoomToggle(’100px’,'100px’,'200px’,'200px’,this);”>
<br><img border=”0″
src=”d:\Images\09.gif”
width=”100″ height=”100″
onclick=”zoomToggle(’75px’,'75px’,'200px’,'200px’,this);”>
</body></html>
Urmatorul script il poti utiliza pentru a afisa si alterna automat sau manual blocuri HTML (text sau imagini).
<HEAD>
<style type=”text/css”>
.gallerycontroller{
width: 250px
}
.gallerycontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display: block;
}
</style>
<script type=”text/javascript”>
var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode=”auto” //displaymode (”auto” or “manual”).
if (document.getElementById){
document.write(’<style type=”text/css”>\n’)
document.write(’.gallerycontent{display:none;}\n’)
document.write(’</style>\n’)
}
var selectedDiv=0
var totalDivs=0
function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags(”DIV”) : document.getElementsByTagName(”*”)
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}
function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display=”none”
inc++
}
}
function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display=”block”
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode==”auto”)
autocontrolvar=setTimeout(”expandone()”,tickspeed)
}
function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m–)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute(”subject”)
thesubject=(thesubject==”" || thesubject==null)? “HTML Content “+(i+1) : thesubject
temp.options[i]=new Option(thesubject,”")
}
temp.options[0].selected=true
}
function manualcontrol(menuobj){
if (displaymode==”manual”){
selectedDiv=menuobj
expandone()
}
}
function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!=”undefined”)
clearTimeout(autocontrolvar)
if (themode==”auto”){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout(”expandone()”,tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}
function startgallery(){
document.getElementById(”controldiv”).style.display=”block”
getElementbyClass(”gallerycontent”)
totalDivs=partscollect.length
populatemenu()
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
if (displaymode==”auto”)
document.gallerycontrol.menu.disabled=true
expandone()
}
if (window.addEventListener)
window.addEventListener(”load”, startgallery, false)
else if (window.attachEvent)
window.attachEvent(”onload”, startgallery)
else if (document.getElementById)
window.onload=startgallery</script>
</HEAD>
<BODY>
<div class=”gallerycontent” subject=”Ce inseamna HTML?”>
HTML provine de la Hypertext Markup Language, si este limbajul de marcare a hypertextului pe care va trebui sa-l inveti foarte bine daca doresti sa devii un profesionist al web-designului.</div>
<div class=”gallerycontent” subject=”JavaScript”>
JavaScript este un limbaj de scripting (client-side) dezvoltat initial de Netscape pentru a adauga interactivitate si a da putere documentelor web.
</div>
<div class=”gallerycontent” subject=”Java”>
Java este un limbaj de programare orientat pe obiecte in care clasele pot fi utilizate si reutilizate pentru a crea aplicatii variate. Este mult mai complex si, in acelasi timp, mult mai greu de invatat decat JavaScript.
</div>
<div id=”controldiv” style=”display:none” class=”gallerycontroller”>
<form name=”gallerycontrol”>
<select class=”gallerycontroller” size=”3″ name=”menu”
onChange=”manualcontrol(this.options.selectedIndex)”>
<option>Blank form</option>
</select><br>
Auto: <input type=”radio” checked name=”mode” value=”auto” onClick=”preparemode(’auto’)”> Manual: <input type=”radio” name=”mode” value=”manual” onClick=”preparemode(’manual’)”>
</form>
</div></body></html>