Editor de Manuale Interactive Folosind Tehnologii Html5

Editor de manuale interactive folosind tehnologii HTML5

Capitolul 1. Introducere

1.1. Scopul și obiectivele lucrării

Trăind într-o lume în care termenii ca „dezvoltare” și „viteză” domină toate aspectele vieților noastre, nevoia de limbaje complexe și fiabile dar, în același timp, portabile, a devenit tot mai pregnantă.

În acest context, domeniul pedagogic nu poate rămâne în urma acestui trend. În condițiileîn care majoritatea copiilor dispune de un număr impresionat de căi de cunoaștereși de dispozitive portabile prin care se realizează acest proces de educare, sistemul învățământului trebuie sădepună eforturi pentru a susțineși pentru a evolua în aceeașidirecție cu nevoileși preferințele lor.

Principalul instrument folosit în procesul instructiv-educativ îl reprezintă manualele școlare, de-a lungul timpului investindu-se resurse financiare și umane pentru a stabili un etalon în ceea ce privește nivelul și cantitatea de informație transmisă unui elev.

Însăfacilitățile existente pe piațănu încurajează acest proces, elevii beneficiind în continuare de manuale învechite, tipărite și deloc atractive.

Astfel, în cadrul acestei lucrări, am avut ca obiectiv principal realizarea unei aplicații informatice preponderent de interes didactic, pentru a pune la dispoziție un instrument facil de creare amanualelorșcolareîntr-un mod accesibil atât profesorilor, pentru a dezvolta cu ușurință manuale interactive, cât și elevilor, pentru a beneficia demateriale informative actualizate și captivante. Pentru îndeplinirea acestui scop am utilizat cele mai noi implementări aduse de versiunea HTML5.

HTML5 este un standard viu, în permanentă dezvoltare, utilizat, într-o mai mare sau mai mică măsură, de toate browser-ele majore existente pe piața. Acesta a adus o serie impresionantă de posibilități de creare și dezvoltare ale aplicațiilor web într-un mod în care nu s-a crezut vreodată realizabil.

HTML5 s-a extins atât la nivelul programelor desktop, cât și în zona mobilă, dovedindu-se a fi un limbaj de încredere și stabil pentru viitor.

1.2. Prezentarea succintă a structurii lucrării

Lucrarea este structurată în patru părțiși oferă o imagine de ansamblu asupra necesității utilizării unei astfel de aplicații, precum și asupra proiectării și implementării ei. Conținutul fiecărui capitol, ce intră în structura documentației, este prezentat pe scurt în cele ce urmează.

Primul capitol cuprinde argumentarea actualității temei investigate, identificarea scopului și obiectivelor lucrării și o descriere succintă a capitolelor lucrării.

În cadrul capitolului 2 al lucrării sunt prezentate aspectele teoretice ce au stat la baza realizării practice. Astfel, în cadrul lucrării de fațăam prezentat istoricul parcurgerii traseului de la HTML la HTML5 și am detaliat noutățile introduse și beneficiile aduseodată cu această versiune.

Capitolul 3 cuprinde prezentarea tehnologiilor software utilizate pentru dezvoltare și detaliază aspectele funcționale ale aplicației realizate.

Ultimul capitol al lucrării este alocat concluziilor, dar prezintă și o serie de obiective viitoare pentru îmbogățireaaplicațieișicreștereapopularității acesteia.

Capitolul 2. Analiza și proiectarea unei aplicații de creare de conținut

2.1. Istoric: de la HTML la HTML5

HTML(Hypertext Markup Language)a fost dezvoltat inițial de Tim Berners-Lee în anul 1989, ca urmare a necesității de publicare a informațiilor la nivel global. Acesta este limbajul de bază de marcare a World Wide Web-ului.Inițial, HTML a fost conceput în principal pentru a descrie semantic documente științifice.Cu toate acestea, design-ul său general,aflat în continuă schimbare de-a lungul anilor, a permis să fie adaptat pentru a descrie o serie de alte tipuri de documente și chiar aplicații.

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se inserează într-un text pentru a adăuga informații despre formatare. Este derivat din SGML(Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat să reprezinte instanțe ale acestor tipuri de documente. La baza SGML și a HTML se află același principiu: descrierea conținutului unui document se face într-un fișier text obișnuit (ASCII). Încă de la început s-a urmărit ca aceste fișiere să fie editabile cu aplicații software nepretențioase (ex. NotePad, WordPad).

Pentru primii cinci ani (1990-1995), HTML a trecut printr-o serie de revizuiri și a cunoscut o serie de extensii. HTML2.0 a apărut în 1994 și a fost prima versiune standardizată. Ea conținea 49 de taguri.

O încercare nereușită de extindere a HTML în 1995 cunoscută sub numele de HTML 3.0, a făcut apoi drum unei abordări mai pragmatice, cunoscută sub numele HTML3.2, care a fost finalizată în 1997. HTML4 a fost lansat mai târziu în același an.Sunt adăugate în această versiune tabele, limbaje de scripting, style sheets (CSS). Sunt marcate anumite taguri și atribute moștenite din HTML3.2 ca "învechite" (deprecated), deci este sugerată întreruperea sau evitarea folosirii lor.

În anul următor, conducere W3C a decis să oprească evoluția HTML și, în schimb, să înceapă să lucreze la un echivalent bazat pe XML, numit XHTML.Acest efort a început cu o reformulare a HTML4 în XML, cunoscut sub numele de XHTML 1.0, care nu a adăugat alte noi caracteristici, cu excepția noii serializări, fiind finalizată în anul 2000. După XHTML 1.0, accentul W3C s-a axat pe facilitareaextinderii XHTML pentru alte grupuri de lucru, sub denumirea XHTML Modularization.În paralel cu aceasta, W3C a lucrat la un nou limbaj, care nefiind compatibil cu versiunea anterioară HTML și cu limbajele XHTML, a fost numit XHTML2.

Ideea că evoluția HTML ar trebui să fie redeschisă a fost testată la un atelier de lucru W3C în 2004, unde unele dintre principiile care stau la baza activității HTML5 au fost prezentate în fața membrilor W3C în comun de către Mozilla și Opera.Propunerea a fost respinsă pe motiv că aceasta era în conflict cu direcția aleasă anterior pentru evoluția Web-ului;personalul W3C și conducerea au votat pentru continuarea dezvoltăriide înlocuiri bazate pe XML.

La scurt timp, Apple, Mozillași Opera au anunțat intenția comună de a continua să lucreze sub umbrela unui nou concept numit WHATWG.O listă de discuții publice a fost creată, iar proiectul a fost mutat la site-ul WHATWG(What You See Is What You Get).

WHATWG s-a bazat pe mai multe principii de bază, în special pe faptul că tehnologiile trebuie să fie compatibile, că specificațiile și implementările trebuie să se potrivească chiar dacă aceasta înseamnă schimbarea caietului de sarcini, decât a implementărilor și că specificațiile trebuie să fie suficient de detaliate astfel încât implementările să poate atinge interoperabilitate maximă.

Această ultimă cerință, în special, făcea necesar ca domeniul de aplicare al caietului de sarcini HTML5 să includă ceea ce a fost anterior precizat în trei documente distincte: HTML4, XHTML1, și DOM2 HTML.A însemnat de asemenea, introducereaspecificațiilor într-un mod mult mai detaliat, decât a fost anterior considerat suficient.

În anul 2006, W3C a prezentat interes în a participa la dezvoltarea de HTML5 și în 2007, a format un grup de lucru pentru a lucra cu WHATWG privind dezvoltarea caietul de sarcini HTML5.Apple, Mozilla, Opera și au permis W3C să publice specificațiile sub dreptul de autor W3C, păstrând în același timp o versiune cu licență mai puțin restrictivă pe site-ul WHATWG.

Pentru un număr de ani, ambele grupuri au lucrat împreună sub același editor: Ian Hickson.În 2011, grupurile au ajuns la concluzia că au obiective diferite: W3C a vrut să tragă liniepentru caracteristicile HTML5Recommendation, în timp ce WHATWG a vrut să continue să lucreze la Living Standard for HTML, adăugând noi caracteristici la caietului de sarcini.La mijlocul anului 2012, o nouă echipă a fost introdusă la W3C pentru a avea grijă de crearea HTML5și pregătirea un proiect de lucru pentru următoarea versiune HTML.În data de 28 octombrie 2014 a fost lansat oficial HTML5 sub îndrumarea W3C.

2.2. HTML5

În esență, HTML5reprezintăîmbunătățirile aduse HTML-ului, cât și la nivel de JavaScript.

Obiectivele sale principale au fost optimizarea limbajului pentru a suporta ultimele tehnologii media, menținându-și însă simplicitatea structurii și ușurința de citire a codului de către utilizatori și aplicații.

HTML5 reprezintăîncercarea de a defini un singur limbaj de marcare care să poată fi scris fie în HTML, fie în XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja implementări interoperabile; HTML5 extinde, îmbunătățește și raționalizează marcajul disponibil pentru documente și introduce marcaje și interfețe de programare ale aplicațiilor (API) pentru aplicații web complexe.

Din aceste motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create luând în considerare faptul că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smartphone-urile sau tabletele.

În special, HTML5 aduce multe caracteristici sintactice noi, precum și posibilitatea de integrarea conținutului SVG prin înlocuirea utilizării tag-ului generic <object>. 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.

HTML5, de asemenea, definește în câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browser-ele cunoscute.

În completarea marcajelor prezentate mai sus, HTML5 aduce scripting-ul API (application programming interfaces). Interfața existentă document object model (DOM) este extinsă de fapt cu caracteristici noi, documentate. Sunt noi API-uri, cum ar fi:

Elementul canvas pentru modul de desen 2D.

Timed media playback – mod de redare media cronometrat

Offline storage database (offline web applications)

Editare de documente Drag-and-drop

Mesagerie Cross-document

Managementul de istorie a browser-ului

MIME type și protocolul de manipulare a înregistrărilor

Microdata

Printre schimbările ce transformă HTML5 într-un "limbaj cu o mai mare putere de exprimare", se observă și faptul căDoctype-ul sau Document Type Declaration nu mai este atât de complicat și greu de reținut, cum a fost în versiunile anterioare de HTML sau XHTML, ci pur și simplu:

<!DOCTYPE HTML>

Teoretic ea poate lipsi, însă un validator HTML va trebui apoi săanalizeze ce versiune de HTML a fost folosită.

Sintaxa HTML5 este compatibilă cu HTML4 și XHTML. Așadar se pot închide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag />, precum în XHTML sau pot fi lăsatefără a le adăugaslash. Totodată, HTML5 permite folosirea literelor mici, sau /și literelor mari, pentru numele tag-urilor și atribute.

Tabelul 2.1 reunește elementele nou introduse în versiunea HTML5.

Tabelul 2.1. – Elemente nou introduse în HTML5

În tabelul 2.2 se regăsește lista elementelor ce au fost eliminate sau înlocuite, cu precădere cele ce țineau mai mult de aspect și nu de conținut:

Tabelul 2.2. – Elemente eliminate sau substituite în HTML5

Rezumând, putem spune cu siguranță că viitorul este pentru HTML5. Având în vedere faptul că Apple și Microsoft deja au abandonat utilizarea Flash-ulor, este logic de înțeles că HTML5 este leader în ziua de azi.

Capitolul 3. MakeContent – Editor de manuale interactive

3.1. Tehnologii folosite în dezvoltarea aplicației

HTML-ul nu este un limbaj de programare propriu-zis, ci unul de descriere. Utilizarea HTML oferă următoarele avantaje:

1. Este ușor de asimilat și de utilizat;

2. Oferă un control total asupra elementelor utilizate în realizarea de pagini web;

3. Permite un grad înalt de reutilizare.

Dintre elementele menționate anterior ca fiind noutăți aduse de versiunea HTML5, în realizarea aplicației online, m-am axat pe următoarele:

3.1.1. HTML5: Drag-and-Drop

Tradiționala funcționalitate drag-and-drop a fost populară printre utilizatori încă din zilele lansării originalului Apple Macintosh, însă computerele de astăzi și dispozitivele mobile din zilele noastre au ajuns să dispună de un comportament drag-and-drop mult mai sofisticat.

Drag-and-drop este utilizat în gestionarea fișierelor, transferul de date, diagrame și multe alte operații unde mutarea unui obiect este mai natural prevăzută printr-un simplu gest, decât printr-o comandă scrisă.

Această calitate a ajuns să fie înrădăcinată atât de adânc în aplicațiile web, încât utilizatorii o percep ca fiind un lucru uzual. Chiar și așa, HTML nu a dispus de această caracteristică de bază în primii 15 ani de existență. Deși unii dezvoltatori au folosit capacitatea built-in pentru a gestiona evenimentele low-level ale mouse-ului ca o modalitate de a reproduce primitiv drag-and-drop. Cu sosirea unui set bine precizat, de funcționalitate drag-and-drop, aplicațiile HTML au avansat cu un pas spre satisfacerea nevoilor și capacităților aplicațiilor desktop.

Până acum, utilizatorii creativi care doreau să implementeze această funcționalitate, prefereau să apeleze la CSS în combinație cu JavaScript și evenimente DOM pentru a crea un drag-and-drop rudimentar.

În ciuda faptului că modelarea unui sistem drag-and-drop folosind evenimente primare este posibilă, acesta reprezintă un proces dificil cu multe piedici. Atunci când este cuplat cu poziționare CSS, este posibil să se apropie de un sistem drag-and-drop, prin crearea de biblioteci complexe JavaScript și o cunoaștere fermă de evenimente DOM. Deși modelarea un sistem drag-and-drop brut utilizând evenimente de nivel scăzut este posibil, suferă de unele dezavantaje notabile. În primul rând, logica necesară manipulării evenimentelor de mouse este foarte complexă, deoarece fiecare dintre acestea are multe cazuri pentru care sunt necesare implementări și contabilizări. Totodată, folosirea de CSS trebuie să fie foarte atent utilizată în maparea evenimentelor pentru a returna un feedback utilizatorului despre posibilitatea de tragere(dragging) sau fixarea(dropping) în funcție de poziționarea acestuia cu mouse-ul și a locației.

Însă, cel mai serios impediment este faptul că implementările acestui sistem ad hoc de drag-and-drop se bazează pe control total al sistemului. Dacă utilizatorul încearcă să integreze sistemul într-o aplicație comună, unde alții folosesc aceleași evenimente pentru operații diferite, acesta poate scapă de sub control cu repercusiuni grave asupra integrității datelor. Un alt exemplu ar fi încercarea de a utiliza conținut din codul altcuiva, lucru care ar fi imposibil fără sincronizarea totală și atentă a celor două sisteme de codare.

Noul API HTML5 pentru drag-and-drop a fost construit astfel încât să se adreseze și să trateze aceste limitări, totodată împrumutând din comportamentul și modul în care a fost implementat în alte interfețe utilizator. Acesta este modelat asemănător conceptelor aferente altor tehnologii de programare, cum ar fi Java sau Microsoft MFC.

Conceptul de drag-and-drop constă în mare într-un utilizator care începe operația de dragging prin selectarea obiectului și mutarea pointer-ului. Apoi intervine procesul de dropping prin eliberarea cursorului și poziționarea obiectului în noua zonă de drop.

Figura 3.1. – Reprezentare sursa drag și destinația drop

Sursa: http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

Dacă detaliem, simpla selectare a unui obiect și mutarea lui dintr-o parte în alta nu este ceea ce înseamnă drag-and-drop, ci mai degrabă prezentarea unui feedback în timpul acestei operații, care face o mai bună interacțiune utilizator-aplicație. Implementarea trebuie să țină cont de anumite aspecte care să-i indice acestuia posibilitățile de care dispune într-un anumit punct al procesului:

Pointer-ul semnalează că poziția actuală este una validă pentru a muta obiectul sau nu?

Indică pointer-ul ce tip de operație realizează utilizatorul? de mutare, legare sau copiere?

Zona deasupra căreia se trece cu pointer-ul arată că aceasta ar fi selecționată pentru a elibera obiectul?

Pentru a transmite un feedback într-un mod cât mai clar utilizatorilor, browser-ele vor emite o serie de evenimente pe parcursul procesului de drag-and-drop. Acestea vor veni în ajutorul dezvoltatorilor, deoarece vor avea putere deplină în schimbarea elementelor paginii pentru a returna exact tipul de feedback pe care utilizatorii l-ar aștepta în mod normal.

Pe lângă zona inițială și finală (drag source și drop target), mai există un concept cheie folosit de noul API: data transfer.

Referitor la data în sine, mecanismul dataTransfer pentru completarea procesului de drop se axează direct pe una din limitările vechilor tehnici ad hoc de drag-and-drog descrisă mai sus.

În loc să forțeze toate sursele drag și zonele drop target să ia cunoștința una de alta, mecanismul data transfer lucrează similar unei rețele de negociere protocol.

În acest caz, negocierea este realizată prin intermediul tipurilor Multipurpose Internet Mail Exchange(MIME).

Scopul utilizării MIME este de a permite surselor și zonelor target să negocieze asupra formatului care s-ar plia cel mai bine asupra nevoilor zonei drop target.

Tabelul 3.1. – Tipuri MIME

Figura 3.2. – Modalitate de transfer tip de data în procesul drag-and-drop

Sursa: http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

După cum se vede în figura 3.2, în timpul startului unui drag, obiectul dataTransfer este încărcat cu data reprezentând toate tipurile prin care este permis transferul. Apoi, când se termină procesul drop, codul aferent controller-ului poate scana tipurile valabile de date și poate decide ce format MIME se adaptează cel mai bine nevoilor.

Când drop-ul se încheie, controller-ului poate interoga lista de tipuri disponibile, putând să-l aleagă pe cel adecvat situației.

Este acest proces de negociere cel care permite surselor drag și drop sa fie obiective și decuplate .

În ceea ce privește evenimentele, acestea operează la un nivel superior celor utilizate anterior pentru simularea comportamentului drag-and-drop, preponderent eveniment de mouse. Totodată, acestea extind evenimentul de mouse definit în DOM, așadar utilizatorul tot va avea acces la informații de nivel inferior, cum ar fi coordonatele, dacă are nevoie.

Când un utilizator inițiază o operație drag-and-drop în browser-ul ce suportă HTML5, se va declanșa o serie de evenimente la început și va continua pe tot parcursul întregii operațiuni. Lanțul de evenimente drag-and-drop sunt rezumate în figura.

Figura 3.3. – Reprezentare evenimente aferente procesului drag-and-drop

Sursa: http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

dragstart

Evenimentul dragstart se declanșează pe un element în pagină atunci când utilizatorul începe să tragă de el. Cu alte cuvinte, odată ce mouse-ul este apăsat și utilizatorul îl deplasează, este inițiată operația de dragstart. Evenimentul este de o importanță extraordinară, deoarece este singurul eveniment unde dataTransfer poate fi setat, folosind setData apelul. Acest lucru înseamnă că într-o acțiune de tipul dragStart , este necesar ca tipurile posibile de date să fie stabilite astfel încât acestea să poată fi interogate la sfârșitul procesului, așa cum a fost descris anterior.

drag

Evenimentul drag poate fi considerat ca fiind continuarea unei operațiuni de tragere, prin simplul fapt că utilizatorul deplasează cursorul mouse-ului în pagină, evenimentul drag este solicitat în mod repetat pe sursă (drag source). Evenimentul drag va fi lansat de câteva ori în fiecare secundă în timpul operației. Deși modul de vizualizare ale feedback-ului poate fi modificat în timpul unei operațiuni drag, datele de pe dataTransfer sunt inaccesibile..

dragenter

Când mutarea de obiect trece într-un nou element pe acea pagină, fluxul dragenter lansează un eveniment pe acela. Acest eveniment este un moment bun pentru a stabili feedback-ul drop pe element, bazându-se pe faptulcă dacă acesta poate sau nu să primească informația (drop-ul).

dragleave

În schimb, browser-ul va declanșa flux dragleave ori de câte ori utilizatorul va ieși din elementul unde dragenter a fost declanșat anterior. Feedback-ul drop pot fi restaurat în acest moment, prin faptul că mouse-ul nu mai este peste acest obiectiv.

dragover

Evenimentul dragover este interogat la intervale frecvente pe măsură ce mouse-ul se mută peste un element în timpul unei operații de tragere(drag). Spre deosebire de omologul său evenimentul drag, care se lansează pe sursa drag, acest eveniment este interogat pe obiectivul actual al mouse-ului.

drop

Evenimentul drop este chemat pe obiectivul actual al mouse-ului atunci când utilizatorul eliberează pointer-ul. Pe baza rezultatului obținut prin obiectul dataTransfer, se determină dacă acela este locul în care ar trebui executat codul pentru a gestiona drop-ul.

dragend

Evenimentul final din flux este dragend, care se lansează pe sursa drag, indicând faptul că procesul drag s-a finalizat. Acesta este potrivit pentru curățarea stărilor utilizate în timpul acțiunii drag, deoarece este chemat indiferent dacă drop-ul este terminat sau nu.

Per total, există o mulțime de moduri pentru un utilizator de a intercepta operațiunile drag-and-drop și de a lua măsuri sau de a le personaliza în funcție de necesitățile și preferințele sale.

3.1.2. HTML5: Canvas

Elementul canvas este folosit în principal pentru a desena imagini și grafică pe pagina web și se comportă ca o componentă relativ inactivă. Este util pentru o multitudine de scenarii de folosire, de exemplu o aplicație grafică unde este folosit cu scopul de a genera rezultatul.

Este utilizabil și pentru aplicațiile care se bazează pe folosirea tastaturii, așa cum sunt jocurile online, deoarece utilizatorul are posibilitatea să atașeze funcții de tratare a evenimentelor generate de aceasta.

În ciuda puterii și versatilității sale, elementul canvas este un element unitar. El poate fi folosit pentru a desena, însă rezultatul nu va fi interactiv, deoarece el este reprezentat prin pixeli pe elementul canvas și nu are funcții asociate.

Un element <canvas> nu are conținut și nu are o margine proprie, el practic fiind invizibil. Pot exista mai multe tag-uri într-o pagina și user-ul nu ar putea diferenția între ele cu ochiul liber. Fiecare <canvas>poate avea un id prin care poate fi identificat în DOM. Prin aceste id-uri unice, ele pot fi manipulate ca orice alt element HTML.

<canvas id="a" width="300" height="225"></canvas>

Tag-ul <canvas> este destul de simplu, definește lungimea, înălțimea și un ID unic. Dar se folosesc o serie de instrucțiuni JavaScript (denumite generic APIs) pentru a desena obiecte în canvas.

Pentru a face prelucrări pe un obiect <canvas>, acesta poate fi ușor de găsit prin următorul apel:

var a_canvas = document.getElementById("a");

Pentru a începe desenarea este necesara atribuirea unei funcții evenimentului onclick, astfel:

functiondraw_b() {

var b_canvas = document.getElementById("b");

var b_context = b_canvas.getContext("2d");

b_context.fillRect(50, 25, 150, 100);

}

Momentan nu exista canvas 3D, de aceea trebuie specificat „2d” în preluarea contextului. Acesta conține toate funcțiile de desenare. În tabelul 3.1 sunt prezentate câteva dintre acestea.

Tabelul 3.2. – Funcții de desenare specifice elementului canvas

Instrucțiunile JavaScript permit dezvoltatorilor de pagini web să deseneze diferite forme, linii, să aplice culori, transparență și gradient, să adauge text și imagini în Canvas; chiar să creeze animație.

Se pot crea desene mult mai complexe, combinând cercuri, linii, patrulatere, gradient, transparență. Deoarece mulți utilizatori încă folosesc browsere care nu recunosc elementul <canvas>, se poate adăuga un text cu un mesaj de eroare pentru no-canvas, într-un tag ascuns (cu style="display:none;"), iar cu JavaScript se poate face acest tag vizibil în cazul în care browser-ul nu recunoaște elementul <canvas>.

3.1.3. HTML5: Audio

Tag-ul audio este suportat de toate browser-ele principale și poate fi apelat prin JavaScript prin simpla declarație new Audio('music.ogg').play(), însă este conceput pentru streaming, iar unele browsere au probleme de redare atunci când acesta este folosit în mod intensiv pentru efectele de sunet din jocuri.

Metode specifice:

Var a = new Audio('music.ogg').play();

a.play(); – începe redarea

a.pause(); – oprește redarea

a.currentTime = 0; – înapoi la început

a.duration; – returnează lungimea

a.ended; – returnează true dacă s-a terminat

a.loop = true; – setează bucla

a.volume = 0.5; – înjumătățește volumul;

a.muted = true;

a.addEventListener('ended', func); – apelează 'func()' atunci când termină redarea

Elementul <audio>folosește tag-ul <source> ca sa specifice sursa fișierului audio și fișiere alternative pentru diferențele dintre navigatoarele web, bazate pe tipul de codec recunoscut. IE9 și Safari folosesc fișiere MP3; Firefox, Chrome și Opera folosesc tipul OGG (sau OGV).

Din păcate, singurul format audio gratuit și deschis este OggVorbis, având extensia '.ogg' , în timp ce Flash a folosit în general MP3-uri. Un alt punct sensibil din suportul audio din HTML5 este faptul că nu există un format audio unic care să fie suportat de toate browser-ele.

La acest moment nu există nicio direcție evidentă în care o va lua implementarea audio HTML5.

Textul dintre <audio> și </audio> va fi afișat în navigatoarele web care nu recunosc tag-ul audio sau va fi afișat în acel loc un link de download.

3.1.4. HTML5: Video

Pentru ca un browser să poată să redea video are nevoie să includă un codec video. Fiecare format video are un codec diferit. Din cauza faptului că W3C a decis să nu specifice un format standard, fiecare dezvoltator este liber să aleagă ce format video suportă.

Până în prezent, cele două opțiuni principale sunt formate din H.264 și OggTheora. Unele browsere suportă ori unul, ori altul, doar Chrome fiind singurul care a decis să le suporte pe ambele.

Astfel, se pot construi playere personalizate care să funcționeze chiar și atunci când browser-ul nu suportă HTML5, folosind Flash ca variantă de rezervă. Ultimele versiuni de browsere implementează și Fullscreen API, astfel că un videoclip, de exemplu, poate fi urmărit pe ecranul întreg fără a mai fi nevoie de a intra manual (cu F11) în modul clasic de ecran complet.

Tag-ul <video> este un element multimedia folosit pentru a adăuga în pagina web video clipuri și alt conținut video. Tag-ul HTML5 <video> poate atributele prezentate în tabelul 3.3.

Tabelul 3.3. Proprietăți specifice tag-ului <video>

Elementul <video>folosește tag-ul <source> ca sa specifice sursa fișierului video și fișiere alternative pentru diferențele dintre navigatoarele web, bazate pe tipul de codec recunoscut.

Este indicat ca dezvoltatorii de aplicații web să înceapă să utilizeze noul suport audio și video în browsere HTML5, în special pentru utilizatorii de iPhone și iPad. Cu toate acestea, ei nu se vor putea baza în totalitate doar pe noul suport video și audio HTML5, ci vor avea nevoie să pună în aplicare scripturi avansate pentru a detecta capacitățile browser-ului, ca apoi să aleagă cea mai bună opțiune în funcție de acestea.

3.1.5. HTML5: Animație

Capacitatea de animație aduce în discuție o comparației între Flash și HTML5.

HTML5 se bazează în principal pe JavaScript pentru a oferi animații bogate și interactive. Însă, acest lucru este destinat pentru a fi utilizat împreună cu noua etichetă HTML canvas pentru desenare de obiecte 2D și 3D, animație CSS3 și capacități de transformare, precum și un sprijin browser pentru SVG (Scalable Vector Graphics) și fonturile web.

Similar cu situația tag-urilor audio și video, cele mai multe browsere suportă canvas, SVG sau animații CSS parțial sau deloc.

Tag-ul <embed> se folosește pentru a adauga în pagină aplicații cu conținut interactiv, cum sunt prezentările flash SWF, plug-inuri, sau fișiere cu imagini.
Poate sa folosească aceste atribute:

height (height="pixeli") – Înălțimea cadrului în care e afișat conținutul, în pixeli.

width (width="pixeli") – Lungimea cadrului în care e afișat conținutul, în pixeli.

type (type="MIME_type") – Tipul MIME al conținutului.

src (src="url") – Adresa URL a fișierului.

3.1.6 CSS

CSS (Cascading Style Sheets) se ocupă în general cu aspectul și controlul grafic al elementelor din pagină, cum ar fi: textul, imaginile, fondul, culorile șiașezarea acestora în cadrul interfeței. CSS folosește stiluri, acestea înglobează, sub un anumit nume, atribute de formatare care se aplică asupra unui element individual din pagină, asupra unui grup de elemente sau la nivelul întregului document. CSS funcționează cu HTML și extinde funcționalitățile lui, permițând redefinirea etichetelor HTML existente.

Împărțite în grupuri, specificațiile CSS în diverse stadii de elaborare propun noutăți interesante: noi moduri de a realiza un layout (Flexible Box, Grid Layout), actualizări ale specificațiilor pentru fonturi, un set de proprietăți utile pentru UI (Basic UserInterface Module) ș.a. Deși nu toate fac parte din specificații marcate ca „Stable” sau „Completed”, multe se pot folosi în dezvoltare, implementările fiind în momentul de față suficient de robuste. Alte vești bune au venit recent de la Microsoft, care a anunțat că IE10 va suporta proprietăți standard CSS3 (fără prefixul -ms-): gradients, CSS Animations, CSS Transitions, CSS Transforms.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte în webdesign.

Unele dintre cele mai importante module noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil în dezvoltarea activități webdesign.

Mai jos sunt prezente în listă cele mai importante modulele adăugate în CSS3:

Selectors

Box Model

Backgrounds and Borders

ImageValues and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

UserInterface

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes în variantele browser-elor noi.

3.1.7 JavaScript șiJQuery

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web și este cel mai popular limbaj de programare ce poate fi folosit pentru pagini HTML șiWeb, servere, PC-uri, laptop-uri, smartphone-uri, tablete și multe altele. Acest limbaj poate fi interpretat de toate browser-ele web moderne, făcându-l accesibil șiușor de utilizat.

JQueryeste o platformă de dezvoltare bazată pe JavaScript, concepută pentru a ușura și îmbunătăți procesele aferente. Aceasta este o librărie a lui JavaScript, ce se axează pe conceptul “scrie mai puțin, fă mai mult” (writeless, do more) șiușurează foarte mult sintaxa limbajului de programare pentru website-ul personal. JQuerya fost gândit să fie cât mai mic posibil, așadar această librărie preia sarcini uzuale, care s-ar realiza în urma scrierii a multor linii de cod JavaScript și le înglobează în metode ce pot fi utilizate printr-un singur apel.

Am folosit această extensie pentru a ușura modalitatea de adăugare de efecte șianimații asupra obiectelor paginilor web și pentru a da un plus de spectaculozitate interfeței, făcând-o mai atrăgătoare.

Am ales să folosesc aceste trei limbaje pentru interfațawebsite-ului deoarece sunt foarte ușorși rapid de implementat, nu este nevoie de alte resurse sau medii de programare.

3.2. MakeContent – Editor de manuale interactive

Aplicația dezvoltată în contextul lucrării de fată este una bazată pe limbajul HTML5 și pune accent pe facilitarea procesului de dezvoltare al manualelor școlare prin utilizarea noilor tehnologii introduse.

Header-ul paginii de început include denumirea aplicației, dar și un meniu orizontal alcătuit din cinci butoane care facilitează navigarea între diferitele secțiuni. „Acasă” face referire la pagina de început, pe când „Template Copertă”, „Template Capitol”, „Template Subcapitol” au în spate legături către pagini ce conțin template-uri standard deja create, puse la dispoziția utilizatorilor, fiecare șablon respectând structura menționata în denumirea sa (coperta, capitol, subcapitol).

Totodată avem și posibilitatea de a vizualiza întreaga colecție de blocuri de design ce este la dispoziția utilizatorilor prin butonul „Galerie”.

În centrul paginii principale ne întâmpină un slideshow de prezentare alcătuit din poze cu temă școlară care dă un plus de dinamism website-ului prin efectele sale.

Imediat sub această secțiune se află un banner menit să capteze atenția printr-un mesaj de îndemn și butonul „Intră", ce facilitează accesul propriu-zis în secțiunea de dezvoltare a aplicației.

Footer-ul include link-uri ce direcționează utilizatorul către pagini web de tip social, către harta website-ului, în care apar ierarhic toate paginile acestuia, facilitând accesul mai rapid la secțiunea dorită și un link pentru consultarea termenilor și condițiilor de utilizare a website-ului.

Pagina principală a aplicației dezvoltate este prezentată în figura 3.4 .

Figura 3.4. – Pagina principala website MakeContent

Secțiunea de dezvoltare a paginilor este împărțităastfel:

header-ul este comun cu pagina de început, conținândaceleași butoane, cu aceleașifuncționalități: „Acasă”, „Template Coperta”, „Template Capitol”, „Template Subcapitol”, „Galerie”.

central este secțiunea de dezvoltare care poate fi goala, fie poate sa reprezinte un templatedefault, în funcție de alegerea inițială a utilizatorului (coperta, capitol, subcapitol)

în partea din stânga avem un meniu ascuns cu întreagacolecție de blocuri stilizate, care se face vizibil prin intermediul butonului "Arata/ascunde colecția de elemente"

footer-ul conține două butoane:

"Arată/ascunde colecția de elemente" cu acțiune directă asupra meniului;

"Resetare template" pentru a readuce secțiunea principală de dezvoltare de conținut la starea inițială.

Figura 3.5. – Meniul aferent secțiunii de dezvoltare

Așadar, după ce utilizatorul alege modalitatea de lucru, fie sa înceapă cu o pagină curată, fie sa aleagă una cu elemente deja definite, acesta are la dispoziție posibilitatea de a folosi orice bloc stilizat pentru a dezvolta. Blocurile se împart în funcție de elementele conținute și de design, gama fiind variată.

Figura 3.6. – Pagina de dezvoltare conținut

Figura 3.7. – Pagina de Galerie cu blocuri de design

Figura 3.8. – Template Capitol

Prin implementarea noului comportament HTML5 drag-and-drop, utilizatorul poate adăuga un bloc de design nou în pagină prin simpla tragere de imaginea acestuia din meniul de colecție. În momentul când acesta eliberează cursorul în secțiunea de dezvoltare conținut, imaginea blocului este preluată, interpretată și transformată, astfel încât utilizatorul va vedea elemente editabile, nu doar o simplă poza. Acest lucru este posibil prin tratarea evenimentelor drag-and-drop.

Figura 3.8. – Exemplificare încărcare meniu cu pozele elementelor de design

Odată plasat în secțiunea de dezvoltare, blocul devine editabil. În acest moment utilizatorul va observa atât apariția unor butoane suplimentare, cât și a unui meniu nou. Butoanele au acțiune asupra întregului bloc, acesta putând fi duplicat, șters sau mutat în alta poziție fața de celelalte elemente aflate în pagină.

Al doilea meniu se referă la conținutul blocului și oferă numeroase posibilități de editare și stilizare a textului. Sunt prezente modalități de selectare a stilului, culorii sau dimensiunea fontului. (figura 3.9.)

Figura 3.9. – Exemplificare încărcare meniu cu pozele elementelor de design

Elementele de tip imagine oferă utilizatorului posibilitatea de a încărca propriile imagini și de a atașa o referință către o altă destinație.

Obiectul de tip video permite editare link-ului aferent video-ului dorit.

Totodată sunt prezente și blocuri cu un anumit grad de animație, realizat prin JavaScript, dar și elemente ce conțin butoane sociale cu referințe către website-uri externe.

În galerie se regăsesc și delimitatoare care ajută la structurarea și accentuarea diferitelor secțiuni ale paginilor dezvoltate.

3.3 Concluzii

Pe parcursul acestui capitol am prezentat un prototip de aplicație informatică pentru automatizarea activității de dezvoltare a manualelorșcolare într-un mediu online, interactiv și atractiv.

Sistemul oferă utilizatorilor o gamă largă de blocuri predefinite de design pentru creare de conținut, dar și posibilitatea editării și stilizării acestora în funcție de preferințele și nevoile proprii.

Simplitatea și accesibilitatea programului reprezintă factori importanți în determinarea utilizatorilor neexperimentați sa încerce sa dezvolte conținut într-o manieră modernă și actuală, în tendință cu rapiditatea ce predomină procesul de expansiune al tehnologiei și al gadget-urilor.

Capitolul 4. Concluzii șidirecții de îmbunătățire

În cadrul lucrării de față am încercat evidențiereanecesității realizării unui prototip de sistem informatic, de interes preponderent educativ, pentru ușurarea procesului de dezvoltare de materiale educaționaleși explicarea alegerii tehnologiilor folosite în realizarea aplicației MakeContent prin specificarea principalelor caracteristici șifuncții ce au ajutat la simplificarea procesului de implementare.

MakeContent oferă accesul la o gamă largă de blocuri de design pusă la dispoziția utilizatorilor, aceștiaavând numeroase posibilități de dezvoltare și editare conținut, pentru o mai buna reprezentare a informației ce urmează a fi transmisa elevilor.

Ținând seama de funcționalitățile actuale ale sistemului realizat, se propun o serie de obiective viitoare în scopul îmbogățirii aspectelor funcționale ale acestuia, dar și a creșteriipopularității sale.

Prin intermediul aplicațieiweb realizate, utilizatorii pot sa creeze multiple template-uri personalizate. În acest sens, se consideră un obiectiv important cel de a le oferi acestora o posibilitate de salvare și revenire asupra design-ului, în scopul adaptării la posibilitățileșidorințele fiecăruia. Așadar un viitor pas pentru îmbunătățire ar fi implementarea unei baze de date care se stocheze toate obiectele create de un utilizator și arhivarea acestora în diferite stadii de dezvoltare, stadii specificate de către utilizator.

De asemenea, pentru menținereanoutății și satisfacerii totale a clienților, se propune implementarea în viitor a unor posibilități de preluare sugestii de design de la utilizatori fie prin trimiterea directa de către ei sau prin posibilitatea de votare și selecționare a design-urilor populare printre aceștia. în acest sens, o viitoare secțiune de forum unde utilizatorii ar putea interacționa, ar cuprinde și trata toate aceste nevoi.

Alta direcție de îmbunătățire ar fi împărțireasecțiuni de dezvoltare astfel încâtaplicația sa trateze doua tipuri de utilizatori: profesori și elevi. Așadar, profesorii având posibilitate să-și publice lucrările în momentul terminării acestora, iar elevii putând să le vizualizeze doar prin simpla înregistrare și căutare a fișierului.

Bibliografie

Cărți:

PILGRIM Mark – HTML5: Ghidul începătorului, Colecția Chip Kompakt, Brașov, 2013;

LINDBERG Oliver – Tehnici de design HTML, Colecția Chip Kompakt, Brașov, 2013;

Tehnici de Web Design, Colecția Chip Kompakt, Brașov, 2012;

CĂPRIȚĂ Dan – Dezvoltarea interfețelor utilizator, Editura Europlus – Galați, 2010

GUGOIU Teodor – HTML, XHTML, CSS si XML prin exemple, Editura Teora, 2010;

CASTLEDINE Earle, SHARKIE Craig – jQuery: Novice to Ninja, Editura: SitePoint, 2012;

MACDONALD Mattew– HTML5 – The missing manual, Editura O’Reilly, 2011;

ULLMAN Larry – Modern JavaScript, Editura: PeachPit, 2012;

World Wide Web Consortium – HTML5 Differences from HTML4 [HTML5 – diferențe față de HTML4];

HICKSON Ian. – HTML Is the New HTML5.

Referințe web:

http://www.lyquix.com/blog-and-news/is-html5-replacing-flash, Data accesării: 02-02-2015;

http://www.techotopia.com, Data accesării: 10.06.2014;

http://www.w3schools.com/html/html5_intro.asp, Data accesării 26.07.2014;

http://dev.w3.org/html5/html-author/ , Data accesării 04.08.2014;

www.wikipedia.ro, Data accesării 13.03.2014;

http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html, Data accesării 13.03.2014;

http://ctrl-d.ro/tutoriale/introducere-in-html5-partea-ii/, Data accesării: 10.06.2014;