Aplicatie Pentru Analiza Si Gasirea de Solutii de Optimizare Pentru Aplicatii Web

Aplicație pentru analiza și găsirea de soluții de optimizare pentru aplicații web

Introducere

Capitolul 1: Prezentarea domeniului

Capitolul 2: Descrierea problemei abordate și a metodei de rezolvare propuse (10 pag)

Capitolul 3: Documentație tehnică (prezentarea aplicației, echipamentelor, algoritmilor, experimentelor etc. și a rezultatelor obținute, 25 pag) 6

3.1. Tehnologii software

3.2. Rezultate obținute

Capitolul 4: Concluzii și dezvoltări ulterioare (contribuții originale, domenii de utilizare posibile, comparații cu realizări similare – cu sublinierea avantajelor, performanțelor etc.-, alte aspecte relevante, 5 pag)

Bibliografie

1. Introducere (de ex.: justificarea alegerii temei, descrierea succintă a conținutului fiecărui capitol

2. Prezentarea domeniului din care face parte lucrarea

3. Descrierea problemei abordate și a metodei de rezolvare propuse

4. Documentație tehnică – prezentarea aplicației, echipamentelor, algoritmilor, experimen-telor etc. și a rezultatelor obținute

4.1. Echipamente utilizate

4.2. Tehnologii software

4.3 Rezultate obținute

5. Concluzii și dezvoltări ulterioare (contribuții originale, domenii de utilizare posibile, comparații cu realizări similare – cu sublinierea avantajelor, performanțelor etc.-, alte aspecte relevante)

7. Bibliografie

8. Anexe (cu fragmente de cod software sau/și diagrame sau alte elemente, dacă este cazul)

Introducere

World Wide Web-ul a devenit probabil cea mai utilizată metodă de comunicare și este cea mai folosită sursă de informații utilizată în zilele noastre. Fie ca vrem să trimitem un e-mail, să prezentăm o idee sau să vindem servicii sau produse, vom folosi cel mai probabil internetul.

Toate informațiile de care avem nevoie sunt prezente pe internet, magazine online de orice fel, site-urile companiilor, enciclopedii online, orice. Dacă ceva nu poate fi găsit pe internet, e ca și cum nu ar exista. Și cum altfel în secolul vitezei, toate aceste informații trebuie să fie accesate cât mai rapid posibil. O aplicație web trebuie să fie în primul rând rapidă, apoi organizată logic, plăcută din punct de vedere al design-ului și cât mai ușor de folosit de către utilizatori.

Lucrarea de față va face o analiză a aplicațiilor web din punct de vedere al vitezei cu care acestea pot fi accesate și utilizate și din punct de vedere al resurselor utilizate. Scopul este ca acestea să utilizeze cât mai puține resurse, implicit să fie cât mai rapide.

Noțiunea de optimizare este foarte des folosită în programare. Dar ce înseamnă de fapt a optimiza? Dicționarul explicativ al limbii române ne sugerează că optimizarea este un raționament care urmărește găsirea celei mai bune soluții pentru rezolvarea unei anumite probleme. În programare, optimizarea se referă la modificarea unui program astfel încât anumite componente ale sale să lucreze mai eficient sau să folosească mai puține resurse.

Factorul determinant pentru crearea unei astfel de aplicații este că majoritatea dezvoltatorilor web urmează regulile de bună practică, dar asta nu înseamnă că aplicația creată va fi optimă. De cele mai multe ori nu este.

În lucrarea de față vom analiza noțiunea de aplicație web optimă din punct de vedere al numărului de fișiere CSS și JavaScript și al numărului de imagini și dimensiunile lor. Cu cât o aplicație conține mai multe fișiere CSS, JavaScript și imagini, cu atât viteza sa de încărcare va fi mai mică, deci va fi mai puțin optimă. Ideal este ca o aplicație web să conțină un singur fișier CSS, un singur fișier JavaScript care să conțină toate script-urile necesare aplicației, iar imaginile să fie comprimate. De asemenea, fișierele CSS și JavaScript pot fi minifiate. Minifierea este procesul prin care sunt eliminate toate caracterele care nu sunt indispensabile codului sursă astfel încât funcționalitatea aplicației să nu fie schimbată. Acestea pot fi caractere white-space (spațiu), new-line (introduc o nouă linie în cod), comentarii.

– descriere capitole–

Capitolul 1: Prezentarea domeniului(10 pag – 3,5)

Lucrarea de față se încadrează în domeniul dezvoltării web. Dezvoltarea web reprezintă câteva etape pentru construirea, crearea și întreținerea unui site-web (aplicație web) care urmează a fi publicat pe internet. În ultimii ani, acest domeniu s-a extins tot mai mult, fapt care se datorează multitudinii de avantaje oferite: comunicare online, cumpărare de servicii și produse online, surse de informații din orice domeniu, reclame și marketing etc. Fără dezvoltare web, internetul nu ar exista.

Uneori există confuzie când termenii de design web și dezvoltare web sunt utilizați. Cele două noțiuni sunt interdependente dar totuși diferite. Designul web se referă la aspectul unui site, tot ceea ce utilizatorul vede pe ecran. Reprezintă interfața care face legătura dintre utilizator și partea de funcționalitate a site-ului. Necesită atât cunoștințe de programare, cât și cunoștințe de estetică. Acest domeniu mai poartă numele de dezvoltare front-end, adică tot ceea ce este vizibil. Asta include text, font-ul textului, alinierea textului, culoarea textului, a fundalului, dimensiune, imagini, butoane, link-uri, textbox-uri etc. Designul unei pagini trebuie să fie plăcut și să îl ajute pe utilizator să folosească aplicația cu cât mai multă ușurință. Până la urmă, primul lucru pe care un utilizator îl vede este aspectul site-ului.

Designul web determină dacă site-ul se adresează unui grup țintă de utilizatori și care sunt preferințele lor. De exemplu, design-ul unui site creat numai pentru utilizatori din domeniul afacerilor va fi diferit de unul care se adresează unui grup mai mare, cum ar fi un site de divertisment. Pentru partea de design web sunt folosite tehnologii precum HTML, CSS și JavaScript.

Dezvoltarea web este un termen mai larg. În anumite contexte, poate să includă și noțiunea de design web. Asta se întâmplă atunci când ne referim la tot ceea ce reprezintă crearea unui site. Alteori se referă doar la funcționalitatea aplicației, procesele care au loc în spatele ei, partea de back-end. Asta include evenimentele care să aibă loc la apăsarea diferitor butoane, procesarea informațiilor introduse de utilizator, accesul la baza de date în cazul în care informațiile sunt stocate într-o bază de date, configurarea serverului pe care aplicația va fi executată etc. Partea de back-end este un domeniu mult mai larg decât cea de front-end.

Pentru a asigura comunicarea dintre aplicație, baza de date și server, pentru partea de back-end sunt utilizate limbaje server-side cum ar fi PHP, Ruby, Python, Java, .NET. Pentru administrarea bazei de date pot fi folosite limbaje de management ale bazelor de date cum ar fi MySQL, Oracle sau SQL Server.

De cele mai multe ori, dezvoltatorul care se ocupă de partea de front-end are și câteva cunoștințe despre tehnologiile utilizate pentru back-end și vice-versa. Linia care delimitează cele două aspecte ale dezvoltarii web este de multe ori încălcată. Este recomandabil să fie așa pentru că este mai ușor pentru dezvoltatori sa colaboreze. În ceea ce privește proiectele mici, e posibil să existe un singur dezvoltator care să se ocupe și de partea de front-end, și de cea de back-end.

O soluție pentru cei care lucrează la proiecte foarte complexe este utilizarea de framework-uri. Există framework-uri orientate atât pe partea de front-end, cât și pe partea de back-end. Bootstrap este un exemplu de framework open-source pentru front-end care cuprinde librării HTML, CSS și extensii JavaScript. Opțiunile pe care le oferă pot fi modificate și utilizate în funcție de preferințele designer-ului web. Începând cu versiunea 2.0, Bootstap are un design responsive, adică în funcție de dispozitivul de pe care este accesat site-ul (PC, tabletă, telefon mobil), acesta își va modifica dinamic aspectul astfel încât să poată fi vizualizat corect de pe orice dispozitiv. Scopul este ca utilizatorul să nu fie nevoit să modifice dimensiunile paginii sau să o mute pentru a vedea anumite componente care nu încap în ecran. Boostrap asigură rearanjarea corectă din punct de vedere logic a elementelor în pagină astfel încât vizualizarea ei să fie cât mai simplă.

Au fost dezvoltate framework-uri și pentru limbajele pentru back-end. Symfony, Zend, Cake PHP și altele asemanatoare lor sunt framework-uri create pentru dezvoltatorii care aleg să lucreze cu limbajul PHP; cei care folosesc Ruby pot alege Ruby on Rails, Grape, Lotus; cei care folosesc Python pot alege Django, Flask sau Pyramid. Scopul lor este de a oferi proiectului o structură pe baza căreia dezvoltatorul să poată construi site-ul în funcție de cerințe. Asta înseamnă că aplicația poate fi creată într-un timp mai scurt, este mai ușor de întreținut, iar bucățile de cod repetitive sunt în număr mai redus. Urmărind structura oferită de framework, codul este ordonat, iar modificările ulterioare sunt mai ușor de facut.

Un dezavantaj al framework-urilor este că nu sunt potrivite pentru proiectele mici, fiind foarte complexe. Având foarte multe componente, proiectele create cu framework-uri au dimensiuni mari și sunt lente comparativ cu un site-urile care conțin numai fișierele care le sunt indispensabile.

Bineînțeles, există și variante de creare a aplicațiilor web care nu implică scrierea de cod. WCMS (Web Content Management System) reprezintă un set de procese și tehnologii care îi ajută pe cei cu mai puține cunoștințe în domeniul dezvoltării web să creeze aplicații web. Sunt proiecte open-source, deci pot fi modificate în funcție de cerințe. De obicei este nevoie de ajutorul unui dezvoltator web pentru a seta și adăuga funcționalități, dar aplicația poate fi întreținută cu ușurință de persoane mai puțin pregătite.

WCMS-urile au o interfață din care se pot crea toate componentele aplicației web fără a fi nevoie de cod. În ceea ce privește partea de front-end a site-ului, există o varietate de template-uri disponibile online, unele dintre ele fiind chiar gratuite. Dezvoltatorul are posibilitatea să schimbe anumite proprietăți cum ar fi culorile din pagină, font-ul text-ului, aranjarea box-urilor, deci template-urile pot fi personalizate. WCMS-ul se ocupă de toată partea de funcționalitate din back-end. Singurul lucru care trebuie făcut este adăugarea de conținut, sarcină care cu puțină pregătire poate fi făcută de oricine. Adăugarea conținutului are mai multe etape: crearea, editarea, publicarea și apoi administrarea.

WCMS-urile sunt dezvoltate într-o multitudine de limbaje de programare: Java, ASP.NET, Perl, PHP, Python, Ruby on Rails. Cele mai populare și puternice astfel de WCMS-uri sunt Drupal, Joomla, WordPress.

Ca și în cazul framework-urilor, aplicațiile web realizate cu CMS-uri sunt complexe și nu e recomandabil să fie folosite pentru proiecte mici. De obicei, consumă o cantitate mai mare de resurse de pe server comparativ cu o aplicație care nu utilizează nici CMS, nici framework.  

Problema care se pune este cum poate fi o aplicație optimă din punct de vedere al resurselor consumate și al vitezei cu care sunt accesate componentele sale. Așa cum am menționat mai devreme, în cazul proiectelor mici, utilizarea de framework-uri și CMS-uri nu este o variantă optimă. Cea mai bună variantă este ca dezvoltatorul să creeze numai fișiere care îi sunt indispensabile executării corecte a aplicației.

Varianta de optimizare propusă în prezenta lucrare este de a reduce numărul și dimensiunea fișierelor utilizate pentru realizarea părții de front-end a aplicației și de a utiliza algoritmi de compresie pentru imagini.

Penru a optimiza partea de front-end, este nevoie de mai putine resurse si mai putin timp. Reducerea intarzierilor introduse de back-end implica modificarea arhitecturii proiectlui, modificarea codului, gasirea si optimizareasecventelor de cod critice, adaugarea sau modificarea componentelor hardware, distribuirea bazelor de date etc. Astfel de proiecte pot dura saptamani sau chiar luni si este necesaria interventia directa a unui dezvoltator web.

Imbunatatirile despre care vom discuta pe partea de front-end sunt o extensie a bunelor practici. Recomandabil este ca o aplicație web să conțină un singur fișier CSS și un singur fișier JavaScript. Pe lângă asta, cele două tipuri de fișiere pot fi minifiate. Asta înseamnă că din cod pot fi extrase caracterele inutile (spații albe, caractere new-line, comentarii), fără a schimba funcționalitatea fișierelor.

In cartea sa, Steve Souders a explicat care e regula de aur in ceea ce priveste optimizarea aplicatiilor web. Dezvoltatorii trebuie sa fie constienti de faptul ca doar 10-20% din timpul in care o pagina se incarca este alocat incarcarii documentului HTML, iar 80-90% din timp este alocat incarcarii componentelor paginii cum ar fi imagini, scripturi, foi de stiluri.

Făcând câteva investigații în domeniu, am ajuns la adresa websiteoptimization.com. Site-ul a fost realizat de Andrew B. King, cel care a scris și o carte care are același nume ca și site-ul. Website Optimization, LLC este defapt o companie de consultanță care oferă servicii de îmbunătățire a performanțelor web, marketing și optimizare. Site-ul în sine oferă enorm de multe informații în domeniu și este foarte stufos. Andrew King descrie în detaliu serviciile oferite de compania sa și de ce anume le recomandă. De asemenea, site-ul are și un tool care poate analiza aplicații web și oferă câteva recomandări. Tool-ul caută toate componentele aplicației, dimensiunea lor, viteza cu care se încarcă exprimată în secunde și apoi face o comparație cu niște valori standard. Totuși, acest tool nu reprezintă esența site-ului, fapt pentru care este destul de greu de găsit în multitudinea de informații. Ceea ce se recomandă defapt este solicitarea serviciilor companiei pentru servicii de optimizare și marketing.

O variantă dedicată developerilor web este cssminifier.com. Acest site oferă posibilitatea unui dezvoltator să poata minifia codul CSS. Cu cât codul conține mai puține caractere inutile (spații albe, caractere new-line, comentarii), cu atât dimensiunea lui este mai mică, va consuma mai puține resurse și implicit va putea fi accesat mai repede. Dezvoltatorul introduce într-un textarea codul CSS pe care îl dorește optimizat, iar aplicația îl va supune unui proces de minifiere în urma căruia codul va avea o dimensiunea mai mică. Apoi, dezvoltatorul va înlocui codul din fișierul CSS original cu codul minifiat de aplicație. Din păcate, aceasta este o analiză numai pentru fișierele CSS și se poate face numai atunci când dezvoltatorul are acces la sursele site-ului pe care vrea să îl analizeze (fie deține proiectul, fie poate extrage fișierele CSS din pagină prin inspectare).

O altă aplicație asemănătoare este refresh-sf.com care realizează operația de minifiere atât pentru fișierele CSS, cât și pentru cele JavaScript și HTML. Aplicația folosește 3 librării diferite pentru cele 3 tipuri de fișiere, librării care pot fi găsite și utilizate fiind open-source sub licență MIT. La fel ca și în cazul cssminifier.com, se vor introduce bucăți de cod în aplicație care vor fi minifiate. Apoi, dezvoltatorul poate înlocui codul din proiect cu varianta sa minifiată.

Capitolul 2: Descrierea problemei abordate și a metodei de rezolvare propuse (10 pag)

Problema care se pune este cum pot fi aplicatiile web optimizate din punct de vedere al performantelor, mai precis, cum pot deveni mai rapide si sa consume de cat mai putine resurse.

Este un lucru binecunoscut faptul ca utilizatorii devin frustrati atunci cand timpul de asteptare pentru incarcarea unei pagini depaseste 8 secunde. Aceasta valoare poate sa difere in functie de anumite caracteristici ale utilizatorului cum ar fi varsta, experienta folosirii internetului si scopul pentru care il folosesc la un moment dat.

Imediat dupa impactul vizual, urmatorul aspect din punct de vedere al importantei este viteza cu care se incarca paginile aplicatiei. Utilizatorii pot sa navigheze in site cu rapiditate, pot gasi mai repede informatiile pe care le cauta, iar atitudinea lor fata de site este una pozitiva.

Intr-o fractiune de secunda, utilizatorii isi formeaza o prima impresie despre site si decid asupra credibilitatii informatiilor pe care le contine. Aceasta prima impresie nu se schimba prea mult in timp. O viteza mare de accesare poate creste profitul afacerii pe care o descrie aplicatia web, scadea costurile si creste satisfactia utilizatorilor.

Pentru a realiza acest lucru, solutiile propuse in prezenta lucrare sunt: optimizarea imaginilor, optimizarea fisierelor CSS si JavaScript din punct de vedere al vitezei de executie si dimensiunii.

Regula de aur in ceea ce priveste performantele web spune ca 80-90% din timpul alocat incarcarii unei pagini este consumat facand cereri HTTP pentru componentele din pagina. Prin urmare, o varianta foarte simpla de reducere a timpului de incarcare este de a reduce numarul de request-uri HTTP, deci de a reduce numarul de componente.

JavaScript si CSS sunt tehnologii utilizate de majoritatea aplicatiilor web existente. Dezvoltatorii front-end trebuie sa aleaga intre a crea script-urile si foile de stil in interiorul codului HTML sau de a le externaliza. In general, utilizarea de script-rui si foi de stil externe este o varianta mai buna din punct de vedere al performantei. Exista dezvoltatori care modularizeaza codul impartindu-l in mai multe fisiere cu dimensiune mai mica. Din punct de vedere logic, astfel de fisiere fac intretinerea aplicatiei mai simpla, dar ii scad performantele din cauza numarului mare de request-uri HTTP.

Totusi, nu se recomanda ca script-urile sa fie combinate cu foile de stil. Se recomanda ca mai multe script-uri sa fie combinate intr-un singur script si mai multe foi de stil sa fie combinate intr-o singura foaie de stil.

2.1 Optimizarea imaginilor

Producatorii de camere digitale se straduiesc sa creeze camere capabile sa faca fotografii cu cat mai multi megapixeli. Din aceasta cauza, imaginile folosite pentru realizarea aplicatiilor web au o dimensiune din ce in ce mai mare, precum si o rezolutie mare. Exista cazuri cand cand o imagine care ocupa un spatiu mic in site sa aiba o dimensiunea foarte mare, nefiind optimizata conform utilizarii ei. O varianta pentru acest lucru este ca imaginile sa fie redimensionate si comprimate.

Chiar si simpla schimbare a formatului imaginii poate duce la scaderea dimensiunii ei, fara a-i altera prea mult calitatea. Vom discuta in continuare despre metode de compresie si diferentele dintre diverse formate pentru imagini.

2.1.1. Compresia fara pierderi (lossless)

Compresia fara pierderi nu implică pierderea de informație, imaginile inițiale putand fi refăcute exact din cele comprimate. Cele mai uitlizate formate care folosesc algoritmi de compresie fara pierderi sunt BMP, TIFF, GIF, PNG.

Formatul BMP reda informatia grafica sub forma unei matrice, fiecare element al matricei reprezentand un pixel unic dintr-o imagine, iar valoarea lui este codul de culoare al pixelului. Reprezentarea imaginii este facuta in mod necomprimat, deci dimensiunea fisierului BMP este uriasa.

Formatul TIFF este destinat imaginilor de inalta calitate, poate contine chiar o insiruire de imagini precum fisierele de tip PDF prin utlizarea de identificatori. TIFF poate utiliza atât algoritmi de compresie fara pierderi, cu pierderi sau poate stoca imagine necomprimata. Acest lucru îl recomanda pentru domenii în care calitatea imaginii primeaza.

Formatele TIFF si BMP nu sunt potrivite pentru a fi folosite in cadrul aplicatiilor web, avand dimensiuni prea mari.

Formatul PNG reprezinta un bun compromis intre calitate si dimensiune, fiind destinat folosirii in retele de comunicatie. Se recomanda a fi folosit pentru imagini care contin text, linii drepte si contururi bine definite. Ofera posibilitatea adaugarii de transparenta unei imagini.

Formatul GIF ofera simplitate, dimensiune foarte mica a fisierelor si suport pentru animatie. Are o paleta de culori foarte redusa deci nu se recomanda a fi folosit in cazul imaginilor la care se doreste pastrarea aspectului cat mai aproape de original.

In ciuda avantajelor oferite de formatul GIF, o imagine PNG poate avea dimensiuni cu 30% mai mici decat o imagine GIF cu aceleasi setari, datorita algoritmului de compresie superior folosit de formatul PNG.

2.1.2. Compresia cu pierderi (lossy)

Compresia cu pierderi duce la o rata de compresie mai mare, dar duce de asemnea la pierderea de informatie. Imaginile initiale nu mi pot fi refacute din cele comprimate din cauza pierderii de informatie. Compresia cu pierderi se bazeaza pe anumite caracteristici ale ochiului uman cum ar fi sensibilitatea scazuta la variatiile mici de culoare si la lumina de inalta frecventa.

Formatul JPEG este unul dintre cele mai populare formate grafice comprimate. Ofera un raport bun compresie/calitate, posibilitatea de alegere a ratei de compresie si o dimensiune redusa a fisierelor. Nu se recomanda utilizarea formatului JPEG pentru imagini care contin text, linii drepte si contururi bine definite din cauza posibiltatii aparitiei de artefacte.

Concluzie

Prin urmare, cele doua formate recomandate pentru a fi folosite la realizarea de aplicatii web sunt PNG si JPEG. Daca se doreste o dimensiune cat mai mica a fisierelor si nu se tine cont de calitatea imaginii, se recomanda folosirea formatului JPEG. Daca imaginile contin contururi si linii drepte, se recomanda folosirea PNG care pastreaza o calitate mai buna a imaginii.

2.2 Optimizarea fisierelor CSS si JavaScript

O alegere pe care o au de facut toti dezvolvatorii web este daca sa includa foile de stil si script-urile in codul HTML sau sa creeze fisiere separate .css si .js. Vom analiza cateva avantaje si cateva dezvantaje ale ambelor variante.

In teorie, includerea lor in codul HTML duce la o viteza mai mare a incarcarii paginii. Asta e din cauza faptului ca se fac mai putine request-uri HTTP. Chiar daca foile de stil si script-urile externe sunt descarcate in paralel, numarul mai mare de request-uri HTTP face incarcarea paginii mai lenta.

In ciuda acestui lucru, in practica, folosirea foilor de stil si a script-urilor externe duce la o incarcare mai rapida a paginilor. Iar asta e datorita faptului ca aceste fisiere pot fi pastrate in cache-ul browserului folosit. Web cache-ul pastreaza temporar copii ale componentelor aplicatiilor care au fost accesate recent in browser pentru ca la o accesare ulterioara acestea sa fie incarcate direct din cache, nu de pe server, ceea ce duce la o viteza mai mare de incarcare.

In functie de numarul de vizualizari per utilizator, dezvoltatorul poate decide daca sa includa script-urile si foile de stil in codul HTML sau sa creeze fisiere externe pentru ele. Daca utilizatorii revin si acceseaza aplicatia la intervale mari de timp, cel mai probabil fisierele CSS si JavaScript au fost sterse din cache si este necesara reincarcarea lor. Prin urmare, in acest caz, este recomandata varianta cu script-uri si foi de stil interne. Pe de alta parte, daca utilizatorii revin la intervale scurte de timp, este recomandata varianta cu fisiere externe care vor fi incarcate in cache.

In cazul in care optiunea aleasa este cea de a externaliza foile de stil si script-urile, se recoamanda ca acestea sa fie combinate intr-un singur fisier care sa contina toate foile de stil si un sigur fisier care sa contina toate script-urile.

Aceasta solutie are avantajul ca, la accesarea aplicatiei, se face un singur request HTTP. Un dezavantaj este ca atunci cand un singur script este modificat, trebuie actualizat intregul fisier, ceea ce face ca fisierul stocat in cache-ul browserelor utilizatorilor sa devina invalid. Aceasta alternativa este recomandata pentru aplicatiile cu un numar mare de vizualizari.

Urmatorul pas in optimizarea fisierelor externe este minifierea codului pe care il contin. Minifierea este procesul prin care sunt eliminate caracterele care nu sunt indispensabile si nu schimba aplicatia. Astfel, este redusa dimensiunea lor, imbunatatind timpul de incarcare. Atunci cand codul este minifiat, toate comentariile sunt inlaturate, precum si caracterele whitespace (spatiu, newline sau tab). Este imbunatatita performanta timpului de raspuns datorita dimensiunii reduse a fisierului.

In general, rezultatele minifierii unui fisier JavaScript sunt mai impresionante decat rezultatele minifierii unui fisier CSS. Asta este pentru ca fisierele CSS au in general mai putine comentarii si mai putine caractere whitespace decat fisierele JavaScript.

Capitolul 3: Documentație tehnică

3.1. Tehnologii utilizate

PHP

PHP este principalul limbaj de programare folosit pentru realizarea aplicației. Așa cum spune și definiția lui, PHP (Hypertext Preprocessor) este un limbaj de scripting de uz general, cu cod-sursă deschis (open source), utilizat pe scară largă și care este potrivit în special pentru dezvoltarea aplicațiilor web. Este folosit pentru dezvoltarea web server-side, caz în care el rulează pe un server web. Există versiuni disponibile pentru majoritatea serverelor web și pentru toate sistemele de operare majore. Ceea ce face ca PHP să fie diferit de limbajul JavaScript este că fisierele PHP sunt executate pe server, generând cod HTML care este apoi trimis către client. Clientul va primi rezultatele rulării acelui script, fără a putea cunoaște codul-sursă ce stă la bază.

PHP poate fi folosit și în colaborare cu framework-uri special create pentru el cum ar fi: Zend, Symfony, CakePHP, Laravel și altele. Scopul lor este de a ajuta dezvoltatorul să realizeze aplicațiile mai repede și să le poata întreține cu ușurință. Ele oferă o structură proiectelor realizate în PHP care este potrivită în special pentru proiectele mai complexe.

2.  CSS

CSS (Cascading Style Sheets) este un standard de formatare al componentelor unui document HTML. Stilurile pot fi definite în fișiere externe documentului HTML căruia se adresează sau pot fi incluse în acesta. Împreună cu JavaScript, CSS este o tehnologie folosită pentru a crea interfețe cu utilizatorul plăcute din punct de vedere vizual. Înainte de apariția CSS, toate atributele de prezentare (font-uri, dimensiuni, culori, alinieri etc) erau înglobate în tag-urile HTML ceea ce le făcea mai greu de modificat, predispuse la erori și îngreunau mult documentul HTML.

Au fost dezvoltate framework-uri și pentru CSS cum ar fi Foundation, Blueprint, Bootstrap. Acestea sunt librării care permit o stilizare mai ușoară a paginilor și o standardizare a acestora. Acestea sunt introduse în proiect ca fișiere .css si cuprind câteva opțiuni de stilizare pe care dezvoltatorul le poate folosi și modifica.

3.  JavaScript

JavaScript este un limbaj de programare folosit pentru a oferi dinamică paginilor web. Dezvoltatorii web pot îngloba în paginile HTML script-uri pentru diferite activități cum ar fi verificarea datelor introduse într-un formular, definirea evenimentelor atunci cand este apăsată o anumită tastă sau un buton al mouse-ului, crearea de efecte animate. De asemenea, poate fi utilizat pentru a transmite informații despre interesele utilizatorilor. Aplicațiile web folosesc frecvent acest avantaj pentru afișarea reclamelor și rezultatelor căutărilor conform informațiilor deja cunoscute despre utilizatori.

Framework-ul Bootstrap conține, pe lângă librariile CSS, și librării pentru JavaScript care ușurează dezvoltarea front-end a unei pagini web, oferind funcționalități pentru partea dinamică a paginii (butoane, carusele etc).

4. Ajax

Ajax (Asynchronous JavaScript and XML) reprezintă un grup de tehnologii de dezvoltare web care permit ca o secțiune a unei pagini web să poată fi actualizată asincron cu informații primite de la server fără ca pagina să fie actualizată cu totul. Tehnologiile pe care se bazează sunt obiecte XMLHttpRequest, JavaScript, CSS, XML. În ciuda numelui, nu este necesară mereu folosirea documentelor XML și nici cererile nu trebuie mereu executate asincron.

5. Wamp

Numele Wamp este un acronim pentru Windows, Apache, MySQL si PHP/Python/PERL. Asa cum reiese si din nume, Wamp este un set de aplicatii care permit dezvoltarea si testarea de aplicatii web inainte ca acestea sa fie incarcate pe un server web real. Wamp le ofera dezvoltatorilor cele patru elemente esentiale ale unui server web: un sistem de operare (Windows), un server web(Apache), o baza de date (MySQL) si un limbaj de programare (PHP sau Python sau PERL).

3.3.  Prezentarea aplicației

Aplicația web realizată poartă numele de Opticraft și își propune să găsească soluții de optimizare pentru alte aplicații web. Optimizarea are loc numai la nivel de front-end, implicând numai fișierele de tip CSS, JavaScript și imagini.

Interfața a fost realizată folosind framework-ul Boostrap. Boostrap conține librării care ajută la formatarea mai ușoară a elementelor de interfață. În cazul Opticraft, elementele au fost background-ul, titlul, textbox-ul și butonul OK.

Textbox-ul conține deja valoarea „http://”, astfel încât să sugereze că orice URL care nu începe cu ea, nu va fi acceptat. Sunt acceptate URL-urile de tipul „https://”. Înainte de începerea oricărui proces, se verifică dacă URL-ul introdus este unul valid. Asta înseamnă că trebuie să înceapă cu „http://” sau „https://”, trebuie să aibă un nume și un domeniu. Se acceptă ca după domeniu să existe o cale care să sugereze că se dorește făcută o analiză doar pe o pagină dintr-un site. De asemenea, URL-ul poate să aibă forma unui IP.

Pentru această analiză am folosit funcții regex (expresii regulate) din PHP. Expresiile regulate sunt un set de caractere care definesc un tipar pentru variabile de tip string. Se compară expresia regulată cu string-ul, iar rezultatul determină dacă string-ul respectă tiparul stabilit.

Primul parametru al funcției preg_match() este expresia regulată definită ca un șir de caractere, iar al doilea parametru este URL-ul care trebuie verificat. Daca URL-ul se încadrează în tiparul stabilit de expresia regulată, acesta este acceptat și se trece mai departe la analiza aplicației web. Dacă URL-ul nu se încadrează în tipar, este generată o eroare care spune că textul introdus în textbox nu este un URL valid.

Dacă URL-ul este valid, este apelată functia fetch() care deschide o sesiune de tip cURL. cURL este o librarie în PHP care permite realizarea de request-uri HTTP. Asta înseamnă că numai pe baza URL-ului unui site, se pot extrage datele din spatele lui.

curl_init() – inițializează o sesiune de tip curl;

curl_setopt() – setează o opțiune pentru transfer;

CURLOPT_RETURNTRANSFER – opțiune care setează ca valoarea returnată să fie valoarea funcției curl_exec(), nu va fi returnată direct;

CURLOPT_REFERER – headerul va fi utilizat în request-ul HTTP, $refferall are valoarea false

CURLOPT_FOLLOWLOCATION – header trimis de server ca parte a headerului HTTP

CURLOPT_TIMEOUT – numărul maxim de secunde în care se pot executa funcțiile cURL, $this->timeout are valoarea 18

CURLOPT_CONNECTTIMEOUT – numărul de secunde alocate conectării, $this->connectionTimeout are valoarea 8

CURLOPT_USERAGENT – setează headerul folosit în requestul HTTP, $this->userAgent are valoarea "Mozilla/6.0 (Windows NT 6.2; WOW64; rv:16.0.1) Gecko/20121011 Firefox/16.0.1"

CURLOPT_COOKIEJAR – setează numele fișierul unde sunt salvate toate cookie-urile interne când sesiunea se închide, $this->cookiePath conține numele fișierului

CURLOPT_SSL_VERIFYPEER – valoarea e false deci sesiunea cURL nu va verifica certificatul site-ului

CURLOPT_SSL_VERIFYHOST – valoarea e false deci nu va verifica autenticitatea host-ului

CURLOPT_COOKIEFILE – setează numele fișierului care va conține cookie-urile

CURLOPT_URL – setează URL-ul pentru care se face request-ul

În final, valoarea returnată de funcție va fi valoarea returnată de curl_exec($ch) care va conține codul HTML al site-ului analizat.

La pasul următor sunt apelate funcțiile de scraping care caută imaginile și fisierele CSS și JavaScript în site. Pentru asta am folosit expresiile regulate pentru a găsi referințe către fișiere în codul HTML.

Numele fișierelor căutate sau căile către ele sunt salvate în vectori. Acești vectori sunt apoi parcurși, se verifică dacă numele fișierului este defapt un link și dacă este link, se verifică dacă acesta este un link intern, dacă face parte din site-ul analizat. E posibil ca anumite fișiere să fie importate din alte site-uri, iar acestea nu pot fi analizate. De aceea, în vectori trebuie să rămână doar fișierele interne, care sunt parte din aplicația analizată.

Folosind funcția fetch() în care este deschisă o sesiune cURL, fiecare fișier intern este accesat și se determină dimensiunea lui în kilobytes folosind funcția strlen().

–partea de minifiere si analiza–

3.3.  Rezultate obținute

Capitolul 4: Concluzii și dezvoltări ulterioare (contribuții originale, domenii de utilizare posibile, comparații cu realizări similare – cu sublinierea avantajelor, performanțelor etc.-, alte aspecte relevante, 5 pag)