Licenta Parpalea Alexandru (1) [302965]

UNIVERSITATEA “LUCIAN BLAGA” DIN SIBIU

FACULTATEA DE INGINERIE

DEPARTAMENTUL DE CALCULATOARE ȘI INGINERIE ELECTRICĂ

PROIECT DE DIPLOMĂ

Absolvent: [anonimizat], 2017 –

UNIVERSITATEA “LUCIAN BLAGA” DIN SIBIU

FACULTATEA DE INGINERIE

DEPARTAMENTUL DE CALCULATOARE ȘI INGINERIE ELECTRICĂ

Controale Web pentru persoanele nevazatoare

Îndrumător științific: Asistent Dr. Ing. Alexandru Butean

Absolvent: [anonimizat], 2017 –

Introducere

1.1.[anonimizat]-ul reprezintă un aspect esențial în viața fiecărui individ. [anonimizat], să utilize aplicații Web cu ajutorul cărora să descope o [anonimizat] „un izvor al cunoasterii”. Totuși, pentru persoanele cu probleme de vedere și nevăzătoare această expansiune a Web-ului reprezintă o [anonimizat].

[anonimizat] a conținutului Web. Astfel, utilizatorii aplicației „vor citi continutul” [anonimizat], [anonimizat].

Termenul de pierdere a [anonimizat], dar și la indivizii care au raportat că sunt incapabili să vadă.

[anonimizat], defecte survenite ([anonimizat], preșcolară, școlară) și defecte tardive. [anonimizat]- ținându-se cont de timpul care a [anonimizat] o [anonimizat].

Aplicația se va adresa strict persoanelor cu deficiențe de vedere și persoanelor nevăzătoare în vederea accesibilității conținutului pentru a [anonimizat] o deficiență nu ar trebui să inhibe procesul de învățare și dezvoltare continuă.

Motivația alegerii temei

Ceea ce m-a motivat să aleg această temă a fost empatizarea cu copiii nevăzători. În urma socializării cu persoane nevăzătoare am constatat că o [anonimizat], [anonimizat] o portiță în vederea accesării unei aplicații Web.

În urma unor statistici din anul 2013 s-au constatat următoarele chestiuni: în România există peste 36.500 de oameni care au o [anonimizat] 65.000 de persoane care prezinta o [anonimizat] 60.000 [anonimizat] 20.000 nevăzători. Numărul total al nevăzătorilor cu certificat legal și al persoanelor cu deficiente de vedere cu vârste in intervalul 15 și 64 de ani din Polonia a fost estimat la 145.900 de indivizi (acest interval reprezinta 0,5% din populația totală cu vârstele enumerate mai sus).

Conform statisticilor, putem deduce faptul că sunt numeroase cazuri de indivizi care suferă de o deficiență de vedere, astfel această lucrare se axează strict pe problemă precizată anterior, încercând să le facilităm accesul pe paginile Web.

Utilizând cunoștințele acumulate în cadrul facultății, dar și cunoștințele dobândite în urma acțiunilor de voluntariat combinate cu documentarea științifică, voi încerca să dezvolt o aplicație Web pentru grupul țintă, astfel încât persoanele care au probleme vizuale grave/nevăzătorii să își poată contura ideea despre Web și să pornească primii păși în acest domeniu.

Aplicația a fost realizată folosind cunoștințele dobândite în facultate pe parcursul celor 4 ani. De-a lungul acestor ani de studiu, am asimilat cunoștințe relevante în realizarea aplicației, din cursurile:

Inginerie software

Programare orientată pe obiect

Dezvoltarea aplicațiilor WEB

Tehnologii pentru dezvoltarea de aplicații

Proiectarea bazelor de date

Cerințe generale

Statisticile actuale din Europa indică faptul ca afecțiunile congenitale(reprezentand afectiunile din nastere), glaucomul și traumatismele oculare ca sunt cele mai frecvente cauze ale unui handicap vizual. Totodata, trahomul și numeroase alte boli de ochi, eradicate în unele zone ale lumii, continuă să prezinte o problemă majora în alte zone subdezvoltate ale lumii (Africa, Asia). Desi unele afecțiuni oculare pot fi considerate boli ale mizeriei și ignoranței (trahomul), au apărut numeroase alte cauze ale pierderii vederii clasificate ca si boli ale civilizației. Un exemplu ar fi boala numita fibroplazia retrolenta, care este datorată de supradozarea oxigenului în timpul îngrijirii copiilor născuți prematur cu mijloace tehnice moderne (incubatoare). După cum s-a arătat, unele boli de ochi reprezinta caracteristici ale orbirii de bătrânețe (cataractă senilă, glaucomul), iar altele se manifestă in special la copii (cataractă congenitală, gliomul retinian).

Ceea ce ne propunem în această lucrare este să îndeplinim obiectivul general al lucrării, acela de a-i introduce pe nevăzători în domeniul Web facilitându-le accesibilitatea prin convertirea textului în sunet. Astfel, aceștia în loc de text vor primi semnale sonore, iar ei vor transmite semnalul prin anumite taste cheie.

De asemenea, se va utiliza partea audio de la Responsive Voice API care ne ajută să convertim textul în sunet. Acest framework poate converti text din 51 limbi, dar în lucrare ne vom axă doar pe limba engleză, limba română și limba germană, textul fiind tradus prin call-ul de API de la Google Cloud Translation.

Utilitate

Această cercetare are utilitate în domeniul integrării în viața socială online, astfel persoanele nevăzătoare nu se vor simți izolate de tehnologia actuală.

Pe plan economic, aplicația aduce un aport important, deoarece accesibilitatea conținutului este necesară pe fiecare site Web, astfel cu timpul persoanele nevăzătoare ar putea să fie mai independente făcând singure cumpărăturile online sau chiar să plătească facturi/taxe singure. Pe plan social, se pot face diverse grupuri în care nevăzătorii să socializeze între ei sau să fie un suport unul pentru celălalt din punct de vedere psihologic. Pe plan educațional, nevăzătorii pot acumula informații noi și pot urma cursuri independente.

Datorită faptului că aplicația are utilitate în mai multe planuri eu consider că va avea un impact puternic, deoarece nevăzătorii nu vor mai fi izolați de tehnologie – tehnologia nu va mai reprezenta o piedică pentru ei și un lucru pe care să-l evite, ci o modalitate de integrare.

Considerații teoretice

2.1. Limbajul JavaScript

2.1.1. Generalitãți

JavaScript se refera la limbajul de programare orientata pe obiect care sta la baza conceptului prototipurilor. Acest limbaj este utilizat in special pentru introducerea functionalitătilor în paginile web, codul Javascript este rulat de catre browser. Limbajul JavaScript este foarte cunoscut pentru folosirea lui în construirea site-urilor web, dar este folosit și pentru acesul la obiecte embedded în alte aplicații. Initial, acest limbaj a fost dezvoltat de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit in cele din urma în JavaScript.

2.1.2. Utilizare

Cele mai dese utilizãri sunt prezentate mai jos:

• Afișarea unor texte în pagina HTML-cum ar fi: numele persoanelor, ora și data exactă;

• Executarea unui JavaScript, ca reacție la anumite evenimente – un exemplu potrivit ar fi urmatorul: atunci când mouse-ul este deasupra unei imagini din pagina respectiva, imaginea se schimbă cu alta imagine sau in celalalt caz apare un mesaj anume;

• Modificarea conținutului paginilor web, ca un răspuns la anumite acțiuni ale utilizatorului sau introducerea unor date anume;

• Validarea datelor – poate fi verificata dacă datele sunt corect introduse de un anumit vizitator într-un formular, asigurându-ne că serverul va accepta datele respective;

• Detectarea browserului vizitatorului – permite afișarea unei versiuni a paginii Web, adaptată browserului utilizat de vizitatorul respectiv;

• Crearea de cookies – mici fișiere text stocate pe hard-disk-ul vizitatorului de către browser, atunci când JavaScript îi cere să execute acest lucru. Un cookie conține diverse informații: numele vizitatorului, preferințe de navigare, browserul, etc. Aceste informatii permit personalizarea paginii Web pentru fiecare vizitator în parte. La următoarea accesare a paginii, browser-ul citește fișierul cookie de pe hard-disk și poate afișa un mesaj anume.

2.1.3. Obiecte, proprietãți, metode și evenimente

Proprietatea este o caracteristică asociată obiectului și are o anumită valoare. De exemplu, proprietățile unui buton și valorile respective pot fi: lungimea = 70 pixeli, lățimea = 26 pixeli, culoarea = "green", etichetă (textul aflat pe buton) = "Autentificare", etc.

Metoda asociată obiectului este o operație ce se poate realiza cu sau de către obiectul respectiv. Un exemplu potrivit ar fi urmatorul: asupra unei ferestre se poate efectua operația "închidere"-această este o metodă asociată obiectului fereastră.

Pentru a stabili în mod clar cărui obiect aparțin proprietățile și metodele, denumirea acestora este formată, în ordine, din: numele obiectului, un punct și numele proprietății / metodei respective. Exemple:

document.write() este metoda write a obiectului document (folositã pentru a scrie ceva ȋn document);

adresa_textfield.value este proprietatea value a obiectului adresa_textfield (adicã textul din caseta text adresa_textfield);

Mai mult, deoarece un obiect poate conține alte obiecte (exemplu: formularul "frm" conține casetă text "adresa_textfield"), uneori sunt necesare referiri de genul: frm.adresa_textfield.focus(), ceea ce înseamnă: "metoda focus() a obiectului adresa_textfield, din obiectul frm".

Un eveniment este o acțiune care poate fi detectată de către JavaScript. Exemple: clic cu mouse-ul, dublu clic, plasarea mouse-ului deasupra unei imagini, apăsarea unei taste, scrierea într-o casetă text dintr-un formular, activarea unui element (focus) și altele.

Elementele HTML din paginile web au asociate evenimente care pot declanșa funcții JavaScript, prin așa-numitele atribute "event handler". Un atribut HTML de tip "event handler" ("gestionar de evenimente") tratează un eveniment prin asocierea cu o funcție JavaScript, care se execută la apariția evenimentului (exemplu: la clic pe un buton, este afișat un mesaj). Datorită detectării și tratării evenimentelor de către JavaScript, paginile web devin dinamice și interactive.

Dintre atributele "event handler" care se utilizeaza intr-un mod uzual, menionãm:

• “onClick” – acest eveniment se utilizeaza atunci cand se da clic pe elementul HTML. Se folosește ȋn aproximativ toate etichetele HTML;
• “onDblClick” – evenimentul va fi utilizat atunci cand se va apasa dublu clic pe elementul HTML. Si acesta se folosește ȋn majoritatea etichetelor HTML;

• “onMouseOver” – evenimentul respective se foloseste pentru plasarea mouse-ului deasupra elementului;
• “onSubmit” – se utilizeaza pentru apãsarea butonului "submit dintr-un anumit formular. Se folosește doar ȋn etichetele <FORM> și/sau <BODY>;
• “onReset” – evenimentul este folosit pentru apãsarea butonului "reset” dintr-un anumit formular. Se folosește doar ȋn etichetele <FORM> și/sau <INPUT>;
• “onKeyPress” – ultimul eveniment descris se utilieaza pentru apãsarea oricarei taste. Se folosește acest eveniment ȋn aproape toate etichetele HTML.

Tehnica de programare AJAX

Ajax ( Asynchronous JavaScript and XML) reprezinta o tehnică a programararii pentru crearea unor aplicații web interactive.  Intenția acestei tehnici este să creeze paginile web să ajunga mult mai rapide și rezulta a fi mult mai acceptate, prin schimbarea în fundal al unor cantități mici de date cu serverul, astfel nu este nevoie ca pagina respectiva să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta tehnica are ca obiectiv creșterea interactivității, ușurinței și vitezei în utilizarea aplicațiilor web.

Ajax nu reprezinta o tehnologie în sine. Termenul este utilizat pentru definirea aplicațiilor web ce utilizeaza mai multe tehnologii:

HTML sau XHTML : pentru structura semantică a tuturor informațiilor;

CSS : pentru prezentarea in sine informațiilor;

Javascript :  pentru interactivitate, dar si pentru procesarea informațiilor;

Obiectul XMLHttpRequest : pentru schimbul și manipularea informațiilor într-o manieră asincronă cu server-ul web;

XML : pentru transferarea datelor între client și server, deși orice format funcționează, inclusiv HTML preformatat, text simplu etc.

Tehnologia Ajax este suportata de aproximativ toate browserele Web și foloseste, în principal, obiectul JavaScript XMLHttpRequest, obiect care permite realizarea unei comunicări cu serverul. Un alt aspect important de precizat este permiterea afișarii datelor primate fără a fi necesară reîncărcarea paginii. La dezvoltarea unor aplicații Web care utilizează Ajax trebuie să se ținem cont de faptul că Ajax-ul foloseste JavaScript, care ar putea fi dezactivat de user, iar browserele nu știu momentan să indexeze paginile din site-urile generate prin Javascript.

Este absolut necesar sa se cunoasca elementele principale ale obiectului XMLHttpRequest, deoarece toate script-urile Ajax folosesc obiectul. Rolul obiectului este de a permite JavaScript să formulize cereri HTML și să le trimită catre server, dând totodata posibilitatea comunicării cu serverul și afișarea datelor primate fără a fi nevoie de o reîncărcare a paginii, în plus, se pot procesa în paralel mai multe conexiuni cu server-ul, iar browser-ul nu se va bloca până la primirea răspunsului. Inainte de utilizarea obiectului XMLHttpRequest, trebuie sa se creeze o instanta a obiectului cu formula:

XMLHttpRequest este suportat de toate motoarele de cautare moderne și de sistemele de operare precum : Windows, UNIX/Linux și Mac OS. O limitare ar fi faptul ca implementarea acestui obiect diferă în unele navigatoare web si versiuni de Internet.

Ajax consta in folosirea unui limbaj pe partea de server pe langa utilizarea librariei JavaScript sau al obiectului descris mai sus. Ajax poate fi folosit în diverse tipuri de aplicații care pot fi incluse pe o pagină web, dar cel mai utilizat este pentru navigarea de la un conținut la altul al site-ului. Această navigare se face de cele mai multe ori prin link-uri, care conțin o adresă URL către pagină/conținut. Metoda standard care se foloseste pentru transmiterea datelor adresei URL din link-uri catre server este reprezentata de GET. Alt mod pentru a putea trimite date dintr-o pagina web catre server este utilizarea metodei POST.

Cu ajutorul tehnicii Ajax, cererea pentru transmiterea datelor cu POST se face printr-o metodă "open()" a obiectului "XMLHttpRequest", sintaxa metodei fiind open("POST", url, flag), unde "POST" reprezinta o metodă de transfer, "url" fiind adresa fișierului PHP la care va fi trimisa cererea, iar "flag" fiind valoarea booleană true sau false.

Diferențele dintre GET si POST, privind transmiterea datelor prin url constă în 3 lucruri esentiale:

1. După crearea cererii descrise mai sus cu "open()" și înaintea trimiterii acesteia cu "send()", se va apela o altă metodă a obiectului "XMLHttpRequest", metoda numita "setRequestHeader()", folosind urmatoarea sintaxa :

2. Aceasta metoda transmite un header catre server care-i comunica sã recunoascã datele transmise de "send()" ca și cum au fost trimise prin metoda POST. Daca acest header nu o sa fie adãugat, serverul nu o sa recunoasca ca datele din parametrul lui "send()" au fost transmise prin POST.

3. Ca parametru al metodei "send()", ȋn loc de null se va adauga datele (perechile de tip indice=valoare) care trebuie transmise prin POST.

2.3. Limbajul HTML

2.3.1.Generalitãți și istoric

In timp ce Internetul s-a dezvoltat, era necesar să existe un format cat mai comun pentru toate site-urile web, pentru ca orice sistem de operare să poată citi orice site web. Utilizand ca și model SGML, Limbajul HTML – Hyper Text Markup Language – a fost dezvoltat, prima versiune a sa aparând începand cu anul 1991. In comparatie cu SGML, HTML-ul este un limbaj de programare având definite un set de instrucțiuni, în forma de tag-uri HTML, dezvoltând ulterior o multitudine de versiuni odata cu trecerea timpului.

Ajuns in prezent la maturitate prin posibilitatea manipulării de imagini, sunete și video cât și prin integrarea cu cu alte tehnologii, HTML a fost conceput la inceput doar pentru formatare de text.

Termenul Hyper semnifica că un document HTML poate fi codat pentru a permite utilizatorului să acceseze alte documente HTML cu ajutorul link-urilor (hyperlinks). Termenul “Markup” se referă la formatarea de text în interiorul unui document de tip HTML. La origine, limbajul a fost proiectat pentru a permite dezvoltatorilor să manipuleze modul de afișare a unui text, dar, de aemenea, să permită accesul altor documente via legaturilor. Aceasta chestiune este importanta pentru a înțelege limitările limbajului HTML. Cu timpul, alte tehnologii au fost dezvoltate pentru a veni în rezolvarea problemelor pe care HTML nu le putea rezolva, tocmai din consideratii de simplitate, inițial neintentionandu-se altceva decât formatarea textului indiferent de platformă.

Prima versiune a HTML-ului, a apărut la finele anului 1990, iar în forma sa generală numai sistemul de operare NeXT putea decripta aceste documente. Inventatorul acestui limbaj, Tim Berners-Lee a observat lipsa unui limbaj text care să poata fi portabil pe mai multe platforme pentru utilizarea pe Internet, așa că în următorul an specificațiile noului limbaj au fost postate pe Internet. Concomitent, acesta a revăzut codul pentru a face limbajul sa nu fie dependent de platformă prin utilizarea unui program compilator de HTML, care a devenit browser-ul din zilele noastre. Ulterior, s-au dezvoltat noi browsere care să suporte limbajul, însă numai câteva erau compatibile. Eforturile depuse pentru a consolida acest limbaj, au continuat cu versiunea HTML + care nu a fost niciodată publicată, dar nici nu a avut ecou până la aparitia versiunii HTML 2.0 și impunerea să ca și standard industrial.

Versiunea HTML 2.0 a apărut în anul 1995, sceasta versiune a reusit sa impuna si standardul. Odată cu apariția acestui nou standard, apar si primele două browsere bine dotate – Netscape’s Navigator 2.0 și Microsoft’s Internet Explorer 2.0. Este esential sa remarcam că această versiune a fost utilizata în timpul primei “explozii” a Internetului, când firme și organizațiile mari au descoperit presupusele beneficii rezultate din găzduirea informațiilor în pagini Web.

Datorită faptului ca limbajul HTML este flexibil, dezvoltatorii au început să creeze urmatoarea versiune. Versiunea HTML 3.0 are la bază însă versiunea HTML +, care include parametrii cum ar fi suport de tabele, imagini si numere complexe si textul aliniat dar si mai multă flexibilitate în aliniamentul paginilor și tag-uri adiționale pentru formatarea de text. Totuși, această versiune a eșuat si ea, deoarece modificările față de precedenta versiune erau foarte numeroase, astfel încât era mult prea costistitor sa se faca un upgrate la browser. Insă multe din atributele versiunii HTML 3.0 vor fi preluate în următoarea versiune, una de succes, HTML 3.2.

Deși, versiunea HTML3.2. a apărut la numai un an de versiunea 2.0, apariția acesteia a fost necesară datorită faptului că un număr major de browsere au început să suporte tag-uri proprii pentru a asigura flexibilitatea limbajului. Aceasta versiune noua era “ o amestecatura” între versiunile 2.0 și 3.0 la care s-au adăugat tag-uri proprii, fiind publicată în versiune finală în anul 1996. În momentul publicării, câteva facilități în comun utilizate de browserele cele mai importante nu existau. Aceste faciliăți cuprind frame-uri, stiluri si funcții matematice avansate.

In anul 1997, versiunea HTML 4.0 care a devenit un standard era numai parțial acceptată de Netscape’s Communicator 4.0 și Microsoft’s Internet Explorer 4.0. Odată cu această versiune, apare prima încercare de a extinde funcționalitatea limbajului prin adăugarea de tag-uri de obiecte și de stiluri în cascadă, pentru a suporta facilități care nu existau în HTML 3.2. Tag-ul de obiect este important pentru că acceptă script-uri, codurile din limbajele de script să fie direct incluse în sursa HTML a documentului. Totuși, aceste facilități pot necesita modificări majore în arhitectura browserelor actuale, pentru o compatibilitate mai buna, fapt care ar putea duce la o insuficientă implementare a noii versiuni.

Avantajele HTML sunt:

documente independente de platformă;

legături cu alte documente;

inserție de video, grafică și sunet;

interactivitate între cititorul documentului și aplicația dorită de autor.

Deși au fost publicate mult mai multe versiuni ale standardului pentru setul de instrucțiuni HTML, ambele mari firme producătoare, atat Netscape cat și Microsoft au urmat în linii mari standardele, dar au adăugat și facilități proprii browserelor lor. Aceste facilități variază de la tag-ul pentru includerea de imagini într-un document HTML până la includerea altor tehnologii avansate cum ar fi : controale ActiveX și Javascript. Din punctul de vedere a utilizatorului final, când se accesează un site web care folosește tag-uri ce nu sunt suportate de browser, nu se vor afișa mesaje de eroare. Dacă site-ul web nu va cuprinde o imagine sau orice altă componentă sau dacă dezvoltatorul a considerat situația actuala, user-ul va vedea pagina într-un format diferit, tolerat de capacitatile browserului.

Recomandările W3C au la bază specificațiile pentru standardul HTML 4.0, standard care este construit pe versiunea HTML 3.2 și HTML 2.0. Câteva dintre facilitățile majore ale versiunii noi sunt:

suport pentru style sheet – se poate utiliza un style sheet scris în limbajul CSS pentru a controla culoarea, fontul și layout-ul paginii web;

internaționalizarea – pentru a facilita un web internațional, HTML include facilități pentru “renderizare” text scris de la dreapta la stânga, în arabă sau ebraică. Atributul LANG poate fi utilizat cu multe tag-uri pentru a ajuta browserul să afișeze textul în conformitate cu limba aleasă. De asemenea există facilități pentru a specifica codarea și limba unui document disponibil printr-un link;

facilități de accesibilitate – unii utilizatori se bazează pe sintetizatoare de voce când navighează prin web. HTML 4 include multe facilități care fac web-ul mai accesibil pentru acei care au diferite probleme de percepție;

tabele și forme – există multe facilități la compunerea de tabele și forme în HTML;

script-uri și multimedia – există noi facilități de inserare de script-uri și un nou tag OBJECT care permite folosirea sistemelor multimedia.

2.3.2. Sintaxa limbajului HTML

Întreaga dezvoltare a HTML s-a făcut fără a afecta simplitatea limbajului. Definirea formatării de text se face cu ajutorul tag-urilor; de exemplu: <nume tag> textul afectat de tag </nume tag>. În general tag-urile sunt perechi, însă unele sunt tag-uri singulare.

Există puține reguli generale de care trebuie să se țină cont în momentul în care se elaborează un document HTML. Fiecare document este structurat în două părți: “început sau antet (head)” și “conținut (body)”. Head-ul conține declarații despre document iar conținutul reprezintă, de fapt, hypertext-ul documentului.

<HTML>

<HEAD><TITLE> Titlul documentului </TITLE></HEAD>

<BODY> Textul documentului propriu-zis </BODY>

</HTML>

În HTML există două tipuri de elemente: caractere entități și tag-uri.

Caracterele entități – reprezintă anumite caracterele care se folosesc in mod uzual si care se utilizeaza in cazul editarii documentelor HTML și trebuie neaparat să aparțină setului standard ASCII, dar nu pot include si caractere din setul extins, deoarece fiecare platformă foloseste o definiție diferită a caracterelor din setul superior ASCII. Totuși, navigatoarele pot sa interpreteze coduri de caractere extinse. Soluția pentru a reprezenta corect și pentru a permite translatarea caracterelor speciale, a fost definirea unui set special de coduri, numite caractere entități, care pot fi incluse în documentele HTML pentru reprezentarea codurilor dorite. Când sunt interpretate de navigatoare, aceste caractere entități sunt afisate în mod corespunzator ținând cont de platforma pe care rulează navigatorul și de fontul utilizat.

Caracterele entități sunt predefinite și pot lua una din cele două forme posibile: -entități nume- și -entități numere-.

toate caracterele entități nume încep cu semnul & (ampersand), urmat de numele entității;

toate caracterele entități numere încep cu semnul & și sunt reprezentate de un numar precedat de semnul # .

Tag-urile HTML au nume scrise între paranteze unghiulare (<nume tag>) și pot avea optional câteva perechi de atribute care pot lua anumite valori. Tag-urile pot fi nevide, adică perechi între care apare textul afectat și vide sau singulare. Tag-urile nevide pot fi de două tipuri: de început (<nume>) și de sfârșit (</nume>) și au efect asupra textului inclus în ele. Exemple de tag-uri nevide:

<I>Textul va fi afisat italic</I>

<B>Textul va fi afisat ingrosat</B>

și de tag-uri vide: <HR> inserează o linie orizontală

<IMG SRC=”poza.gif”> inserează în rând o imagine.

Tag-urile și atributele pot fi editate atât cu caractere mici, cât și cu caractere mari. Atributele au și ele un nume și pot lua numai anumite valori. Forma în care sunt editate atributele este NUME=”valoare”. Valoarea trebuie inclusă în ghilimele. Dacă în tag există mai multe atribute, ele trebuie separate prin spațiu.

“<nume_tag nume_atribut=”valoare_atribut”>Textul afectat de tag</nume_tag>”

2.3.3. Structurarea documentelor HTML

Limbajul HTML este un limbaj pentru descrierea documentelor structurate și se bazează pe faptul că majoritatea documentelor au elemente comune: titluri, paragrafe, tabele, etc. HTML-ul posedă un set de tag-uri pentru marcarea acestor elemente de structură.

O prezentare Web constă din mai multe pagini structurate de proiectantul unui site într-o manieră coerentă care să permită indeplinirea unui anumit scop. Pagina de început conține informații generale sau sumarul celorlalte pagini.

Structurarea documentelor se va realiza în raport cu conținutul sau cu abrevierile prezentării. Structurarea ierarhică permite rafinarea informațiilor de sus în jos prin detalieri succesive în raport cu abrevierele. Orice nivel de detaliere are o interfață consistentă de navigare, iar variantele de navigare sunt limitate la deplasarea în homepage. Avantajele principale consta în viteza de deplasare până la ultimul nivel și înapoi.

Comentariile pot fi introduse în documentele HTML. Acestea sunt, de fapt, ignorate de navigatoare. Comentariile încep cu șirul <!–, pot conține orice caracter și se termină la apariția șirului –>.

Titlurile sunt folosite pentru ierarhizarea diferitelor secțiuni de text. HTML-ul definește șase nivele pentru titluri, indicate în formatul <H1><H2>…<H6>.

La afișare, titlurile nu sunt numerotate, diversele navigatoare afișându-le astfel încât să iasă în evidență (centrat, subliniat, îngroșat, mărit). Ele nu trebuie indentate în document, indentările vor fi ignorate.

Paragrafele sunt specificate cu tag-ul <P> ca tag vid. Majoritatea primelor navigatoare, consideră că paragrafele sunt formate în acest fel. După ultimele specificații ale HTML 4.0, tag-ul de paragraf nu este vid, însă tag-ul </P> se poate considera opțional.

Toate listele care apar în documentele HTML au elemente comune:

întrega listă este încadrată de tag-uri de început și de sfârșit de listă: <UL> și </UL>, <OL> și </OL>, etc;

fiecare element al listei are propriul lui tag:<DT> și <DD> pentru listele glosar și <LI> pentru celalate liste.

Listele ordonate se definesc astfel:

<OL>

<LI> element 1

<LI>element 2

<LI>element 3

</OL>

Listele ordonate încep cu <OL> (abrevierea fiind de la Ordered List) și fiecare element introdus în listă cu ajutorul tag-ului vid <LI>. Când navigatorul interpretează o astfel de listă, va numerota secvențial fiecare element intâlnit.

Listele neordonate trebuie marcate cu tag-ul <UL>, iar elementele listei se introduc la fel. Cele două liste diferă prin faptul că, aici, fiecare element este marcat cu o bulină.

<UL>

<LI>element 1

<LI>element 2

</UL>

Utilizarea tag-urilor pentru paragrafe, titluri sau liste afectează textul ca un întreg, schimbând fonturile, spațierea verticală, adaugând o bulină sau un număr. Tag-urile pentru stilurile caracterelor afectează felul în care vor fi afișaate numai anumite cuvinte sau, chiar numai anumite caractere.

2.4. Standardul CSS

CSS (Cascading Style Sheets)  reprezinta un standard pentru formatarea elementelor unui document de tip HTML. Stilurile pot fi atașate elementelor HTML cu ajutorul unor fișiere externe, dar si în interiorul documentului, prin elementul <style> și/sau atributul style. CSS-ul se poate folosi și pentru formatarea elementelor XHTML, XML și SVGL.

CSS3 reprezintă o imbunatatire ce aduce atribute noi și ajută la dezvoltarea unor concepte noi in ceea ce numim Web Design.

Unele dintre module noi cele mai importante adăugate standardului acesta pentru formatarea elementelor de tip HTML aduc un plus considerabil in dezvoltarea activității Web Design-ului.

Mai jos, sunt prezente cele mai importante modulele adăugate in CSS3:

Selectors;

Box Model;

Backgrounds and Borders;

Image Values and Replaced Content;

Text Effects;

2D sau 3D Transformations;

Animations;

Multiple Column Layout;

User Interface.

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu un succes de remarcat in variantele noilor browsere.

2.5. Limbajul PHP

2.5.1. Generalitati si istoric

PHP-ul reprezinta un limbaj de programare. Numele PHP este provenit din limba engleză și reprezinta un acronim de recursivitate „: Php: Hypertext Preprocessor”. Folosit la inceput pentru a genera pagini dinamice de web, este utilizat pe o scară largă în ceea ce priveste dezvoltarea paginilor, dar și aplicațiilor web. Se utilizeaza, în principal, in interiorul codului HTML, dar începând cu versiunea 4.3.0 se foloseste și ca „linie de comandă” (CLI), astfel se permite crearea unor aplicații care nu sunt dependente de alte structuri. PHP-ul este unul dintre cele mai sermnificante limbaje de programare web open-source și server-side, existând versiuni valabile pentru aproape toate serverelor web și pentru toate sistemele de operare. Conform statisticilor curente, acesta este instalat pe 20 de milioane de site-uri web și pe 1 milion de servere web. Limbajul este disponibil sub Licenṭa PHP, iar Free Software Foundation îl consideră a fi un software gratuit.

La inceput, limbajul a fost dezvoltat de inventatorul său, Rasmus Lerdorf. Cresterea numarului de utilizatori a determinat ca dezvoltarea sa fie preluată de o nouă entitate, numită The PHP Group (Grupul PHP).

Versiuni:

2.5.2. Utilizare

PHP este un limbaj simplu de utilizat, fiind, de asemeena, un limbaj de programare structurat, ca și C-ul, Perl-ul sau chiar si Java, sintaxa limbajului reprezentand o combinație a celor trei. Datorită modularității sale, limbajul PHP poate fi utilizat și pentru a dezvolta aplicații de sine stătătorare, de exemplu în combinație cu PHP-GTK sau poate fi folosit ca Perl sau Python în linia de comandă. Probabil una din cele mai importante facilități ale limbajului PHP este conlucrarea cu majoritatea bazelor de date relaționale, de la MySQL  până la Oracle, dar conlucrand si cu MS Sql Server, PostgreSQL, sau DB2.

PHP poate rula pe sistemele de operare majoritare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de user.

PHP foloseste extensii specifice pentru fișierele sale: .php, .php3, .ph3, .php4, .inc, .phtml. Aceste fișiere sunt interpretate de catre serverul web iar rezultatul este trimis în formă de text sau cod HTML către browser-ul clientului.

2.5.3. Sintaxa limbajului PHP

In figura de mai jos este reprezentat programul clasic hello-world în PHP:

2.6. Framework-ul JSON

JSON reprezinta un acronim pentru „JavaScript Object Notation” și desemneaza un format de interschimbare și reprezentare de date între anumite aplicațiile informatice. Formatul JSON este un text format, de neinteles pentru persoane, utilizat pentru reprezentarea obiectelor și a altor structuri de date, dar de asemenea este folosit în special pentru a transmite date structurate prin rețea, acest proces fiind denumit serializare. JSON este alternativa mult mai simplă, dar si mai facilă decât limbajul XML. Eleganța acestui format JSON provine din faptul că este un subset al limbajului, fiind folosit alături de acest limbajul precizat anterior. Formatul JSON a fost creat de Douglas Crockford și apoi standardizat prin RFC 4627. Tipul de media pe care trebuie să îl transmită un document JSON este application/json. Extensia fișierelor de tip JSON : .json.

2.7. Libraria JQuery

jQuery reprezinta o platformă de dezvoltare JavaScript, concepută in special pentru a facilita și pentru îmbunătăți anumite procese, cum ar fi parcurgerea arborelui DOM în HTML, managementul inter-browser al unor evenimentelor, cereri și animatii tip AJAX. Platforma jQuery a fost gândita să fie cât mai disponibila în fiecare versiunile de browser importanta care exista la ora actuala, dar și să indeplineasca filosofia "Unobtrusive JavaScript". Biblioteca s-a lansat in anul 2006 de către John Resig .

Query se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery ;

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli);

înregistrarea și modificarea evenimentelor existente in browser;

manipularea elementelor CSS;

efecte și animații;

cereri tip AJAX;

extensii;

utilităti – versiunea browser-ului, funcția each.

Plugin-urile sau extensiile sunt unele dintre cele mai importante aspecte ale librariei jQuery. Arhitectura acesteia ne permite să dezvoltam subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest fel, libraria principală poate ocupa puțin spațiu, iar extensiile care sunt necesare în anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele. Există un set de extensii principal numit jQuery UI( jQuery User Interface). jQuery UI ofera un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, astfel se micsoreaza riscul de incompatibilitate.

Aplicatii similare

2.8.1. Nevazator.ro

Nevazator.ro este un site pentru persoanele cu probleme ale vederii, dar totodata și celor care prezinta un interes fata de viața acestor indivizi. Incepand cu anul 2009 acest website a reprezentat un sprijin în întâmpinarea informarii acestor persoane, deoarece accesul la informație este extrem de dificil pentru ei. Echipa nevazator.ro a postat de-a lungul anilor tutoriale cu tematica de informatică și tehnologii, totodata publicand și diverse articole pentru acesti oameni. De asemenea,s-au publicat articole cu urmatoarele tematici, precum: educație, legislație, biblioteci, tehnologii de access, etc.

2.8.2.” Harta accesibilitãții pentru persoanele cu dizabilitãți”

Proiectul își propune să dezvolte o anumita aplicație mobilă, specială pentru persoanele cu dizabilități, în parteneriat cu „Autoritatea Națională pentru Persoanele cu Dizabilități” și „Fundația Motivation”.

Aplicația centralizează informații utile pentru viața de zi cu zi: transport în comun, sisteme speciale informare și comunicare (sisteme IT de comunicare pentru nevăzători, de ex.), acces în instituții și spații publice, dar și alte servicii. Utilizatorii pot verifica obstacolele intalnite pe traseul lor și pot semnala locurile care nu întrunesc anumite condițiile necesare.

Accesibilitatea aplicațiilor web

Pentru ca accesibilitatea aplicațiilor Web și pentru ca navigarea și interacționarea eficientă cu toate functionalitatiile oferite de o aplicație Web sa fie mult mai facila este recomandat să respectam următoarele aspecte:

– imaginile trebuie să fie însoțite de text (exemplu: dacă în imaginea care reprezintă eticheta pentru o legătură apare o săgeata spre dreapta, textul din atributul "alt" poate fi "pagină următoare", "detalii" sau "continuare"), excepție făcând imaginile utilizate doar pentru aranjare și spațiere, deoarece sunt nerelevante pentru înțelegerea conținutului paginii;

– imaginile complexe (grafice, diagrame etc.) să fie descrise;

– fișierele video sau audio să fie însoțite de text;

-pentru o bună funcționare a cititoarelor de ecran:

• sa se utilizeze mereu atributul alt pentru toate imaginile, având o descriere a utilității imaginilor in cazul imaginilor utile si o valoare nula (alt="" in cazul imaginilor decorative")

• cititoarele de ecran nu pot sa navigheze tabelele (table) folosite pentru layoutul paginii.

„World Wide Web Consortium”

Consorțiul Web (World Wide Web Consortium, W3C) este un consorțiu internațional, format din membri permanenți, dar și parteneri, care are ca obiectiv dezvoltarea de standarde pentru WWW. Consortiul World Wide Web a luat nastere în anul 1994, la Institutul de Tehnologie din Massachusetts, de către Tim Berners-Lee, cu suportul CERN, DARPA și Comisia Europeană. Tim Berners-Lee este directorul actual al acestei institutii. Organizația a fost înființată cu obiectivul de a realiza standarde pentru Web, astfel încât tehnologiile utilizate pe Web să aibe interoperabilitate și maximă accesibilitate.

W3C este principala organizație internațională care stabilește standardele și normele după care funcționează internetul, browserele web și motoarele de căutare.

Standardele Web au rolul de a ajuta ca informația disponibilă pe Web să fie afișată corect si ușor accesibilă, indiferent de dispozitivul hardware și software cu care se accesează o pagină web. Standardele Web permit accesarea eficientă a aceleiași pagini web din diferite browsere, de pe telefonul mobil, diferite calculatoare sau alte dispozitive.

Toate standardele oficiale emise de W3C se concretizează într-un document numit „W3C Recommendation” ce contine documentația oficială și completă pentru standardul respectiv. Standardele pentru serviciile web W3C sunt aprobate ca standarde internaționale ISO/IEC.

2.11. Bariere identificate de indivizii nevazatori in accesarea paginilor Web

Indivizii nevăzători și persoanele cu deficiențe de vedere au identificat principalele probleme cu care se confruntă atunci când accesează o pagină Web. Aceste probleme sunt descrise mai jos:

Imagini informative (fotografii, grafice statistice) fara descrieri alternative : 54,72%;

Imagini cu functionalitate fara descrieri alternative;

Capturi fara alternativa accesibila;

Continut multimedia fara descriere alternativa;

Continut audio care se activeaza automat;

Continut care preia instructiuni vizuale;

Secvente ale continutului neadaptate logicii lecturii;

Continut nu se actualizeaza automat;

Pagini care nu dispun de optiuni de evitare a blocurilor care se repeta;

Pagina a carei limba generala nu a fost bine definita;

Schimbari aparute in continutul paginii care nu pot fi percepute de cititorul de ecran;

Link-uri care nu contin etichete;

Formulare nu sunt accesibile;

Elementele paginii nu pot fi activate cu ajutorul tastaturii.

Rezolvarea temei de proiect

3.1. Cercetãri ȋn domeniu

3.1.1. Conceptualization of a technical solution for web navigation of visually impaired people

Autori

Stéphanie Giraud, Pierre Thérouanne, Dirk D. Steiner

IDEEA PRINCIPALÃ

În ciuda autonomiei oferite de Web a persoanelor nevăzătoare, accesul pentru aceste persoane este în momentul actual destul de dificil. Astăzi, accesibilitatea web este limitată la anumite norme prin aplicarea unor standarde de proiectare. Accesibilitatea eficientă, care asigură că utilizatorii pot să își îndeplinească scopurile este uitată în detrimintul gradului de utilizare a intefetei. Autorii articolului și-au propus să conceptualizeze o soluție tehnică făcând referire la accesibilitatea eficientă de rezolvarea problemelor, filtrând principalele probleme cu care s-au confruntat nevăzătorii. Conceptualizarea acestei soluții, susținută de rezultatele experimentale anterioare, pare promițătoare pentru a face interfețe web ușor de accesat și mai rapid de utilizat de către persoane nevăzătoare.

REZULTATE

Au fost realizate observații asupra a 6 persoane nevăzătoare și 6 persoane cu probleme ale vederii care au trebuit să realizeze diverse sarcini utilizând 2 website-uri ( Fnac și Facebook). În plus, 11 persoane nevăzătoare au fost intevievate în urmă navigării pe Web, conform utilizării lor obișnuite. Analiza a arătat un timp îndelungat de navigare web, datorită transcrierii exhaustive a informațiilor. Într-adevăr, de fiecare data când este selectat un element, cititorul de ecran începe să citească de la începutul paginii și apoi reda toate elementele de pe pagina de web, până când se ajunge la conținutul dorit.

Soluția tehnică, care ar putea fi un plug-in pentru browser, trebuie să modifice conținutul paginilor înainte ca cititorul de ecran să se apuce de citit. Pentru aceasta, Soluția este bazată pe un algoritm care compară itemii din pagină cu paginile anterior vizitate, astfel se filtrează informațiile. Soluția oferă beneficii majore pentru nevăzători, precum încărcarea cognitivă, eficiență și satisfacția provenită din navigarea pe pagini web.

Soluția tehnica rezultată din aplicarea abordării holistic ar trebui să aducă beneficii majore, deoarece informațiile sunt selectate, astfel cititorul de ecran va fi mult mai rapid, câștigându-se timp pentru persoanele nevăzătoare. Această soluție este aplicabilă și aduce contribuții majore pentru nevăzători.

LIMITÃRI

Aplicarea abordării holistice ridică problema costurilor și acceptarea de către utilizatori. În primul rând, creând o alternativă accesibilă a unui site este necesară și o analiză a contextului de utilizare; care este modul in care utilizatorii navighează pe Web, care sunt nevoile lor, dificultățile întâmpinate, strategiile utilizate pentru a rezolva această dificultate, etc. Această abordare necesită timp, cunoștințe despre anumiți utilizatori, precum și competențe în vederea implementării metodelor adecvate, cauzând un cost mare. În al doilea rând, o alternativă poate fi acceptată cu dificultate de către persoanele cu handicap. De fapt, ei nu doresc să fie tratați ca atare și doresc aceleași mijloace de interacțiune că și ceilalți pentru a participa la viața socială în condiții normale.

3.1.2. A Web Design Framework for Improved Accessibility for People with Disabilities (WDFAD)

Autori

Rehema Baguma, Jude T. Lubega

IDEEA PRINCIPALÃ

În această lucrare, se propune un cadru Web Design pentru o accesibilitate îmbunătățită pentru Persoanele cu Handicap (WDFD). WDFAD oferă indicații precise cu privire la cum se pot dezvolta aplicații Web care sunt accesibile în special pentru nevăzători. Acestea sunt în conformitate cu cele trei componente ale aplicațiilor web și anume: conținutul, navigarea și interfață utilizatorului. Cu ajutorul Framework-ului Non Funcțional Requirements (NFR), obiectivele accesibilității design-ului web sunt reprezentate ca obiective principale și obiective secundare. Scopurile principale reprezintă obiectivele de accesibilitate a design-ului la nivel înalt, in timp ce obiectivele secundare reprezintă cerințele care trebuie îndeplinite în procesul de dezvoltare web, în scopul de a îndeplini fiecare obiectiv principal.

REZULTATE

Tehnologia de asistență (AT) este software-ul sau hardware-ul specific conceput pentru a sprijini persoanele cu dizabilități în vederea desfășurării activităților zilnice. Interesul cercetătorilor în această cercetare este tehnologia de asistentă pentru persoanele cu deficiențe de vedere, în special nevăzători.

Framework-ul Web Design pentru îmbunătățirea accesibilității pentru persoanele cu dizabilități (WDFAD) este reprezentat în figură de mai jos, ca o diagramă Venn cu trei seturi A, B și C.

Setul A reprezintă accesibilitatea conținutului ca și scop principal, setul B reprezintă accesibilitatea navigării ca și scop principal, setul C reprezintă accesibilitatea interfeței utilizatorului ca și scop principal. D, E, F, G reprezintă scopurile secundare. Scopurile secundare, pe de altă parte, reprezintă ce trebuie să fie făcut pentru a se obține scopurile principale.

Clasificarea orientărilor în cerințe globale și locale de accesibilitate Web modulează liniile directoare și le face în continuare mai ușor de înțeles, de aplicat și de actualizat.

În această lucrare s-a prezentat un Framework de design WEB pentru devoltarea accesibilității pentru persoanele cu dizabilități (WDFAD). WDFAD oferă cu precizie un contur al dezvoltării aplicațiilor Web care sunt accesibile pentru aceste persoane, în special pentru nevăzători.

LIMITÃRI

Nu existã ȋn momentul de fațã un framework accesibil pentru cei care pot dezvolta acest framework.

DEZVOLTĂRI ULTERIOARE

Viitoarele dezvoltãri vor valida framework-ul pentru dezvoltatorii Web.

3.1.3. „Accessibility of Rich Internet Applications for blind people: A study to identify the main problems and solutions”

Autori

Stéphanie Giraud, Teresa Colombi, Aurore Russo, Pierre Thérouanne

IDEEA PRINCIPALÃ

Această lucrare descrie existența problemelor de accesibilitate întâlnite de persoanele nevăzătoare care au utilizat Rich Internet Applications (RIA). RIA desemnează niște interfețe dinamice, în care schimbul de informații se face în timp real. Din cauză că au o densitate mare de informație și de diversitate, aceste interfețe sunt greu de făcut accesibile, deoarece conținutul se modifică în mod constant.

Studiul prezent care a fost realizat asupra nevăzătorilor și persoanelor cu probleme de vedere a identificat principalele probleme cu care se confruntă persoanele nevăzătoare, dar și amploarea diferenței timpului de execuție a sarcinilor între aceste două categorii de persoane.

Cu ajutorul acestor rezultate, cercetătorii propun recomandări ambelor tipuri de probleme.

REZULTATE

RIA sunt aplicații constituite din elemente interactive și dinamice, ceea ce le face dificil de navigat cu un cititor de ecran. Într-adevăr, citind un site web cu ajutorul unui cititor de ecran este serial. Această serie este un lucru problematic pentru RIA. Studiul a fost conceput pentru a observa și a înțelege comportamentul utilizatorilor nevăzători care utilizează RIA. Studiul a fost realizat cu oameni nevăzători pentru a evidenția problemele cu care se confruntă RIA și pentru a sugera recomandări pentru rezolvarea acestor probleme.

Astfel, în studiul de față s-a observat comportamentul indivizilor nevăzători și problemele cu care s-au confruntat. Cercetătorii au ales 2 web-site-uri cu o interfață bogată. Unul dintre acestea a fost Facebook, iar celălalt a fost Fnac. S-au ales aceste site-uri, deoarece au o diversitate și o cantitate mare de informații, dar și pentru interacțiunea lor dinamică. Așadar, s-au elaborate 3 sarcini pentru Fnac și 5 sarcini pentru Facebook. Aceste sarcini au fost sarcini standard de căutare, de cumpărare și de ascultare de muzică pentru Fnac, iar pentru Facebook au fost sarcini standard ale comunicării. Participanții au fost împărțiți în 4 grupuri, aceștia fiind împărțiți în funcție de gradul lor de handicap și de nivelul de expertiza RIA.

Pentru selecția participanților s-a utilizat un chestionar, chestionar care a determinat nivelul de expertiză a participanților asupra site-urilor alese. Participanții care au fost considerați experți în ceea ce privește utilizarea site-urilor au fost aceea care utilizează zilnic site-urile de socializare și cel puțin o data pe săptămână site-urile de cumpărături online, iar novice desemnează participanții care nu au utilizat niciodată aceste site-uri.

Au fost selectați 6 nevăzători – 3 femei și 3 bărbați, cu vârste cuprinse între 20 și 58 ani. Aceștia sunt nevăzători din naștere sau de cel puțin 20 ani. 3 participanți la studio au fost experți în Fnac și 3 au fost novice. În cazul Facebook, 2 nevăzători au fost experți și 4 novice.

De asemenea, au fost selectați și 6 persoane care au probleme de vedere, având vârsta cuprinsă între 22 și 60 ani ( 3 femei și 3 bărbați). La fel ca și în cazul persoanelor nevăzătoare, au fost 3 experți și 3 novice în cazul Fnac și 2 experți și 4 novice în cazul Facebook.

Pentru a nu-i scoate din rutină pe oamenii nevăzători, aceștia și-au păstrat propriile computer cu cititorul de ecran JAWS și browser-ul Internet Explorer.

Multe probleme au fost scoase în evidență mulțumită utilizatorilor. Astfel se pot enumera următoarele probleme. În primul rând, cititorul de ecran citește informațiile pe rând, fiind auzită cea mai mică informație. În al doilea rând, în multe cazuri, link-urile și informațiile irelevante sunt citite înainte de a ajunge la funcționalitățile necesare. În al treilea rând, link-ul activ pe care utilizatorii nevăzători intră se citește din nou.

În acest studiu, cercetătorii au observat numeroase probleme de accesibilitate, dar, și probleme legate de consistență și organizaționale, atât pentru utilizatorii nevăzători cât și pentru cei cu deficiențe de vedere. Recomandarea principală este reconsiderarea modului de a construi interfața calculatorului.

LIMITARI

Fiecare element de pe un site Web, cât și fiecare link sau buton reprezintă o informație auzită, deci este, de fapt, o informație prelucrată conștient. Acest proces generează o supraîncărcare cognitivă pentru utilizatorii nevăzători.

3.1.4. Proposing New Metrics to Evaluate Web Usability for the Blind

Autori

Kentarou Fukuda, Shin Saito, Hironobu Takagi, Chieko Asakawa

IDEEA PRINCIPALÃ

Reglementările și orientările legate de accesibilitate contribuie la îmbunătățirea continuă a accesibilității web. Există diverse instrumente de evaluare a accesibilității care ajută autorii de pagini web să își transforme propriile pagini în conformitate cu liniile directoare. Drept urmare, un număr tot mai mare de pagini web sunt în conformitate cu instrumentele de evaluare. În zilele noastre, chiar dacă există o mulțime de soluții, oamenii nevăzători se confruntă cu o multitudine de probleme în ceea ce privește citirea unei pagini web. Îmbunătățirea densității informației prin utilizarea efectelor vizuale cum ar fi aspectele bidimensionale reprezintă o piedică majoră pe care o persoană nevăzătoare o întâlnește atunci când dorește să înțeleagă structura unei pagini web. De asemenea, texte alternative inadecvate induc în eroare utilizatorii nevăzători.

În această lucrare, pentru a evalua aceste tipuri de probleme de utilizabilitate vom introduce două valori: navigability și listenability. Navigability evaluează cât de bine este structurat conținutul web prin utilizarea de titluri, legături între pagini, etichete, etc. Listenability se referă la textele alternative.

REZULTATE

Utilizând valorile propuse de autorii articolului, autorii de pagini web sau editorii pot găsi cu ușurință problemele de utilizabilitate, cum ar fi existența unei legături de omitere nefuncționale sau text alternativ nepotrivit. Pentru a îmbunătăți precizia valorilor propuse în acest studiu, mai multe subiecte rămân la stadiu de investigare.

DEZVOLTÃRI ULTERIOARE

Evaluarea eficacității pozițiilor și a legăturilor între pagini este un subiect de cercetare pe viitor. Pentru a evalua navigabilitatea, numărul de operațiuni care sunt necesare pentru a găsi conținutul principal va trebui luat în considerare. De asemenea, autorii cercetării intenționează să dezvolte și să confirme valoriile actuale printr-o evaluare reală a utilizatorului.

3.1.5. Designing the World Wide Web for People with Disabilities: A User Centered Design Approach

Autori

Lila F. Laux, Peter R. McNally, Michael G. Paciello, Gregg C. Vanderheiden

IDEEA PRINCIPALÃ

Proiectul ACCESS se concentrează pe trei grupuri de utilizatori: utilizatori cu deficiențe motorii de vorbire, utilizatori cu limbaj cognitiv depreciat și utilizatori nevăzători. Fiecare grup are diferite nevoi, abilități și preferințe care determină dezvoltarea unor sisteme utilizabile.

O interfață a utilizatorului numită USE-IT va juca un rol important, fiind asistentul de design care va sprijini adaptabilitatea utilizatorilor la nivel lexical. USE-IT examinează următoarele trei domenii: modelele de utilizator, constrângerile de proiectare orientate spre sarcini și disponibilitatea dispozitivului.

Un beneficiu al implementării proiectului ACCESS în instituții este reprezentat de adoptarea de instrumente de dezvoltare utile pentru studenții cu deficiențe de vedere sau nevăzători.

REZULTATE

Privind sistemele de informații, este important de remarcat faptul cã existã patru componente majore, care trebuie sã fie accesibile pentru ca sistemul sã fie accesibil:

1) Informația sursã : ȋn cazul ȋn care informațiile transmise de la sursã nu sunt accesibile, atunci este dificil sau imposibil ca informația sã devinã accesibilã ȋn punctul de destinație sau pentru privitor;

2) Conducta : informațiile nu iși pierd accesibilitatea daca acestea se expediazã printr-o conductã;

3) Serviciile de transport in-line : aceste servicii reprezintã unele dintre cele mai importante instrumente pentru persoanele nevãzatoare, fiind un real suport;

4) Privitorul : acesta include programe bazate pe calculator, precum Mosaic, Netscape și browsere-le AOL;

În scopul de a asigura accesul la sisteme de informație de ultima generație pentru oamenii cu diverse dizabilități fizice și senzoriale, este necesar să se înceapă să se gândească la sisteme, format de date și privitoare care nu sunt obișnuite, ci adaptate.

LIMITÃRI

În prezent, browserele și utilizatorii de Internet nu îndeplinesc următoarele criterii pentru persoanele nevăzătoare :

a) capacitatea de a prezenta informațiile în diferite forme solicitate de către utilizatori;

b) capacitatea browser-ului de a fi utilizat de către persoanele cu o gamă largă de abilități;

Datorită acestui fapt, acest lucru reprezintă o limitare majoră.

3.1.6. WebAnywhere: Enabling a Screen Reading Interface for the Web on Any Computer

Autori

Jeffrey P. Bigham, Craig M. Prince, Richard E. Ladner

IDEEA PRINCIPALÃ

Persoanele nevăzătoare sunt limitate atunci când vine vorba de utilizarea cititoarelor de ecran scumpe, care le ajută să acceseze Internetul. WebAnywhere este o aplicație web, care le permite indivizilor nevăzători să acceseze Internetul aproape de pe orice computer care poate produce sunet fără a instala un soft nou. WebAnywhere ar putea servi drept o soluție convenabilă, de costuri minime pentru utilizatorii nevăzători, dar și de un design accesibil pentru dezvoltatorii web. Această lucrare descrie implementarea aplicației WebAnywhere și specifică faptul că aplicația poate rula de pe orice computer.

REZULTATE

Interfața WebAnywhere este similară cu cea a tradiționalelor cititoare de ecran. Ca și sprijin pentru funcționalitate, a fost amplasat un server la distanță, cu scopul de a compensa limitările de aplicații web. Sistemul este alcătuit din următoarele trei componente: 1. partea-client Javascript care suportă interacțiunile utilizatorului, 2. Partea de server și de transformare a textului în vorbire, 3. Partea de web proxy a server-ului care face să pară că paginile web provin de la un server local. WebAnywhere pornește sunete folosind SoundManager 2 Flash Object.

Într-o evaluare inițială, șase participanți nevăzători (3 de sex feminin) au trebuit să navigheze pe web folosind WebAnywhere. Pe parcursul acestei evaluări, am subliniat mai întâi caracteristicile disponibile ale sistemului WebAnywhere. Participanților li s-au cerut să îndeplinească 3 sarcini, precum: să își verifice adresa de e-mail gmail, să găsească oră de sosire a autobuzului într-o anumită stație și să caute numărul de telefon al unui restaurant.

Toți participanții au fost în stare să îndeplinească cerințele. Conform studiului, aplicația poate fi îmbunătățită, deși a avut un real succes în studiul prezent.

LIMITARI

Participanții noștri au enumerat lipsa funcționalității cititorului de ecran complet ca principală limitare a sistemului. În mod special, niciunul dintre participanții noștri nu a menționat niciun fel de îngrijorare cu privire la capacitatea de reacție a sistemului, care a reprezentat o preocupare principală pentru că discursul este preluat de la un server de la distanță.

DEZVOLTĂRI ULTERIOARE

Versiunile viitoare ale aplicației WebAnywhere vor implementa mai multe caracteristici oferite de cititoarele de ecran disponibile în comerț. Participanții cercetării au solicitat asistentă pentru combinații de taste specifice cititorului de ecran obișnuit și cercetătorii încearcă să ofere moduri pentru WebAnywhere care să imite pe deplin comenzile rapide furnizate de cititoarele de ecran populare.

3.1.7. Web Search Credibility Assessment for Individuals who are Blind

Autori

Ali Abdolrahmani, Ravi Kuber, William Easley

IDEEA PRINCIPALÃ

În timp ce tehnologia oferită de cititoarele de ecran a evoluat considerabil, promițându-le indivizilor nevăzători o accesibilitate grandioasă a conținutului web apăr dificultăți în ceea ce privește credibilitatea site-urilor și a conținuturilor acestora. Acest lucru poate avea impact asupra comportamentului persoanei, în mod particular dacă se caută informații sensibile.

În această lucrare, studiul descrie modul în care indivizii nevăzători determină credibilitatea site-urilor și a conținutului lor, atunci când se utilizează un cititor de ecran. Mai exact, studiul s-a focusat pe sarcinile de căutare pe web, deoarece acestea sunt de obicei efectuate de către utilizatorii nevăzători dar și de persoanele cu deficiențe de vedere.

REZULTATE

Potrivit lui Fogg , conceptul de credibilitate este alcătuit din două dimensiuni: încredere și expertiză. Dacă un site web îndeplinește ambele calități, atunci este considerat credibil. Cercetătorul sugerează că utilizatorii ar putea fi influențați de primele impresii de inspectare a unui site și de design-ul acestuia (termen numit: credibilitate de suprafață).

Patru participanți (două femei erau nevăzătoare din naștere, cu vârste cuprinse între 20 – 32 ani) au fost recrutați pentru studiu. Toți participanii au avut experiență ca și utilizatori ai cititorului de ecran JAWS, și că utilizator al browser-ului Google.

Două sarcini au fost selectate pentru studiu: (1) efectuarea de două căutări bazate pe un set de termeni de căutare predefiniti; (2) navigarea a cinci perechi de pagini web care explorează un set de subiecte predefinite, inclusiv sănătatea și afacerile curente. În timpul acestui proces, participanții au fost rugați să "gândească cu voce tare", demersul procesului de căutare pe Web folosind browser-ul și cititorul de ecran, care descrie modul în care ar putea fi stabilite niveluri de credibilitate.

Au fost evidente similarități între stilurile de navigare în rândul participanților. Tehnicile "skimming" au fost incluse în fiecare dintre rezultatele de căutare, utilizând comanda rapidă Control + Down Arrow pentru a obține o imagine de ansamblu. Trei participant au folosit, de asemenea, comanda “h” pentru a naviga printr-o listă de titluri, cu același scop.

Credibilitatea site-urilor s-a stabilit în funcție de : numele domeniului, tipul domeniului, accesibilitatea conținutului, prezența conținutului exterior și conținutul încărcat.

Din punctul de vedere al numelui domeniului, familiaritatea cu organizația al cărui site a fost accesat, a fost principalul criteriu pentru a determină credibilitatea unui site. În cazul în care informațiile căutate corespundeau cu ceea ce se așteptau aceștia să citească, participanții la studiu aveau o încredere mult mai mare în conținut.

Cei 4 participanți au avut mai mare încredere în site-urile instituțiilor guvernamentale, față de site-urile bazate pe opinii propri, precum blogurile, etc. De asemenea, au acordat un grad ridicat de încredere site-urilor care erau mai accesibile, de exemplu site-urilor care aveau text sub poză. Toți cei patru participanți au evaluat pagini cu un conținut mai puțin irelevant ca o sursă mai credibilă. Site-urile cu reclame au fost considerate mai puțin credibile. Alți factori care au influențat încrederea pe care o au nevăzătorii pe site-uri au fost: stilul de scriere, autorii, recenziile primite.

DEZVOLTARI ULTERIOARE

Scopul autorilor este de a extinde studiul, recrutând un eșantion mai mare de utilizatori, atât nevăzători, cât și utilizatori care au probleme de vedere. Scopul ar fi să se determine modalitătile în care percepția și evaluarea credibilitătii variază între ambele grupuri. Autorii își propus să examineze în mod specific modurile în care structura informațiilor poate avea un impact asupra utilizatorilor nevăzători, deoarece aspectul vizual al conținutului pe o interfată este cunoscut că afectează utilizatorii cu deficiențe. Perspectivele dintr-un astfel de studiu pot oferi indrumări dezvoltatorilor care doresc să sporească credibilitatea web într-o gamă mai largă de utilizatori.

3.1.8. A Survey on Web Use: How People Access, Consume, Keep, and Organize Web Content

Autori

Seungyon Claire Lee, Eamonn O’Brien-Strain, Jerry Liu, Qian Lin

IDEEA PRINCIPALÃ

Studiul prezintă relația dintre tipul de conținut web și comportament. Din rezultatele sondajului, autorii subliniază design-ul specific al conținutului pentru Tangible Web (TB), dar și sistemul de depozitare care permite salvarea și organizarea conținutului web.

Studiul prezintă șapte tipuri de conținut prin care se poate aborda livrarea pasivă și descoperirea comportamentului activ și patru tipuri de interacțiune pentru a reflecta posibile fluxuri de interacțiune.

Abordarea de livrare pasivă se potrivește bine cu un conținut sensibil la timp (de exemplu, vreme de zi cu zi pentru cicliști), care este verificat frecvent sau în mod obișnuit, cu mare probabilitate de a fi șters după ce a fost verificat. În schimb, descoperirea activă implică conținutul în care explorarea este situată și consumul este asociat cu o altă creație de conținut (de exemplu, lista de cumpărături pentru o revizuire și o comparare). Un astfel de conținut nu poate fi consumat zi cu zi și, uneori, necesită activități complexe.

REZULTATE

Autorii au grupat comportamentul pe web în 4 clase formând un ciclu: accesul, consumul, păstrarea și organizarea. În acest ciclu, comportamente pe web sunt oarecum correlate, astfel încât rezultatul unui comportament afectează adesea și comportamentul următor.

Pentru acest studiu s-au recrutat 435 voluntari care au participat la un sondaj online. Aceștia au avut vârsta cuprinsă între 18 și 75 ani și au fost studenți sau lucrau în momentul respectiv.

Metodele pentru a accesa conținutul Web ar putea fi rezultatele de organizare, de exemplu, Bookmark, care este un alt nod în ciclul de interacțiune. S-a monitorizat modul în care șapte tipuri de conținut sunt accesate prin diverse metode (de tip URL, cuvinte cheie de căutare, click pe Bookmark, click pe link) pentru a află relația dintre tipul de conținut și metoda de acces. Doar două metode au fost selectate că având un comportament specific conținutului (Bookmark și cuvintele cheie de căutare).

Rezultatul sondajului relevă următorul lucru și anume comportamentul utilizatorilor de a accesa, consuma, de a păstra și de a organiza un conținut web este oarecum afectat de caracteristicile conținutului precum livrarea pasivă și descoperirea activă. Relația dintre tipul de conținut, tipul de comportament și preferința UI va fi un ghid valoros în proiectarea TW, care va furniza depozitul de conținut web, cu support personalizat.

3.2. Proiectarea sistemului

3.2.1. Analiza și specificarea cerințelor

Această lucrare de cercetare „Web content controls for blînd people” are că și obiectiv principal implementarea și dezvoltarea unei aplicații Web pentru persoanele nevăzătoare și pentru persoanele cu probleme de vedere. Aplicația se adresează grupului țintă menționat anterior, aceasta fiind prezentată unui individ nevăzător și unui individ care are probleme de vedere care nu pot fi corectate cu ochelari sau prin operație. Cu ajutorul aplicației, persoanele nevăzătoare și cu probleme de vedere pot accesă aplicația utilizând tehnologii care sunt accesibile pentru ei – aceștia se folosesc de simțul auditiv pentru a asculta informația necesară. Tehnologiile utilizate sunt moderne, așadar indivizii pot să țină pasul cu informația actuală, evoluând și învățând lucruri noi în permanență.

Pentru ca aplicația sã aibã succes și sã fie utilã trebuie sã ȋndeplineascã urmatoarele criterii și anume:

Interfața cu utilizatorul trebuie să fie ușor de utilizat de către persoanele nevăzătoare.;

Culorile utilizate pentru interfața trebuie să poată fi sesizate de persoanele cu grad scăzut de vedere;

Ghidarea în aplicație trebuie să se bazeze pe feedback-ul sonor.

Un alt aspect care trebuie menționat este faptul că aplicația poate fi utilizată de fiecare individ în parte, find nevoie de un supraveghetor doar în cazul în care persoana dorește să parcurgă mai rapid o anumită activitate.

Cu ajutorul aplicației persoanele nevăzătoare pot învață lucruri noi, deoarece platforma folosită citește audio textul introdus într-o parte de admin și, de asemenea, aceștia au posibilitatea de a studia mai multe subiecte și teme și chiar să învețe limbi străine noi, datorită implementării controller-ului de traducere. Acest controller traduce textul din limba engleză în limbă română sau limbă germană.

3.2.2 Arhitectura sistemului

Aplicația a fost implementată pentru a fi utilizată într-un mod cât mai eficient și simplu pentru orice persoană cu deficiențe de vedere sau nevăzătoare. În figura de mai jos, se pot observa cele 4 secțiuni ale aplicației ( About Iphone, Sensors, Camera, Audio and Output) și legăturile dintre ele – prin apăsarea săgeții jos a tastaturii se trece la secțiunea următoare, iar pentru a reveni la una dintre secțiunile anterioare se apăsa tasta săgeată sus.

In figura de mai jos, se poate vizualiza diagrama activitatilor. Fiecare sectiune are acces la 4 activitati accesibile cu ajutorul tastelor de la tastatura. Tastele pe care le utilizam sunt:

Enter: citește titlul fiecarei secțiuni;

Shift: citește conținutul fiecãrei secțiuni;

L: traduce conținutul din englezã in romȃnã sau din englezã in germanã;

Space: este utilizat pentru a pune pauza citirii continutului sau pentru a continua citirea continutului.

3.3. Dezvoltarea aplicației

3.3.1 Mediul de dezvoltare

Mediul de dezvoltare utilizat a fost PhpStorm, versiunea 2016.3. Acest mediu de dezvoltare este un editor pentru PHP, HTML și JavaScript, fiind creat de IntelliJ IDEA.

Pentru crearea aplicației este nevoie de realizarea unor pași obligatorii:

Instalarea mediului de dezvoltare PhpStorm de pe pagina oficialã;

Adãugarea licienței mediului de dezvoltare;

Instalarea server-ului local XAMPP :

se utilizeazã acest program pentru a creea partea de admin a aplicației;

se creazã o bazã de date ȋn phpmyadmin cu douã tabele : login si section;

se utilizeazã pentru funcționarea pe localhost;

pentru fișierele cu extensia .php este necesar sa avem Apache, care este inclus ȋn pachetul XAMPP și ne ajutã la rularea fișierelor php;

utilizarea librariilor:

jquery.onepage-scroll.js: aceasta librarie se foloseste pentru a se face scroll de pe tastatura in aplicatiei pentru fiecare sectiune in parte;

jquery-1.9.1.min.js: aceasta librarie se foloseste pentru a se putea utiliza script-uri de Jquery;

modernizr-2.6.2.min.js: aceasta librarie este una mostenita de Jquery;

responisiveVoice.js: aceasta librarie este folosita pentru a citi audio textul, pentru pauza si pentru continuarea de dupa pauza a continutului.

se utilizeazã AJAX pentru a putea citi audio conținutul respectiv, dar și pentru a-l vizualiza in aplicația noastrã;

3.3.2 Structura modulelor

3.3.2.1 Fișierul index.php

Fișierul index.php este fișierul de bază al aplicației, unde browser-ul îl citește pentru a reda conținutul aplicației. Acest fișier este divizat în 2 părți:

head

body

Head

În această parte se includ toate fișierele de care avem nevoie pentru a reda conținutul aplicației. În această parte se includ fișierele cu următoarele extensii: .css și .js . De asemenea, menționăm utilizarea tag-urilor html meta care ne ajută pentru a indexa aplicația noastră pe Google și pentru a folosi cuvinte cheie pentru motorul de căutare.

Body

În partea de body se regăsește structura și conținutul aplicației noastre.

Body este inclus într-o clasă numită loading care atunci când aplicația este deschisă apare un simbol care reprezintă încărcarea conținutului.

Header-ul conține doar o parte unde putem vizualiza titlul aplicației: Web content controls for blînd people. Header-ul a fost stilizat cu ajutorul CSS-ului astfel:

3.3.2.2. Implementarea sectiunilor

In partea de main se regãsesc cele 4 secțiuni:

About Iphone;

Sensors;

Camera;

Audio and Output.

3.3.2.2 Implementarea sectiunilor

Secțiunile reprezintă partea de bază a aplicației. Cu ajutorul acestor secțiuni nevăzătorul care utilizează aplicația are dreptul de a alege care dintre cele 4 secțiuni dorește să le audă sau să asculte conținutul secțiunii respective pe una dintre cele 3 limbi implementate: engleză, română sau germană.

Pentru fiecare secțiune ȋn parte se ȋncarcã cȃte un fișier AJAX ȋn parte.

Această modalitate a fost utilizată pentru o încărcare unică și optimizată. Cu ajutorul acestei modalități se evita îngreunarea aplicației și ne ajută pentru vizualizare, dar și pentru conținutul care va fi redat audio. Totodată, fișiere AJAX au un rol major și atunci când textul este tradus.

In continuare se vor prezenta secțiunile individual:

Secțiunea AboutIphone

Fișierul corespunzător pentru această secțiune este denumit aboutIphone.php .

În acest fișier se regăsește html-ul nostru pentru vizualizarea conținutului secțiunii respective. De asemenea, acest fișier conține 2 părți: prima parte unde se găsește conținutul și a doua parte unde se găsesc imaginile și flag-urile țărilor respective unde se efectuează traducerea conținutului.

Variabila $content este o variabila de php care are rolul de a stoca tot conținutul html. Pentru a folosi în continuare conținutul acestui fișier avem nevoie de afișarea acestuia. Acest lucru se realizează prin structura php-ului echo $content .

Secțiunea Sensors

Fișierul corespunzător pentru această secțiune este denumit sensors.php .

Codul acestui fișier este similar codului din secțiunea anterioară. Singura diferență este reprezentată de modificarea conținutului.

Secțiunea Camera

Fișierul corespunzător pentru această secțiune este denumit cameră.php .

Codul acestui fișier este similar codului din secțiunea About Iphone. Singura diferență este reprezentată de modificarea conținutului.

Secțiunea Audio and Output

Fișierul corespunzător pentru această secțiune este denumit audioAndOutput.php .

Codul acestui fișier este similar codului din secțiunea About Iphone. Singura diferență este reprezentată de modificarea conținutului.

3.3.2.3 Implementarea One Page Scroll

Această tehnologie este o librărie de Jquery care ne ajută să trecem la următoarea secțiune, dar și să revenim la secțiunea anterioară cu ajutorul tastaturii. Tastele utilizate sunt :

• Arrow-down : trece la următoarea secțiune;

• Arrow-up: trece la secțiunea anterioară;

• Home: revine la prima secțiune;

• End: trece la ultima secțiune.

3.3.2.4 Implementarea call-ului de API Responsive Voice

Acest call de API se utilizează pentru citirea audio a conținutului și pentru a pune pauză din citirea conținutului și realuarea citirii. Acest call funcționează astfel:

Începe citirea textului în funcție de vocea selectată;

Are nevoie de 3 parametri:

String text: conținutul;

String voice: selectarea limbii pentru redarea audio;

Opțiuni : volumul recitării, viteză de citire;

Dacă nu selectăm string voice se setează pe default limba engleză cu voce feminină(Defaults to “UK English Female”);

După ce se apelează acest call de API rezultatul lui returnează un obiect.

3.3.2.5 Implementarea call-ului de API Google Cloud Translation

API-ul Google Cloud Translation poate traduce dinamic textul în mai multe limbi. API-ul de traducere permite aplicațiilor / site-urilor web și programelor să se integreze cu serviciul de traducere automată. API-ul de traducere Google face parte din familia Cloud Machine Learning API.

Pentru a folosi acest call de API este necesar să se activeze plata utilizării acestui serviciu.

În primul rând, trebuie să accesăm platforma Google Console. În această consolă trebuie să se creeze un proiect, în cazul nostru numele proiectului este: blînd people.

Detaliile proiectului in consola Google

Urmãtorul pas pentru a obține serviciile call-ului de API este:

Activarea billing-ului;

Crearea unei API key;

Termenul de valabilitate a billing-ului este de 12 luni sau panã la consumarea creditului de 300$. Dupa expirarea valabilitatii contul trebuie alimentat cu o alta suma de minim 300$, credit care este activ pentru inca 12 luni si ne ajuta la utilizarea in continuare a call-ului de API.

Acest call de API se folosesti prin metoda GET. Aceasta metodã va afisa in consola browser-ului url-ul request-ului de API. Astfel, datele noastre sunt memorate prin intermediul QueryString in interiorul variabilei $_GET.

Urmatorul pas este crearea API Key. Aceasta cheie creatã nu are nicio restrictie de domeniu, se poate atat local cat și public. Datorita acestei chei, putem folosi call-ul de API.

3.3.2.6 Implementarea fișierului main.js

În acest fișier se află toată funcționalitatea aplicației. Tot codul acestui fișier se regăsește într-o funcție de Jquery:

$(document).ready(function() {

…

});

Primul lucru care se efectuează în acest fișier este folosirea librăriei One Page Scroll care se aplică pe main-ul aplicației.

Aceastã funcție onepage_scroll are urmãtorii parametri:

sectionContainer: sunt permise mai multe secțiuni;

easing: reprezintã viteza de mișcare a scroll-ului;

animationTime: reprezintã timpul animației;

pagination: in cazul in care este activã (true) se referã la One-page;

keyboard: reprezintã activarea tastaturii (in cazul nostru).

Incãrcarea secțiunilor prin AJAX

Continuarea codului fișierului main.js reprezintă încărcarea secțiunilor aplicației cu ajutorul AJAX.

Fiecare secțiune are urmãtorii parametri:

url : calea spre fisierul incarcat;

cache: in cazul nostru este setat pe false, deoarece de fiecare data cand reincarcam aplicatia nu vrem sa se pastreze date in cache-ul AJAX-ului;

success: in cazul in care fisierul a fost incarcat cu succes va afisa continutul pe fiecare sectiune.

Legãtura tastelor tastaturii și aplicației

Legătura între taste și aplicație se realizează tot în fișierul de main.js . Se utilizează funcția onkeyup din Jquery pentru că aplicația noastră să recunoască tastele pe care utilizatorii pe apasă. Astfel, tastele pot fi active sau inactive. În funcție de locul în care ne aflăm pe aplicație se verifică secțiunea care este activă. De asemenea, se salvează id-ul secțiunii în care ne regăsim.

TASTA ENTER

Primul pas în aplicație este apăsarea tastei ENTER. Această tastă are rolul de a citi titlul secțiunii în care ne aflăm. KeyCode-ul tastei ENTER este 13, astfel se verifică dacă această tastă este apăsată sau nu. În imaginea de mai jos, se verifică id-ul secțiunii, iar dacă id-ul secțiunii corespunde cu locația în care ne aflăm atunci se recită titlul secțiunii corespunzătoare.

Funcția title încarcă fișierul AJAX în funcție de secțiunea în care suntem în aplicație. Apoi, se execută o expresie regulată pentru a identifică titlul secțiunii respective. După această identificare, care este de tip obiect îl transformă în text. În continuare, se utilizează call-ul de API Responsive Voice cu parametri specifici, pentru a reda audio titlul respectiv , în cazul în care se apasă încă o data tastă ENTER se recită cu ajutorul call-ului de API textul generic „Are you sure you want to hear the page” + denumirea titlului secțiunii în care se regăsește utilizatorul cu vocea în limba engleză.

TASTA SHIFT

După ce utilizatorul este sigur că dorește să asculte secțiunea respectivă se apasă tasta Shift care are keyCode 16. Această tastă are rolul de a citi conținutul secțiunii respective. Se verifică id-ul secțiunii pentru a se recunoaște conținutul care trebuie citit. De fiecare data când se apasă tasta Shift se verifică secțiunea în care se află utilizatorul și se recitește conținutul de la început.

Functia content are rolul de a prelua continutul sectiunii incarcate prin AJAX si pentru a verifica tipul tastei. In acest caz, tipul este de redare audio a continutului. Dupa ce s-a incarcat AJAX-ul sectiunii respective se efectueaza o expresie regulata pentru a ne lua doar continutul din acel fisier. Rezultatul expresiei regulate este convertit in text. In aceasta functie avem, de asemenea, doua tipuri:

play: la apasarea tastei Shift se recita continutul sectiunii respective;

pause_resume: acest tip se activeaza cand se apasa tasta Space.

TASTA SPACE

Această tastă are rolul de a opri recitarea conținutului, dar și reluarea conținutului din punctul în care a rămas recitarea. Această tasta are keyCode-ul 32. Când se apasă pentru prima data această tasta se verifică id-ul secțiunii și are acțiunea de pauză din recitarea audio. Apoi, dacă se mai apasă încă o data tasta space recitarea începe exact din punctul în care a rămas. Și în cazul tastei space se utilizează funcția content descrisă mai sus, care în acest caz are parametrul pause_resume. De reținut este faptul că înainte să se apese vreo tastă se setează automat variabila pauză cu valoarea 0, iar când este pentru prima data apăsată se realizează principiul de pauză, iar după aceea valoarea este incrementată. Un alt aspect important al funcționalității acestui principiu este faptul că atunci când valoarea este pâră se realizează pauză, iar când este împăra se realizează resume.

TASTA L

Tasta L are keyCode-ul 76 și are rolul de a schimba limba în care se recită. Conținutul va fi și el modificat prin intermediul call-ului de API de la Google, fiind tradus în limba selectată anterior. Se verifică id-ul secțiunii în care ne aflăm și se apelează funcția languagues care are că scop de a traduce conținutul respectiv în limba setată. Prima dată când este apăsată tasta L limbă selectată este română, iar la a două apăsare limbă se modifică în germană. La a treia apăsare revine limbă română, doar la apăsarea tastei shift se revine la limbă engleză. Procesul continuă la apăsarea tastei L de câte ori este apăsată tastă.

Funcția languagues primește 2 parametri și anume:

Lang : daca valoarea acestui parametru este para limba selectata este romana, iar daca valoarea este impara limba selectata este germana;

Ajax : incarca fisierul sectiunii respective;

Dupa incarcarea AJAX-ului se realizeaza o expresie regulata pentru a identifica continutul sectiunii respective. Dupa identificarea sectiunii respective se realizeaza call-ul de API de la Google pentru traducerea in limbiile romana sau germana, in functie de numarul de apasare al tastei L. Acest call de API a fost implementat prin AJAX, avand urmatorii parametri:

Type: acest parametru este de tip GET;

url: acest url este link-ul spre call-ul de API utilizat;

data :

key: cheia call-ului de API primit dupa efectuarea billing-ului;

q: reprezinta continutul sectiunii care urmeaza sa fie tradus;

source: limba din care este tradus textul;

target: limba primita de la tastatura prin apasarea tastei L.

Dacă call-ul de API s-a realizat cu succes, se returnează un obiect conținând rezultatul traducerii. Acest obiect este de tip JSON. Rezultatul traducerii se salvează într-o variabila numită result, după care se verifică limba selectată și se efectuează call-ul de API Responsive Voice pentru a reda conținutul în limba respetiva.

În cazul în care limba selectată este română, s-a adăugat un parametru suplimentar pentru că și conținutul să fie recitat mai lent pentru a fi mult mai ușor de asimilat conținutul.

3.4. Experimente și rezultate

Această lucrare de licență a fost prezentată membrilor Asociației Nevăzătorilor din România Filiala Sibiu în vederea realizărilor sesiunilor de feed-back, sesiuni care vor avea loc în viitor pentru dezvoltarea acestei aplicații.

În urma sesiunilor de feed-back, au fost prezente persoane nevăzătoare cu vârstă cuprinsă între 22-26 ani și persoane cu deficiențe de vedere cu vârstă cuprinsă între 40-45 ani. Persoana nevăzătoare a avut handicap din naștere, iar persoana cu deficiență de vedere a dobândit deficiență pe parcursul anilor, iar în momentul actual acesta putea distinge obiectele cu greu,bazându-se diferențele de contrast și lumina, dar fiindu-i imposibil să citească efectiv textul.

Aplicația a fost prezentatã pe un laptop cu structura obisnuitã, iar inainte de utilizarea aplicației s-a prezentat o scurtã descriere despre utilizarea aplicatiei și anume:

Rolul aplicației

Tastele utilizate ȋn cadrul aplicației

Posibilitatea de traducere a textului ȋn limbile adãugate

Posibilitatea de a se opri din utilizarea aplicației atunci cȃnd doresc

De menționat este faptul că indivizii cunoșteau structura tastaturii și nu a fost necesară o instruire în această privință. Au recunoscut tastele cu ușurință, aceștia considerând că tastele utilizate în aplicație au fost accesibile și ergonomice.

Dupã utilizarea aplicației, persoanele au sesizat urmãtoarele aspecte:

Aplicatia a fost usor de utilizat datorita faptului in care au fost alese tastele;

Modul in care a fost tradus textul este o caracteristica importanta, deoarece aplicatia se poate folosi si in invatamant, astfel copiii nevazatori din nastere pot invata limbi straine intr-un mod placut si de actualitate, astfel copiii nu se simt marginalizati de tehnologie, cum pentru majoritatea este o bariera;

Modul in care au fost rostite cuvintele in romana li s-a parut interesant, deoarece cuvintele nu au fost rostite prea rapid sau prea lent, iar rostirea a fost corecta;

Sectiunile folosite au fost structurate astfel incat in fiecare sectiune putem gasi continut despre o anumita tema.

Mai jos se regãsesc poze din timpul sesiunilor de feed-back:

4.Concluzii

4.1 Gradul de îndeplinire a obiectivelor

Datorită evoluției continue a tehnologiei în lumea actuală o aplicație de acest tip este esențială pentru evitarea marginalizării persoanelor cu deficiențe de vedere sau nevăzătoare, acestea fiind tratate diferit atunci când se vorbește despre tehnologia prezentă. Astfel, aplicația a înlocuit modul de transmitere a informației prin analizatorul vizual cu modul de transmitere a informației prin analizatorul auditiv.

Tehnologiile utilizate sunt unele moderne și accesibile pentru fiecare persoană, deoarece orice persoană are acces la Web, iar sintetizatorul vocal este o inovație pentru fiecare nevăzător datorită posibilității de traducere în diferite limbi.

Avȃnd ȋn vedere obiectivele inițiale putem enumera și detalia urmãtoarele obiective ȋndeplinite:

Citirea conținutului ȋntr-un mod plãcut pentru utilizator;

Interfața prietenoasã cu utilizatorul;

Traducerea textului ȋn limba romȃnã și germanã.

4.2 Dificultați ȋntȃmpinate

În timpul realizării acestei lucrări au apărut diverse dificultăți, majoritatea fiind rezoltate. Enumerăm mai jos o parte dintre aceste dificultăți:

• Nu s-a putut traduce textul în diferite limbi prin Responsive Voice, dar, de asemenea, ne limitează și la recitarea textului pentru anumite limbi;

• Utilizarea oricărei taste nu este posibilă, deoarece nu orice tastă este accesibilă pentru utilizatorul nevăzător, accesul la aplicație fiind restricționat;

• Call-ul de API ne-a limitat în transmiterea mesajului de către utilizator – realizarea unui dialog între aplicație și utilizator.

4.3. Dezvoltãri ulterioare

Proiectul va continua cu dezvoltarea unui plugin pentru platformă WordPress în care vom avea o parte de admin unde administratorul poate adaugă conținutul într-un mod facil pentru el.

O altă dezvoltare este reprezentată de posibilitatea traducerii conținutului în mai multe limbi, nefiind restrictionati doar la limbile engleză, română sau germană.

5.Bibliografie

[1] Statistics and data- blind people – https://nei.nih.gov/eyedata

[2] Facts and Figures on Adults with Vision Loss – http://www.afb.org/info/blindness-statistics/adults/facts-and-figures/235

[3] Haverbek M., Eloquent JavaScript-A Modern Introduction to Programming, No Starch Press, 2014

[4] Rauschmayer A., Speaking JavaScript: An In-Depth Guide for Programmers, O’Reilly, 2014

[5] Dian Ayubaa D., Ismaila A., Hamzahb M., Evaluation of Page Response Time between Partial and Full Rendering in a Web-based Catalog System, Procedia Technology 11, 807 – 814, 2013

[6] Castro E., Hystrop B., HTML5 and CSS3, pp. 41 – 448, Peachpit Press, 2012

[7] HTML5 – https://en.wikipedia.org/wiki/HTML5

[8] HTML5 Atributes – https://www.tutorialspoint.com/html5/html5_attributes.htm

[9] CSS Tutorial – http://www.csstutorial.net/

[10] McArthur K., Pro PHP – Patterns, Frameworks, Testing and More, Apress, pp. 11 – 31, 2008

[11] PHP Learning – https://www.codecademy.com/learn/php

[12] Use PHP API – https://stackoverflow.com/questions/17234659/how-to-use-a-php-api

[13] PHP API – https://code.tutsplus.com/tutorials/creating-an-api-centric-web-application–net-23417

[14] Smith B., Beggining JSON, Apress, 2015

[15] Understanding JSON – https://spacetelescope.github.io/understanding-json-schema/UnderstandingJSONSchema.pdf

[16] Chaffer J., Swedberg K., jQuery Reference Guide, PACKT Publishing, 2007

[17] Lindley C., jQuery Succinctly, Syncfusion Inc., 2012

[18] Learn jQuery – http://learn.jquery.com/

[19] jQuery Tutorial – http://www.tutorialrepublic.com/jquery-tutorial

[20] Aplicatie similara nevazatori – https://nevazator.ro/

[21] Harta accesibilitatii pentru persoanele nevazatoare – https://www.bursabinelui.ro/BursaBinelui/Proiecte/Harta-accesibilitatii-pentru-persoanele-cu-dizabilitati

[22] Accesibilitatea din punct de vedere legal pentru nevazatori – http://legi-internet.ro/blogs/index.php/accesibilitate-pagini-web-legi-recomandari

[23] Accesibilitatea pe pagini Web – http://www.kosson.ro/know-how/409-tehnologii-web/938-recomandari-pentru-crearea-unui-site-web-accesibil

[24] World Wide Consortium – https://www.w3.org/

[25] Giraud S., Thérouanne P., Steiner D., „Conceptualization of a technical solution for web navigation of visually impaired people”, ACM 978-1-4503-3844-8/15/10, 2015

[26] Abdolrahmani A., Kuber R., Easley W., „Web Search Credibility Assessment for Individuals who are Blind”, ACM 978-1-4503-3400-6/15/10, 2015

[27] Claire Lee S., O’Brien-Strain E., Liu J., Lin Q., „A Survey on Web Use: How People Access, Consume, Keep, and Organize Web Content”, ACM 978-1-4503-1016-1/12/05, 2012

[28] Bigham J., Prince C., Ladner R.,” WebAnywhere: Enabling a Screen Reading Interface for the Web on Any Computer”. WWW 2008 / Poster Paper, 2008

[29] Laux L., McNally P., Paciello M., Vanderheiden G., „Designing the World Wide Web for People with Disabilities: A User Centered Design Approach”. ACM 0-89791-776-6/96/0, 1996

[30] Fukuda K., Saito S., Takagi H., Asakawa C. , „Proposing New Metrics to Evaluate Web Usability for the Blind.” IBM Japan 1623-14, Shimotsuruma, Yamato-shi Kanagawa-ken, 242-8502, 2005

[31] Giraud S., Colombi T., Russo A., Thérouanne P., „Accessibility of Rich Internet Applications for blind people”: A study to identify the main problems and solutions. ACM 1-58113-000-0/00/0010, 2010

[32] Baguma R., Lubega J. , „A Web Design Framework for Improved Accessibility for People with Disabilities (WDFAD)”. ACM 1-59593-590-8/06/0010, 2008

[33] Responsive Voice API – https://responsivevoice.org/api/

[34] Google Cloud Translation – https://cloud.google.com/translate/docs/

[35] One Page Scroll – https://github.com/peachananr/onepage-scroll