marți, 13 ianuarie 2009

Proiect IE last shot

Maine va fi prezentarea proiectului la IE. Practic se va evalua acest blog si site-ul http://interfeteweb.pluto.ro/ realizat de echipa noastra. A fost o experienta interesanta si utila. Per total cred ca am reusit sa realizam o treaba destul de buna, desi suntem putin dezamagiti de pozitia in google. Totusi trebuie sa mentionez ca spre deosebire de alte echipe nu am recurs la tertipuri ieftine pentru a atrage trafic. Tot continutul este legat de materia interfete evoluate, avem temele realizate de noi la aceasta materie si indicatii pentru realizarea temelor, care ajuta pe oricine studiaza aceasta materie. Nu imi place sa ma refer la altii dar nu pot sa nu constat cum niste colegi se lauda cu "performantele" lor deosebite dar au pe blog articole despre Mircea Badea si afise electorale ... nici nu vreau sa ma gandesc ce urmeaza ... cred ca presupunem cu toti. Vreau doar sa inchei cu acest subiect prin a mentiona faptul ca un astfel de comportament mi se pare neacademic si nu ar trebui urmat. O sa inchei acest ultim post al meu pe acest blog prin a mentiona inca o data ca acest proiect a fost foarte util si desi nu am am un blog dupa aceasta experienta ma gandesc serios sa imi fac unul.
Publicat de la Un comentariu:
Etichete: , ,

Tema 3

Dupa cum probabil ati aflat tema 3 a aparut de ceva vreme si in acest timp a fost rezolvata si notata. Mai departe voi descrie modalitatea mea de rezolvare, care mi s-a parut una dintre cele mai simple abordari (si care foloseste si AJAX pentru obtinerea bonusului de 10% :) ). Voi incepe prin a rezuma enuntul temei: se cere scrierea unui script (JavaScript) care sa permita cautarea si evidentierea potrivirilor pe un site (pentru bonus se cerea si folosirea AJAX).
Pentru usurinta implementarii si evitarea altor probleme site-ul pe care se facea cautarea se presupene a fi pe acelasi server cu scriptul. Dupa cum am spus am ales sa folosesc AJAX pentru o comportare interactiva a scriptului de cautare (si in varianta cu un iframe, fara a folosi AJAX se poate obtine aceeasi interactivitate). Pagina principala de pe care se face cautarea este una foarte simpla ce contine doua textboxuri si un buton. In primul textbox se introduce pagina in care se face cautarea. La pierderea focusului de catre aceste prin intermediul AJAX se incarca pagina ceruta in div-ul de la sfarsitul html-ului. In al doilea textbox se dau cuvintele de cautat iar dupa apasasrea butonului de search scriptul intra din nou in actiune cautand aparitiile cuvintelor. Pagina este data in continuare (se pot observa id-urile date fiecarei zone necesare pentru script):
<html>
<head>
 <title>Search</title>
 <script src="search.js">
 </script>
</head>

<body>
 <form id="searchFrom">
  <span>Adresa la care se cauta: </span>
   <input type="text" id="location" onblur="lostFocus()"/>
  <br/>
  <br/>
  <span>Cuvinte cautate: </span>
  <input type="text" id="keywords" onblur="lostFocus()"/>
  <br/>
  <br/>
  <input type="button" value="Search" id="submitButton" onclick="searchPressed()"/>
  </form>
 <br/>
 <br/>
 <div id="contentDiv">
 </div>
</body>
</html>
Partea care initializeaza obiectul XMLHttpRequest este urmatoarea (este prezentata partea de Firefox pentru a nu complica lucrurile):
// Se creaza obiectul pentru firefox
httpRequest = new XMLHttpRequest();

// Se seteaza functia apelata la modificari ale starii obiectului httpRequest
httpRequest.onreadystatechange = function()
{
var contentDiv = document.getElementById("contentDiv");

// Daca s-a primit raspunsul la cerere atunci acesta se afiseaza
// in div
if(httpRequest.readyState == 4)
{
contentDiv.innerHTML = httpRequest.responseText;
}
}

// Se construieste si se trimite cererea
httpRequest.open("GET", location, true);
httpRequest.send(null);
Se observa setarea unei functii anonime pentru proprietetea onreadystatechanged. Aceasta este apelata automat ori de cate ori exista o schimbare in starea (readyState) cererii Http trimise cu ajutorul JavaScript. Ne intereseaza starea 4 adica aceea care apare in momentul sosirii raspunsului (in cazul nostru a continutului paginii in care se face cautarea). Dupa cum se vede mai sus se seteaza continutul html al div-ului cu id-ul contentDiv la valoarea campului responseText al obiectului XMLHttpRequest in care se va afla exact pagina ceruta. In ultimile doua linii dupa crearea si configurarea obiectului XMLHttpRequest se trimite un request catre server in care se pune adresa paginii cerute (location).
La apasarea butonului de Search se executa functia searchPressed(). Aceasta se ocupa cu identificarea potrivirilor si colorarea acestora. Erau mai multe variante aici printre care folosirea expresiilor regulate sau cautarea manuala (varianta mai din topor). Binenteles am ales ultima varianta folosind functii precum: indexOf, lastIndexOf, substr, charAt. Nu voi mai descrie cum s-a facut cautarea in text pentru ca nu are rost (presupun ca toata lumea poate cauta text folosind metodele de mai sus). Singurul lucru de mentionat aici este ca trebuie avuta grija sa se sara peste textul interior tagurilor si continutul blocurilor dpeciale de genul script. In rest functia identifica fiecare cuvant in parte din text si face o copie a paginii in care se cauta adaugandu-se taguri pentru modificarea culorii zonelor care s-au potrivit la cautare (prin folosirea unui tag de genul span cu un stil specificat sau font).
Pentru mai multe informatii pot ajuta chiar sursele tuturor participantilor la acest proiect ce se afla aici.
Publicat de la Niciun comentariu:
Etichete: , , , ,

vineri, 2 ianuarie 2009

AJAX

AJAX (Asynchronous JavaScript and XML) reprezinta un grup de tehnici de dezvoltare a aplicatiilor web. Este folosit pentru a crea aplicatii web interactive sau cum se obisnuieste sa se spuna, RIA (Rich Internet Applications). AJAX a fost popularizat de catre Google prin intermediul Google Sugest.
AJAX se foloseste in principal pentru a spori interactivitatea paginilor web. Prin cresterea interactivitatii, acestea se apropie ca functionalitate si prezentare de cele "offline" (existente pe desktopuri).
Daca avem pe o pagina web un control care ne prezinta o informatie dinamica (un progress bar de exemplu, pentru o operatie care se desfasoara pe serverul web) aceasta trebuie actualizata cat mai des posibil, in scopul oferirii interactivitatii dorite. Daca se foloseste un limbaj server-side, fara a folosi tehnici AJAX, atunci la diverse momente ar trebui reincarcata intreaga pagina web de pe server, provocand intarzieri sesizabile, scazand drastic interactivitatea oferita de aplicatia web, toate acestea numai pentru un singur control (chiar daca restul paginii ramane nemodificat).
AJAX insa ne ofera posibilitatea de a modifica numai anumite regiuni ale paginii web (in acest caz numai controlul). Acest lucru implica binenteles comunicarea cu serverul web, dar aceasta se realizeaza numai pentru a descarca informatiile referitoare la control care se modifica, datele transmise fiind mult mai mici decat cele necesare pentru o intraga pagina web.
In continuare voi prezenta pe scurt modul in care AJAX reuseste sa actualizeze numai anumite zone ale unei pagini web.
Dupa cum am mai spus AJAX in sine se bazeaza pe mai multe tehnologii web, dar in special pe JavaScript. Dupa cum s-a vazut in postul trecut JavaScript este un limbaj de scripting, client-side. Prin intermediul acestuia putem sa avem acces la orice element al unei pagini web. Cum AJAX poate actualiza anumite elemente ale unei pagini astfel accesul la acestea se face cu JavaScript. Deci este rezolvata problema accesului la reginuile unei pagini. Mai departe trebuie rezolvata problema informatiei care duce la actualizarea acestora. Acesta se realizeaza printr-un request special realizat catre serverul web. Un astfel de request se poate realiza prin intermediul unui obiect JavaScript: XMLHttpRequest. Acest obiect permite comunicarea dintre JavaScript si serverul web fara a fi necesara incarcarea intregii pagini web. Prin intermediul lui se poate face o cerere pentru o parte a paginii web in mod asincron. Astfel regiunea poate fi actualizata numai in momentul in care vine un response de la server, iar pagina web nu va ramane blocata in asteptarea raspunsului. In momentul in care vine raspunsul se stie ce obiect urmeaza a fi actualizat din pagina, acesta fiind accesat prin JavaScript si modificat in concordanta cu raspunsul primit de la server. Unui obiect de tipul XMLHttpRequest i se poate atasa o metoda
care va fi executata ori de cate ori se modifica ceva in starea obiectului:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Se executa cand vine raspunsul de la server
document.myForm.time.value=xmlHttp.responseText;

}
}
In exemplul de mai sus se considera xmlHttp de tipul XMLHttpRequest. La proprietatea onreadystatechanged se ataseaza o functie. Aceasta va fi executata de fiecare data cand se modifica starea obiectului (acesta are 5 stari in total. Pentru mai multe detalii: http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp). Starea 4 reprezinta sosirea unui raspuns. Acesta poate avea orice forma: text, xml, html... si este interpretat in interiorul functiei de mai sus. Acolo poate fi modificata pagina web in zona necesara. In exemplul de mai sus valoarea unui camp text este actualizata cu raspunsul venit de la server. Cererea catre serverul web se poate face in felul urmator:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
Se observa ca se efectueaza o cerere catre pagina time.asp in acest caz. Serverul web va obtine raspunsul generat de scriptul asp si il va trimite catre client. Se observa ca in functie de ce vrem sa actualizam in pagina putem sa avem scripturi separate care sa intoarca exact ce ne trebuie.
In concluzie AJAX reprezinta un set de tehnologii (JavaScript, XML, HTML, ...) ce permite dezvoltarea aplicatiilor Web 2.0, oferind o interactivitate ridicata web-ului.
Publicat de la Niciun comentariu:
Etichete: , , , ,
Abonați-vă la: Postări (Atom)
 
SEO Romania