LUCRARE DE ATESTAT

LICEUL TEOLOGIC ADVENTIST TEFAN DEMETRESCU

LUCRARE DE ATESTAT

N INFORMATIC

Profesor coordonator: Kos Tiberiu Nume elev: Ptracu Vlad Timotei

2013

Cuprins:

Introducere.......................................................... pag. 3

Descrierea aplicaiei web................................... pag. 4

1. JavaScript.................................................... pag. 4

2. Exemple grafice.......................................... pag. 8

3. PHP............................................................ pag. 9

4. Probleme cunoscute................................... pag. 9

Concluzii............................................................. pag. 9

Bibliografie.......................................................... pag. 10

Introducere

A. Motivaii

n zilele noastre tot mai puini oameni au timp s citeasc i implicit s-i dezvolte vocabularul i capacitatea de a gndi ntr-un mod complex. ns dezvoltatorul de aplicaii Android LOTUM GmbH a gsit o modalitate atractiv de a stimula gndirea i dezvoltarea vocabularului. Aa a aprut aplicaia destinat sistemelor Android 4 Pics 1 Word (Patru cuvinte, o singur imagine). Aplicaia se bucur de un real succes avnd ntre 10.000.000 i 50.000.000 de instalri. Fiind atras de ideea jocului, am cutat o variant de browser a jocului i am fost dezamgit cnd am aflat c nc nu exist una. Aa s-a nscut aplicaia web Un cuvnt patru imagini, o variant n romn a aplicaiei amintite.

B. Cerine hardware i software

Cerinele hardware i software sunt minime.

Procesor Intel Pentiun I (133 Mhz)

MemorieRAM 8 MB

Spaiu Hdd 1,357 KB

Plac video 1 MB

Un browser (recomandabil Mozila Firefox sau Google Chrome) cu JavaScript activat

Pagina web are dimensiunea de doar 104.3kB

Se ncarc conform http://tools.pingdom.com n 2.85s i a obinut un punctaj de 94/100

Descrierea aplicaiei web

Aplicaia Web ncarc o interfa simpl, codul HTML fiind ct mai succint. Un tabel cu patru csue reprezint structura n care sunt amplasate patru imagini. Cele patru imagini

(300px x 175px) au un element comun care fie este evident, fie va ine utilizatorul n suspans i n ncordare intelectual. Cele patru imagini trebuie analizate pentru a descoperi cel mai mic detaliu care s genereze soluia. Sunt oferite 20 de litere din care utilizatorul poate s aleag. El va apsa pe ele n ordinea n care apar n cuvant, de la stnga la dreapta. Cnd butonul corespunztor unei litere va fi apsat, litera respectiv va apare n csua destinat soluiei, amplasat sub cele patru imagini. n cazul n care utilizatorul dorete ndeprtarea unei litere, el va apsa butonul corespunztor literei, iar aceasta va fi nlocuit cu caracterul underscore. n cazul existenei mai multor litere identice n cuvnt, prima liter de la dreapta la stnga va fi ndeprtat, cnd butonul corepunztor ei este apsat. Pentru mbuntirea calitii interaciunii dintre utilizator i aplicaie a fost implementat butonul Reset. Acesta va terge literele introduse pn la acel moment, nemaifiind necesar ndeprtarea lor individual. Dup completarea tuturor spaiilor libere, aplicaia va afia un mesaj corespunztor corectitudinii soluiei sugerat de utilizator: Mai ncearc / Eti nemaipomenit! Dup rularea unui efect vizual, un nou cuvnt este ncrcat i alte patru imagini sunt afiate. Utilizatorul poate vedea n orice moment la ce nivel a ajuns, prin mesajul afiat n antetul paginii. (Ex: Cuvntul 15 )

1. Descrierea modului de lucru n codul JavaScript

Codul JavaScript este ncrcat dintr-un fiier extern, pentru a mri viteza de descrcare a resurselor ntr-un browser ce folosete descrcri paralele. Codul JavaScript este structurat pe subprograme.

Butonul Start care este afiat iniial va apela funcia start(); la apsare. Aceasta creeaz structura HTML prin intermediul sintaxei: document.getElementById('game').innerHTML=''; Apoi, se apeleaz funcia init(), cu rol de a initializa variabilele, urmat de apelarea funciei game(0);

Funcia game() este:

function game(advance) {

var ajaxRequest;

try {

ajaxRequest = new XMLHttpRequest()

} catch (e) {

try {ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP")

} catch (e) {

try { ajaxRequest = newActiveXObject("Microsoft.XMLHTTP")

} catch (e) { alert("Your browser broke!");

return false

}

}

}

ajaxRequest.onreadystatechange = function () {

if (ajaxRequest.readyState == 4) {

raspuns = ajaxRequest.responseText; actiune(raspuns);

}

}

ajaxRequest.open("GET", "/game.php?advance=" + advance, true);

ajaxRequest.send(null);

}

Funcia game() primete prin intermediul parametrului advance, numrul cu care scriptul php va incrementa variabila 'nivel' stocat prin intermediul cookie n browserul utilizatorului. Iniial, funcia game() a fost apelat astfel: game(0). Astfel se previne utilizarea opiunii Refresh pentru a trece la urmtorul nivel. Atunci cnd scriptul JavaScript confirm corectitudinea soluiei, el va apela game(1);

Funcia game este cea care folosete Ajax.

S nelegem un pic ce nseamn Ajax. Ajax este un acronim (denumirea prescurtat) de la Asynchronous JavaScript And XML. n mod standard, nainte de Ajax, pentru fiecare interaciune a unei aplicaii web cu serverul, pagina web trebuia complet rencrcat. Cu tehnologia Ajax pot fi ncrcate i modificate doar anumite pri din pagin, prelucrate i generarte de server, fr a rencrca toat pagin web. Acest lucru are ca rezultat ncrcarea mai rapid a coninutului n pagin i reducerea traficului. De asemenea, pot fi trimise date la server, de la pagin web deschis, n timp ce utilizatorul urmrete coninutul paginii, fr c aceast s fie afectat. Pentru Ajax nu conteaz tipul limbajului de programare folosit pe partea de server ci conteaz ca rspunsul primit de la server s fie cu un Content-Type de tip text (plain, XML, HTML). Ajax este suportat de majoritatea navigatoarelor web i permite realizarea comunicrii cu serverul i afiarea datelor primite fr a fi necesar rencrcarea paginii.

Rspunsul primit de la pagina game.php va fi transmis prin parametrul 'raspuns' funciei actiune(), cea care va interpreta rspunsul.

Funcia actiune():

function actiune(raspuns) {

if (raspuns == '-1') {

new Messi('Ai terminat jocul.
Incearca din nou peste trei zile!
Acum du-te si invata!');

}

var vars = new Array();

vars = raspuns.split('|', 3);

var images = new Array();

images = vars[1].split(',', 4);

level(vars[2]);

lungime = vars[0].length;

fill(vars[0], images[0], images[1], images[2], images[3], lungime);

}

Capabil s interpreteze rspunsul primit, functia actiune() fie va afia un mesaj care anun utilizatorul c a terminat jocul, fie va procesa rspunsul primit i va da valori variabilelor ce conin soluia, identificatorii imaginilor si lungimea soluiei. De asemenea, ea va afia nivelul curent, apelnd funcia level(). Apoi, va apela funcia fill() oferindu-i parametrii necesari ca aceasta s afieze toate elementele grafice personalizate rspunsului primit de la server.

Funcia fill():

function fill(word, img1, img2, img3, img4, lungime) {

solutie = word;

var add = addleters(19 - lungime);

word = add + word;

litere = word.split('');

litere.sort(function () { return 0.738 - Math.random() })

/*[...] putting imgs into places using document.getElementById [...]*/

var i; var space_lenght = 16;

space_lenght = space_lenght * lungime;

for (i = 0; i < lungime; i++)

space = space + '_ ';

document.getElementById('cuvant').value = space;

document.getElementById('cuvant').style.width = space_lenght;

for (var i = 1; i