Ghid Turistic al Aradului

CUVÂNT ÎNAINTE

Această lucrare de licență se constituie ca lucrare de licență în cadrul UNIVERSITĂȚII DE VEST “VASILE GOLDIS”, FACULTATEA DE ȘTIINTE ALE NATURII INGINERIE ȘI INFORMATICĂ, departamentul de Infortmatică din Arad.

În cadrul celor trei capitole, sunt tratate atât sub aspect teoretic, cât și mai ales aplicativ, cele mai relevante problematici ale acestei lucrări de licență, care utilizează suita de limbaje și tehnologii selectate ca suport de implementare:

JavaScript

HTML

JQuery

XML

Alegerea acestei suite, dintr-o gamă extrem de variată de alte limbaje și tehnologii de programare, a oferit o implementare mai ușoară în dezvoltarea acestei aplicații.

Aplicația a fost realizată utilizând programul Construct 2 [5], care este conceput special pentru jocuri 2D și aplicații, HTML5 și Android. Acest software permite oricui să construiască foarte ușor jocuri sau aplicații, necesitând un nivel moderat de cunoștințe de programare.

CUPRINS

LISTA FIGURILOR

Figura 2.1 Pagina de START 6

Figura 2.2 Obiectivele incluse în aplicație 7

Figura 2.3 Categoria Monumente și clădiri istorice 8

Figura 2.4 Descrierea obiectivului 8

Figura 2.5 Harta iteractivă 9

Figura 2.6 Butoane ajutor și înapoi 9

Figura 3.1 Exemplu CSS stil intern 13

Figura 3.2 Exemplu CSS stil extren 15

Figura 3.3 Exemplu CSS stiluri în linie 15

Figura 3.4 Validare la SUBMIT(verificare la final 22

Figura 3.5 Validare caseta la OnClick pe caseta următoare (verificare on-line) 22

Figura 3.6 Mapare mesaje pe o imagine-hartă folosind JavaScript 25

Figura 3.7 Evenimente JavaScript 28

Figura 4.1 EventSheet-ul 40

Figura 4.2 Condiții de sistem 42

Figura 4.3 Butoanele implicite în Construct 2 43

Figura 4.4 Condiția: la tingerea butonului 43

Figura 4.5 Setarea opacității obiectelor la început de Layout. 45

Figura 4.6 Condiționarea mișcării obiectului pe axa Y 47

Figura 4.7 Reactivarea efectului Drag&Drop 47

Figura 4.8 Resetarea poziției al obiectelor. 48

Figura 4.9 Modificarea variabilei 49

Figura 4.10 Modificarea variabilei globale la valoarea declarată inițial 49

INTRODUCERE

Lucrarea de față vine să întărească nevoia de cunoaștere și de informare a cetățenilor unui oraș, a vizitatorilor sau a turiștilor. Într-o societate în care dispozitivele mobile, împreună cu accesul la internet, au devenit destul de accesibile, aplicațiile pentru smartphone evoluează constant, oferind utilizatorilor experiențe îmbunătațite, bazate pe informații din ce în ce mai utile.

În contextul candidaturii Aradului la titlul Capitală Culturală Europeană 2021, proiectul ghidAR (un ghid turistic al Municipiului Arad) va reuși să promoveze și să evidențieze potențialul cultural, strategic, dar și turistic al Aradului, datorat poziției favorabile ale Municipiului Arad și a variatelor atracții turistice pe care le oferă. Autenticitatea și stilul tradițional de viață ale orașului prezentate în aplicația ghidAR vor trezi interesul unui număr mai mare de potențiali vizitatori, ținând cont de faptul că pe piața internațională se remarcă două tendințe importante: aceea de sofisticare a gusturilor turiștilor, aflați în căutare de experiențe deosebite, precum și creșterea numărului celor care optează pentru vacanțe în care arta, cultura, istoria, educația si spiritualitatea să reprezinte principale obiective.

Una dintre oportunități o reprezintă îmbunătățirea imaginii internaționale a orașului, prin cultură. De aici și nevoia unui astfel de proiect, numit ghidAR (un ghid turistic al Municipiului Arad).

Aplicația ghidAR prevede informarea utilizatorilor despre cele mai importante obiective turistice al Municipiului Arad. Se pot obține informații despre clădiri, cultura orașului, monumentele istorice și obiectivele ecumenice.

Pentru ca aplicația să fie cât mai ușor de folosit, utilizatorul are posibilitatea să acceseze o hartă interactivă. Astfel, poate alege fiecare obiectiv de care este interesat, iar printr-o simplă atingere pe unul dintre obiective poate să citească descrierea acesteia.

PREZENTAREA APLICAȚIEI

Aplicația ghidAR, un ghid turistic al Municipiului Arad, este concepută în așa fel, încât să fie ușor de utilizat, să nu conțină prea multe informații care să încarce memoria utilizatorului, să nu necesite un dispozitiv performant pentru a o utiliza și să nu fie condiționat de o conexiune la internet. Astfel, această aplicație se poate instala pe majoritatea telefoanelor de tip smartphone și tablete, cu sistemul de operare Android.

Această aplicație a fost realizată pe patru niveluri, pentru a putea accesa simplu și rapid toate categoriile incluse și conține 11 obiective turistice, care sunt descrise cum urmează:

Pagina de START din fig 2.1 conține toate butoanele pentru a putea avansa la următoarele categorii, respectiv Monumente și clădiri istorice, Cultură și istorie și categoria Ecumenic, însă acestă pagină mai conține și butoanele pentru secțiunea AJUTOR și pagina cu harta interactivă, special realizată pentru a putea vedea toate obiectivele regăsite în acestă aplicație, fără a accesa categoriile:

Figura 2.1 Pagina de START

Secțiunea AJUTOR a fost realizată pentru o mai bună înțelegere a funcționării aplicației. Această secțiune conține întreaga structură a aplicației, dar și modul de funcționare, exemplificate cu imagini.

Harta interactivă din fig 2.2, obținută de la Primăria Municipiului Arad în format DWG (AutoCad Map) și refăcută în Adobe Illustrator, a fost concepută în așa fel încât utilizatorul să poată vedea toate elementele din aplicație. Printr-o simplă apăsare pe aceste obiective, poate să avanseze la descrierea obiectivului turistic ales.

Figura 2.2 Obiectivele incluse în aplicație

Butoanele din categoriile aplicației conțin doar o parte dintre obiectivele turistice din centrul Municipiului Arad, însă folosind programul Construct 2 se mai pot adăuga foarte ușor și altele. Prin apăsarea butonului Monumente și clădiri istorice din fig 2.3, se avansează la această categorie. Pentru a reveni la pagina anterioară, se atinge butonul “ÎNAPOI”.

Figura 2.3 Categoria Monumente și clădiri istorice

La alegerea oricăruia dintre aceste obiective, se avansează la descrierea acestora, unde se regăsesc câteva informații generale. Iar prin atingerea pe butonul cu textul “ARATĂ PE HARTĂ”, se trece la harta interactivă, pentru a putea observa amplasamentul obiectivului.

Figura 2.4 Descrierea obiectivului

Când utilizatorul trece din pagina cu descrierea obiectivului la harta interactivă, aplicația mărește harta automat și centrează obiectivul ales pe ecran, pentru a putea observa amplasamentul lui pe hartă. Dacă utilizatorul menține două degete pe ecran și le apropie sau le îndepărtează, concomitent harta se va micșora, respectiv mări.

Figura 2.5 Harta iteractivă

Tot din pagina care conține harta interactivă, se poate accesa secțiunea AJUTOR, pentru a nu se întoarce la pagina de start, în cazul în care utiliztorul dorește să citescă această pagină.

Figura 2.6 Butoane ajutor și înapoi

TEHNOLIGII WEB

HTML5

HTML acronimul de la HyperText Markup Language este un limbaj de marcare utilizat pentru crearea paginilor WEB, pentru a fi afișate într-un navigator (sau Browser).

Câmpurile sau marcajele speciale sunt elementele de bază ale HTML, numite și Tag-uri sau etichete HTML.

Posibilitatea realizării de legături (link-uri sau hyperlink-uri) spre alte documente sau pagini Web, reprezintâ o altă caracteristică esențială a HTML cum rezultă și din denumirea lui (HypertText –element ce crează o legătură cu un alt document). HTTP (sau Hypertext Transfer Protocol), este protocolul folosit pentru a transmite date în cadrul WWW (Word Wide Web sau pe scurt Web) realizând transferul de date între server-ul WWW și un client navigator Web. De câte ori se dorește o formatarea modului de afișare a informației publicate se folosește o etichetă HTML (redactarea textului cu modul bold, selectarea unui fundal al paginii, al unei anumite imagini, afișare tabelată, integrarea unui sunet sau orice este legat de formatarea paginii Web).

Codure speciale numite Tag-uri sunt cele care însoțesc conținutul propriu-zis al paginii Web și determină modul în care acesta este afișată pe parte de client apelant. Codul HTML (stocat la distanță pe un server Web) împreună cu informația propriu-zisă, este transferat folosind HTTP spre browser-ul Web, fiind înțeles corespunzător de către acesta. Toate aceste browsere Web folosite fac ca modul de interpretare al unor etichete HTML să fie diferit de la un caz la altul (tocmai de aceea, testarea unei aplicații Web trebuie efectuată de multe ori pe o gamă largă de browsere).

Ultima versiune HTML 5 este îmbunătățită cu o multitudine de facilitați care sporesc performanțele multimedia ale aplicațiilor Web. Introducerea unor noi etichete sporește mult dinamica paginii vizând partea audio, video și grafică, iar tratarea erorilor este mult mai simplă și eficientă, iar pentru o serie de etichete HTML anterioare sunt modificate specificațiile sau atributele.

Frame-urile nu mai sunt funcționale într-un document HTML 5 atunci când o serie de etichete sunt abrogate de exemplu eticheta <object>permite înglobarea unor obiecte plug-in pentru diverse facilități mai ales multimedia fiind înlocuită cu noi etichete HTML 5, gen <audio>,<video>. În acest moment se poate vorbi de o confruntare în zona Web multimedia între tehnologia HTML 5 care poate funcționa fără plugin-uri adiționale de exemplu aplicații software adiționale, respectiv tehnologia clasică ce se bazează pe plugin-urile Flash.

La ora actuală sub jumatate dintre browsere suportă HTML 5 iar cealalată jumatate suporta și Flash. [2] HTML 5 presupune o utilizare intensă a altor tehnologii bazate pe JavaScript, CSS, Canvas care au o capacitate , conectivitate și deschidere mult mai mare de integrare cu noi tehnologii, plasândul ca potențial câștigător în confruntarea cu tehnologia clasicelor plugin-uri. Totuși este de menționat că în acest moment nici un browser Web nu suportă în totalitate HTML 5, pe poziții înalte situându-se Firefox, Safari și Google Crome.

Pentru simple exemplificări sunt punctate câteva secvențe de cod HTML 5 în cele ce urmează:

orice cod HTML 5 este urmat de o declarație de tipul:<!DOCTYPE html>

rularea unei secvențe video (inclusiv tratarea erorii de compatibilitate):

rularea unui fișier de sunet:

definirea unui articol ca element afișat:

Avantajul HTML 5 privind integrarea facilă cu o serie de alte tehnologii și limbaje de programare Web rulând pe partea de client, poate însă constitui un handicap privind compatibilitatea cu multitudinea de browsere existente. Astfel, utilizarea intensivă a limbajului JavaScript,în strânsă corelare cu noile etichete HTML 5 constituie un argument relevant în acest sens. Viitorul rămâne să decidă câștigătorul în această confruntare.

CSS

CSS este un acronim provenind din Cascading Style Sheets, care înseamnă „foi de stil în cascadă”. Pseudo-limbajul de formatare CSS este utilizat pentru a descrie modul de prezentare a documentelor scrise într-un limbaj bazat pe marcaje (HTML, XML etc.). [3]

Separarea conținutului HTML propriu-zis al unui document este permis de fișierele CSS si de stilul de afișare sau formatare în pagină al acestuia. Pentru aranjarea conținutului în pagină se utilizeaza de obicei doar codul HTML iar detaliile care țin de afișare (margini , culori, fundaluri, fonturi etc.) se realizează cu ajutorul CSS-urilor aplicate în cadrul unui site suplimentar Web peste codul HTML.

CSS-urile cu alte cuvinte, separara prezentare paginii de structura sa efectivă. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagină web folosind numai CSS, care a fost proiectat astfel încât să conlucreze cu HTML-ul.

Asupra codului HTML aplicarea foilor de stil în cascadă se poate face în mai multe moduri :

stiluri în linie

stiluri externe

stiluri interne

clase CSS.

Stiluri interne

Codul CSS se plasează în interiorul paginii HTML pe care se dorește aplicarea stilurilor respective, între tag-urile

<head> </head>:

Pentru exemplificare, se prezintă un script HTML în care se utilizează stiluri interne, descrise în codul de mai jos și prezentate în figura 3.1:

Figura 3.1 Exemplu CSS de stil intern

Dacă se dorește o modificare a stilului de afișare (culoare, mărimea fontului etc.) utilizând această metodă de aplicare a CSS-urilor asupra codului HTML, schimbarea va trebui realizată în toate paginile conținute de acel stil.

Doar în situația în care se dorește “stilizarea” un număr mic de pagini această metoda sil intern este indicat a fi folosită, fiind destul de neproductivă realizarea a acestor modificări pe mai multe pagini ale unui site WEB.

Stiluri Externe

Utilizând aceasta metoda a stilurilor externe un fișier poate fi scris cu orice editor simplu de text Wordpad , Notepad sau cu editoare specializate gen Dreamweaver . Fișierul CSS nu conține cod HTML, ci doar cod CSS și trebuie salvat cu extensia .css.

Plasarea unui tag link (legatură), referirea fișierului extern CSS în paginile HTML se face prin în secțiunea <head> </head> a fiecărei pagini în cadrul căreia se dorește aplicarea stilul respectiv, având forma următoare:

Se prezintă în continuare, un exemplu de referire a unui fișier extern .css într-o pagină HTML:

Fișierul CSS referit și utilizat în pagina HTML anterioară (cssExt.css), se consideră a avea următorul conținut exemplificativ (efectul utilizării lui putându-se observa în figura 3.2):

Figura 3.2 Exemplu CSS stil extren

Stiluri în linie

Aceasta metoda se definește chiar în codul etichetei HTML aferente elementului care se dorește a fi stilizat, după cum se poate vedea în exemplul următor (fig 3.3):

Figura 3.3 Exemplu CSS stiluri în linie

Stilurile în linie nu permit schimbări rapide de stil pe mai multe fișiere în același timp, fiind mai puțin utilizate iar modificările trebuie realizate pe fiecare element în parte, și în fiecare pagină în parte.

Mai sus au fost prezentate trei dintre metodele de aplicare a CSS-urilor asupra codului HTML. În cazul în care sunt folosite două sau chiar trei metode în același timp, ordinea sau prioritatea se vor executa în cascadă, în ordinea următoare:

stilurile în linie

stilurile interne

stilurile externe

În cazul în care un element este deja stilizat nu este restilizat de o regulă de stil existentă într-un fișier CSS extern, acționând imediat ulterior conform regulii de prioritizare anterior enunțate.

Clase CSS

Pentru a stiliza diferit mulțimile de tag-uri HTML (distribuite în mai multe pagini WEB) sunt folosite aceste clase CSS. Acest mod este asemănător cu utilizarea stilurilor în linie, dar avantajul major este acela că atunci când se dorește efectuarea unei modificări de stil pe mai multe elemente/pagini, aceasta nu trebuie efectuată individual la nivelul fiecărui element. [4] În cadrul clasei CSS este suficientă o modificare ce definește stilurile respective, efectul acesteia se reflectându-se asupra tuturor elementelor pe care acționează această clasă.

În cadrul unui fișier HTML o clasa CSS poate fi folosită de fiecare dată când este nevoie iar definirea acesteia incepe cu semnul punct (.), urmată de nume și este recomandat folosirea unor denumiri sugestive pentru numele clasei, care să indice stilul respectiv.

Exemplul următor de clasă stabilește culoarea și dimensiunea unui text:

Definire și utilizare a unor clase CSS într-un document HTML, se prezinta pornind de la exemplificarea de la capitolul 3.2.3 Stiluri în linie, aceste clasele fiind stocate într-un fișier de stil extern:

Fișierul HTML utilizează stiluri externe bazate pe clase:

Fișierul CSS (clase.css) în care sunt definite cele două clase (ambele stilizând texte, dar în mod diferit):

În fișierului HTML anterior prezentat stilizarea obținută este identică cu cea obținută prin utilizarea stilurilor în linie din (fig. 3.3).

Pentru formatarea și designul primar al dezvoltării unor aplicații Web tot mai complexe, care conțin implicit fișiere script și un număr tot mai mare de pagini, stilurile CSS constituie la ora actuală cea mai bună strategie și de o eficiență maximă,.

JavaScript

În prezent cel mai popular limbaj de script se numește JavaScript și rulează pe partea de client (sau navigator Web), destinat sporirii interactivității paginilor WWW.

Lucrând împreună cu elementele (etichetele) limbajului HTML, JavaScript asigură o reacție imediată la evenimentele atașate acestor elemente și furnizează o dinamică sporită conținutului paginii. [5]

JavaScript permite posibilitatea unei validări rapide a datelor de intrarea preluate prin formulare HTML, și diverse prelucrări de informații. JavaScript este practic un limbaj interpretat de navigatorul Web iar dependența tipului de navigator fiind evidentă. Datorită acestui fapt, o secvență de cod JavaScript, este posibil să aibă un comportament anume pe un navigator Web și alt comportament pe un alt tip de browser.

Netscape Navigator 2.0 a fost primul navigator Web care a înglobat un interpretor JavaScript, însă în prezent toți navigatorii Web au integrat acest limbaj. Codul JavaScript interacționează cu etichetele statice HTML în procesul de dezvoltare al unei aplicații Web.

Acest cod oferă o comportare dinamică a acestor pagini Web și implicit o apropiere a comportamentului al unei aplicații desktop.

Pe lângă dezavantajul dependenței de un navigator, codul JavaScript nu poate fi ascuns, fiind total accesibil oricărui cine apelează paginile Web respective.

În cadrul acestui capitol nu se va face o prezentare în detaliu a acestui limbaj, exemplele de utilizare se regăsesc fără nici o restricție și orice programator putând să preia de pe Internet orice secvență de cod JavaScript, dedicate celor mai diverse funcționalități dorite.

Validare de date numerice de intrare

O funcție JavaScript ce se declanșează la apăsarea unei taste în interiorul unei casete INPUT dintr-un formular se prezintă în exemplul de mai jos. Această funcție permite tastarea doar a cifrelor în interiorul acestei casete, sau a unor caractere de control, acest lucru fiind benefic pentru a evita preluarea unor date eronate și asigurând o validare în timp real a conținutului.

În această funcție se poate observa structura a două situații de rulare a codului pe un navigator cum ar fi Internet Explorer, respectiv MozillaFirefox. Onkeypress este evenimentul atașat etichetei INPUT. Funcția returnează o valoare fals sau adevărat în funcție de codul ASCII al tastei.

Codul ce returnează valoarea fals care nu permite preluarea caracterului ASCII este următorul:

Validare conținut casete INPUT

Codul script următor integrează JavaScript pentru a forța completarea cu informații a unor casete din cadrul unui formular. Diferența dintre codul script anterior și codul următor, este că nu se verifică conținutul informației, ci doar prezența unei informații.

Scopul acestui exemplu este de a puncta câteva evenimente declanșatoare atașate unor casete INPUT sau chiar al unui întreg formular, respectiv exemplificarea modului de referire a unor etichete HTML în cadrul codului JavaScript.

Efectele acestui cod script se regăsesc în figurile 3.4 și 3.5

Funcția checkform atașată formularului FORM și apelată cu parametrul this (semnificând eticheta curentă HTML în cadrul căreia este referit evenimentul declanșator al

funcției – în cazul de față, formularul FORM), verifică succesiv (la apăsarea butonului de tip SUBMIT) conținutul celor trei casete din formular. Pe fiecare din cele trei ramuri if, dacă conținutul casetei referite este vid, focusul rămâne în acea casetă până la o completare cu date a acelei casete (spre exemplu, pentru prima casetă cu numele NUME din formularul FORM: form.nume.focus()).

Se poate remarca modul în care poate fi referit în JavaScript un element al unui formular: form.nume.value–precizând succesiv numele formularului (form–ca parametru sau this–ca formular curent), numele etichetei INPUT, respectiv proprietatea value. Această verificare realizează o validare/invalidare a conținutului casetelor abia în momentul unui eventual transfer al acestor date spre o altă pagină, prin apăsareaunui buton SUBMIT (deci după eventuala completare a tuturor câmpurilor formularului-fig. 3.4).

O variantă mai rapidă de validare constă într-o verificare a conținutului casetelor în momentul părăsirii lor –evenimentele declanșatoare fiind onclick pe caseta următoare (deci s-a părăsit o casetă al cărei conținut este verificat, făcând-se click_mouse pe caseta următoare), respectiv onblur (pe caseta curent verificată fig. 3.5).–semnificând părăsirea casetei focusate (tasta TAB, click mouse pe altă casetă), respectiv pierderea focusului acesteia.

Figura 3.4 Validare la SUBMIT(verificare la final)

Figura 3.5 Validare caseta la OnClick pe caseta următoare (verificare on-line)

În cazul în care funcția returnează valoarea FALSE construcția JavaScript de genul “return funcție()” înglobat în HTML, permite anularea evenimentului declanșator pentru funcția checkform, anulează efectul SUBMIT. În cazul în care nu se îndeplinește condiția verificată toate funcțiile (referite în aplicația exemplificată) returnează FALSE.

Verificarea conținutului a unei anumite casete precizate în codul script se realizeză cu funcțiile checkinput, respectiv checkinput_alt, Cel mai important fiind evenimentul care le declanșează, respectiv eticheta HTML de care este atașat acel eveniment.

Astfel:

-Evenimentul onclick atașat casetei nota1, apelează funcția checkinput_alt(având ca parametru chiar FORM-ul curent), verificând conținutul casetei INPUT precedente -nume.

– Evenimentul onclick definit pe caseta nota2, apelează funcția checkinput (având ca parametru chiar FORM-ul curent), verificând conținutul casetei INPUT precedente-nota1.

-Evenimentul onblur, definit suplimentar pe caseta nota2, apelează tot funcția checkinput, deosebirea față de cazul precedent constând în faptul ca onblur semnifică o părăsire a casetei curente prin tasta sau prin click mouse pe orice altă casetă, declanșându-se la o pierdere a focusului de către caseta curentă (prompter-ul părăsește caseta). Altfel spus, onclick interceptează evenimentul corespunzător generat de click mouse pe casetă, iar onblur pe cel generat de o părăsire a casetei (echivalent cu onLeave în alte limbaje).

Prin strategia astfel adoptată, orice tentativă de părăsire fără completare a unei casete este anulată (prin returnare valoare FALSE de către funcția apelată), respectiv focusul este repoziționat pe caseta în cauză (printr-o comandă de genul: form.caseta.focus()). Acest mod de verificare ―încrucișată‖ a conținutului casetelor INPUT, dublată de o verificare suplimentară la submiterea finală, face practic imposibilă pasarea de către formular, spre scriptul apelat, a unor parametri nuli.

Aplicație de mapare pe o imagine

Codul Script pentru aplicația de mapare pe o imagine este exemplificată pentru crearea unei ”hărți” pe o imagine. Acest script capturează deplasarea mouse-ului pe ecran, respectiv click-uri ale mouse-ului pe această imagine, interceptate de o etichetă ancoră <A> și reacționează prin afișarea unor mesaje definite. O mapare pe imagine definește anumite locații în genul unei hărți iar navigatorul răspunde prin apeluri JavaScript la anumite interacțiuni ale utilizatorului cu acestea.

În figura 3.6s unt definite trei zone dreptunghiulare pe această imagine:

zona titlul cărții -partea superioară a imagini.

numele autorilor -sub zona titlu.

zona editură în partea inferioară a imaginii.

Interacțiunea cu tot restul zonei global definită prin atributele WIDTH și HEIGHT ale etichetei IMG, este tratată de o ramură separată a secvențelor de cod (ramura else). Pe tot restul ecranului aplicația nu asigură nici o interacțiune. Figura 3.6 prezintă pagina așa cum apare în browser-ul Microsoft Internet Explorer (scriptul, în forma descrisă în continuare, funcționând doar pe acest tip de browsere). Codul complet al aplicației este următorul:

Figura 3.6 Mapare mesaje pe o imagine-hartă folosind JavaScript

Sunt relevante in acest exemplul de cod script următoarele aspecte:

-la rularea acestui script în care este integrat cod HTML și cod JavaScript, o pagină Web care conține o imaginea „pozaexemplu.gif” și o caseta de tipul INPUT este generată și afișată pe ecran;

-La mișcarea mouse-ului pe ecran, în caseta de tip INPUT se afișează un mesaj cu textul ce precizează zona în care se deplasează mouse-ul. Un mesaj care solicită alegerea unei zone de pe imagine și coordonatele curente ale mouse-ului sunt afișate în caseta INPUT dacă acest pointer al mouse-ului nu se află într-o zonă mapată a imaginii.

– Într-o casetă popup de tip ALERT este afișat un mesaj, doar dacă se face un click pe o zonă mapată a imaginii respective, acest mesaj descriind numele zonei. În cazul în care se face click pe o zonă din afara hărții, un mesaj de avertizare care conține coordonatele mouse-ului, este afișat într-ocasetă de tip ALERT.

Două secvențe distincte pot fi remarcate în ceea ce priveste codului :

a) Secvența de cod HTML generează fundalul hartă al imaginii, respectiv zona de afișare a unor mesaje într-o caseta HTML INPUT. De remarcat folosirea unei etichete ancoră <A> , al cărei atribut href (referință hipertext -setat în mod normal spre un alt fișier script apelat), referă în cazul de față o funcție JavaScript (integrată în scriptul curent), interceptând orice apăsare de mouse (eveniment implicit specific unei referințe ancoră <A>). Evident, în această secvență, elementelor HTML le sunt atașate evenimente, respectiv apeluri ale unor funcții JavaScript adecvate funcționalităților dorite.

b) Secvența de cod JavaScript, conținând o declarație de două variabile (vizibile în toate funcțiile din cadrul scriptului), respectiv patru funcții JavaScript, fiecare cu o anumită funcționalitate.

Rolul fiecăreia dintre cele patru funcții JavaScript integrate în cadrul aplicației este descris în continuare . Prima funcție este „Funcția miscare” este folosită în momentul detectării unei mișcări a mouse-ului, care citește și stochează în permanență coordonatele curente ale mouse-ului (x_curent=event.x; y_curent=event.y) în două variabile publice, accesibile în tot codul JavaScript. Tot în cadrul codului acestei funcții, este realizat si un apel către a doua funcție numită în_zonă.

Această funcție în_zonă, este definită prin coordonatele curente ale mouse-ului, respectiv coordonatele a două puncte care alcătuiesc o anumită zonă vizată pe imagine (în total, 6 parametri), returnează o valoare booleană ADEVĂRAT sau FALS, după cum coordonatele curente al mouse-ului determină un punct din interior sau din afara zonei definite prin două puncte (aceastea corespund celorlalți patru parametri ai ei). Operatorul && are semnificația unui ȘI logic, primii doi parametri ai funcției fiind coordonatele x și y ale mouse-ului, iar următorii parametri fiind coordonatele x și y ale celor două colțuri opuse (stânga-sus și dreapta-jos) care definesc o zonă dreptunghiulară de mapare pe imagine.

Dacă mouse-ul este încadrat în interiorul uneia dintre cele trei zone distinct mapate pe imagine este verificată de funcția mișcare printr-o structură, if-else. Se apelează o funcție afiseaza_text care va afișa în caseta de tip INPUT un mesaj definit doar dacă valoarea booleană este TRUE. Iar dacă este FALSE (ramura else), va fi afișat un mesaj adecvat, care include și coordonatele curente ale mouse-ului.

A patra funcție este apasarea pe mouse și aceasta verifică încadrarea coordonatelor curente ale mouse-ului în zonele definite și mapate pe imagine (apelând funcția in_zona într-o structură condițională if-else), afișarea mesajelor definite sunt determinate de rezultatul boolean returnat, iar caseta folosită este de tip ALERT (JavaScript).

Codul script anterior poate funcționa corect doar pe navigatorul Internet Explorer iar aceasta este dovada ce ridică probleme de compatibilitate cu navigatorul care folosește JavaScript.

În cazul în care se foloste navigatorul MozillaFirefox, codul script trebuie adaptat astfel:

La eticheta IMG se atribuie un nume pentru a putea fi referită în JavaScript:

Codul Java se va modifica în felul următor:

Se modifică linia în secvența publică executată la rularea aplicației:

document.exemplu.onmousemove = miscare1; unde mișcare1 este o nouă funcție (construită pe scheletul deja existentei funcții mișcare), fiind apelată doar de navigatorul MozillaFirefox la o mișcare a mouse-ului în interiorul paginii, doar pe obiectul cu numele exemplu (practic doar pe imaginea referită prin eticheta IMG). Astfel, scriptul JavaScript va debuta cu secvența următoare:

Dacă se dorește ca funcția definită miscare1 să capteze coordonatele mouse-ului de pe întregul ecran se folosește și linia de cod comentată.

Această capteare a coordonatelor se realizează nu doar în zona mapată, impusă de coordonatele etichetei IMG cu numele exemplu.

Funcția miscare1 se construiește pornind de la funcția miscare existentă, modificându-se liniile citind coordonatele curente ale mouse-ului (parametru de intraree având semnificația evenimentului onmousemove interceptat și având o acțiune definită prin secvența de cod JavaScript anterior precizată):

Doar aceste linii de cod se modifică, restul codului script al acestei aplicații rămâne nemschimbat. Prin această modificare s-a rezolvat o problema majoră cea de a citi coordonatele curente ale mouse-ului utilizând o secvență de cod JavaScript compatibilă cu navigatorul MozillaFirefox. Prin această completare a scriptului, aplicația poate rula adecvat pe ambii navigatori.

Folosind codul JavaScript în care există foarte multe evenimente, fiecare aceste evenimente se pot atașa diverselor elemente-etichete HTML. Aceste evenimente rezultă la o interacțiune dinamică a acestora cu utilizatorul. Fig. 3.7 prezintă doar o foarte scurtă selecție a unor astfel de evenimente, numite și evenimente HTML DOM (Document Object Model), precizându-se acțiunea la care sunt declanșate, respectiv eticheta HTML de care pot fi atașate (multe dintre aceste evenimente putând fi comune maimultor etichete HTML).

Figura 3.7 Evenimente JavaScript

jQuery

jQuery [6] este o librărie JavaScript creată de John Resig in 2006 sub motto-ul: Write less, do more. jQuery simplifică procesul de animare și de event handling din HTML și Ajax pentru a scrie codul mai rapid. jQuery este un toolkit js creat în mod special pentru a simplifica diverse task-uri scriind mai puțin cod. Iată o listă cu cele mai importante lucruri aduse de jquery:

Manipulare DOM: jQuery face selectarea și modificarea elementelor DOM mai simplă, folosind un motor de selectare cross-browser numit Sizzle.

Event handling: jQuery oferă o gamă variată de moduri elegante de a capta un event (precum click-ul pe un link) fără a ne încurca în cod HTML sau JS.

Suport AJAX: jQuery ajută foarte mult la dezvoltarea de aplicații folosind tehnologia AJAX.

Animatii: jQuery vine cu o mulțime de animării incorporate.

Lightweight: jQuery este o librărie foarte mică – are undeva la 19KB.

Cross Browser: jQuery are suport între navigatori de pagini WEB și funcționează fără probleme in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome si Opera 9.0+

Tehnologii: jQuery suporta cele mai noi tehnologii, precum CSS3, XPath.

Adăugarea librariei jQuery în Pagina Web

Librăria jQuery poate fi stocată intr-un singur fișier JavaScript, conținând toate metodele jQuery. Adăugarea librăriei jQuery la o pagina WEB se realizează cu următorul mark-up:

tagul <script> trebuie sa fie în secțiunea <head> a paginii.

Din exemplul următor reiese cum metoda jQuery hide(), ascunde toate elementele <p> intr-un document HTML.

Sintaxa jQuery

Selectarea Elementelor HTML și efectuarea de acțiuni cu aceste elemente se realizează cu o sintaxă jQuery fiind compusă din următoarele elemente:

Sintaxa de bază fiind: $(selector).acțiune()

• Semnul dolar este pentru a defini un cod jQuery.

• Un (selector) pentru a selecta elementele HTML.

• Și o acțiune jQuery action() ce se execută pe elemente.

În exemplele următoare sunt descrise câteva dintre sintaxele jQuery uzuale:

$(this).hide() – elementul curent din sintaxă este ascuns

$("p").hide() – toate paragrafele se ascund

$("#test").hide() – ascunde elementul cu id-ul "test"

Funcția Document Ready

Metodele jQuery, din exemplu sunt în interiorul unei funcții document.ready():

Această metodă este folosită pentru a preveni executarea codului jQuery înainte de încărcarea completă a documentului.

Câteva acțiuni care pot eșua dacă funcțiile sunt rulate înainte ca documentul să fie încărcat complet sunt dacă se încearcă să se ascundă un element care încă nu există sau se cere obțineținerea dimensiunii unei imagini care nu a fost încărcată.

Selectorii JQuery

Selectorii jQuery sunt concepuți pentru a permite selectarea și manipularea elementelor HTML ca un element singular sau ca un grup. Elementul de bază este modul în care jQuery selectează exact elementele la care se dorește să se aplice efecte. Selectorii jQuery permit selectarea de Elemente HTML (sau grupuri de elemente) în funcție de conținut, numele elementului, sau numele atributului.

Acești selectori JQuery pot fi de mai multe tipuri:

Selectorii jQuery de Atribute

Librăria jQuery folosește expresii XPath pentru a selecta elemente cu anumite atribute.

$("[href]") selectează toate elementele cu un atribut href.

$("[href!='#']") selectează toate elementele cu atribut href DIFERIT de "#".

$("[href='#']") selectează toate elementele cu valoare href egala cu "#".

$("[href$='.jpg']") selecteaza elementele cu atribut href ce au terminația ".jpg".

Selectorii jQuery de Elemente

jQuery poate folosi selectori CSS pentru a selecta Elemente HTML.

$("p") se poate selecta toate elementele <p>.

$("p.intro") se selectează toate elementele <p> cu class="intro".

$("p#demo") selectează toate elementele <p> cu id-ul "demo".

Selectori jQuery de CSS pot fi utilizați pentru a modifica proprietăți CSS ale elementelor HTML.

În exemplul următor se modifică culoarea de fundal la toate elementele <p> în culoarea galbenă.

Funcțiile JQuery de evenimente

Funcțiile esențiale în jQuery sunt metodele de manipulare al evenimentelor, iar gestionarii de evenimente sunt metode ce se apelează atunci când "se întâmplă ceva" în codul HTML. Termenul "triggered (sau "fired") de un eveniment" este foarte mult utilizat și în mod uzual codul jQuery al metodei de gestionare a evenimentului se introduce în secțiunea <head>. În sintaxa de mai jos, este apelată o funcție când evenimentul click al butonului este declanșat:

Funcțiile Slide – slideUp, slideDown, slideToggle

Funcțiile slide din librăria jQuery glisează în mod gradual elementele selectate și această funcție jQuery are urmatoarele metode slide:

Glisare în jos: $(selector).slideDown(viteză,callback)

Glisare în sus $(selector).slideUp(viteză,callback)

Comutare: $(selector).slideToggle(viteză,callback)

Parametrul de viteză poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde, iar parametrul callback reprezintă numele unei funcții ce va fi executată după ce funcția curentă se termină.

Exemplu de funcție glisare în jos:

Exemplu de funcție glisare în sus:

Exemplu de funcție slideComutare:

Functii jQuery Fade – fadeIn, fadeOut, fadeTo

Aceste metode jQuery de fadeIn (opacitate așcendentă), fadeOut (opacitate deșcendentă) și fadeTo (schimbarea opacității la o valoare definită) schimbă în mod gradual opacitatea elementelor selectate.

Sintaxele jQuery au urmatoarele metode schimbare a opacității:

$(selector).fadeIn (viteza,callback)

$(selector).fadeOut (viteza,callback)

$(selector).fadeTo (viteza,opacity,callback)

La fel ca și la funcția de glisare, parametrul viteză poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde. Parametrul opacity din metoda fadeTo() permite decolorarea la un anumit nivel de opacitate, iar parametrul callback reprezintă numele unei funcții ce va fi executată dupa ce funcția curentă se termină.

Animații jQuery

Realizarea unei animații se poate efectua cu următoarea sintaxă jQuery: $(selector).animate({params},[durata],[easing],[callback])

În această sintaxă parametrul cheie este params și el definește proprietățile CSS care vor fi animate. Acest parametru permite animarea a mai multor proprietăți în același timp:

Parametrul al doilea este durata care specifică viteza de animație și aceste valori pot fi: "fast", "slow", "normal" sau milisecunde.

Funcții jQuery de Callback

Codul JavaScript este executat totdeauna linie-cu-linie, însă la animații, următoarea linie de cod poate fi executată chiar dacă animația nu este finalizată și aceasta poate crea erori frecvente. Pentru a preveni această eroare, se poate crea o funcție numită callback. Funcția callback este executată dupa ce efectul curent de animație este finalizat.

Sintaxa pentru această funcție este următoarea:

$(selector).hide(viteza,callback)

Parametrul callback este o funcție ce va fi executată după ce efectul hide este complet.

Exemplu cu funcția callback:

Fără acest parametru callback, casuța de alert este afișată înainte ca efectul hide să fie complet.

Exemplu fără funcția callback:

Modificarea conținutului HTML

Librăria jQuery conține funcții puternice pentru modificarea și manipularea elementelor HTML și a atributelor, această metodă html() schimbă conținutul elementelor HTML selectate, sintaxa fiind următoarea:

$(selector).html(conținut)

Adaugarea de conținut HTML

Adăugarea conținutului HTML se poate face cu următoarele metode:

Metoda append() – adaugă la sfarșitul conținutului specificat al elementului HTML curent:

$(selector).append(conținut)

Metoda prepend() – adaugă la începutul conținutului specificat al elementului HTML curent:

$(selector).prepend(conținut)

Metoda after() introduce HTML dupa toate elementele care se potrivesc:

$(selector).after(conținut)

Metoda before() introduce conținut HTML înainte de toate elementele care se potrivesc:

$(selector).before(conținut)

Metodele jQuery height() si width()

Librăria jQuery are doua metode importante pentru manipularea dimensiunii.

• height() – modificarea înălțimii

• width() – modificarea lățimii

Metoda height() stabilește sau returnează înalțimea tuturor elementelor corespunzătoare;

$("#div1").height("200px");

Metoda width() stabilește sau returnează lățimea tuturor elementelor corespunzătoare.

$("#div2").width("300px");

XML

Putem considera XML ca reprezentând un standard internațional pentru descrierea de marcaje(markups) privitoare la resursele electronice. În fapt, XML reprezintă un meta-limbaj (descriere formală a unui limbaj, conform unei gramatici – suită de reguli prin care, pe baza unor simboluri, se generează cuvinte). La început, a fost văzut ca un limbaj de adnotare (de formatare) de texte, dar scopurile actuale depășesc această interpretare îngustă.

Termenul marcaj (markup) a fost utilizat inițial pentru a descrie anumite adnotări, note marginale în cadrul unui text cu intenția de a indica tehnoredactorului cum trebuie listat un anumit pasaj ori chiar omis. Cum formatarea și imprimarea textelor au fost automatizate, termenul s-a extins pentru a acoperi toate tipurile de coduri de marcare inserate în textele electronice cu scopul de a indica modul de formatare, listare ori alte acțiuni. Marcajul (codarea) reprezintă, astfel, o acțiune de interpretare explicită a unui fragment de dată. Astfel, un limbaj de specificare oferă un set de convenții de marcare utilizate pentru codificarea textelor. Un limbaj de marcare trebuie să desemneze mulțimea de marcaje obligatorii, permise, maniera de identificare a marcajelor și care este semantica fiecărui marcaj disponibil (similar procesului de specificare a sintaxei și semanticii unui limbaj de programare).

Există următoarele caracteristici definitorii ale XML, primele trei preluate de la SGML: utilizarea marcajelor descriptive (descriptive markups), adoptarea tipurilor de documente via DTD (Document Type Definition), independența datelor și caracterul case-sensitive (majuscule-le diferăde minuscule).

Printre trăsăturile care au făcut meta-limbajul XML să fie folosit în industria software putem enumera: suportul acordat Web-ului, facilitățile pentru utilizarea internaională, meta-limbajul (se permite definirea de noi limbaje, într-o manieră portabilă), soluție pentru reprezentarea conținutului resurselor Web identificate via URI.

Așadar, XML este o metodă de descriere universal a informației astfel încât atât computerele, cât mai ales oamenii să o poată înțelege. Scopurile limbajului sunt cele legate de utilizarea lui în Internet, suportând o varietate de aplicații, dar fiind mult mai flexibil decât HTML. Oferind o manieră universal pentru reprezentarea (descrierea) informațiilor hipertext, XML poate fi văzut ca o tehnologie complementară limbajului HTML, nu ca o înlocuire a sa.

Părțile componente ale unui document XML

Un document XML poate cuprinde următoarele categorii de constituenți, declarația,

elementele, atributele, entitățile, secțiunile de marcare, instrucțiunile de procesare.

Documentele XML pot să înceapă cu o declarație (numităși prolog) XML care specifică versiunea limbajului XML utilizat – de exemplu: <?xml version="1.0" encoding="UTF-8" ?> (de asemenea, s-a precizat și tipul de codificare a setului de ca-ractere folosit). Componenta structural a unui document XML este elementul.

Diferite tipuri de elemente au asociate nume diferite. Fiecare element trebuie specificat explicit prin intermediul marcajelor (tag-urilor). Perechea marcaj de început (start tag) –marcaj de sfârșit (end tag) este folosită la încadrarea fiecărei instanțe a elementului respectiv în cadrul unui text. În XML, se utilizează <element> pentru a specifica un tagde început și </element> pentru cel de sfârșit, unde element este numele unui element oarecare (specificat de utilizator ori deautoritatea care a redactat specificațiile limbajului bazat pe XML folosit).

Regulile sintactice privitoare la numele de elemente sunt similare celor privitoare la

identificatorii de variabile. Numele începând cu caracterele „xml” (în orice modalitate de scriere, cu majuscule sau minuscule) sunt rezervate. Numele de element nu poate conține spații albe. Un element poate fi vid (nu conține nimic între tag-urile de început și sfârșit), putând fi scris fie <element></element>, fie prin forma prescurtată <element />. De asemenea, poate include un text (șir de caractere) ori alte elemente. Mai multe elemente de același tip pot fi, așadar, imbricate.

Un aspect deosebit de important este cel privitor la faptul că elementele trebuie să fie închise și imbricate corect. Conținutul textual al unui element poate fi compus din caracterele permise de codificarea precizată de atributul encodingdin declarația XML, orice apariție de spații albe multiple fiind implicit redusă la un singur caracter spațiu.

Spațiile de nume XML

În unele situații pot apărea confuzii, atunci când se folosesc date provenite din diverse surse (documente) XML care pot avea elemente/atribute cu același nume, dar cu semnificații (semantici) diferite. Pentru evitarea acestor ambiguități sunt folosite spațiile de nume, astfel încât numele de elemente și/sau atribute vor fi identificate în mod unic, evitându-se conflictele.

Necesitatea folosirii spațiilor de nume se poate remarca din exemplul următor, în care considerăm douădocumente XML, primul cu informații despre partenerii de afaceri, al doilea despre numele furnizorilor de portocale:

Documentul care le utilizează pe precedentele și folosește spații de nume pentru evitarea ambiguităților („nume reprezintă un nume de persoană sau un nume de companie?”; idem pentru adresă) ar putea fi următorul:

Atributul xmlns este folosit pentru declararea spațiilor de nume, iar valoarea lui trebuie săfie un URI, fie localizând o resursă prin adresa ei cazul URL (Uniform Resource Loca-tor), fie desemnând un nume unic asociat resursei în cauză– facilitate oferităde URN (Uniform Resource Name).

Prin intermediul construcției xmlns, se asociază un vocabular, denumit și spațiu de nume(namespace), pentru elementele în cauză.

În cele ce urmează, voi furniza un exemplu complet, în care se vor folosi mai multe vocabulare, fiecare desemnat de un spațiu de nume XML. Documentul servește pentru stocarea rezultatelor unui chestionar anonim, privitor la desfășurarea unui curs (se poate observa și utilizarea referințelor la entități, plus a atributelor speciale xml:id și xml:lang).

REALIZAREA APLICAȚIEI ÎN CONSTRUCT 2

În cele ce urmează voi prezenta pe scurt aplicația realizată cu instrumentul software Construct 2, însă acestă alegere a fost destul de dificilă, ținând cont de diversitatea limbajelor, a tehnologiilor, mediilor și instrumentelor software utilizate la ora actuală în domeniul dezvoltării aplicațiilor Web.

După mai multe încercări și recomandări, am ales software-ul Construct 2 care este conceput special pentru jocuri 2D și aplicații bazate pe limbajul HTML5, și care poate fi implementat atât pentru sitemul de operare Android, cât și alte sisteme cum ar fi iOS și Windows. Acest software permite oricui să construiască foarte ușor jocuri sau aplicații, necesitând un nivel moderat de cunoștințe de programare.

În esență, Construct 2 este bazat pe o interfață rapidă și accesibilă, având acces clar la o gamă largă de instrumente care permit oricui, relativ ușor, să realizeze o aplicație sau chiar și un joc 2D. [9]

Editorul de layout oferă o interfață vizuală pentru a proiecta nivelurile aplicației. Obiectele pot fi aranjate pe straturi separate de organizare, permițând paralaxă avansată și combinații de efecte. Există, de asemenea, un editor de imagine încorporat pentru a face modificări rapide la grafica folosită.

Evenimentele sunt create prin selectarea condițiilor și a acțiunilor posibile, dintr-o listă organizată. Lista evenimentelor, sau Sheet Event, este proiectată pentru a fi la fel de ușor de citit, astfel încât programatorul poate obține rezultate imediate. Foi de evenimente întregi pot fi reutilizate de către alte niveluri, economisind recrearea de evenimente pentru niveluri noi.

Software-ul permite previzualizarea instantanee, în orice moment, a aplicației realizate. Nu este nevoie de așteptare pentru compilare sau alte procese consumatoare de timp. Prin apăsarea unui singur buton, aplicația rulează într-o fereastră de browser, chiar și pe un dispozitiv smart-phone conectat la rețeaua wireless. Acest lucru permite o rapidă dezvoltare interactivă, care prilejuiește testarea pe parcursul a întregului proces de creare, ceea ce face mult mai ușoară detectarea și corectarea eventualelor problemele. Faptul că se poate previzualiza instantaneu proiectul, a fost un factor decisiv în alegerea acestui instrument software, deoarece a simplificat semnificativ realizarea structurii și conceptul grafic. Însă cel mai mult a ajutat la programarea aplicației și la realizarea efectelor de mișcare al paginilor.

În software-ul Construct 2 au fost realizate șase pagini (Layout-uri) pentru a putea avansa de pe pagina la alta, și pentru a putea adăuga ulterior alte categorii.

Construct 2 realizează pentru fiecare Layout și o foaie de evenimente (EventSheet), în care se pot programa toate efectele, folosind funcțiile IF și variabile globale definite.

EventSheet-ul

Fiecare EventSheet are o listă de evenimente, care conține declarații condiționate sau declanșatoare. Odată ce acestea sunt îndeplinite, pot fi efectuate acțiuni sau funcții. Grupurile pot fi folosite pentru a activa sau dezactiva mai multe evenimente simultan, și pentru organizare în cazul proiectelor mai mari.

Evenimente logice avansate, cum ar fi OR, IF, sub-evenimente, variabile locale sau globale permit realizarea unor acțiuni sau funcții sofisticate, fără a învăța un limbaj de programare mai dificil. Aceste blocuri de evenimente sunt executate în ordine descrescătoare, chiar și dacă sunt organizate în grupe sau subgrupe.

În aceste EventSheet-uri a fost concepută toată programarea efectelor de mișcare între Layout-uri, efectul de derulare al textului și altele. Condiția de bază folosită cel mai mult este funcția IF, iar majoritatea evenimentelor din care rezultă un efect încep cu această funcție.

Figura 4.1 EventSheet-ul

Un exemplu care ilustrează modul în care sunt descrise evenimentele, efectul de derulare al textului, pentru meniul HELP, este descris în codul bazat pe limbajul XML și este prezentat mai jos.

Condițiile de sistem nu sunt condiționate de un obiect sau de o acțiune fizică, ca de exemplu atingerea sau click-ul pe un buton, ele sunt, pur și simplu, fie adevărate sau false. Există trei tipuri de condiții sistem: condiții normale, condiții declanșatoare și condițiile buclă.

Figura 4.2 Condiții de sistem

Layout-ul

Rezoluția acestui Layout este stabilită la 518×860 pixeli, pentru a putea rula în modul fullscreen pe majoritatea dispozitivelor, fie că sunt smart-phone sau tablete.

Cele șase Layout-uri au fost denumite după structura aplicației. Ele conțin obiecte de tip PNG, care se pot fi editate în Photoshop, iar în Construct 2 se actualizează la fiecare pornire, acest lucru fiind benefic pentru o eventuală modificare de design pe parcursul dezvoltării aplicației.

Avansarea la diferite niveluri a fost concepută cu butoanele implicite al soft-ului Construct, însă aceste butoane au fost ascunse. Aceste butoane ascunse mențin funcția de buton, doar că sunt invizibile în aplicație, deoarece sunt mult mai ușor de modificat în Photoshop, decât rescierea codului CSS. Actualizarea lor se face în mod implicit de către Construct 2.

Figura 4.3 Butoanele implicite în Construct 2

Toate efectele de mișcare au fost realizate cu un efect instalat ulterior în soft-ul Construct 2, care se numește MOVE TO. Acest efect funcționează doar cu doi parametrii, mișcarea obiectului pe coordonatele X și Y.

Avansarea la nivelul următor, adică la una dintre paginile din categoriile incluse în pagina de start, a fost realizată cu condiția ON TAP GESTURE ON OBJECT:

Figura 4.4 Condiția: la atingerea butonului

Pagina următoare la care se avansează se află în afara Layout-ului, iar datorită acestui fapt, obiectul nu este vizibil. Însă la apăsarea butonului ascuns, pagina de la nivelul următor se mișcă pe coordonata X, ajungand astfel la poziția inițială din următorul nivel. Prin această metodă a fost obținută o contiunitate între trecerile de la o pagină la alta. Codul corespunzător pentru cele descrise, este prezentat mai jos, pe baza limbajului XML.

După ce s-a avansat la Layou-ul următor, de exemplu la categoria Monumente și clădiri istorice, se execută toate condițiile declarate din EventSheet-ul acestui Layout. Toate obiectele sunt suprapuse în Layout, deci sunt vizibile. Datorită acestui fapt, la fiecare start de Layout au fost declarate câteva condiții inițiale pentru a fi executate prima oară.

În fig. 4.5 se exemplifică una dintre aceste condiții, care este necesară pentru a ascunde obiectele ce urmează a fi afișate în urma executării a diferitelor acțiuni.

Figura 4.5 Setarea opacității obiectelor la început de Layout.

La atingerea oricărui buton din pagina destinată Monumentelor și clădirilor istorice, se avansează la descrierea obictivului, acest efect fiind realizat tot cu acțiunea MOVE TO. Condiția este aceeași, doar că nu se avansează la un alt Layout, ci se ascund obiectele ce se doresc invizibile prin setarea opacității la zero.

Un alt efect folosit pentru a putea derula textul, este efectul Drag&Drop, acesta fiind furnizat de Construct 2, în mod implicit. Acest efect este foarte util atunci când menținem degetul pe un obiect și dorim să-l mișcăm pe axa X sau Y. Acest efect a fost deseori folosit pentru a derula textul pe axa X sau pentru a putea citi descrierea obiectivului. Însă atunci când se ajunge la sfârșitul textului, acest efect trebuie dezactivat, pentru a nu derula textul în afara Layout-ului.

Acest lucru a fost obținut prin mai multe declarații de sistem condiționate, prin compararea valorii mai mari sau mai mici pe axa Y enumerate mai jos și sunt observate în figura 4.6 și 4.7:

condiționarea obiectului să nu depășească o anumită valoare pe axa Y.

odată ajuns la această valoare să dezactiveze efectul Drag&Drop.

depășirea valorii să seteze o valoare mai mică sau mai mare pentru a crea un efect de blocare a textului pe poziția finală, pentru a nu ieși din Layout.

Prezentarea codului corespunzător pentru cele descrise, este ilustrat mai jos, pe baza limbajului XML.

Figura 4.6 Condiționarea mișcării obiectului pe axa Y

odată ce obiectul a ajuns la o valoare mai mică sau mai mare, să reactiveze efectul, pentru a putea derula textul în continuare.

Figura 4.7 Reactivarea efectului Drag&Drop

O altă provocare a fost resetarea textului la poziția inițială, atunci când s-a dorit revenirea la pagina anterioară. Însă după mai multe încercări, am realizat-o foarte simplu printr-o altă condiție.

La apăsarea butonului de înapoi, am folosit aceeași condiție și același efect de MOVE TO, descris în figura 4.4. Odată ce obiectul ajunge pe poziția inițială, pentru a reveni la pagina anterioară, se consideră că obiectul este pe ecran, adică vizibil. În acest caz, se execută condiția exemplificată în figura 4.8.

Figura 4.8 Resetarea poziției al obiectelor.

Cel mai complex EventSheet este cel al Layout-ului care conține harta. În acest EventSheet se află cele mai multe condiții, acțiuni și variabile globale, deoarece din această pagină se poate ajunge la descrierea tuturor obiectivelor aflate în această aplicație printr-o simplă atingere. În plus, se poate mări, respectiv micșora harta cu efectul Pinch Zoom. La această pagină se poate ajunge prin atingerea butonului cu textul “ARATĂ PE HARTĂ”, aflat pe fiecare descriere a obiectivelor.

Acest EventSheet conține cele mai multe variabile globale, deoarece sunt în strânsă legătură cu condițiile de sistem comparatoare, aflate în toate EventSheet-urile obiectivelor.

Variabilele sunt declarate zero și se modifică la valoarea unu atunci când condiția este îndeplinită și se execută. Când variabila se modifică la valoarea unu, ea rămâne astfel până când se execută condiția de schimbare la zero, din EventSheetul corespunzător.

Condiția de a trece la descrierea obiectivului, de exemplu Complexul Muzeal Goldiș, din Layout-ul HARTĂ, este structurată astfel și se repetă la toate obiectivele:

La atingerea butonului obiectivului Goldiș:

se modifică variabila la valoarea unu

se așteaptă efectul de mișcare al obiectului pentru a ajunge la Layout

se trece la Layout-ul corespunzător al acestui buton

Figura 4.9 Modificarea variabilei

Odată ajuns la Layout-ul denumit Cultură și istorie, în EventSheet-ul corespunzător a fost declarată o condiție de sistem comparatoare. Acastă condiție de sistem compară variabilele globale și execută comanda, structura fiind după cum urmează:

Se compară dacă variabila este zero sau unu, iar dacă condiția este adevărată se execută comenzile:

Se “distrug” și se setează opacitățile obiectelor, filtrându-le doar pe cele necesare pentru a afișa descrierea obiectivului ales

Se modifică variabila la valoarea de zero declarată inițial

Se execută și alte comenzi declarate

Figura 4.10 Modificarea variabilei globale la valoarea declarată inițial

CONTRIBUȚII ȘI CONCLUZII

Lucrarea de licență pune în evidență contribuțiile atât teoretice, cât și practice, dar și

metodele abordate, fapt ce a permis aplicarea acestora în realizarea unei aplicații pentru sistemul de oparare Adroid.

Contribuția teoretică constă în studiul și analiza deferitor tehnologii web și în modul de implementare al acestor tehnologii. Din studiul realizat, rezultă că una dintre opțiuni este HTML5, care permite crearea unor aplicații relativ complexe. Cealaltă opțiune este sistemul de operare Adroid pentru smartphone-uri, o platformă open source, care permite posesorilor libertatea de a instala orice aplicație doresc, chiar dacă nu este listată în Android Market Place.

Cercetările efectuate în cadrul lucrării de licență, pentru realizarea practică a proiectului, abordează următoarele tehnologii WEB:

HTML5 care aduce multe noi caracteristici sintactice. Aceste noutăți sunt proiectate pentru a facilita includerea și manipularea în web a conținuturilor multimedia și grafice, fără a fi nevoie să se recurgă la proprietățile de plugin și API. [6] Având la bază principiile după care a fost dezvoltat HTML, ultima versiune a acestuia, HTML5 se bazează pe structură, sens și conținut,ceea ce înseamnă că trebuie folosit numai pentru modificarea felului în care conținutul este afișat. Schimbările au fost efectuate, pentru a veni în sprijinul dezvoltatorilor și designerilor. O parte din tag-urile deja cunoscute au fost eliminate, iar altele au fost proaspăt introduse.

CSS, care spre deosebire de HTML5 definește "layout-ul" pentru documente. Cu alte cuvinte, HTML5 are rolul de a descrie ce este un element în pagină, iar CSS are rolul de a descrie cum trebuie să arate acel element.

Javascript și jQuery, care au devenit limbaje de scripting standard pentru WEB și pot fi introduse în HTML5. De obicei, codul JavaScript este găzduit în documentele HTML și executat în interiorul lor. JavaScript este un limbaj flexibil. În această privință, limbajul diferă radical de C++ sau Java. În JavaScript putem lucra cu o variabilă, deși nu-i cunoaștem tipul specificat înainte de rulare.

XML, care este un sistem de marcare similar cu HTML, diferența esențială fiind că tagurile nu sunt definite. Programatorul este liber să experimenteze, validarea prin care se verifică corectitudinea structurală a datelor poate fi editat, modificat cu ușurință, acesta necesitând doar un editor text simplu, precum Notepad sau Wordpad.

Contribuția practică constă în realizarea aplicației, folosind tehnologiile WEB mai sus menționate, în patru subgrupe și implementarea acestora.

Realizarea și implementarea a constat în următorii pași:

Testarea și alegerea unui software care folosește în special tehnologiile WEB menționate, rezultând în alegerea soft-ului Construct 2.

Elaborarea textului și alegerea fotografiilor fiecărui obiectiv, prin colaborarea cu administratorul site-ului www.aradcityguide.ro/.

Modificarea și realizarea unei hărți obținute de la Primăria Municipiului Arad, cu obiectivele incluse în această aplicație.

Realizarea design-ului grafic și a structurii aplicației în programul Photoshop.

Elaborarea secțiunii “AJUTOR”, pentru o mai bună înțelegere a funcționării aplicației.

Testarea pe mai multe dispositive Android, pentru optimizarea rezoluției și funcționalității, pe o gamă largă de dispozitive.

Acestă aplicație, intitulată ghidAR – ghidul turistic al Municipiului Arad, a fost realizată pentru a veni în întâmpinarea turiștilor care vizitează acest oraș minunat, fără a necesita o conexiune la internet și fără a presupune cunoașterea străzilor din municipiu, deoarece aplicația conține o hartă interactivă, prin care utilizatorul are acces la toate obiectivele incluse. Design-ul unic și simplu al butoanelor și așezarea lor în pagină permit utilizarea aplicației cu o singură mână și nu necesită cunoștințe avansate de utilizare.

În această lucrare de licență au fost descrise tehnologiile utilizate de către aplicația Construct 2 și totodată unele tehnici de abordare, de funcționare și scheme cu exemple concrete ai pașilor parcurși pentru finalizarea aplicației.

Am ales Construct 2, datorită faptului că este bazat pe o interfață prietenoasă, inteligibilă, cu acces clar la o gamă largă de instrumente care permit oricui, cu relativă ușurință, să realizeze o aplicație sau chiar un joc 2D. Software-ul permite previzualizarea instantanee, în orice moment, a aplicației realizate. Astfel, contribuie la o rapidă dezvoltare interactivă și permite testarea pe parcursul întregului proces de creare, ușurând detectarea și corectarea eventualelor problemele. Un factor decisiv în această alegere a fost faptul că soft-ul actualizează fișierele atașate la fiecare pornire, fapt ce favorizează la conceptul grafic, dar și o eventuală extindere a aplicației, prin includerea tuturor obiectivelor turistice din Municipiul Arad.

Câteva dintre propunerile mele de viitor sunt includerea unor posibilități de cazare pentru acomodarea turiștilor, dar și a unui traseu cu mijloacele de transport în comun și stațiile de taximetrie. O altă propunere pentru viitor este publicarea aplicației pe Google Play, pentru a oferi posibilitatea de a fi descărcată de oricine, bineînțeles gratuit. Însă una dintre cerințele de bază ale Google este să funcționeze atât în modul portret cât și în modul landscape. Pentru a realiza acest lucru este nevoie de cel puțin 5 variante ale aplicației, cu diferite rezoluții, care să permită funcționarea pe toate dispozitivele cu sistem de operare Android. Acest lucru va fi realizabil odată cu dezvoltarea aplicației care va include toate informațiile obiectivelor turistice din Municipiul Arad, obținute în colaborare cu Primăria și cu societățile comerciale care dețin aceste obiective.

În consecință, pentru viitor, aplicația va putea fi descărcată de oricine vizitează Municipiul Arad și dorește să obțină o descriere a obiectivelor turistice și a posibilităților de cazare, pentru a petrece o vacanță de neuitat.

Bibliografie

Programare WEB : supot de curs / Ioan Filip – București : Conspress, 2013 Bibliogr. ISBN 978-973-100-263-7

http://www.prologue.ro/blog-Web+design/flash-vs-html-5 , consultat în data de 15.04.2015

Ian S. Graham – “HTML Stylesheet Sourcebook”, Wiley, 1997

Darren Levy – “HTML/CSS / JavaScript: From Beginner to Whiz”

Phil Ballard, Michael Moncur – Sams Teach Yourself Ajax, JavaScript, and PHP All in One, Sams, 2008

http://www.invata-programare.ro/almanach/learn-jquery/despre-jquery , consultat în data de 15.04.2015

http://dpw.bistrita.ro/wp-content/uploads/jQuery_ro.pdf , consultat în data de 15.04.2015

Buraga, Sabin Corneliu. "Tehnologii Web." Matrix Rom, Bucharest (2001).

https://www.scirra.com , consultat în data de 15.04.2015

http://ro.wikipedia.org/wiki/HTML5, consultat în data de 15.04.2015