Lucrare disertație

UNIVERSITATEA VALAHIA TÂRGOVIȘTE

FACULTATEA DE INGINERIE ELECTRICĂ, ELECTRONICĂ ȘI TEHNOLOGIA INFORMAȚIEI

CONDUCĂTOR ȘTIINȚIFIC:

ȘL. DR. ING. ANGELESCU NICOLETA

APLICAŢIE WEB DE PRELUCRARE A IMAGINILOR FOLOSIND NODE.JS

GRIGORE CRISTIAN DANIEL

LUCRARE DE DISERTAȚIE

APLICAŢIE WEB DE PRELUCRARE A IMAGINILOR FOLOSIND NODE.JS

UNIVERSITATEA VALAHIA TÂRGOVIȘTE FACULTATEA DE INGINERIE ELECTRICĂ, ELECTRONICĂ ȘI TEHNOLOGIA INFORMAȚIEI Autor lucrare:

GRIGORE CRISTIAN DANIEL Conducător științific:

ȘL. DR. ING. ANGELESCU NICOLETA

CUPRINS

C

» ABSTRACT

8

LISTA TABELELOR ȘI FIGURILOR SIMBOLURI ȘI ABREVIERI

9

INTRODUCERE

10

IMAGINILE DIGITALE

12

LIMBAJE DE PROGRAMARE

30

PROIECTAREA APLICAȚIEI

59

REZULTATE ȘI CONCLUZII

65

BIBLIOGRAFIE

68

ANEXE

69

D

ABSTRACT

D

ocumentația de față prezintă o aplicație web de prelucrare a imaginilor. Proiectul este o continuare a lucrării „Aplicație web client pentru prelucrarea imaginilor” susținută de către autor la examenul de licență.

S-a dorit transformarea acesteia dintr-o aplicație de tip web client într-una de tip web server. Acest lucru s-a realizat folosind Node.js. Imaginile încărcate vor fi stocate pe server, prelucrate, iar apoi vor fi trimise înapoi pentru a fi afișate și oferite utilizatorului spre descărcare.

Valorile filtrelor aplicate asupra unei imagini sunt păstrate într-o variabilă de tip array. După finalizarea editării acesteia, utilizatorul poate încărca alte fotografii care urmează a fi editate aplicând setările memorate.

Odată stocate pe server, acestea sunt prelucrate și afișate într-o galerie foto. Utilizatorul le poate descărca fie pe rând, fie pe toate odată sub forma unei arhive.

Asupra fotografiilor se pot aplica diverse filtre, începând de la cele pentru ajustarea luminozității, până la cele de estompare sau accentuare a contururilor.

Codul sursă a fost scris folosind editorul cu sursă deschisă Atom, dar și interpretorul de linii de comandă al sistemului de operare Windows, Command Prompt.

De asemenea, pentru depanarea erorilor s-a utilizat instrumentul pentru dezvoltatori al browserului Google Chrome.

Cuvinte cheie: JavaScript, HTML, CSS, Node.js, server,

aplicație web, prelucrarea imaginilor

8

LISTA TABELELOR ȘI A FIGURILOR TABEL 1 TIPURI DE SELECTOARE ÎN CSS................................................................................................. 45 FIGURA 1 TIPURI DE ZGOMOT................................................................................................................. 18 FIGURA 2 HISTOGRAMA UNEI IMAGINI................................................................................................. 26 FIGURA 3 EXEMPLU DE KERNEL............................................................................................................. 27 FIGURA 4 COMPARAȚIE ÎNTRE IMAGINEA ORIGINALĂ ȘI IMAGINEA............................................ 29

REZULTATĂ ÎN URMA APLICĂRII KERNELULUI ANTERIOR

SIMBOLURI ȘI ABREVIERI API Application Programming Interface

HTTP Hypertext Transfer Protocol

URL Uniform Resource Locator

CSS Cascading Style Sheets

JPEG Joint Photohraphic Experts Group

W3C World Wide Web Consortium

PHP PHP: Hypertext Preprocessor

WHATWG Web Hypertext Application Technology Working Group

DNS Domain Name System ECMA European Computer Manufacturers Association GIF Graphics Interchange Format HSV Hue Saturation Value HTML Hyper Text Markup Language

PNG Portable Network Graphics RGB Red Green Blue

XML Extensible Markup Language

TCP Transmission Control Protocol TIFF Tagged Image File Format

9

F

INTRODUCERE

F

otografia are un rol important în societate, deoarece permite difuzarea informațiilor obiective prin captarea vizuală a lucrurilor așa cum sunt acestea în realitate. Fotografia permite oamenilor să se familiarizeze cu peisaje și culturi îndepărtate. De asemenea, are puterea de a influența opinia publică prin prezentarea de imagini cu impact emoțional.

Fotografia adaugă veridicitate informațiilor distribuite. Fotografiile care însoțesc o știre, de exemplu, adaugă o dimensiune de coroborare cuvintelor care ar putea fi fabricate. Fotografiile servesc și ca suporturi vizuale pentru educație, adunări sau pentru alte scopuri. Cititorii sunt mai în măsură să înțeleagă un subiect atunci când se pot uita la fotografii ajutătoare pentru referință.

Fotografia este mai exactă decât formele anterioare de media vizuală. Fiabilitatea unei picturi, de exemplu, depinde de nivelul de calificare al artistului. Mai mult decât atât, un artist poate adăuga, omite și înfrumuseța așa cum îi place.

Pe de altă parte, o cameră foto este un instrument care produce rezultate standard. Captează o scenă în același mod indiferent de cine o folosește.

Oamenii au un răspuns emoțional la imagini. Ceea ce văd oamenii este mult mai probabil să influențeze opinia lor decât ceea ce au citit sau au auzit pur și simplu. Potrivit Departamentului Mass-media al Universității de Stat din Dakota de Nord, aceasta este o parte din motivul pentru care Administrația de Securitate a Fermelor, sub Franklin Roosevelt, a angajat fotografi pentru a surprinde situația din America rurală pe film. Fotografiile fermierilor aflați în situații critice prezentate în ziarele din toată țara au făcut publicul să susțină politicile noului acord.

10

Există o vorbă care spune că o imagine face cât o mie de cuvinte.

Fiecare persoană înțelege această afirmație într-un mod diferit.

Indiferent dacă se află în sălile de curs ale universităților din întreaga lume sau doar într-o școală locală, educatorii folosesc fotografiile pentru a-și explica mai bine punctele de vedere. Ilustrațiile îi ajută pe elevi să înțeleagă mai bine lucrurile și nu există o metodă mai bună de a ilustra ideile decât prin utilizarea fotografiilor sau a secvențelor de fotografii (videoclipuri).

Fotografia are genuri diferite și de aceea fotografii se specializează în diferite tipuri de artă. Veți găsi fotografi de portret, de peisaj sau de natură moartă, pentru a oferi câteva exemple. Oamenii care iubesc natura fotografiază adesea diferite elemente ale acesteia, cum ar fi copaci, munți, râuri și multe alte caracteristici naturale importante ale lumii. Cei mai mulți oameni care văd fotografii din alte locuri primesc inspirația și îndemnarea de a vizita aceleași locuri cu speranța de a vedea frumusețea pe care au văzut-o în fotografii.

Când oamenii vizitează galeriile de artă, au o idee generală despre ce să se aștepte. Cu toate acestea, este interesant să observăm reacțiile diferitelor persoane când văd o fotografie celebră. Deoarece fotografia inspiră oameni în moduri diferite, veți observa reacții diferite în funcție de tipul de inspirație pe care fiecare persoană o obține de la fotografie. Realizând acest lucru, unele galerii au creat diferite secțiuni dedicate anumitor tipuri de fotografie.

11

IMAGINILE DIGITALE

01

CE REPREZINTĂ O IMAGINE DIGITALĂ COLOR? O imagine color (digitală) este o imagine digitală care include informații despre culoare pentru fiecare pixel.

Pentru rezultate acceptabile din punct de vedere vizual, este necesar (și aproape suficient) să se furnizeze trei probe (canale de culoare) pentru fiecare pixel, care sunt interpretate ca și coordonate într-un spațiu de culoare. Spațiul de culoare RGB este utilizat în mod frecvent în afișajele computerului, dar și alte spații, cum ar fi YCbCr, HSV sunt adesea folosite în alte contexte.

O imagine color are trei valori (sau canale) pe pixel și acestea măsoară intensitatea și crominanța luminii.

Informațiile reale stocate în datele de imagine digitale sunt informațiile despre luminozitatea din fiecare bandă spectrală.

REPREZENTAREA IMAGINILOR COLOR O imagine color este de obicei stocată în memorie ca o hartă raster, o matrice bidimensională de tripleți mici întregi; sau (rar) ca trei hărți raster separate, câte una pentru fiecare canal.

Opt biți pe eșantion (24 biți per pixel) par suficienți pentru majoritatea utilizărilor, dar artefactele pot fi totuși

vizibile în unele imagini, în special cele care fac obiectul procesării. Aplicațiile deosebit de solicitante pot utiliza 10 biți pe eșantion sau mai mult.

Pe de altă parte, unele formate de fișiere de tip imagine, utilizate pe scară largă, și plăci grafice pot utiliza numai 8 biți pe pixel, adică numai 256 de culori diferite sau 2-3 biți pe canal. Conversia imaginilor cu ton continuu, cum ar fi fotografiile, la astfel de formate necesită dithering și oferă rezultate destul de granulate și neclare.

Plăcile grafice care suportă 16 biți pe pixel furnizează 65536 culori distincte sau 5-6 biți pe canal. Această rezoluție pare satisfăcătoare pentru utilizările neprofesionale, chiar și fără dithering.

13

MUCHIE COLOR (COLOR EDGE) În timp ce în cazul imaginilor reprezentate pe niveluri de gri o discontinuitate a funcției indică existența unei muchii, termenul de „color edge” nu a fost clar definit. O definiție foarte veche spune că există cu siguranță o muchie, într-o imagine color, dacă intensitatea imaginii conține o muchie.

Această definiție ignoră, însă, posibilele discontinuități în valorile saturației și a nuanțelor unei fotografii. Dacă, de exemplu, două obiecte de culori diferite iluminate la fel sunt aranjate în juxtapunere într-o imagine color, atunci contururile obiectelor nu pot fi determinate cu această tehnică.

O a doua definiție pentru „color edge” precizează că există o muchie într-o imagine color dacă cel puțin una dintre componentele de culoare conține o muchie. Această definiție nu necesită nicio procedură nouă de detecție a contururilor. Se ridică însă problema de acuratețe în localizarea muchiilor pentru fiecare canal de culoare individual. Dacă contururile în

14

canalele de culoare sunt detectate în timp ce sunt deplasate cu un pixel, apoi contopirea rezultatelor va produce muchii foarte largi. Nu se poate determina cu exactitate care poziție a muchiilor dintr-o imagine este cea corectă.

O a treia definiție se bazează pe calcularea sumei valorilor absolute ale gradienților pentru cele trei componente de culoare.

Dacă această sumă depășește un anumit prag, atunci înseamnă că există o muchie. Rezultatele celor două definiții anterioare depind în mare măsură de spațiile de culoare de bază. Un pixel care este identificat într-un spațiu de culoare ca fiind un punct al unei muchii, nu trebuie neapărat să aparțină unei muchii și în celelalte

spații de culoare, de exemplu.

Toate definițiile prezentate mai sus ignoră legătura dintre componentele vectoriale. O a patra definiție poate rezulta din utilizarea derivatei unei imagini color. Pentru un pixel sau vector color, variația funcției imaginii la poziția (x,y) este descrisă de ecuația ΔC = JΔ(x,y). Direcția de-a lungul căreia se detectează cea mai mare discontinuitate într-o imagine cromatică este reprezentată prin vectorul caracteristic JTJ corespunzător celei mai mari valori proprii (eigenvalue). Dacă dimensiunea schimbării depășește o anumită valoare, atunci acesta este semnul existenței unui pixel aparținând unei muchii color.

C E ESTE CONSTANȚA C UL ORI I? Constanța culorii reprezintă tendința obiectelor de a avea aceeași culoare în condiții de iluminare diferite. O banană dă impresia că este galbenă chiar dacă este văzută în lumina tungsten a bucătăriei ori direct în lumina soarelui. În aceste condiții diferite, banana reflectă un spectrul diferit de culori către ochiul uman, dar proprietățile materiale ale acesteia sunt percepute ca fiind neschimbate. Acest lucru se datorează faptului că banana are tendința de a reflecta mai multă lumină în regiunea galbenă a spectrului în comparație cu alte obiecte, indiferent de tipul de lumină care le iluminează. De aceea, ochiul și creierul uman concluzionează că banana este în mod inerent galbenă.

Constanța culorii nu este o proprietate a obiectelor. Ea reprezintă un fenomen de percepție, rezultatul mecanismelor din ochi și din creier.

Ea este, de asemenea, dezirabilă pentru un sistem vizual bazat pe o cameră unde utilizarea ei ar fi necesară în condiții de iluminare care nu pot fi controlate. Obținerea constanței culorii în procesarea digitală a imaginilor color este, una peste alta, o problemă greu de rezolvat din moment ce semnalul color măsurat cu o cameră depinde nu numai de distribuția spectrală a iluminării și a luminii reflectate pe suprafață, dar și de geometria unui obiect. Tehnicile de constanță a culorilor (în procesarea digitală a imaginilor color) pot fi clasificate în trei categorii cu privire la rezultatele pe care acestea intenționează să le obțină:

1. Distribuția spectrală a luminii reflectate este estimată pentru fiecare suprafață vizibilă

2. O imagine color ale unei anumite scene este generată în așa fel în cât va apărea în condiții de iluminare cunoscute

3. Se detectează caracteristicile suprafețelor color ale obiectelor din imagine care sunt independente de condițiile de iluminare

?

15

CONTRASTUL UNEI IMAGINI COLOR Contrastul este diferența de luminanță sau de culoare care face ca un obiect (sau reprezentarea sa într-o imagine sau pe un ecran) să se distingă. În percepția vizuală a lumii reale, contrastul este determinat de diferența dintre culoarea și luminozitatea obiectului și alte obiecte din același câmp vizual. Sistemul vizual uman este mai sensibil la contrast decât luminanța absolută; putem percepe lumea în mod similar, indiferent de schimbările uriașe de iluminare în timpul zilei sau de la un loc la altul. Contrastul maxim al unei imagini este raportul de contrast sau intervalul dinamic.

Contrastul color este folosit de către fotografi pentru a obține compoziții cât mai reușite. Culorile cu caracteristici opuse, cum ar fi albastru și galben, contrastează puternic când sunt așezate împreună. Atunci când două culori opuse sunt așezate împreună, ele completează și accentuează calitățile celeilalte culori. Culorile reci și culorile calde aproape întotdeauna contrastează, culorilor luminoase contrastează cu cele întunecate și culorile îndrăznețe compensează culorile slabe.

Siluetele sunt un bun exemplu de contrast tonal. Siluetele sunt create printr-o diferență puternică între zonele întunecate și cele luminoase. Imaginile contrastate color conțin culori complementare sau opuse. Două culori de pe partea opusă a spectrului de culoare creează culori contrastante. Galben și albastru sau verde și roșu pot crea imagini contrastante care atrag atenția.

ZG O M OT U L

În cazul imaginilor, zgomotul reprezintă o variație aleatorie a luminozității sau a informațiilor de culoare. Este o degradare a semnalului de imagine cauzată de surse externe. Imaginile care conțin zgomot multiplicativ au caracteristic faptul că o zonă cu cât este mai luminoasă, cu atât este și mai zgomotoasă. Putem modela o imagine zgomotoasă așa: A(x,y) = H(x,y) + B(x,y), unde A(x,y) reprezintă funcția imaginii cu zgomot, H(x,y) funcția pentru zgomotul imaginii, iar B(x,y) este funcția imaginii originale.

Sursele de zgomot într-o imagine: • Mutarea imaginii electronice dintr-un loc în altul • Supraîncălzirea senzorului • Factorul ISO care variază în funcție de capacitate camerei de absorbție a luminii

17

TIPURI DE ZGOMOT Există tipuri diferite de zgomot. De obicei acestea sunt împărțite în trei categorii.

FIGURA 1 Tipuri de zgomot

18

ZGOMOTUL GAUSSIAN Este un zgomot statistic având o funcție de densitate a probabilității egală cu distribuția normală, cunoscută și sub numele de distribuție Gaussiană. Funcția Gaussiană aleatorie este adăugată la funcția imaginii pentru a genera acest zgomot. Se mai numește și zgomot electronic, deoarece apare în amplificatoare sau detectoare.

Sursa: vibrația termică a atomilor și natura discretă a radiației obiectelor calde.

ZGOMOTUL DE TIP SARE ȘI PIPER Acest tip de zgomot apare la o imagine prin adăugarea aleatoare a pixelilor luminoși (cu valoarea de 255), cât și a celor întunecați (cu valoarea 0)

ZGOMOTUL DE TIP SPECKLE

ZGOMOTUL DE TIP POISSON Apariția acestui tip de zgomot este datorată naturii statistice a undelor electromagnetice, cum ar fi razele X, luminile vizibile și razele gamma.

Sursele cu raze X și gamma emit un număr de fotoni pe unitate de timp.

Aceste surse au fluctuații aleatoare ale fotonilor. Acest zgomot este denumit și zgomot cuantic (foton).

O problemă fundamentală în holografia optică și digitală constă în prezența zgomotului din punct de vedere al spectrului în procesul de reconstrucție a imaginii. Speckle este un zgomot granular care există în mod inerent într-o imagine și degradează calitatea sa. Acest tip de zgomot poate fi generat prin înmulțirea valorilor aleatoare ale pixelilor cu diferiți pixeli ai unei imagini.

19

LUMINANȚA, ILUMINAREA ȘI LUMINOZITATEA Luminanța este cantitatea de lumină vizibilă care pătrunde în ochi de la o anumită suprafață. Cu alte cuvinte, este cantitatea de lumină vizibilă care părăsește un punct al unei suprafețe într-o direcție dată, datorată reflecție, transmisiei și/sau emisiei. Luminozitate fotometrică este un termen mai vechi și depreciat pentru luminanță. Unitatea standard pentru măsurarea luminanței este candela pe metru pătrat (cd/m2), care mai este denumită și nit, de la latinescul nitere = a străluci (1 nit = 1 cd/m2).

Iluminarea reprezintă cantitatea de lumină incidentă pe o suprafață. Este cantitatea de lumină vizibilă care iluminează un punct din toate direcțiile de deasupra unei suprafețe. Prin urmare, iluminarea este echivalentă cu iradierea ponderată cu o curbă de răspuns a ochiului uman. Unitatea standard pentru iluminare este luxul (lx), care înseamnă lumeni pe metru pătrat (lm/ m2).

Reflectanța este proporția luminii incidente care este reflectată pe o suprafață. Reflectanța, adesea denumită și albedo, variază de la 0 la 1 sau de la 0% la 100%, unde 0% este negru ideal, iar 100% este alb ideal. În practică, valoarea tipică a culorii negru este aproximativ 5%, iar a culorii alb 85%.

Luminanța, iluminarea și reflectanța sunt cantități fizice care pot fi măsurate de instrumente fizice. Există, de asemenea, și două variabile subiective care trebuie explicate: Lightness este o valoare perceptuală care trece de la negru, la gri, până la alb. Aceasta reprezintă proprietatea permanentă a unei suprafețe care determină ce procent din lumină este reflectată de suprafața respectivă. Suprafețele care par a fi albe reflectă aproximativ 90% din lumină, în timp ce suprafețele negre reflectă doar 3%. Pe scurt, lightness reprezintă reflectanța percepută.

Brightness este valoarea perceptuală care trece de la întunecat la luminos. Din punct de vedere fizic, valoarea echivalentă pentru aceasta este luminanța, adică intensitatea absolută a luminii reflectate în direcția ochiului observatorului de către o suprafață. Pe scurt, dacă lightness este reflectanța percepută, brightness este luminanța percepută.

20

e Spa,tii de culoar

culorilor. În ganizare specifică a or o te es e ar lo cu produceUn spațiu de ozitivelor permite re sp di a ică fiz ea lar ofi ce cât și combinație cu pr prezentările analogi re în ât at , or ril lo cu trar, cu anumite rea reprezentărilor culoare poate fi arbi de iu aț sp Un le. ta me sau nuîn cele digi te de culori fizice și nu he ac m de t se ui un ntone, culori atribuite r, cum ar fi colecția Pa to ză un sp re co te ui S, Adobe RGB și mere de culori atrib ca și în sistemele NC ic at em at m e at ur ct atic abstract sau stru este un model matem e” ar lo cu de el od tuple de sRGB. Un „m pot fi reprezentate ca e ril lo cu re ca în ul tuși, care descrie mod adruple în CMYK); to cv u sa B RG în e pl tri u, e asociată unui numere (de exempl ncție de cartografier fu ră fă e ar lo cu de are mai mult un model tă un sistem de culo in ez pr re t lu so ab e de interspațiu de culoar ură cu niciun sistem ăt leg cio ni ră fă r, sau mai puțin arbitra țeles la nivel global. pretare a culorilor, în model ere specifice între un afi gr rto ca de ții nc ațiul Adăugarea unei fu rință stabilește în sp fe re de e ar lo cu de iu b numele de de culoare și un spaț entă”, cunoscută su pr m „a ită um an o spațiu de de referință are dat definește un lo cu de el od m un de culori gamă, și pentru GB sunt două spații sR și B RG e ob Ad u, culoare RGB. culoare. De exempl zate pe modelul de ba le be am e, rit fe di rdele de refeabsolute iu de culoare, standa aț sp un te eș fin de , care au Atunci când se e CIELAB sau CIEXYZ ar lo cu de iile aț sp culorile pe care le rință obișnuite sunt ru a cuprinde toate nt pe ial ec sp te ta ec fost proi mod obișnuit. poate vedea omul în a o anumită combinație că tifi en id e” ar lo cu cuvântul este Deoarece „spațiul de ției de cartografiere, nc fu a și e ar lo cu de de culoare. modelului identifica un model a ru nt pe al rm fo in adesea utilizat de culoare identifică tificarea unui spațiu en id că da iar ch și, utilizare este Totu e asociat, o astfel de ar lo cu de l elu od m ulte spații de automat exemplu, deși mai m De t. ric st ns se un nu există incorectă întrelul de culoare RGB, od m pe ă az ze ba se culoare specifice are RGB unic. niciun spațiu de culo

21

PROGRAMAREA ȘI IMAGINILE Chiar dacă termenul de „procesare a imaginilor” este adesea folosit interschimbabil cu cel de „editare a imaginilor”, o definiție mai precisă a acestuia va fi oferită în cele ce urmează. Editarea digitală a imaginilor reprezintă manipularea imaginilor digitale folosind softuri deja existente cum ar fi Adobe Photoshop sau Corel Paint. Pe de altă parte, procesarea digitală a imaginilor se referă la conceperea, proiectarea, dezvoltarea și îmbunătățirea programelor de editare digitală a imaginilor.

Folosind mediile de programare moderne, oricine poate dezvolta un program care să manipuleze individual orice element al unei fotografii.

Având cunoștințele necesare, o imagine poate fi redusă la o simplă matrice de elemente, care pot fi manipulate într-o multitudine de feluri.

22

TIPURI DE IMAGINI DIGITALE

DIMENSIUNEA IMAGINILOR ȘI REZOLUȚIA

În fiecare zi, oamenii lucrează cu o varietate largă de imagini digitale cum ar fi fotografiile color de tip portret sau peisaj, scanări alb-negru ale unor documente, planuri de construcții, documente trimise prin fax, capturi de ecran, imagini medicale (radiografii, ultrasunete și altele). În ciuda diferitelor surse ale acestor fotografii, ele sunt, ca regulă, reprezentate ca matrice rectangulare ordonate de elemente.

Dimensiunea unei imagini este determinată direct de lățimea (numărul de coloane) și înălțimea (numărul de rânduri) matricei imaginii.

Rezoluția unei imaginii specifică dimensiunea spațială a imaginii în lumea reală și este definită ca numărul de elemente de imagine pe măsură. De exemplu, puncte pe inci (dots per inch – dpi) sau linii pe inci (lines per inch – lpi) în cazul imprimării sau pixeli pe kilometru pentru imaginile din satelit. În majoritatea cazurilor, rezoluția unei imagini este aceeași pe orizontal, cât și pe vertical, ceea ce înseamnă că elementele imaginii sunt pătratice.

Rezoluția spațială a unei imagini nu este așa relevantă în mulți pași de bază ai procesării unei imagini, cum ar fi operațiile punctuale sau filtrele. Informațiile precise despre rezoluție sunt însă importante în cazurile în care elemente geometrice, cum ar fi cercurile, trebuie desenate pe o imagine sau atunci când trebuie măsurate distanțele dintr-o imagine.

SISTEMUL DE COORDONATE AL UNEI IMAGINI Pentru a cunoaște ce poziție dintr-o imagine corespunde fiecărui element al imaginii, trebuie impus un sistem de coordonate. Contrar convențiilor matematice, în procesarea imaginilor sistemul de coordonate este, de obicei, răsturnat pe direcția verticală; de aceea coordonatele y încep de sus în jos, iar originea este în colțul din stânga-sus. Deși acest sistem nu are niciun avantaj practic sau teoretic, din contră, poate crea confuzii în contextul transformărilor geometrice, este folosit fără nicio excepție în softurile de editare a imaginilor. Acest sistem își are rădăcinile în vechiul design al sistemelor de televiziune, unde rândurile de imagini sunt numerotate de-a lungul deflecției verticale a razei de electroni, care se deplasează din parte de sus în partea de jos a ecranului.

FORMATELE FIȘIERELOR DE TIP IMAGINE Datele despre o imagine trebuie încărcate mai întâi în memorie dintr-un fișier.

Fișierele furnizează mecanismul esențial pentru stocarea, arhivarea sau interschimbarea datelor imaginii, de aceea alegerea formatului potrivit este o decizie importantă. În perioada de început a procesării imaginilor (înainte de anul 1985), majoritatea dezvoltatorilor de software-uri au creat câte un format nou de fișiere pentru fiecare aplicație nouă pe care au creat-o. În zilele noastre există o gamă largă de formate de fișiere standardizate, iar dezvoltatorii pot găsi aproape întotdeauna cel puțin un format potrivit pentru aplicațiile lor. Folosind formatele standardizate crește ușurința cu care fiecare o imagine poate fi transmisă și posibilitatea ca aceasta să poată fi citită de către alte software-uri pe termen lung.

TIFF

GIF

Tagged Image File Format, prescurtat TIFF sau TIF, este un format de fișier pentru stocarea imaginilor grafice, popular printre artiștii grafici, industria editorială, și fotografi. TIFF este suportat de aplicațiile de scanare, fax, procesare de text, recunoașterea optică a caracterelor, manipulare a imaginilor, publicare pe desktop și aplicațiile de layout al paginilor. Formatul a fost creat de Aldus Corporation pentru utilizarea în publicarea desktop. Acesta a publicat cea mai recentă versiune 6.0 în 1992, ulterior actualizată cu drepturi de autor ale Adobe Systems, după ce aceasta a achiziționat Aldus în 1994.

Graphics Interchange Format este un format de imagine bitmap care a fost dezvoltat de o echipă de la CompuServe, condusă de omul de știință american Steve Wilhite, pe 15 iunie 1987. Acesta a intrat în uz pe scară largă pe World Wide Web datorită suportului său larg și portabilității între multe aplicații și sisteme de operare.

TIFF a fost creat în încercarea de a convinge producătorii de scanere de la mijlocul anilor 1980 să convină asupra unui format comun al fișierelor ce conțineau imagini scanate, în locul unei multitudini de formate existente deja. La început, TIFF era doar un format de imagine binar (doar două valori posibile pentru fiecare pixel), pentru că toate acestea puteau fi utilizate de scanerele desktop. Pe măsură ce scanerele au devenit mai puternice și spațiul de pe computerul desktop a devenit mai abundent, TIFF a fost actualizat pentru a găzdui imagini în tonuri de gri, apoi imagini color. Astăzi, TIFF, alături de JPEG și PNG, este unul dintre cele mai populare formate pentru imaginile color.

Prima versiune a specificațiilor formatului TIFF a fost publicată de Aldus Corporation în toamna anului 1986, după două schițe lansate anterior. Această versiune a fost denumită Revision 3.0. A fost publicată după o serie de întâlniri cu diferiți producători de scanere și dezvoltatori de software. În aprilie 1987 a fost lansată Revision 4.0 ce conținea în cea mai mare parte îmbunătățiri minore. În octombrie 1988, Revision 5.0 a fost lansată și a fost adăugat suport pentru imagini color și compresie LZW.

24

Formatul suportă până la 8 biți per pixel pentru fiecare imagine, permițând unei singure imagini să facă trimitere la o paletă proprie de până la 256 de culori diferite alese din spațiul de culoare RGB pe 24 de biți. De asemenea, acceptă animații și permite o paletă separată de până la 256 de culori pentru fiecare cadru. Aceste limitări ale paletei fac GIF mai puțin potrivit pentru reproducerea fotografiilor color și a altor imagini cu gradienți de culoare, dar este bine adaptată pentru imagini mai simple, cum ar fi grafică sau logo-uri cu zone de culoare solide.

Imaginile GIF sunt comprimate folosind tehnica de compresie a datelor fără pierderi Lempel-Ziv-Welch (LZW) pentru a reduce dimensiunea fișierului fără a degrada calitatea vizuală. Această tehnică de compresie a fost brevetată în 1985. Controversa asupra acordului de licență dintre titularul de brevete de software, Unisys și CompuServe în 1994 a stimulat dezvoltarea standardului Portable Network Graphics (PNG). Până în 2004 toate brevetele relevante au expirat.

JPEG SISTEMUL DE COORDONATE AL UNEI IMAGINI JPEG este o metodă obișnuită de

PNG

Portable Network comprimare cu pierderi pentru imaGraphics este un format gini digitale, în special pentru imagide fișiere grafice raster Pentru a cunoaște ce poziție dintr-o imagine corespunde fiecărui element al imaginii, trebunile produse prin fotografia digitală. care acceptă compreie impus un sistem de coordonate. Contrar convențiilor matematice, în procesarea imaginiGradul de compresie poate fi ajustat, sie fără pierderi de date. lor sistemul de coordonate este, de obicei, răsturnat pe direcția verticală; de aceea coorpermițând un compromis selectabil PNG a fost dezvoltat ca donatele y încep de sus în jos, iar originea este în colțul din stânga-sus. Deși acest sistem nu între dimensiunea spațiului de stocaînlocuitor îmbunătățit, are niciun avantaj practic sau teoretic, din contră, poate crea confuzii în contextul transforre și calitatea imaginii. JPEG obține nepatentat pentru Gramărilor geometrice, este folosit fără nicio excepție în softurile de editare a imaginilor. Acest în mod obișnuit o comprimare de 10: phics Interchange sistem își are rădăcinile în vechiul design al sistemelor de televiziune, unde rândurile de 1 cu o pierdere redusă perceptibilă în Format (GIF). imagini sunt numerotate de-a lungul deflecției verticale a razei de electroni, care se deplacalitatea imaginii. sează din parte de sus în partea de jos a ecranului.

PNG acceptă imagini baCompresia JPEG este utilizată înzate pe palete (cu palete tr-un număr de formate de fișiere de culori RGB pe 24 sau imagine. JPEG / Exif este cel mai 32 de biți), imagini în toobișnuit format de imagine folosit nuri de gri (cu sau fără de camerele digitale și de alte dispocanal alfa pentru transzitive de capturare a imaginilor; împarență) și imagini RGB preună cu JPEG / JFIF, este cel mai / RGBA pe bază de culori comun format pentru stocarea și non-paletă (cu sau fără transmiterea imaginilor fotografice canal alfa). Grupul de luDatele despre o imagine trebuie încărcate mai întâi în memorie dintr-un fișier. Fișierele furpe World Wide Web. Aceste variante cru PNG a creat formatul nizează mecanismul esențial pentru stocarea, arhivarea sau interschimbarea datelor imagide formate nu se disting adesea și se pentru transferul imagininii, de aceea alegerea formatului potrivit este o decizie importantă. În perioada de început numesc simplu JPEG. lor pe Internet, nu pentru a procesării imaginilor (înainte de anul 1985), majoritatea dezvoltatorilor de software-uri au grafica tipografică de cacreat câte un format nou de fișiere pentru fiecare aplicație nouă pe care o creau. În zilele Termenul „JPEG” este un acronim litate profesională și, prin noastre există gamă largă de formate de fișiere standardizate, iar dezvoltatorii poate găsi pentru Joint Photohraphic Experts urmare, nu acceptă spații aproape întotdeauna cel puțin un format potrivit pentru aplicațiile lor. Folosind formatele Group, care a creat standardul. Tipul de culoare non-RGB, cum standardizate crește ușurința cu care fiecare imagine poate fi transmisă și posibilitatea ca media MIME pentru JPEG este de ar fi CMYK. Un fișier PNG aceasta să poată fi citită de către alte software-uri pe termen lung. forma image / jpeg, cu excepția verconține o singură imagine siunilor mai vechi de Internet Exploîntr-o structură extensibirer, care oferă un tip MIME de forma lă de „fragmente”, care image / pjpeg la încărcarea imaginicodifică pixelii de bază și lor JPEG. Fișierele JPEG au, de obialte informații, cum ar fi cei, o extensie de nume de fișier .jpg comentariile textuale și sau .jpeg. verificările de integritate documentate în RFC JPEG / JFIF suportă o dimensiune 2083. maximă a imaginii de 65.535 × 65.535 pixeli, deci până la 4 gigapixeli penFișierele PNG utilizează tru un raport de aspect de 1: 1. întotdeauna extensia de fișier PNG sau png. PNG a fost publicată ca standard ISO / IEC în 2004.

FORMATELE FIȘIERELOR DE TIP IMAGINE

25

HISTOGRAMA UNEI IMAGINI Histograma imaginii este o reprezentare grafică a numărului de pixeli dintr-o imagine în funcție de intensitatea acestora.

Histogramele sunt alcătuite din containere, fiecare dintre acestea reprezentând un anumit interval de valori ale intensității. Histograma este calculată prin examinarea tuturor pixelilor din imagine și distribuirea fiecăruia într-un container în funcție de intensitate. Valoarea finală a unui container este numărul de pixeli alocați. Numărul de containere în care se împarte întreaga gamă de intensități este, de obicei, egal cu rădăcina pătrată a numărului de pixeli.

Histogramele de imagini reprezintă un instrument important pentru inspectarea imaginilor. Acestea ajută la identificarea fundalurilor și a gamei valorilor de gri dintr-o imagine. De asemenea, cu ajutorului unei histograme se poate depista imediat și zgomotul de cuantificare. În histograma unidimensională alăturată, numărul de pixeli din fiecare container este reprezentat atât de înălțimea unei bare, cât și de culoarea acesteia.

26

FIGURA 2 Histograma unei imagini

CE REPREZINTĂ FILTRELE DE IMAGINI?

KERNEL

Un filtru de imagine este o tehnică prin care dimensiunea, culorile, umbrele și alte caracteristici ale unei imagini sunt modificate. Un filtru de imagine este folosit pentru a transforma imaginea folosind diferite tehnici de editare grafică. Filtrele de imagini sunt de obicei realizate prin intermediul designului grafic și a softurilor de editare.

?

Utilizarea kernelurilor - cunoscute și ca matrice sau măști de convoluție - este de neprețuit pentru procesarea imaginilor. Tehnicile, cum ar fi detectarea contururilor, blurring-ul și sharpening-ul, se bazează pe kerneluri - matrice mici de numere - care se aplică pe o imagine cu scopul de a procesa imaginea ca întreg.

Deci, ce este un kernel? În procesarea imaginilor un kernel este pur și simplu o matrice bidimensională de numere. Deși această matrice poate varia în dimensiuni, pentru simplitate vom lua ca exemplu un kernel de 3x3. Un exemplu de kernel este prezentat mai jos:

Ce legătură are această matrice cu procesarea imaginilor? O imagine este doar o matrice bidimensională de numere sau pixeli. Fiecare pixel este reprezentat de un număr - în funcție de formatul imaginii, aceste numere pot varia: pentru o imagine RGB de 8 biți, fiecare pixel are o componentă roșie, verde și albastră, cu o valoare cuprinsă între 0 și 255. Un kernel funcționează activând pe aceste valori ale pixelilor folosind matematica simplă pentru a construi o nouă imagine. Vom lua kernelul de mai sus și vom efectua câteva operații: pentru fiecare pixel, centrăm kernelul peste pixel, multiplicăm valorile kernelului cu valorile corespunzătoare ale pixelilor și adunăm rezultatul - această valoare finală este noua valoare a pixelului curent.

FIGURA 3 Exemplu de kernel

27

=

18

Pe măsură ce fiecare pixel este procesat, apare o nouă imagine bazată pe valorile calculate. Noua imagine depinde în mare măsură de kernelul folosit - fiecare kernel are proprietăți specifice în funcție de valorile sale. Luați nucleul demonstrat mai sus: matematica acestei matrici are ca rezultat o valoare care este media tuturor pixelilor într-o rețea de pixeli de 3x3. Pe scurt - fiecare pixel este media vecinilor săi - aceasta are ca rezultat o imagine neclară.

28

<<

FIGURA 4

CE ALTE TIPURI DE KERNELURI EXISTĂ?

Comparație între imaginea originală și imaginea rezultată în urmă aplicării kernelului anterior

DETECȚIA MARGINILOR

GAUSSIAN BLUR

Acest kernel detectează marginile dintr-o imagine. Un exemplu de 3x3:

Acest kernel este similar cu kernelul prezentat anterior, dar este diferit în sensul că este dependent de funcția Gaussiană - o funcție care creează o distribuție a valorilor în jurul punctului central. Acest lucru are ca rezultat un kernel în care pixelii din apropierea centrului contribuie mai mult la noua valoare a pixelilor decât cei aflați mai departe.

Observați că, dacă toate valorile pixelilor sunt comparabile, valoarea pixelului rezultat va fi apropiată de 0. Cu toate acestea, marginile - locații cu diferențe extreme în valorile pixelilor - vor avea valori total diferite de 0.

SHARPENING UNSHARP MASK Folosită pentru accentua contururile, această tehnică se bazează pe creare, mai întâi, a unei copii neclare a imaginii.

Această copie neclară este apoi scăzută din original - pixelii deasupra unui anumit prag sunt accentuați prin intensificarea pixelilor mai luminoși și mai întunecați.

Acest kernel accentuează contururile imaginii. Acest lucru adaugă contrast marginilor, iar o versiune 3x3 a acestei măști este similară cu kernelul de detectare a marginilor cu o valoare centrală de 5. Aceasta adaugă contrast în jurul unei margini accentuând zonele luminoase, dar și cele întunecate.

Bineînțeles că nu suntem limitați la kerneluri de 3x3 - acest lucru s-a făcut doar pentru simplitate. Kernelul poate fi de aproape orice dimensiune. Kernerurile mai sofisticate sunt de obicei mai mari, de fapt multe pachete software de procesare a imaginilor au opțiuni de personalizare a unui kernel.

29

LIMBAJE DE PROGRAMARE

02

Un limbaj de programare este un limbaj formal care cuprinde un set de instrucțiuni care produc diferite tipuri de rezultate. Limbajele de programare sunt folosite în programarea calculatoarelor pentru implementarea algoritmilor.

Majoritatea limbajelor de programare constau în instrucțiuni pentru calculatoare. Există mașinării programabile care folosesc un set de instrucțiuni specifice, mai degrabă, decât limbaje generale de programare. Acestea au precedat inventarea calculatorului digital, prima fiind probabil flautul automat descris în secolul al IX-lea de frații Musa din Bagdad, în timpul epocii de aur a islamului. De la începutul anilor 1800, programele au fost folosite pentru a direcționa comportamentul mașinilor, cum ar fi războaiele de țesut Jacquard, cutiile muzicale și pianele. Programele pentru aceste mașini nu au produs comportamente diferite ca răspuns la diferite intrări sau condiții.

S-au creat mii de limbaje de programare diferite și se creează și mai multe în fiecare an. Multe limbaje de programare sunt scrise într-o formă imperativă (adică, ca o secvență de operații de efectuat), în timp ce alte limbaje utilizează forma declarativă (adică rezultatul dorit este specificat, nu modul de realizare a acestuia).

Descrierea unui limbaj de programare este, de obicei, împărțită în cele două componente: sintaxa (forma) și semantica (înțelesul). Unele limbaje sunt definite de un document de specificații (de exemplu, limbajul de programare C este specificat de un standard ISO), în timp ce alte limbaje (cum ar fi Perl) au o implementare dominantă care este tratată ca referință. Unele limbaje le au pe ambele, limbajul de bază este definit de un standard, iar extensiile luate din implementarea dominantă sunt comune.

31

D E S I G N Ș I I M P L E M E NTA R E

S P E C I F I C AȚ I E

Limbajele de programare au proprietăți comune cu limbajele naturale legate de scopul lor ca mijloace de comunicare, având o formă sintactică separată de semantică și având familii de limbaje care izvorăsc una din cealaltă. Dar ele diferă și în moduri fundamentale față de limbajele care au evoluat prin folosire. O diferență semnificativă este că un limbaj de programare poate fi descris în întregime și studiat în întregime, deoarece are o definiție precisă și finită. Deopotrivă, limbajele naturale au înțelesuri diferite date de utilizatorii din diferitele comunități.

Specificația unui limbaj de programare este un artefact pe care utilizatorii limbajelor și implementatorii îl pot folosi pentru a stabili dacă o bucată de cod sursă este un program valid în acel limbaj și, dacă da, ce comportament va avea.

Multe limbaje de programare au fost proiectate de la zero, modificate pentru a răspunde noilor nevoi sau combinate cu alte limbaje. Multe au dispărut în cele din urmă. Deși au existat încercări de a crea un limbaj de programare „universal” care să servească tuturor scopurilor, toate acestea au eșuat.

Nevoia de limbaje de programare diferite derivă din diversitatea contextelor în care sunt utilizate: 1. Programele variază de la scripturi minuscule, scrise de pasionați, la sisteme uriașe scrise de sute de programatori.

2. Programatorii diferă în expertiză, de la începători care au nevoie de simplitate, mai presus de orice, la experți care pot fi confortabili cu o complexitate considerabilă.

32

3. Programele trebuie să balanseze viteza, dimensiunea și simplitatea pe toate sistemele, de la microcontrolere la supercomputere.

4. Programele pot fi scrise o singură dată și să rămână așa, sau pot fi supuse modificărilor continue.

5. Programatorii pot diferi pur și simplu în gusturile lor: pot fi obișnuiți să discute probleme și să le exprime într-un anumit limbaj.

O tendință comună în dezvoltarea limbajelor de programare a fost aceea de a adăuga o capacitate cât mai mare de a rezolva problemele folosind un nivel mai ridicat de abstractizare. Cele mai vechi limbaje de programare au fost legate foarte mult de hardware-ul de bază al computerului. Deoarece programatorii sunt mai puțin legați de complexitatea computerului, programele lor pot face mai multe sarcini cu mai puțin efort din partea programatorului. Acest lucru le permite să scrie mai multe funcționalități pe unitate de timp.

Designerii și utilizatorii unui limbaj trebuie să construiască o serie de artefacte care guvernează și permit practicarea programării. Cele mai importante dintre aceste artefacte sunt specificarea și implementarea limbajului.

O specificație a limbajului de programare poate lua mai multe forme, printre care: 1. Definiția explicită a sintaxei, a semanticii statice și a semanticii de execuție a limbajului. Deși sintaxa este specificată frecvent folosind o gramatică formală, definițiile semantice pot fi scrise în limbajul natural (de exemplu, ca în limbajul C) sau o semantică formală (de exemplu, ca în specificațiile Standard ML și Scheme).

2. Descrierea comportamentului unui translator al limbajului (de exemplu, specificațiile C ++ și Fortran).

Sintaxa și semantica limbajului trebuie deduse din această descriere, care poate fi scrisă în limbaj natural sau formal.

3. Implementare unei referințe sau a unui model, uneori scrisă în limbajul specificat (de exemplu, Prolog sau ANSI REXX). Sintaxa și semantica limbajului sunt explicite în comportamentul implementării de referință.

IMPLEMENTARE O implementare a unui limbaj de programare oferă o modalitate de a scrie programe în acel limbaj și de a le executa pe una sau mai multe configurații hardware și software. Există, în linii mari, două abordări în implementarea limbajului de programare: compilație și interpretare. În general, este posibilă implementarea unui limbaj utilizând oricare tehnică.

Rezultatul unui compilator poate fi executat de către hardware sau de un program numit translator. În unele implementări care utilizează abordarea translatorului, nu există o limită distinctă între compilare și interpretare. De exemplu, unele implementări ale BASIC compilează și apoi execută sursa linie cu linie.

Programele care sunt executate direct pe hardware rulează de obicei mult mai repede decât cele care sunt interpretate în soft.

O tehnică de îmbunătățire a performanței programelor este compilația just-in-time. Aici, mașina virtuală, chiar înainte de execuție, traduce blocurile de cod care vor fi folosite pentru codarea mașinilor, pentru execuția directă pe hardware.

UTILIZARE Au fost create mii de limbaje de programare diferite, în principal în domeniul tehnicilor de calcul. Un soft este de obicei construit cu cinci, sau chiar mai multe, limbaje de programare.

Limbajele de programare diferă de cele mai multe alte forme de exprimare umană, deoarece necesită un grad mai mare de precizie și de completitudine. Când folosim o limbă naturală pentru a comunica cu alți oameni, autorii și vorbitorii umani pot fi ambigui sau pot face mici erori, dar tot vor fi înțeleși. Cu toate acestea, figurativ vorbind, computerele „fac exact ceea ce li se spune” și nu pot „înțelege” ce cod intenționa programatorul să scrie. Combinația dintre definiția limbajului, a programului și a intrărilor acestuia trebuie să specifice pe deplin comportamentul extern care apare atunci când programul este executat.

Un limbaj de programare oferă un mecanism structurat pentru definirea datelor, precum și pentru operațiile sau transformările care pot fi efectuate automat pe acele date. Un programator utilizează abstracțiile prezente în limbaj pentru a reprezenta conceptele implicate într-un calcul. Aceste concepte sunt reprezentate ca o colecție a celor mai simple elemente disponibile (numite primitive). Programarea este procesul prin care programatorii combină aceste primitive pentru a compune noi programe sau pentru a le adapta pe cele existente unor utilizări noi sau unui mediu în schimbare.

Programele pentru un calculator pot fi executate în serie fără interacțiunea omului sau un utilizator poate introduce comenzi într-o sesiune interactivă a translatorului. În acest caz, „comenzile” sunt pur și simplu programe a căror execuție este înlănțuită.

33

HTML5 În 2004, s-au pus bazele unui nou grup condus de persoane de la Opera, Mozilla și Apple. Acest organism de standardizare s-a autointitulat Web Hypertext Application Technology Working Group, sau WIIATWG. Membrii acestui grup considerau că XML (Extensible Markup Language) nu reprezenta viitorul și, de asemenea, nici plug-inurile. Furnizorii de servicii de navigație considerau că browserele ar trebui să furnizeze orice funcționalitate necesară, deci au decis să se implice în proiectarea viitorul Web-ului.

O specificație numită Web Applications 1.0 a fost scrisă. Aceasta a fost ulterior redenumită HTML5. Ani de zile, sugestiile acestui grup au fost ignorate de W3C (consorțiul internațional pentru web). Dar, într-un final, cei aflați la putere în W3C au început să nu mai aibă încredere în XML / XIITML. Ca urmare, în 2006, au convenit să renunțe la acesta și să adopte noua specificație lansată de WIIATWG ca punct de plecare pentru formarea unui nou grup de lucru HTML.

34

Specificațiile și seturile de standarde sunt lucruri nebulare.

Există o mică confuzie cu privire la ceea ce intră sub tutela HTML5 și ce nu. HTML5 a devenit un termen universal care acoperă un set mare de tehnologii de browser interesante, care vor defini site-uri web pentru o lungă perioadă de timp de acum în colo și din acest motiv poate fi considerat înlocuirea de facto a vechiului termen „buzzword” folosit pentru a descrie noile pagini web, Web 2.0.

Așa cum am menționat anterior, Web 2.0 este un termen oarecum neclar deoarece tinde să fie folosit atunci când ne referim mai mult la paradigme decât la tehnologii specifice. HTML5, însă, se referă la tehnologii specifice.

Așadar, avem un termen, HTML5, care pentru aproape toată lumea înseamnă „tehnologii web de generație următoare”. Cu acest lucru în minte, literalmente vorbind, HTML5 este a cincea revizuire a limbajului HTML însuși. Întreaga specificație HTML5 include conținut nou, plus tot vechiul HTML, deci înlocuiește (sau subsumează) HTML4. Există, de asemenea, două specificații HTML5, una menținută de W3C și una de WHATWG. Figura alăturată prezintă caracteristicile ambelor specificații HTML5 și tehnologiile asociate acestuia.

CE ESTE HTML5 MAI EXACT?

35

De ce este important HTML5?

Mai avem nevoie de plug-inuri?

HTML5 este capabil să furnizeze o grafică uimitoare, clipuri video de înaltă definiție, să furnizez site-urile coordonatele locului în care se află utilizatorul și multe altele.

HTML5 nu consemnează dispariția plug-inurilor, dar le face să fie mai puțin necesare.

Dezvoltatorii Flash și SIlverlight ar trebui să ia în considerare tranziția către JavaScript și HTML5. Chiar dacă Flash-ul este disponibil și pe majoritatea dispozitivelor mobile, aplicațiile HTML5 tind să fie de dimensiuni mai mici și să consume mai puțină baterie.

HTML5 este un element care vă va permite să faceți aproape tot ceea ce doriți online, fără a avea nevoie de software suplimentar.

Nu numai că, HTML5 este, de asemenea, gratuit, dar acesta funcționează și pe toate dispozitivele și toate browserele moderne.

HTML5 este responsabil pentru reducerea utilizării Flash pentru designul web datorită rapidității sale și a faptului că Flash-ul nu este suportat de dispozitivele Apple.

36

Elementele HTML5 canvas, audio și video sunt înlocuitoarele perfecte pentru plug-inuri. Una peste alta, Flash-ul reprezintă o platformă proprietară și are o durată de viață mai puțin cunoscută. Elementele HTML5 care înlocuiesc Flash-ul sunt mai ofertante din punct de vedere al implementării acestora în browserele viitoare.

Deci...

Toți dezvoltatorii web și designerii trebuie să își îndrepte privirile către HTML5 deoarece, în termeni simpli, acesta reprezintă progresia naturală a tehnologiilor web. În timp ce în 1940 tastarea părea o noutate, în zilele noastre este o abilitate esențială a vieții moderne, în aceeași măsură și tehnologiile încapsulate în HTML5 vor fi cunoștințe necesare pe care dezvoltatori și designeri web vor trebui să și le însușească în anii ce vor urma.

Probabil că nu va exista nicio aplicație web care va încerca să folosească toate tehnologiile HTML5, dar dezvoltatorii și designerii pricepuți vor trebui să se familiarizeze cu toate noile aspecte ale noilor tehnologii web, cum ar fi HTML5.

STRUCTURA UNEI PAGINI WEB ÎN HTML5

DOCTYPE Document type (tipul de document) a fost introdus pentru a marca diferența dintre browserele vechi care au urmat formatul obișnuit în anii ’90 și browserele mai noi care sunt mai aproape de specificațiile HTML 3, apoi 4 și 5. În majoritatea browserelor, lipsa DOCTYPE-ului indică o compatibilitate cu vechile formate. Absența acestuia înseamnă pentru Internet Explorer că pagina respectivă este proiectată pentru a rula pe vechile browsere. Acest lucru nu are nicio importanță dacă structura paginii este simplă, cuprinzând doar titluri și paragrafe. Însă, dacă aceasta conține tabele, straturi sau alte elemente, randarea acesteia poate fi total schimbată.

37

LIMBAJUL ȘI ATRIBUTUL LANG Atributul lang nu este pentru browsere, ci mai degrabă pentru instrumentele de procesare care trebuie să înțeleagă conținutul în funcție de limbajul lor.

Motoarele de căutare nu sunt incluse printre aceste instrumente, ele ignoră acest atribut și preferă să se bazeze pe conținut pentru a detecta limbajul.

<<

Prin urmare, acesta poate fi considerat opțional. Chiar dacă atributul este utilizat în mod obișnuit pentru întregul document, el poate fi atribuit unui anumit element, de exemplu:

HEAD Această etichetă conține mai multe tipuri de elemente: 1. Codarea cu o etichetă meta sau cu un charset 2. Titlul paginii 3. Legături cu eticheta link 4. Alte indicații

CODAREA Definește tipul de conținut, formatul său care este, în general, text / html și codarea acestuia, de obicei setul de caractere utf8.

38

Această etichetă este pentru serverul care notifică browserul. Poate fi omis dacă serverul este configurat, de exemplu prin .htaccess, pentru a atribui formatul paginilor pentru o extensie dată, cum ar fi html.

Această etichetă ar trebui să fie prima din secțiunea HEAD, deoarece serverul va procesa textul de mai sus ca ASCII fără un format specific pe care îl cunoaște doar după analizarea etichetei.

Acest format de bază este, în general, suficient pentru toate situațiile. Există și alte caractere, cum ar fi iso-8859-1, dar nu adaugă nimic mai mult în lumea latină. Pentru paginile în limba chineză sau japoneză, este necesară o codificare diferită.

Trebuie avut însă grijă atunci când pagina are un conținut dinamic. Acesta trebuie codificat folosind setul de caractere specificat.

Cu HTML5 codarea poate fi simplificată:

Acest lucru a fost implementat înainte de HTML5, dar nu a fost anterior o parte a caietului de sarcini. Citatele nu sunt necesare.

HTML este asumat în mod implicit și este necesar doar să specificați setul de caractere. Trebuie doar verificat dacă codul paginii este în acest format, ceea ce nu este neapărat automat cu toate editoarele de cod HTML.

STRUCTURA CONȚINUTULUI HTML 5 a introdus mai multe etichete pentru a reprezenta structura obișnuită a documentelor.

<header>

<nav>

<aside>

Conține o introducere pentru o parte sau pentru întreaga pagină.

Acest container este destinat închiderii unui grup de legături.

Este folosit pentru a delimita ceva separat față de conținutul real și poate defini o bară laterală.

<footer>

<article> <address>

Conține informații care sunt de obicei plasate la sfârșitul unei secțiuni. Poate fi poziționată la sfârșitul unei secțiuni sau a unei pagini, dar și oriunde în secțiune.

De exemplu, conține un link pe index, care poate fi plasat sub titlul. <section>

Indică un conținut tipic care poate fi găsit pe pagini diferite sau chiar pe site-uri diferite. Acesta poate fi un post pe forum sau chiar un articol în ziar.

Este folosit de instrumente pentru a extrage mai ușor conținutul (prin separarea datelor inutile, cum ar fi meniurile de navigare).

Conține informații de contact, de exemplu, numele autorului. <mark> Această etichetă este folosită pentru a marca o porțiune a unui text, pentru a evidenția, precum vechea etichetă <strong>, dar mai generală.

Secțiunile marchează părți din conținut. Apoi este de datoria webmasterului să asocieze o foaie de stil sau să le utilizeze dinamic în scripturi.

Există multe alte etichete semantice, care pot fi găsite descrise în documentele din referințe.

<hgroup>

În principiu, putem încadra o secțiune cu o graniță sau o putem separa de conținutul anterior.

Reprezintă antetul unei secțiuni. Eticheta <header> poate conține la început o etichetă <hgroup>.

39

CSS O foaie de stil în cascadă (CSS) conține definiții de stil care se aplică elementelor dintr-un document HTML. Stilurile CSS definesc modul în care sunt afișate elementele și locul în care sunt poziționate pe pagina web. În locul atribuirii de caracteristici fiecărui element din pagină în mod individual, se poate crea o regulă generală care aplică atribute ori de câte ori un browser web întâlnește o instanță a unui element sau un element atribuit unei anumite clase de stil.

Stilurile CSS pot fi plasate în linie într-un singur element HTML, grupate într-un bloc <STYLE> în porțiunea HEAD a unei pagini Web sau importate dintr-un fișier separat de stil CSS. Același fișier de foi de stil extern poate fi legat de mai multe pagini Web, oferind astfel un aspect comun unui întreg site Web.

40

CSS SCURT ISTORIC Înainte de crearea foilor de stil cascadă (CSS), se puteau face foarte puține lucruri pentru a schimba design-ul unei pagini web.

Hyper Text Markup Language (HTML) creează documente pentru World Wide Web și a fost proiectat special pentru a găzdui conținutul unei pagini Web. Găzduit într-un fișier separat, CSS adaugă stilul și designul unei pagini web. Termenul de cascadă vine de la capacitatea de a combina mai multe fișiere CSS pentru a determina stilul pentru o pagină.

Pe măsură ce mai mulți oameni au început să utilizeze codul HTML, cererea a crescut pentru mai multe capabilități de proiectare, ceea ce ar fi putut permite dezvoltatorilor să controleze modul în care ar arăta documentele web.

Dar browserele au oferit capacități limitate pentru stil. În 1993, NCSA Mosaic a fost lansat, făcând webul mai popular decât oricând, dar a oferit doar capacitatea limitată de a schimba fonturile și culorile. În octombrie 1994, Tim Berners-Lee a format Consorțiul World Wide

Web (W3C) la Laboratorul de Tehnologie din cadrul Institutului de Tehnologie din Massachusetts pentru Informatică. W3C are membri care sunt entități guvernamentale, întreprinderi, instituții de învățământ și persoane fizice.

W3C creează recomandări care sunt folosite pentru a menține experiența web compatibilă între diferite browsere.

Hakon Wium Lie a lansat primul proiect de „Cascading HTML Style Sheets” în octombrie 1994. Brent Bos a construit, de asemenea, Argo, un browser care avea foi de stil care puteau fi folosite de alte limbaje de marcare. În total, au fost depuse nouă propuneri diferite de foi de stil. Discuțiile pe lista de discuții, creată în mai 1995, au influențat dezvoltarea CSS. Deoarece era important să poți folosi foile de stil pentru alte limbaje de marcare, HTML a fost eliminat din nume.

W3C a înființat Comitetul de revizuire a ediției HTML (ERB) la sfârșitul anului 1995 pentru a face specificațiile HTML. Deși a durat 3 ani pentru

ca vreun browser să se apropie de implementarea integrală a CSS, în august 1996, Microsoft Internet Explorer a devenit primul browser care sprijinea CSS. Netscape a urmat exemplul în susținerea CSS, dar a implementat și o foaie de stil alternativă Javascript, care nu a fost niciodată complet finalizată. În prezent, există diferențe în modul în care CSS este implementat în diferite browsere, determinând dezvoltatorii să utilizeze hack-uri pentru a face paginile web să se potrivesc în diferite browsere.

Recomandarea CSS de nivel 1 W3C a fost făcută în decembrie 1996. Lansarea CSS 1 a susținut: proprietăți ale fonturilor, atribute de text, alinierea textului, tabele, imagini și multe altele, culori de text și fundaluri, spațierea cuvintelor, litere și linii, margini , granițe, umplutura și poziționarea, identificarea unică și clasificarea grupurilor de atribute.

După această versiune, grupul de lucru Cascading Style Sheets și Formatting Properties a fost format de către W3C pentru a se concentra exclusiv pe CSS.

41

<<

În mai 1998, W3C a lansat CSS 2, care a adăugat noi capabilități, incluzând z-index, tipuri media, text bidirecțional, poziționare absolută, relativă și fixă și suport pentru foi de stil auriculare. Nu după mult timp după lansarea CSS 2, un nou browser a fost lansat, Opera, care a sprijinit la rândui CSS-ul. Această versiune a fost păstrată până în iunie 2011, când W3C a lansat CSS 2.1, care a rezolvat unele erori și a aliniat capabilitățile mai bine cu funcțiile browserului.

Odată cu lansarea CSS 3, capabilitățileau fost împărțite în module. Între iunie 2011 și iunie 2012, următoarele patru module au fost lansate ca recomandări formale: culoare, selectori de nivel 3, spații de nume și interogări media.

Deoarece nivelul 3 a fost separat în module, nu va exista o singură lansare

42

CSS 4. Unele module de nivel 4 care se bazează pe funcțiile de nivel 3 au fost lansate. Noi funcționalități au fost adăugate în alte module.

Deși există câteva limitări, CSS a adăugat funcționalitate și design paginilor web care au fost odată simple documente. Avantajele CSS includ conținutul și prezentarea în fișiere separate, consistența formatului în cadrul unui site, reducerea lățimii de bandă, accesibilitatea, abilitatea de a modifica cu ușurință stilul unui site și abilitatea de a schimba designul unei pagini web pentru diferite dispozitive.

Dacă ne vom imagina un site web în care singurele caracteristici ale designului sunt schimbările de font și culoare, vom realiza faptul că CSS a contribuit foarte mult la popularitatea, ușurința în utilizare și accesibilitatea internetului.

DEFINIREA REGULILOR STILULUI CSS ÎN BLOCURILE DE TIP STYLE Fiecare regulă de stil CSS are două părți principale - un selector (cum ar fi H1) și o declarație (cum ar fi color:red). Declarația include o proprietate (culoare) și valoarea acesteia (roșu). O regulă simplă a stilului CSS, care spune „Centrează orice text conținut între etichetele <H1> </ H1> și atribuie culoarea roșie fontului” este scrisă după cum urmează: H1 {text-align:center; color:red;} Regulile de stil CSS pot fi definite într-un bloc de tip <STYLE> în interiorul secțiunii <HEAD> a documentului HTML. Mai jos este prezentat un exemplu care definește și aplică o regulă de stil CSS tuturor elementelor <H1> ale unei pagini web: În această pagină Web, orice text care apare între etichetele <H1> </ H1> va fi centrat și de culoare roșie. Nu mai este necesară reatribuirea acestor caracteristici de stil în mod repetat de fiecare dată când în document apare o etichetă <H1>. În plus, modificarea culorii (sau a oricărei alte proprietăți) întregului text aflat între etichetele <H1> </ H1>, se poate face pur și simplu prin modificarea unei reguli de stil. <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML>

<HEAD>

<TITLE>HTML 4.0 CSS Element Style Example</TITLE> <STYLE TYPE=”text/css”>

H1 {text-align:center; color:red;} </STYLE>

</HEAD> <BODY>

<H1>This text is centered and red</H1>

</BODY>

</HTML>

FOI DE STIL CSS EXTERNE Un document de foi de stil CSS extern reprezintă un fișier de text simplu cu extensia .css ce conține doar reguli de stil. Declarația <LINK REL=stylesheet Type=”text/css” HREF=”mystyles.css”>

aplică regulile de stil existente în fișierul de foi de stil CSS „mystyles.css” paginii web. În exemplul următor, „Mystyles.css” este un document extern de foi de stil CSS care conține reguli de stil pentru etichetele <H1>: <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML>

<HEAD>

<TITLE>Calling an External CSS Style Sheet Example</TITLE>

<meta content=”Internet Explorer 5.0” name=”vs_targetSchema”> <LINK rel=”stylesheet” href=”Mystyles.css” type=”css/text”> </HEAD> <BODY>

<H1>This text is red</H1> </BODY>

</HTML>

O foaie de stil CSS externă poate fi legată de mai multe pagini HTML și, prin urmare, poate aplica stiluri coerente unui întreg site Web. Foile de stil CSS separă regulile de formatare de conținut, făcând mult mai ușor localizarea și editarea regulilor de stil. Un bloc <STYLE> </ STYLE> poate fi, de asemenea, utilizat pentru a expune un document pentru procesare prin Extensible Markup Language (XML).

44

TIPURI DE SELECTOARE CSS Selectoarele CSS sunt de mai multe tipuri. Cu ajutorul acestora este posibilă aplicarea în mod specific a regulilor, diferitelor elemente dintr-un document HTML. În tabelul de mai jos sunt prezentate cele mai utilizate tipuri de selectoare în CSS.

SELECTOR

Selector universal

Selector de tip

Selector de clasă

SEMNIFICAȚIE

EXEMPLU

Se aplică tuturor elementelor dintr-un document

* {} Vizează toate elementele din pagină

Se potrivește cu numele elementelor

h1, h2, h3 {} Vizează elementele <h1>, <h2> și <h3>

.note {} Se potrivește cu elementul a cărui Vizează elementele a căror clasă are valoarea note clasă este la fel cu cea specificată p.note {} după punct Vizează doar elementele de tip <p> a căror clasă este note

Selector de ID

Se potrivește cu elementul al #introducere {} cărui id este la fel cu cel specificat Vizează elementul al cărui id este introducere după simbolul diez

Selector de fiu

Se potrivește cu un element care este descendentul direct (fiul) al altui element

li>a {} Vizează orice element de tip <a> care este descendent direct al unui element <li>

Selector descendent

Se potrivește cu elementul care este descendentul altuia (nu doar descendentul direct)

p a {} Vizează orice element de tip <a> care se află în interiorul unui element <p>, chiar dacă între ele sunt întrețesute și alte elemente

Selectorul adiacent de frați

Selectorul general de frați

h1+p {} Se potrivește cu un element care Vizează primul element <p> ce urmează oricărui element este fratele direct al altui element <h1> Se potrivește cu un element care este fratele altuia, chiar dacă nu îl precedă pe acesta

h1~p {} Dacă există două elemente <p> care sunt frații unui element <h1>, această regulă se aplică amândurora

TABELUL 1 Tipuri de selectoare în CSS

45

JAVASCRIPT 46

În anii ‘90, când internetul a început să fie accesibil publicului larg, companiile de tehnologie s-au luptat pentru a construi cel mai puternic și mai eficient browser web de pe piață. Acest lucru a provocat primul „război de browser”, între Microsoft (Internet Explorer) și NetScape (NetScape Navigator), pentru a câștiga dominanța în partea de utilizare a browserelor web.

Netscape avea nevoie de un limbaj de scriere ușor pentru o programare mai ușoară. Acest lucru a făcut ca dezvoltarea web-ului să devină mai accesibilă, spre deosebire de alte limbaje care necesită o instruire mai profundă. În 1995, un angajat NetScape, Brendan Eich, a primit zece zile pentru a ajuta compania să construiască un limbaj de scriptare simplu și ușor. Ca rezultat, Eich a construit Mocha, care a fost ulterior redenumit JavaScript.

Morala - JavaScript nu a fost niciodată menit să devină un limbaj standard pentru web! Cu toate acestea, după ce NetScape a fost achiziționat de AOL și, în cele din urmă, a cedat codul browserului lor către Mozilla Foundation, popularitatea JavaScript a crescut.

JavaScript este acum o tehnologie web esențială care este susținută de cele mai populare browsere web.

Familiarizarea cu limbajul este crucială pentru oricine dorește să devină un dezvoltator web - de aceea a fost cel mai frecvent utilizat limbaj de programare, potrivit sondajului Stack Overflow’s Developer, timp de șase ani la rând.

CE ESTE JAVASCRIPT? JavaScript a fost inițial creat pentru a „anima” paginile web.

Programele scrise în acest limbaj sunt numite scripturi. Ele pot fi scrise chiar în HTML-ul unei pagini web și pot fi executate automat în momentul încărcării paginii.

Scripturile sunt furnizate și executate ca text simplu. Nu au nevoie de pregătire specială sau compilare pentru a rula.

Din acest punct de vedere JavaScript este foarte diferit față de limbajul de programare denumit Java.

Astăzi, JavaScript poate fi executat nu numai în browser, ci și pe server, sau de fapt pe orice dispozitiv care are un program special numit motor JavaScript.

Browserul are un motor încorporat, denumit uneori „mașină virtuală JavaScript”.

CUM FUNCȚIONEAZĂ MOTOARELE? Motoarele sunt complicate. Dar elementele de bază sunt simple.

Motorul (încorporat dacă este un browser) citește scriptul. Apoi, acesta convertește („compilează”) scriptul în limbajul mașinii. Apoi codul mașinii rulează destul de repede.

Motorul aplică optimizări la fiecare etapă a procesului. Monitorizează chiar și scriptul compilat în timp ce rulează, analizează datele care trec prin acesta și aplică optimizări codului mașinii pe baza acestor cunoștințe.

47

DE CE JAVASCRIPT? Când JavaScript a fost creat, inițial avea un alt nume: „LiveScript”. Dar limbajul Java era foarte popular la acel moment, deci creatorii limbajului JavaScript au decis să îl prezinte ca un „frate” mai mic al acestuia. Din acest motiv i-au schimbat și denumirea.

Dar, pe măsură ce a evoluat, JavaScript a devenit un limbaj complet independent, cu o specificație proprie numită ECMAScript. În zilele noastre, acesta nu mai are absolut nicio legătură cu limbajul Java.

CE POATE FACE JAVASCRIPT-UL CARE RULEAZĂ ÎN INTERIORUL UNUI BROWSER? JavaScript-ul modern este un limbaj de programare „sigur”. Nu oferă acces de nivel scăzut la memorie sau procesor, deoarece a fost inițial creat pentru browsere care nu aveau nevoie de aceasta.

Capabilitățile JavaScript depind în mare măsură de mediul în care rulează. De exemplu, Node.js acceptă funcții care permit JavaScript să citească / să scrie fișiere arbitrare, să efectueze solicitări de rețea etc.

JavaScript-ul în browser poate face orice legat de manipularea paginilor web, interacțiunea cu utilizatorul și cu serverul web. De exemplu, JavaScript în browser este capabil să:

CE FACE CA JAVASCRIPT SĂ FIE UNIC? Există cel puțin trei lucruri importante care oferă caracterul de unicitate limbajului JavaScript: 1. Integrarea completă cu HTML / CSS.

1. adauge un nou cod HTML în pagină, să modifice conținutul existent sau stilurile.

2. reacționeze la acțiunile utilizatorilor, să execute la clicurile de mouse, la mișcările indicatorilor, sau la apăsări de taste.

3. trimită cereri prin rețea către servere la distanță, să descarce și să încarce fișiere (așa-numitele tehnologii AJAX și COMET).

2. Lucrurile simple se fac simplu.

4. obțină și să seteze cookie-uri, să adreseze întrebări utilizatorului, să afișeze mesaje.

3. Este sprijinit de toate browserele majore și activat în mod implicit.

5. stocheze datele de pe partea clientului („stocare locală”)

JavaScript este singura tehnologie de browser care combină aceste trei lucruri. De aceea este cel mai răspândit instrument pentru crearea interfețelor de browser.

CE NU POATE FACE JAVASCRIPT-UL CARE RULEAZĂ ÎN INTERIORUL UNUI BROWSER? Abilitățile JavaScript în browser sunt limitate din motive de siguranță a utilizatorului. Scopul este acela de a împiedica accesul unei pagini web dăunătoare la informații private sau la deteriorarea datelor utilizatorului.

Exemple de astfel de restricții includ: 1. JavaScript de pe o pagină web nu poate citi/scrie fișiere arbitrare pe hard disk, copia sau executa programe. Nu are acces direct la funcțiile sistemului OS. Browserele moderne îi permit să lucreze cu fișiere, dar accesul este limitat și numai dacă utilizatorul face anumite acțiuni, cum ar fi încărcarea unui fișier într-o fereastră a browserului sau selectarea acestuia printr-o etichetă <input>.

Există modalități de a interacționa cu aparatul foto/microfonul și cu alte dispozitive, însă acestea necesită permisiunea explicită a utilizatorului. Deci, nu este posibil ca o pagină cu JavaScript să pornească în mod subtil o cameră web, să observe împrejurimile și să trimită informațiile către NSA. 2. În general, filele/ferestrele diferite nu știu una despre alta. Acest lucru se întâmplă, totuși, uneori, ca de exemplu atunci când o fereastră utilizează JavaScript pentru a

deschide o alta. Dar chiar și în acest caz, JavaScript-ul dintr-o pagină ar putea să nu aibă acces la cealaltă, dacă provin din diferite site-uri (dintr-un alt domeniu, protocol sau port).

Aceasta se numește „Same Origin Policy”. Pentru a rezolva această problemă, ambele pagini trebuie să convină asupra schimbului de date și să conțină un cod special JavaScript care să gestioneze acest schimb.

Această limitare este, din nou, pentru siguranța utilizatorului. O pagină precum http://anysite.com pe care un utilizator a deschis-o nu trebuie să poată accesa altă filă a browserului cu adresa URL http://gmail.com și să fure informații de acolo.

3. JavaScript poate comunica cu ușurință prin rețea cu serverul de unde a venit pagina curentă. Dar capacitatea sa de a primi date de pe alte site-uri / domenii este destul de limitată. Deși este posibil, este necesar un acord explicit (exprimat în antete HTTP) al părții aflate la distanță.

Aceste limitări nu există dacă JavaScript este folosit în afara browserului, ca de exemplu pe un server.

Browserele moderne permit, de asemenea, pluginuri / extensii care pot solicita permisiuni extinse.

49

LEGĂTURA DINTRE HTML, JAVASCRIPT ȘI CSS

În general, o pagină web conține următoarele secțiuni: 1. Conținutul (header-ul, paragrafele, footer-ul și listele) 2. Stilul fontului, culoarea, fundalul și bordurile 3. Imagini și fișiere video 4. Widget-uri, notificări, efecte speciale etc

<html>

Cele trei limbaje de programare, folosite împreună, gestionează toate informațiile pe care le conține o pagină web (de la formatarea textului până la adăugarea efectelor speciale).

Fiecare dintre cele trei limbaje constituie un strat separat, fiecare având un scop diferit.

{css}

De aceea, este recomandat ca liniile de cod pentru fiecare dintre acestea să fie scrise în fișiere diferite. HTML-ul fiind puntea de legătură dintre acestea.

Fiecare strat este construit pe fundația pusă de cel precedent, pornind de la stânga la dreapta.

javascript()

STRATUL DE CONȚINUT

STRATUL DE PREZENTARE

STRATUL COMPORTAMENTULUI

Fișierele .html

Fișierele .css

Fișierele .js

HTML determină conținutul și structura unei pagini (antet, paragraf, subsol etc.)

CSS controlează modul în care arată pagina web (culoare, tip de font, borduri etc.)

JavaScript gestionează comportamentele mai avansate, cum ar fi pop-upurile, animațiile etc.

Programatorii fac referire la acest lucru ca fiind o separare a preocupărilor.

50

S E R V E R U L În domeniul calculatoarelor, un server este un program de calculator sau un dispozitiv care oferă funcționalitate pentru alte programe sau dispozitive, numite „clienți”. Această arhitectură este denumită modelul client-server și un singur calcul general este distribuit pe mai multe procese sau dispozitive. Serverele pot oferi diferite funcționalități, adesea denumite „servicii”, cum ar fi partajarea de date sau resurse între mai mulți clienți sau efectuarea de calcul pentru un client. Un singur server poate servi mai mulți clienți, iar un singur client poate utiliza mai multe servere. Un proces client poate rula pe același dispozitiv sau se poate conecta printr-o rețea la un server de pe un alt dispozitiv. Serverele tipice sunt servere de baze de date, servere de fișiere, servere de mail, servere de imprimare, servere web, servere de jocuri și servere de aplicații. În prezent, sistemele client-server sunt implementate cel mai frecvent de (și adesea identificate cu) modelul de cerere-răspuns: un client trimite o solicitare serverului, care efectuează o anumită acțiune și trimite un răspuns înapoi clientului, de obicei cu un rezultat sau o confirmare . Desemnarea unui computer ca „hardware de clasă server” implică faptul că este special conceput pentru rularea serverelor. Acest lucru indică adesea faptul că este mai puternic și mai fiabil decât computerele personale standard, dar, în mod alternativ, clusterele de calcul mari pot fi compuse din mai multe componente de server relativ simple și înlocuibile.

51

CL IE

NT

SCOPUL UNUI SERVER Scopul unui server este de a partaja date, de a împărți resursele și de a distribui munca. Un computer de tip server poate servi, de asemenea, și propriile programe de calculator; în funcție de scenariu, aceasta ar putea face parte dintr-o tranzacție „quid pro quo” sau pur și simplu o posibilitate tehnică.

Aproape întreaga structură a Internetului se bazează pe un model client-server. Name-serverele de nivel înalt, DNS-ul și routerele direcționează traficul pe internet. Există milioane de servere conectate la Internet, care rulează în mod continuu în întreaga lume și practic orice acțiune luată de un utilizator obișnuit de Internet necesită una sau mai multe interacțiuni cu unul sau mai multe servere. Există excepții care nu utilizează servere dedicate; de exemplu partajarea de fișiere peer-to-peer, unele implementări de telefonie (de ex., pre-Microsoft Skype).

Pentru a funcționa într-un mediu de rețea unic în care computerele și sistemele hardware sau software depind de unul sau mai multe servere, un astfel de dispozitiv deține adesea

52

caracteristici și capabilități speciale, printre care: 1. Abilitatea de a actualiza hardware-ul și software-ul fără o repornire.

2. Capacitate de backup avansată pentru backupuri frecvente ale datelor critice.

3 Performanță avansată în rețea.

4. Transfer automat de date (invizibil pentru utilizator) între dispozitive.

5. Securitate ridicată pentru protecția resurselor, a datelor și a memoriei.

Calculatoarele de tip servere au adesea sisteme de operare speciale care nu se găsesc de obicei pe computerele personale. Unele sisteme de operare sunt disponibile atât în versiuni server cât și desktop și utilizează interfețe similare. Cu toate acestea, o creștere a fiabilității atât a hardware-ului de servere, cât și a sistemelor de operare a distrus distincțiile dintre sistemele de operare desktop și server.

N O D E . J S Node.js este un mediu cu sursă deschisă care execută codul JavaScript în afara unui browser. JavaScript este folosit în primul rând pentru programare pe partea clientului, unde codurile scrise sunt încorporate în HTML-ul unei pagini web și sunt executate în browser-ul web al utilizatorului. Node.js permite dezvoltatorilor să utilizeze JavaScript pentru a scrie instrumentele din linia de comandă și să creeze conținut dinamic, pe partea de server, înainte ca pagina web să fie transmisă către browserul utilizatorului. În consecință, Node.js reprezintă o paradigmă „JavaScript peste tot”, unificând dezvoltarea aplicațiilor web în jurul unui singur limbaj de programare.

Deși .js este extensia convențională a fișierului pentru codul JavaScript, numele „Node.js” nu se referă la un anumit fișier în acest context și este doar numele produsului. Node.js are o arhitectură bazată pe evenimente, capabilă de I/O asincron. Aceste opțiuni de proiectare urmăresc să optimizeze capacitatea și scalabilitatea în aplicațiile web cu multe operații de intrare/ ieșire, precum și pentru aplicațiile Web în timp real (de exemplu, programe de comunicare în timp real și jocuri de browser).

Proiectul de dezvoltare Node.js, guvernat de Fundația Node.js, este facilitat de programul Linux Foundation’s Collaborative Projects.

53

Dahl a criticat posibilitățile limitate ale celui mai popular server web din 2009, Apache HTTP Server, de a gestiona o mulțime de conexiuni concomitente (până la 10.000 și mai mult), dar și cel mai comun mod de a crea coduri (programare secvențială).

Dahl a prezentat proiectul la ediția inaugurală a European JSConf pe 8 noiembrie 2009. Node.js a combinat motorul JavaScript Google V8, o buclă de evenimente și un API I/O de nivel scăzut. În ianuarie 2010, a fost introdus un manager de pachete pentru mediul Node.js numit npm. Managerul de pachete ajută programatorii să publice și să distribuie codul sursă al bibliotecilor Node.js și este conceput pentru a simplifica instalarea, actualizarea și dezinstalarea bibliotecilor. În iunie 2011, Microsoft și Joyent au implementat o versiune nativă Windows a Node.js. Primul Node.js care rula pe Windows a fost lansat în iulie 2011. În ianuarie 2012, Dahl s-a retras și l-a desemnat pe colaboratorul său, Isaac Schlueter, pentru a conduce proiectul în continuare. În decembrie 2014, Fedor Indutny a pus bazele io.js, o subdiviziune a Node.js. Datorită conflictului intern asupra guvernanței lui Joyent, io.js a fost creat ca o alternativă cu o conducere deschisă, cu un comitet tehnic separat. Spre deosebire de Node.js, autorii au hotărât să păstreze io.js la curent cu cele mai recente versiuni ale motorului JavaScript Google V8. În februarie 2015, intenția de a forma o fundație neutră Node.js a fost anunțată. Până în iunie 2015, comunitățile Node.js și io.js au decis să lucreze împreună în cadrul Fundației Node.js. În septembrie 2015, Node.js v0.12 și io.js v3.3 au fost reunite împreună în Node v4.0. Această îmbinare a adus caracteristicile V8 ES6 în Node.js. Începând cu anul 2016, site-ul web io.js recomandă ca dezvoltatorii să revină la Node.js și anunță că datorită fuziunii nu este planificată altă lansare a vreunei versiuni noi de io.js.

ISTORIC

Node.js a fost scris inițial de Ryan Dahl în 2009, la aproximativ treisprezece ani de la introducerea primului mediu de programare pe partea de server, LiveSearch Web Netscape. Versiunea inițială a rulat numai pe Linux și Mac OS X. Dezvoltarea și întreținerea acestuia au fost conduse de Dahl și ulterior sponsorizate de Joyent.

Node.js permite crearea de servere web și instrumente de rețea folosind JavaScript și o colecție de „module” care gestionează diferite funcționalități de bază.

Modulele sunt furnizate pentru sistemul de fișiere de tipul I/O, pentru rețelistică (DNS, HTTP, TCP, TLS/SSL sau UDP), date binare (buffer-uri), funcții criptografice, fluxuri de date și alte funcții de bază. Modulele Node.js folosesc un API proiectat pentru a reduce complexitatea redactării aplicațiilor de tip server.

Deși inițial sistemul de module a fost bazat pe modelul modulului commonjs, introducerea recentă a modulelor în specificația ECMAScript a dus la utilizarea implicită a modulelor ECMAScript în Node.js.

Node.js este suportat oficial pe Linux, MacOS și Microsoft Windows 7 și Server 2008 (și mai târziu). Există și suportul de nivel 2 pentru SmartOS și IBM AIX. Codul sursă furnizat poate fi, de asemenea, construit pe sisteme de operare similare celor susținute în mod oficial sau poate fi modificat de terțe părți pentru a suporta și altele, cum ar fi serverele NonStop OS și Unix. Alternativ, acesta poate fi scris cu CoffeeScript (alternativă JavaScript), Dart sau TypeScript sau orice alt limbaj care poate fi compilat în JavaScript.

Node.js este utilizat în principal pentru a construi programe de rețea, cum ar fi servere Web. Cea mai importantă diferență dintre Node.js și PHP este că majoritatea funcțiilor PHP sun blocate până la finalizare (comenzile se execută numai după finalizarea execuției comenzilor anterioare), în timp ce funcțiile Node.js sunt non-blocante (comenzile se execută simultan sau chiar paralel).

PREZENTARE GENERALĂ

DESPRE ARHITECTURA PLATFORMEI Node.js aduce programarea bazată pe evenimente pe serverele web, permițând dezvoltarea de servere web rapide în JavaScript. Dezvoltatorii pot crea servere scalabile fără a folosi înșiruirea, utilizând un model simplificat de programare bazat pe evenimente care utilizează callback-uri pentru a semnala finalizarea unei sarcini. Node. js conectează simplitatea unui limbaj de scripting (JavaScript) cu puterea programării de rețea a Unix-ului.

Node.js a fost construit pe motorul Google V8 JavaScript, deoarece are sursă deschisă cu licență BSD. Acesta este compatibil și cu HTTP, DNS, TCP. JavaScript este, de asemenea, un limbaj bine-cunoscut, făcând Node.js accesibil comunității dezvoltatorilor web.

SPRIJIN DIN PARTEA INDUSTRIEI Există mii de biblioteci cu sursă deschisă pentru

56

Node.js, cele mai multe găzduite pe site-ul web npm.

Comunitatea de dezvoltatori Node.js are două liste de discuții principale și canalul IRC #node.js pe freenode. Există mai multe conferințe și evenimente pentru dezvoltatorii care susțin comunitatea Node.js, inclusiv NodeConf, Node Interactive și Node Summit, precum și o serie de evenimente regionale.

Comunitatea „open-source” a dezvoltat arhitecturi web pentru a accelera dezvoltarea aplicațiilor. Astfel de arhitecturi includ Connect, Express.js, Socket.IO, Feathers.js, Koa.js, Hapi.js, Sails.js, Meteor, Derby și multe altele. De asemenea, s-au creat diferite pachete pentru interfața cu alte limbaje sau medii de rulare, cum ar fi Microsoft .NET. Mediile de dezvoltare integrate (IDE) moderne oferă funcții de editare și depanare speciale pentru aplicațiile Node.js. Aceste IDE-uri includ Atom, Brackets, JetBrains WebStorm, Microsoft Visual Studio (cu instrumente Node.js pentru Visual Studio,

NODE.JS sau TypeScript cu definirea Node.js), NetBeans, Nodeclipse Enide Studio (bazat pe Eclipse) și Visual Studio Code.

V8 V8 este motorul de execuție JavaScript care a fost inițial creat pentru Google Chrome.

Acesta a fost apoi oferit cu sursă deschisă de către Google, în 2008. Scris în C ++, V8 compilează codul sursă JavaScript la codul mașinii native în timpul executării, în loc să îl interpreteze înainte (AOT).

Node.js utilizează libuv pentru a gestiona evenimentele asincrone. Libuv este un strat de abstractizare pentru funcționalitatea rețelei și a sistemului de fișiere, atât pe sistemele bazate pe Windows cât și pe sistemele POSIX, cum ar fi Linux, macOS, OSS pe NonStop și Unix.

Funcția de bază a Node.js se află într-o bibliotecă JavaScript. Legăturile Node.js, scrise în C ++, conectează aceste tehnologii între ele și cu sistemul de operare.

GESTIONAREA PACHETELOR npm este managerul de pachete preinstalat pentru platforma de server Node.js. Acesta instalează programele Node.js din registrul npm, organizând instalarea și gestionarea programelor Node.js de la terți. Pachetele din registrul npm pot varia de la bibliotecile simple de ajutor cum ar fi Lodash la cele care îndeplinesc sarcini mai complicate, cum ar fi Grunt.

API UNIFICAT Node.js poate fi combinat cu un browser, o bază de date care suportă date JSON (cum ar fi Postgres, MongoDB sau CouchDB) și JSON pentru un depozit unificat de dezvoltare JavaScript. Odată cu adaptarea tipurilor de dezvoltare bazate în principal pe server, cum ar fi MVC, MVP, MVVM etc., Node. js permite reutilizarea aceluiași model și interfață de serviciu între partea de client și partea de server.

57

EXPRESS.JS Express.js, sau simplu Express, este un cadru de aplicații web pentru Node.js, lansat ca software gratuit și cu sursă deschisă, sub licența MIT. Acesta este conceput pentru a construi aplicații web și API-uri. El a fost numit cadrul de server standard pentru Node.js.

Aplicații Web

Autorul original, TJ Holowaychuk, a descris Express.js ca fiind un server inspirat de Sinatra, ceea ce înseamnă că este relativ minimal, cu multe caracteristici disponibile ca pluginuri. Express este componenta „backend” a stivei MEAN, împreună cu software-ul bazei de date MongoDB și cadrul frontal AngularJS.

Cu o multitudine de metode de utilitate HTTP și middleware puse la dispoziția utilizatorului, crearea unui API robust este rapidă și ușoară.

SCURT ISTORIC Express.js a fost fondat de TJ Holowaychuk. Prima ediție, în conformitate cu repozitoriul GitHub al Express.js, a apărut la 22 mai 2010. Versiunea 0.12.0. În iunie 2014, drepturile de gestiune ale proiectului au fost dobândite de StrongLoop.

StrongLoop a fost achiziționat de IBM în septembrie 2015; în ianuarie 2016, IBM a anunțat că va plasa Express.js sub supravegherea incubatorului Fundației Node.js.

58

Express este un cadru de aplicații web Node.js minimal și flexibil, care oferă un set robust de funcții pentru aplicații web sau mobile.

API-uri

Performanță Express oferă un strat subțire de caracteristici fundamentale de aplicații web, fără a ascunde funcțiile Node.js bine-cunoscute, deja.

INSTALARE Instalarea modulului Express.js se face ușor prin introducerea următoarei linii de comandă în interpretorul de linii de comandă al sistemului de operare: $ npm install express --save

PROIECTAREA APLICAȚIEI 03

SOFTW ATOM Există foarte multe editoare de text diferite, unele au o interfață grafică, iar altele se bazează pe terminale. Alegerea editorului potrivit se face în funcție de necesitățile utilizatorului.

Pentru redactarea codului sursă al aplicației de față s-a utilizat editorul Atom.

Atom este un editor de text ce poate fi „hack-uit”, ceea ce înseamnă că poate fi personalizat aproape până la extrem, dar totuși, este perfect utilizabil chiar și cu setările implicite.

Editorul este dezvoltat de cei de la GitHub și a fost construit doar prin folosirea tehnologiilor web.

CARACTERISTICI Site-ul Atom listează câteva dintre caracte-

60

risticile sale, cum ar fi: • Editare pe orice platformă - Atom funcționează pe toate sistemele de operare.

Poate fi folosit pe OS X, Windows sau Linux.

• Manager de pachete încorporat – căutarea, instalarea sau crearea pachetelor se poate face chiar din interiorul editorului • Autocompletare inteligentă - Atom ajută la scrierea codului mai repede folosind o autocompletare inteligentă și flexibilă.

• Sistem de navigare a fișierelor – Deschiderea unui singur fișier, a unui întreg proiect sau a mai multor proiecte se poate face într-o singură fereastră • Panouri multiple - interfața Atom se poate împărți în mai multe panouri pentru a compara și edita codul între fișiere.

• Găsire și înlocuire – atom are inclus un motor de căutare, previzualizare și înlocuire a textului dintr-un fișier sau dintr-un proiect întreg

WARE COMMAND PROMPT Pentru rularea codului sursă, cu scopul creări unui server local a fost utilizat interpretorul de linii de comandă al sistemului de operare Windows, Command Prompt (cmd). cmd.exe interacționează cu utilizatorul printr-o interfață de linie de comandă. În Windows, această interfață este implementată prin intermediul consolei Win32. cmd.exe poate profita astfel de caracteristicile disponibile pentru programele native ale platformei proprii.

GOOGLE CHROME Pe parcursul dezvoltării aplicației browserul Google Chrome a fost folosit pentru testarea codului sursă și proiectarea paginilor. Instrumentele pentru dezvoltatori oferite de acest browser ajută la creare și depanare paginilor web.

Astfel, programatorii pot accesa zonele ascunse ale browserului și ale aplicației web. Optimizarea codului, descoperirea eficientă a problemelor legate de aspectul unei pagini sau setarea punctelor de pauză în JavaScript se pot face mult mi ușor și rapid folosind aceste instrumente.

61

STRUCTURA APLICAȚIEI Partea de server a aplicației conține trei fișiere importante. Acestea conțin codul sursă necesar creării unui server local, încărcării și editării fotografiilor utilizatorului și creării unei galerii de imagini ce conține fotografiile editate.

server.js Acesta este cel mai important fișier al aplicație. Aici se regăsește codul sursă pentru crearea serverului și nu numai. Fișierul server.js face, de asemenea, legătura între codul sursă pentru partea de tip client (acest cod reprezintă aplicația care a fost prezentată de către autorul lucrării curente la examenul de licență) și codul sursă pentru partea de server. Acest lucru este realizat prin accesarea paginii de index (index.html) a editorului. Liniile de cod care realizează acest lucru sunt următoarele:

De asemenea, tot aici se află și funcțiile pentru stocarea pe server a fotografiilor încărcate de utilizator, dar și funcția care apelează funcțiile de aplicare a filtrelor pentru fiecare imagine în parte.

Aceasta din urmă este prezentată în cele ce urmează.

Funcția accesează fiecare fișier existent în folderul în care au fost încărcate fotografiile și creează o listă ce conține numele fiecăruia.

Cu ajutorul acestei liste se poate apela funcția care prelucrează matricea de pixeli pentru fiecare fotografie în mod individual.

Fișierul server.js conține si funcția pentru crearea galeriei de imagini, dar și pe cea de arhivare a fișierelor. Arhiva este oferită utilizatorului spre descărcare.

62

index2.html Fișierul index2.html conține elementele paginii web care oferă utilizatorului posibilitatea de a încărca mai multe fișiere de tip imagine. Odată apăsat butonul de Upload, aceste fișiere sunt încărcate pe server și editate folosind setările filtrelor pe care utilizatorul le-a ales în etapa precedentă (atunci când a realizat editarea unei fotografii folosind editorul de pe partea de tip web client).

Elementul principal al paginii este reprezentat de formularul de upload al fișierelor (Form File Upload). Acest formular este unul simplu și conține două butoane: butonul de alege al fișierelor și cel de încărcare pe server a acestora.

FilterServer.js Acesta este fișierul care găzduiește liniile de cod corespunzătoare filtrelor aplicabile asupra imaginilor. Este necesară apelarea unei singure funcții pentru editarea fotografiilor (funcția Filters.editImage()), deoarece toate filtrele sunt conținute de aceasta.

Odată apelată funcția Filters.editImage(), aceasta transformă imaginea într-o matrice ce conține valorile pixelilor. Apoi, se trece la aplicarea secvențială a tuturor filtrelor. Valorile intensității cu care trebuie aplicate filtrelor se regăsesc într-o variabilă vectorială care a fost creată odată cu terminarea editării imaginii pe partea de tip web client. Această variabilă a fost trimisă către server folosind o cerere de tip ajax. Funcția care realizează această cerere este prezentată mai jos:

După ce filtrele au fost aplicate, matricea ce conține noile valori ale tuturor pixelilor este transformată din nou în imagine. Această nouă imagine va fi salvată într-un folder specificat dinainte. Funcția care face această transformare este următoarea:

63

DESIGN RECEPTIV Responsive web design sau RWD (designul web receptiv) este o abordare a designului web care face ca paginile web să fie afișate corect pe o varietate de dispozitive și dimensiuni ale ferestrelor sau ale ecranului. Conținutul, designul și performanța sunt necesare pe toate dispozitivele pentru a asigura utilitatea și satisfacția.

Un site proiectat cu RWD adaptează aspectul la mediul de vizualizare prin utilizarea unor grile fluide, bazate pe proporții, imagini flexibile, interogări media CSS3, o extensie a regulii @media, în următoarele moduri: • Conceptul grilei fluide presupune ca dimensionarea elementelor de pagină să fie în unități relative, cum ar fi procentele, decât în unități absolute precum pixelii sau punctele.

• Imaginile flexibile sunt, de asemenea, dimensionate în unități relative, astfel încât să le împiedice să se afișeze în afara elementelor care le conțin.

64

• Interogările media permit paginii să utilizeze diferite reguli de stil CSS pe baza caracteristicilor dispozitivului pe care este afișat site-ul, de ex. lățimea suprafeței de redare (lățimea ferestrei browserului sau dimensiunea fizică a afișajului).

• Formatele receptive se ajustează automat și se adaptează la orice dimensiune a ecranului dispozitivului, indiferent dacă este vorba despre un desktop, un laptop, o tabletă sau un telefon mobil.

Design-ului web receptiv a devenit foarte important deoarece volumul traficului mobil reprezintă acum mai mult de jumătate din traficul total de internet.

Prin urmare, Google a anunțat compania Mobilegeddon în 2015 și a început să sporească ratingurile site-urilor care sunt prietenoase cu dispozitivele mobile dacă s-a realizat o căutare de pe un dispozitiv mobil. Designul web receptiv este un exemplu de plasticitate a interfeței cu utilizatorul. În aplicația de față este folosită, de asemenea, abordarea designului web receptiv. Acest lucru a presupus dimensionarea cu valori relative a imaginilor, dar și a celorlalte elemente. Prin folosirea interogărilor media, pentru ecranele a căror lățime este mai de 800 pixeli, aplicația va afișa o structură complet diferită. Aceasta este mai simplă și mult mai ușor de utilizat pe dispozitivele mobile inteligente.

REZULTATE È&#x2DC;I CONCLUZII 04

Îmbinarea tehnologiilor de proiectare web cu formulele matematice a dus la proiectarea unei aplicații foarte utile în domeniul procesării digitale a imaginilor. Designul web receptiv, dar și structura simplă a paginilor fac ca experiența de utilizare să fie una plăcută.

Proiectul este o continuare a lucrării „Aplicație web client pentru prelucrarea imaginilor” susținută de către autor la examenul de licență. Așadar, cunoștințele despre Javascript, CSS și HTML dobândite atunci au fost aprofundate pentru a putea dezvolta o aplicație superioară din punct de vedere al aplicabilității. Pentru a transforma lucrarea dintr-o aplicație de tip web client într-una de tip web server a fost necesară o documentare atentă asupra platformei de dezvoltare cu sursă deschisă, Node JS. Rescrierea unei părți din codul aplicației de la licență, dar și scrierea noilor linii de cod pentru partea de prelucrare a imaginilor pe server au reprezentat alte provocări îndeplinite cu succes.

Realizarea lucrării s-a făcut pe etape. Prima etapă a constat în implementarea codului pentru crearea serverului local și realizarea conexiunii cu partea de tip web client.

A urmat apoi proiectarea instrumentului de încărcare a imaginilor și stocarea acestora într-un folder de pe server. Reconstruirea librăriei de filtre, definirea funcțiilor de transformare și editare a imaginilor și apoi reconstruire acestora folosind noua matrice de pixeli au reprezentat următoarele etape în proiectarea aplicației. O ultimă etapă a reprezentat-o crearea galerie de imagini (folosind imaginile editate) și apoi arhivarea fișierelor pentru ca utilizatorul să le poată descărca cu ușurință. Arhiva are extensia .zip.

66

Aplicația este de tip web server, deci întregul script este executat la distanță, pe un server. Acest lucru înseamnă că nu se bazează pe resursele hardware ale utilizatorului, ci doar pe puterea de calcul a serverului.

Prin folosirea designului web receptiv, pagina web devine disponibilă pentru toate dispozitivele inteligente. Pentru ușurința în utilizare, aceasta are și o interfață mai simplă, proiectată pentru tabletele sau telefoane cu un ecran a cărui lățime este mai mică de 800 pixeli. Sursa fotografiilor încărcate de către utilizator este locală, putând fi folosite chiar fotografii realizate cu camera de fotografiat a telefonului/tabletei.

Scopul principal al acestei lucrări a fost proiectarea unui produs cu scop oarecum comercial, destinat îmbunătățirii și înfrumusețării fotografiilor.

Cu siguranță, însă, acesta poate fi folosit și în scopuri științifice, cum ar fi procesarea imaginilor cu caracter medical. Tocmai din acest motiv au fost implementate și o serie de filtre, precum filtrul Sobel, filtre pentru estomparea și accentuarea contururilor sau pentru egalizarea histogramei.

67

BIBLIOGRAFIE

Freeman M. Manual de fotografie digitalÄ&#x192;. Litera, 2010.

Andreas Koschan, Mongi Abidi Digital Color Image Processing. John

Wiley & Sons, Inc., 2008.

Wilhelm Burger, Mark J. Burge Digital Image Processing: An Algorithmic

Introduction Using Java. Springer-Verlag London 2008, 2016.

Duckett J. Javascript & jQuery. John Wiley & Sons, Inc., 2014.

Collins M. Pro HTML5 with CSS, JavaScript, and Multimedia. Apress, 2017.

Simon Sarris HTML5 Unleashed. Pearson Education, Inc., 2014 Anisha Swain Noise in Digital Image Processing (2018) [online].

Disponibil la: https://medium.com/image-vision/noi se-in-digital-image-processing-55357c9fab71

[Accesat la 15 iulie 2019].

Haverbeke M. Eloquent JavaScript: A Modern Introduction to

Programming (2014) [online]. Disponibil la: http://eloquentjavascript.net/Eloquent_JavaScript.pdf.

[Accesat la 15 iulie 2019].

Greg Cope Kernels in Image Processing [online]. Disponibil la: https:// www.naturefocused.com/articles/photography-ima

ge-processing-kernel.html [Accesat la 15 iulie 2019].

Node.js Tutorials [online]. Disponibil la: https://www.tutorialsteacher.

com/nodejs/nodejs-tutorials [Accesat la 15 iulie 2019].

68

ANEXE A

SCRIPT SERVER.JS var express = require(‘express’); var multer = require(‘multer’); var bodyParser = require(‘body-parser’); var app = express(); var setarifiltre = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; app.use(express.static(__dirname + ‘/public’)); var fs = require(‘fs’); eval(fs.readFileSync(‘Public/FilterServer.js’) + ‘’); app.get(“/”, function(req, res) { res.sendFile(__dirname + “/index.html”); }); app.get(“/”, function(req, res) { res.sendFile(__dirname + “Public/index2.html”); }); var Storage = multer.diskStorage({ destination: function(req, file, callback) { callback(null, “./Images”); }, filename: function(req, file, callback) { callback(null, file.originalname); } }); var upload = multer({ storage: Storage }).array(“imgUploader”, 3); app.get(“/”, function(req, res) { res.sendFile(__dirname + “/index.html”); }); app.post(“/api/Upload”, function(req, res) { upload(req, res, function(err) { var files = []; var path = require(‘path’); var dirPath = ‘./Images’; fs.readdir(dirPath, function(err, list) { if (err) throw err; for (var i = 0; i < list.length; i++) {

70

files.push(list[i]); } console.log(files); for (var i = 0; i < files.length; i++) { Filters.editImage(files[i]); } }); app.set(‘views’, __dirname + ‘/views’); app.set(‘view engine’, ‘ejs’); app.use(express.static(‘./’)); app.use(‘/gallery’, require(‘node-gallery’)({ staticFiles: ‘resources/photos’, urlRoot: ‘gallery’, title: ‘Example Gallery’, render: false // }), function(req, res, next) { return res.render(‘gallery’, { galleryHtml: req.html }); }); if (err) { return res.end(“Something went wrong!”); } }); }); app.post(“/api/Archive”, function(req, res) { var zipper = require(‘zip-local’); zipper.sync.zip(“./resources/photos/”).compress(). save(“views/Images.zip”); }); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post(‘/ajaxRoute’, (req, res) => { console.log(req.body) setarifiltre = req.body; res.status(200).json({ msg: ‘OK’ }); }); app.listen(2000, function(a) { console.log(“Listening to port 2000”); });

71

SCRIPT INDEX2.HTML <html id=”html2” xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta charset=”utf-8” /> <title>Editor foto</title> <script src=”Scripts/jquery-3.1.1.min.js”></ script> <script src=”Scripts/jquery.form.min.js”></script> <link rel=”stylesheet” href=”style.css”> <script> $(document).ready(function () { var options = { beforeSubmit: showRequest, success: showResponse };

});

$(‘#frmUploader’).submit(function () { $(this).ajaxSubmit(options); return false; });

function showRequest(formData, jqForm, options) { alert(‘Uploading is starting.’); return true; } function showResponse(responseText, statusText, xhr, $form) { alert(‘status: ‘ + statusText + ‘\n\ nresponseText: \n’ + responseText ); } </script> </head>

72

<body id=”body2”> <form class=”centered-content” id=”frmUploader” enctype=”multipart/form-data” action=”api/Upload/” method=”post”> <input type=”file” name=”imgUploader” id=”imgUploader” class=”centered-content” multiple /> <input type=”submit” name=”submit” id=”btnSubmit” value=”Upload”/></label> </form> <br> <button type=”button” class=”btn btn-secondary btn-lg btn-block” onclick=”location.href = ‘http://localhost:2000/ gallery/’;” id=”mergi” formaction=”api/Archive/”>Vezi fotografiile editate</button> </body> <script type=”text/javascript” src=”/FilterServer.js”></script> <script type=’text/javascript’> let ele = document.getElementById(“imgUploader”); var numFiles = ele.files.length; </script> </html>

73

SCRIPT FILTERSERVER.JS Filters = {}; Filters.editImage = function(imagename){ var pixelUtil = require(‘pixel-util’); Canvas = require(‘canvas’); var image = new Canvas.Image(); pixelUtil.createBuffer(‘Images/’+imagename). then(function(buffer){ image.src = buffer; canvas = Canvas.createCanvas(image.width, image.height); var ctx = canvas.getContext(‘2d’); ctx.drawImage(image, 0, 0); var d1 = ctx.createImageData(100, 100); d1 = ctx.getImageData(0, 0, canvas.width, canvas.height); var d = d1.data; var adjustment = setarifiltre[0]; var adjustment2 = setarifiltre[1]; var f = (259 * (adjustment2 + 255)) / (255 * (259 - adjustment2)); var adjustment3 = setarifiltre[2]; var adjustment4 = setarifiltre[3]; for (var i = 0; i < d.length; i += 4) { d[i] = Filters.Truncate(d[i] + adjustment); d[i + 1] = Filters.Truncate(d[i + 1] + adjustment); d[i + 2] = Filters.Truncate(d[i + 2] + adjustment); d[i] = Filters.Truncate(f * (d[i] - 128) + 128); d[i + 1] = Filters.Truncate(f * (d[i + 1] 128) + 128); d[i + 2] = Filters.Truncate(f * (d[i + 2] -

74

128) + 128); if (d[i] > 128) d[i] = Filters.Truncate(d[i] + ((d[i] / 255) * adjustment3)); if (d[i + 1] > 128) d[i + 1] = Filters.Truncate(d[i + 1] + ((d[i + 1] / 255) * adjustment3)); if (d[i + 2] > 128) d[i + 2] = Filters.Truncate(d[i + 2] + ((d[i + 2] / 255) * adjustment3)); if (d[i] < 128) d[i] = Filters.Truncate(d[i] + ((255 / (d[i] + 255)) * adjustment4)); if (d[i + 1] < 128) d[i + 1] = Filters.Truncate(d[i + 1] + ((255 / (d[i + 1] + 255)) * adjustment4)); if (d[i + 2] < 128) d[i + 2] = Filters.Truncate(d[i + 2] + ((255 / (d[i + 2] + 255)) * adjustment4)); }; var data2 = new Array(d.length); for (var i = 0; i < d.length; i += 1) { data2[i] = d[i]; } for (var i = 0; i < data2.length; i += 4) { var data = Filters.convertRGGtoHSL(data2[i], data2[i + 1], data2[i + 2]); data2[i] = data[0]; data2[i + 1] = data[1]; data2[i + 2] = data[2]; } var var var for

}

adjustmenta = setarifiltre[4]; adjustmentb = setarifiltre[5]; adjustmentc = setarifiltre[6]; (var i = 0; i < data2.length; i += 4) { data2[i] += -adjustmenta; data2[i + 1] += adjustmentb / 200; if (data2[i + 1] < 0) data2[i + 1] = 0; data2[i + 2] += adjustmentc;

75

for (var i = 0; i < data2.length; i += 4) { var data = Filters.convertHSLtoRGB(data2[i], data2[i + 1], data2[i + 2]); data2[i] = data[0]; data2[i + 1] = data[1]; data2[i + 2] = data[2]; } for (var i = 0; i < d.length; i += 1) { d[i] = data2[i]; } var red = setarifiltre[7]; var green = setarifiltre[8]; var blue = setarifiltre[9]; for (var i = 0; i < d.length; i += 4) { d[i] = Filters.Truncate(d[i] + red); d[i + 1] = Filters.Truncate(d[i + 1] + green); d[i + 2] = Filters.Truncate(d[i + 2] + blue); } function saveImage(filename, data){ var fs = require(‘fs’), PNG = require(‘pngjs2’).PNG; var img_width = d1.width; var img_height = d1.height; var img_data = Uint8ClampedArray.from(data) var img_png = new PNG({width: img_width, height: img_ height}) img_png.data = Buffer.from(img_data); img_png.pack().pipe(fs.createWriteStream(‘./resources/ photos/’+filename)) } saveImage(imagename, d); }); }; Filters.filterImage = function(filter) { var args = [this.editImage()]; for (var i = 2; i < arguments.length; i++) { args.push(arguments[i]); } return filter.apply(args); }; Filters.convertRGGtoHSL = function(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0;

76

} else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } }

return [h, s, l];

Filters.convertHSLtoRGB = function(h, s, l) { var r, g, b; if (s == 0) { r = g = b = l; } else { function hue2rgb(p, q, t) if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return if (t < 1 / 2) return if (t < 2 / 3) return t) * 6; return p; }

} }

var var r = g = b =

{ p + (q - p) * 6 * t; q; p + (q - p) * (2 / 3 -

q = l < 0.5 ? l * (1 + s) : l + s - l * s; p = 2 * l - q; hue2rgb(p, q, h + 1 / 3); hue2rgb(p, q, h); hue2rgb(p, q, h - 1 / 3);

return [r * 255, g * 255, b * 255];

Filters.Truncate = function(value) { if (value < 0) value = 0; if (value > 255) value = 255; return value; }

77