Modernizarea Website -ului [631355]

UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREȘTI
FACULTATEA DE INFORMATICĂ

LUCRARE DE LICENȚĂ

Modernizarea Website -ului
Universității Titu Maiorescu

COORDONATOR ȘTIINȚIFIC:

Conf.univ.dr.ing. Iustin PRIESCU

ABSOLVENT: [anonimizat]

2018

2
Cuprins
1. Introducere ………………………….. ………………………….. ………………………….. ……………………… 3
2. Sisteme și limbaje utilizate ………………………….. ………………………….. ………………………….. .. 4
2.1 Web server Apache ………………………….. ………………………….. ………………………….. ……… 4
2.2 Limbajul HTML5 ………………………….. ………………………….. ………………………….. ……….. 4
2.3 Limbajul CSS3 ………………………….. ………………………….. ………………………….. ……………. 5
2.4 Limbajul JavaScript ………………………….. ………………………….. ………………………….. ……. 7
2.4 Librăria JQuery ………………………….. ………………………….. ………………………….. ………….. 8
2.5 Limbajul PHP ………………………….. ………………………….. ………………………….. …………….. 9
2.6 MySQL și Limbajul SQL ………………………….. ………………………….. ……………………….. 10
2.7 Platforma WordPress ………………………….. ………………………….. ………………………….. … 11
3. Design ………………………….. ………………………….. ………………………….. ………………………….. .. 13
3.1 Impactul vizual ………………………….. ………………………….. ………………………….. …………. 13
3.2 Ușurința de navigare ………………………….. ………………………….. ………………………….. …. 17
3.3 Optimizare multilingvistă ………………………….. ………………………….. ………………………. 18
3.4 Adaptabilitatea pentru mobile ………………………….. ………………………….. ……………….. 19
3.5 Tehnici de design ………………………….. ………………………….. ………………………….. ………. 20
4. Securitate ………………………….. ………………………….. ………………………….. ………………………. 25
4.1 Standarde de securitate ………………………….. ………………………….. ………………………….. 25
4.2 Vulnerabilitățile platformei Wor dPress și ale limbajelor utilizate …………………….. 25
4.3 Securizarea platformei împotriva tipurilor de atac cunoscute ………………………….. 27
4.4 Securizarea infrastr ucturii serverului gazdă ………………………….. ……………………….. 31
5. Optimizare SEO ………………………….. ………………………….. ………………………….. …………….. 36
5.1 Importanța optimizării SEO ………………………….. ………………………….. …………………… 36
5.2 Standardele Google ………………………….. ………………………….. ………………………….. ……. 37
5.3 Tehnici utilizate ………………………….. ………………………….. ………………………….. …………. 39
6. Optimizare vitezei ………………………….. ………………………….. ………………………….. ………….. 40
6.1 Optimizarea imaginilor ………………………….. ………………………….. ………………………….. 40
6.2 Cache la nivel de server ………………………….. ………………………….. ………………………….. 41
6.3 Cache local ………………………….. ………………………….. ………………………….. ………………… 42
6.4 Compresia GZIP ………………………….. ………………………….. ………………………….. ……….. 42
6.5 Optimizarea bazei de date ………………………….. ………………………….. ……………………… 43
6.6 Rezultatele optimizării ………………………….. ………………………….. ………………………….. . 43
7. Concluzie ………………………….. ………………………….. ………………………….. ……………………….. 44
Bibliografie ………………………….. ………………………….. ………………………….. ……………………….. 45

3
1. Introducere

În era digitală, imaginea oricărei instituții este r eprezentată, în primul rând, de website -ul
acesteia. Drept urmare, există o serie de criterii ce trebuie îndeplinite în timpul dezvoltării
website -ului, dar și după lansarea acestuia în internet . Am ales Modernizarea Website -ului
Universității Titu Maiores cu, cu scopul de al aduce la zi cu ultimele tehnologii dezvoltare și
tehnici de design.
Unul din principalele obiective ale modernizării website -ului, este alegerea unui design
modern, plăcut, cu un mare impact vizual ce să reprezinte integral imaginea Un iversității Titu
Maiorescu.
Un alt criteriu important este posibilitatea vizualizării website -ului de pe orice tip de
dispozitiv sau browser, indiferent de dimensiunea sau rezoluția ecranului. Pentru ecranele cu
rezoluție mare, website -ul trebuie să pună la dispoziție o variantă a imaginilor la dimensiunea
corespunzătoare. Pentru dispozitivele mobile, întreaga structură a paginii trebuie să se ajusteze
iar elementele să se repoziționeze în așa fel încât să facă posibilă vizualizarea completă a
conținutului .
Pentru menținerea integrității website -ului, este necesară implementarea unor standarde
stricte de securitate. Au fost luate în calcul vulnerabilitățile cunoscute ale tehnologiilor și
limbajelor utilizate și au fost luate măsurile necesare evitării posi bilelor breșe. De asemenea,
s-au luat măsuri împotriva tipurilor cunoscute de atac, atât asupra paginii web , dar și asupra
infrastructurii serverului ce va găzdui website -ului.
Întrucât este vorba de un website , accesul la acesta trebuie să fie ușor și rap id atât pentru
persoanele care cunosc adresa, cât și către potențialii vizitatori. Pentru acesta, s -au utilizat o
serie de tehnici de optimizare pentru motoarele de căutare. Optimizările au fost aplicate atât la
nivelul tehnologiilor utilizate, la nivelul structurii paginilor dar și la nivelul conținutului.
În ultimul rând, au fost luate măsuri pentru asigurarea timpului de încărcare a website -ului
cât mai scăzut, precum optimizarea și compresarea imaginilor, generarea de fișiere statice
HTML ce vor fi liv rate de pe server, stocarea imaginilor și a fișierelor generate în memoria
cache a browser -ului și înlăturarea din baza de date a termenilor nefolosiți pentru a face
interogarea acesteia mai rapidă.

4
2. Sisteme și limbaje utilizate

Pentru realizarea teme i au fost utilizate mai multe tehnologii și limbaje de programare ce
au permis atât atingerea tuturor criteriilor impuse, cât și întreținerea și actualizarea website –
ului după lansarea inițială. Printre tehnologiile utilizate se numără: Apache, WordPress ș i
MySQL, iar printre limbajele utilizate se numără PHP7, SQL, HTML5 și CSS3 .

2.1 Web server Apache
Serverul HTTP Apache este o tehnologie web server de tip open -source dezvoltată și
menținută de o comunitate de programatori sub emblema Apache Software Foun dation.
Apache suportă o mare varietate de module care îi extind funcționalitatea, acestea variază de
la server side programming și până la scheme de autentificare. Câteva limbaje suportate sunt:
Perl, Python și PHP. Ca alte module putem enumera : SSL si T LS support (mod_ssl), un modul
proxyun, modul de rescriere URL (cunoscut ca un motor de rescriere mod_rewrite), custom
log files (mod_log_config) și suport de filtrare (mod_include și mod_ext_filter). O altă calitate
a serverului Apache este găzduirea virt uală, care constă în posibilitatea de a găzdui mai multe
website -uri simultan pe același server. Proiectul HTTP Apache este un efort de dezvoltare
software colaborativ, ce are ca scop crearea unui web server HTTP, robust, cu aplicații
comerciale, al cărui cod sursă este liber și poate fi modificat de către oricine.
În tema aleasă, web serverul Apache a fost utilizat pentru găzduirea website -ului și se află
la baza tuturor tehnologiilor utilizate.

2.2 Limbajul HTML5
Limbajul HTML, ajuns la versiunea a 5 -a, este un limbaj de marcare și organizare al
conținutului dezvoltat pentru World Wide Web. HTML vine de la Hyper Text Markup
Language și se află la baza oricărui website. Deși creat în 1991, prima versiune a standardului
HTML a apărut abia la versiunea 2.0 , publicată în 1995. Alte versiuni ce au adus schimbări
majore sunt HTML4, HTML4.1 (ce este în continuare foarte utilizată) și HTML 5 care este cea
mai nouă versiune.

5
Limbajul HTML este compus din etichete încadrate între paranteze unghiulare „<” și „>”,
de exemplu <h ead> . Acestea vin în majoritatea cazurilor în perechi. Prima etichetă specifică
începutul, iar a doua sfârșitul. Spre exemplu <body> și </body>. Există și etichete singulare
precum <br />. Browserele web interpretează aceste etichete și creea ză pagina web fără a afișa
codul HTML, ci doar conținutul din interiorul etichetelor.
HTML5 a apărut cu scopul de a îmbunătății limbajul pentru noile tipuri de fișiere
multimedia și dispozitive apărute. Acesta se dorește a fi ușor de utilizat de către pr ogramator
și ușor de interpretat de către browser. HTML5 este suportat de către toate browserele web
moderne, precum Google Chrome, Mozilla Firefox, Opera, Vivaldi, Edge și Safari. Acesta este
nativ implementat de către sistemele de operare mobile precum A ndroid. Noile capabilități
aduse de a -5 a versiune HTML înlocuiesc dependințele de Adobe Flash sau Microsoft
Silverlight, ce au devenit mai lente și mai nesigure din punct de vedere al securității.
Din punct de vedere sintactic, HTML5 aduce etichete noi pr ecum ca <video>, <audio>,
<header> și <canvas>, elemente HTML, în același timp și înglobarea conținutului SVG, care
substituie folosirea tagului generic <object>.
Principalele avantaje ale noii versiuni HTML sunt:
• Suportul pentru elemente media atât video cât și audio, fapt ce face posibilă
renunțarea la librăriile externe.
• Interpretare mult mai rapidă a codului de către browser.
• Elemente sintactice noi, precum <article>, <details> și <dialog>. Acestea ușurează
realizarea paginii web.
• Suportul pentru eleme ntele SVG.
• Noi forme de control: email, search, color, url, dates.
• Suport pentru conținut grafic folosind eticheta <canvas>.
• Facilitatea de cache local pentru aplicații.

2.3 Limbajul CSS3
CSS este un limbaj folosit pentru stilizarea paginilor web, acest a ocupându -se în întregime de
aspectul paginii. Abrevierea CSS vine de la Cascading Style Sheets și a fost propus pentru
prima oară în 1994. Primul standard W3C a apărut în 1996, cunoscut ca CSS1. În 1998 a apărut
a doua versiune CSS, cunoscută drept CSS2. Acesta include capacități de poziționare absolută,

6
fixă sau relativă a elementelor, proprietăți noi pentru text și conceptul de z -index. CSS2.1 este
o revizie a standardului CSS2. Rolul acesta a fost de a elimina proprietățile care nu ofereau
interoperabi litate. Versiunea a -3 a adus o serie de noi elemente, precum selectori, fundaluri,
font-uri, stilizări pentru chenare, coloane, opacitate și animații.
Fiind ușor de învățat și înțeles, a fost adoptat de către toate browserele și acum se află la baza
orică rei pagini web.
Deși este folosit împreună cu limbajul HTML, are un rol total diferit. HTML furnizează
structura pagini, pe când CSS definește aspectul elementelor. Cu ajutorul foilor de stil CSS, se
pot adăuga:
• Culori
• Fundaluri
• Borduri
• Forme
• Animații
• Transformări 2D/3D
• Plasamentul conținutului pe coloane
• Formatări avansate ale textului
Avantajele principale ale utilizării limbajului CSS sunt:
• Standarde de dezvoltare globală. Utilizarea limbajului CSS este încurajată în
detrimentul utilizării limbajului HT ML. Astfel, paginile web sunt compatibile cu
versiunile ulterioare ale browserelor.
• Dezvoltare rapidă. Codul CSS este reutilizabil și poate fi implementat în orice pagină
web. Se pot defini stiluri și clase de stiluri ce pot fi reutilizate în proiecte ult erioare.
• Modificare globală a stilurilor. Codul CSS se află într -un singur fișier, lucru ce face
modificarea elementelor să fie rapidă, schimbările afectând elementele la nivelul
întregului website.
• Compatibilitate. Limbajul CSS este recunoscut universal de toate browserele și
dispozitivele. Acesta permite optimizări pentru toate tipurile de dispozitive și rezoluții
pentru ca website -ul să poată fi folosit atât de pe telefoane și tablete cât și de pe laptop –
uri și deskop -uri.

7
• Generarea de elemente grafi ce. Versiunea 3 a limbajului CSS permite creare
elementelor de interfață direct din cod. Acestea includ, butoane, forme, chenare,
separatoare, bare de derulare și multe alte elemente. Aceste elemente își păstrează
calitate și se auto -redimensionează indife rent de rezoluție.
• Complet modular. Fiind împărțit pe selectori, limbajul CSS este modular, noi stiluri
putând fiind adăugate peste cele vechi. Existența conceptului de moștenire a claselor
permite particularizarea anumitor elemente sau pagini în funcție de nevoie.
Ca sintaxă, codul CSS este compus dintr -un Selector, corespunzător unei etichete HTML,
o proprietate, de exemplu color și o valoare, e exemplu blue. Modelul este selector {proprietate:
valoare}. Un selector poate să aibă mai multe proprietăți. Dar fiecare proprietate poate să aibă
o singură valoare.
CSS3 oferă posibilitatea amplasării conținutului pe straturi. Acestea pot fi definite prin
aplicarea proprietății z -index la elementele care se doresc a fi suprapuse. Astfel se pot obține
un design complex și efecte de tip Paralax. Elementul cu valoarea z -index mai mare, va fi plasat
primul, celelalte aflându -se sub el.

2.4 Limbajul JavaScript
Limbajul JavaScript, cunoscut și drept ECMAScript, este un limbaj de programare dinamic,
ce rulează la nive l de browser , gestionat de Fun dația Mozilla . Acesta permite interacțiune cu
utilizatorul, facilitând editarea conținutului unei pagini web afișate. JavaScript este utilizat în
toate aplicațiile din sfera web, pe partea de client. Permite dezvoltarea de apl icații complexe,
precum jocurile, atât pentru desktop cât și pentru dispozitivele mobile. Pe partea de server,
există medii de execuție, precum Node.js. JavaScript este utilizat și în medii offline, precum
documentele PDF.
Limbajul JavaScript este folosit tot mai mult în compilarea limbajelor de programare, atât
dinamice, precum Python sau Ruby, cât și statice precum Java.
Deși sunt denumite asemănător, limbajele JavaScript și Java au o semantică foarte diferită.
JavaScript este derivat din limbajul C, iar semantica din limbajul Self. Deși a fost implementat
ca un limbaj de programare interpretat, unele browsere web moderne realizează compilarea
Just-in-Time (JIT). Standardul JavaScript este menținut în specificația ECMAScript.

8
Principalele caracteristici a le limbajului JavaScript sunt:
• Oferă foarte multe funcționalități la nivel de pagină. JavaScript aduce multe
funcționalități și un nivel ridicat de control asupra conținutului din pagină. Acest
lucru nu poate fi realizat utilizând doar HTML sau CSS. Toate elementele web pot
fi controlate prin JavaScript.
• Este ușor de învățat. Utilizând modelul DOM (Data Object Model), este foarte
ușoară crearea unui set de instrucțiuni.
• Este rapid și nu consumă resursele serverului. Deoarece codul JavaScript se
execută pe calculatorul utilizatorului, datele sunt procesare rapid, rezultatul fiind de
multe ori instant. Serverul doar livrează codul, browser -ul în rulează. Execuția la
nivel de client este problematică din punct de vedere al securității. Codul poate fi
accesat s au modificat de oriunde și este executat instant pe stația de lucru. Rularea
codului malițios poate crea breșe de securitate în sistem, chiar dacă există restricții
impuse de browserele moderne.
• Este foarte popular. Companii de renume precum Google, Micro soft sau Apple
investesc sume foarte mari în dezvoltarea limbajului JavaScript și a librăriilor
acestuia. Pe lângă marile companii, există o multitudine de comunități active ce
contribuie, de asemenea, la dezvoltarea limbajului.
• Este compatibil cu toate di spozitivele momentului. JavaScript poate fi rulat de
pe orice dispozitiv, fie el desktop, mobil sau televizor. Cu toate astea, randarea
codului este diferită în funcție de motorul web în ciuda standardelor impuse.
Rezultatul constând în disfuncționalități ale paginii afișate.
• Este compatibil cu toate tehnologiile back -end. JavaScript poate fi folosit cu
orice limbaj de server, precum PHP, Ruby, Python, ASP.Net sau Java. Comunicarea
cu bazele de date post -relaționale se face prin intermediul JSON (JavaScript Object
Notation).

2.4 Librăria JQuery
JQuery este un framework bazat pe JavaScript, al cărui scop este simplificarea dezvoltării
aplicațiilor web. Librăria JQuery este open -source sub licența MIT. Este folosită la facilitarea
navigării pagini web prin in termediul elementelor acesteia, la animații și la gestiunea
evenimentelor.

9
Gândită modular, librăria JQuery este folosită la crearea de plugin -uri ce nu folosesc funcții
JavaScript. Efectele, animațiile și interacțiunile sunt realizate cu ușurință. De ase menea oferă
suport pentru AJAX. Plugin -urile sunt printre cele mai importante avantaje aduse de JQuery,
deoarece permit programatorilor să creeze subaplicații și extinderi ale funcționalității
principale. Biblioteca principală ocupă foarte puțin spațiu, ia r extensiile sunt încărcate doar la
utilizare.
Alt avantaj foarte important al librăriei JQuery este uniformizarea interpretării codului
JavaScript de către browserele moderne. Este permisă manipularea elementelor și a DOM -ului
prin motorul de căutare ope n-source Sizzle.

2.5 Limbajul PHP
PHP vine de la Php: Hypertext Preprocessor și este un limbaj de programare open -source
executat la nivel de server , ce este utilizat intens pentru dezvoltarea aplicațiilor web. Inițial a
fost conceput spre a fi înglobat în interiorul codului HTML. Odată cu versiunea 4.3, a fost
introdusă posibilitatea utilizării limbajului în modul linie de comandă (CLI) lucru ce a facilitat
dezvoltarea aplicațiilor independente.
Sintaxa limbajului PHP este asemănătoare cu limbajele C, Pe arl și Java (începând cu
versiunea 5). Unul din marile avantaje ale acestui limbaj este că poate fi utilizat cu majoritatea
bazelor de date relaționale, precum MySQL, sau Oracle.
PHP poate rula pe o gamă largă de sisteme de operare, precum Windows, Mac OS X, Unix,
RISC OS, Linux și derivate. Acesta poate interacționa cu majoritatea serverelor web incluzând
Apache, IIS și nginx. PHP poate funcționa atât ca modul cât și ca procesor CGI. Metodele de
programare folosibile sunt Programarea Procedurală, Programar ea Orientată pe Obiecte sau o
combinație a celor două. Extensiile specifice PHP sunt php, php3, ph3, php4, inc și phtml.
Aceste fișiere sunt procesare de către serverul web și livrate browser -ului în format text sau
cod HTML.
PHP poate prelucra conținut HT ML, dar nu se limitează aici. Permite afișarea de imagini,
de fișiere PDF, fișiere Flash, XML sau XHTML. Printre protocoalele de cuminicare suportate
de către PHP se numără și HTTP, IMAP, POP3, COM, SNMP, LDAP și NNTP.

10
Un avantaj al limbajului PHP reprezi ntă existența unei largi plaje de extensii cu
documentația aferentă, ce ajută la dezvoltarea aplicațiilor web tot mai complexe și la procesarea
altor tipuri de fișiere, precum docx, odt, csv, xml, etc.
Facilitățile limbajului PHP:
• Utilizarea formularelor. PHP facilitează validarea câmpurilor, procesarea și
modificarea datelor și înregistrarea acestora într -o bază de date sau trimiterea lor pe
email.
• Relaționarea cu bazele de date. Limbajul PHP se poate ocupa de conexiunea la
baza de date, interogări, modifi cări, sau ștergeri de date dintr -o tabelă. Se pot
specifica reguli de validare și sanitizare a fluxului de intrare.
• Autentificare și securitate. Prin relaționarea cu baza de date, limbajul PHP poate
autentifica utilizatorii unei aplicații web. Prin varieta tea de funcții și extensii, se
poate asigura și securitatea aplicației.
• Parametrizarea aplicației. PHP permite setarea de parametri și urmărirea acestora
în interiorul unei aplicații. Astfel problemele de cod pot fi depistate cu ușurință.
• Trimiterea de Em ail-uri. Limbajul PHP permite formatarea și trimiterea email –
urilor prin protocolul SMTP .
• Performanță. Limbajul PHP este mult mai rapid decât alte limbaje la nivel de
server precum ASP, lucrând în propriul spațiu de memorie alocat.
• Interoperabilitatea într e sisteme concepute inclusiv în limbaje de programare
diferite. PHP oferă suport nativ pentru XML, JSON, SOAP, Restfull și alte limbaje
de programare.

2.6 MySQL și Limbajul SQL
SQL vine de la Structured Query Language și este un limbaj de interogare stru cturat,
specific manipulării bazelor de date relaționale. Este utilizat pentru inserarea, modificarea,
mutarea, interogarea și ștergerea datelor într -o bază de date. Este cel mai popular limbaj utilizat
de Sistemele de Gestiune a Bazelor de Date (SGBD).
Limbajul SQL este alcătuit din Clauze, Expresii, Predicate, Interogări și Instrucțiuni.
Clauzele sunt componente ale instrucțiunilor și interogărilor. Expresiile au ca rezultat
producerea de valori scalare sau tabele. Predicatele specifică condiții conform logicii booleene

11
sau ternare. Interogările sunt utilizate în găsirea datelor după condiții specifice. Instrucțiunile
au un efect persistent asupra datelor.
MySQL este u n SGBD open -source, produs de MySQL AB și distribuit sub licența GNU.
Acesta este foart e des folosit împreună cu limbajul PHP, dar poate fi folosit și de către orice
alt limbaj major precum C, C++, C#, Java, Pear, Python, etc. MySQL este o componentă a
platformelor LAMP (Linux, Apache, MySQL, PHP, Perl, Python) și WAMP (Windows,
Apache, MySQ L, PHP, Perl, Python).
Pentru a administra bazele de date MySQL se poate folosi modul linie de comandă sau,
prin descărcare de pe internet, o interfață grafică: MySQL Administrator și MySQL Query
Browser. Un alt instrument de management al acestor baze de date este aplicația gratuită, scrisă
în PHP, phpMyAdmin.

2.7 Platforma WordPress
WordPress este o platformă de tip CMS (Content Management System) open -source și
gratuită. Inițial creată pentru website -uri de tip blog, platforma WordPress a crescut rapid în
popularitate și funcționalitate, aflându -se la baza multor website -uri de succes.
WordPress poate să ruleze pe orice webserver precum Apache sau Nginx. Fiind programată
în totalitate utilizând PHP, este necesară instalarea limbajului pentru a putea ut iliza platforma,
alături de MySQL ce este utilizat pentru baza de date.
Principalul avantaj al platformei WordPress este extinderea funcționalității prin instalarea
de module și teme create de comunitate. WordPress utilizează un sistem de teme web, ce are
la bază un procesor de teme. Acesta este utilizat pentru a schimba temele între ele și a genera
pagini pe baza codului temei și a modulelor. Temele WordPress sunt construite folosind
limbajul HTML pentru structură, CSS pentru stilizare și PHP pentru funcț ionalitate. Un website
ce utilizează WordPress are nevoie să aibă o temă activă în permanență. Modulele WordPress
sunt secțiuni de cod în PHP ce extind și de multe ori optimizează funcționalitate website -ului.
Principalele avantaje ale utilizării platfor mei WordPress sunt:
• Ușurința de utilizare . Platforma WordPress este foarte ușor de folosit deoarece nu
necesită cunoștințe de programare pentru a o utiliza. I nstalarea durează doar câteva
minute iar panoul de control este intuitiv și foarte simplu. Documen tația oficială

12
este foarte detaliată iar comunitatea stă la dispoziție pentru a răspunde la orice
întrebare și a rezolva orice problemă.
• Funcționalitatea poate fi extinsă cu ușurință . Platforma WordPress are
disponibile nu mai puțin de 57000 de module ce p ot fi folosite pentru a extinde
funcționalitatea website -ului. Poate fi utilizată pentru bloguri, website -uri de
prezentare, magazine online, o platforme de e -learning sau forumuri.
• Optimizare vitezei și conținutului pentru motoarele de căutare . Codul
platformei WordPress este puternic optimizat pentru motoarele de căutare și oferă
opțiuni pentru optimizarea conținutului, precum modificarea adresei URL a paginii
sau postării pentru a conține cuvinte cheie. Există și o largă gamă de module ce
ajută la opti mizarea website -ului atât din punct de vedere al vitezei dar și al
motoarelor de căutare , de exemplu Yoast SEO , WP Super Cache, Autoptimize, etc.
• Modificabil în totalitate . Website -urile realizate în WordPress pot fi modificate
complet, atât utilizând int erfața grafică, module, teme sau chiar prin modificarea
sau rescrierea fișierelor. Sistemul modular al elementelor grafice permite
modificarea rapidă și selectivă a elementelor website -ului
• Open -Source cu o comunitate activă . Comunitatea WordPress lucrează intens la
rezolvarea problemelor platformei atât pe partea de funcționalitate cât și pe partea
de securitate. Cu fiecare update sunt fixate noi probleme și vulnerabilități.
• Management -ul utilizatorilor . WordPress vine cu un sistem de gestiune al
utilizat orilor, astfel se pot crea noi conturi cu diferite seturi de permisiuni, în funcție
de necesitate.
• Costuri minime . WordPress este o platformă open -source gratuită. Sunt
disponibile foarte multe module și teme gratuite pentru a realiza website -ul dorit cu
un cost minim.
• Securitatea website -ului este ușor de monitorizat . Prin folosirea de module
specializate, se poate monitoriza și bloca accesul pe partea de backend a platformei
și se pot remedia vulnerabilitățile cunoscute precum inserția de cod malițios.

13
3. Design

Unul din principalele obiective ale modernizării website -ului Universității Titu Maiorescu,
este reîmprospătarea aspectului și a impactului vizual. Scheletul website -ului original a fost
păstrat și adaptat după noile standarde în materie de design. Astfel, s -a obținut un website ce
poate fi navigat ușor, cu un aspect plăcut și compatibil cu toate dispozitivele, fie ele desktop
sau mobile.

3.1 Impactul vizual
Impactul vizual joacă un rol foarte important în realizarea unui website. Acesta re prezintă
impresia lăsată de către website asupra utilizatorilor. Website -ul este imaginea instituției pe
care o reprezintă, un impact vizual puternic, afectează pozitiv imaginea universității atât online
cât și în afara mediului digital.
Impactul vizual s e construiește prin amplasarea elementelor paginii într -un mod aerisit, fără
a lungii prea mult pagina sau a o face să pară goală. Spre deosebire de varianta originală a
website -ului, acum elementele de antet precum logo -ul, meniurile și caruselul de imagini se
întind pe tot ecranul. Pentru corpul conținutului s -a folosit un fundal alb, iar elementele de
conținut acoperă doar două treimi din lățimea ecranului. Subsolul website -ului, precum atentul,
se întinde pe toată lățimea ecranului și astfel se realizează un efect de înrămarea a conținutului
principal.
Pentru coloristica website -ului, a fost aleasă cu grijă o paletă de culori reprezentativă
imaginii Universității. Culoarea principală este un mov închis, #221666 ce este prezentă în
sigla UTM, alături de un mov deschis #3B1FB3 ce era deja prezentă pe varianta originală a
website -ului. Alături de aceste două culori, s -au mai ales alte 3 culori secundare. Pentru
evidențierea elementelor vizuale, s -a ales un mov aprins #6F3BA2 , pentru decorațiuni,
chenare, tabel e și alte elemente vizuale de mici dimensiuni s -a ales un gri deschis #E8E8E8
iar pentru textul din subsol s -a ales un galben puternic, complementar culorii de fundal
#FFFF00 .

14
Logo -ul a fost recreat la o rezoluție mare (figura 1 ), întrucât un element vizua l important
al Universității și face parte din identitatea instituției. Logo -ul conferă personalitate website –
ului deoarece orice vizitator va știi imediat ce instituție este reprezentată de acest website. Este
unul din elementele vizuale ce rămân întipăr ite și fac pagina web să fie memorabilă.

Figura 1
Meniul a fost lățit, pentru a evidenția mai bine paginile (figura 1 ). S-a adăugat și un
separator pentru a conferii stil și identitate. Pagina actuală este evidențiată în meniu pr in
colorarea textului diferit și prin afișarea unui mic triunghi sub text.
Trendul în materie de design tinde către imagini mari amplasate dinamic. Caruselul de
imagini a fost mărit pe toată lățimea ecranului (figura 1 ). Este o bună metodă de a anima
webs ite-ul și de a -i adăuga culoare folosind imagini reprezentative pentru imaginea
Universității.

Figura 2

15
Pentru a crea dinamism, elementele de conținut ale pagini sunt animate la încărcare.
Chenarele informaționale (figura 2 ) sunt mai mari și textul este mai aerisit. Li s -a adăugat un
efect de umbrire pentru a crea un efect de adâncime într -un plan tridimensional, ce dispare când
intră în contact cu cursorul.

Evenimentele Maioresciene și Noutățile sunt acum separate de Ghidul Un iversității (figura
3), a cărui imagine a fost mărite pentru a -l evidenția. Filmul de prezentare a fost mutat mai jos
pentru a fi mai vizibil și mai ușor de urmărit. Fiind amplasat central pe pagină, la dimensiuni
mari, devine mai atractiv contribuind la i mpactul vizual prin dinamism.

Figura 3
Elementele de subsol au fost rearanjate pentru a crea simetrie (figura 4) . Aranjate pe 4
coloane, informațiile facultăților se află pe rânduri egale și sunt separate printr -o bară
orizontală. Separat de acestea se a flă adresa principală a Universității, la o distanță suficient de
mare pentru a fi evidențiată fără a afecta negativ simetria. Dimensiunea fontului este mai mare,
textul este mai ușor de citit și distanța dintre rânduiri este mult mai mare.

16

Figura 4
Pentru textul paginilor s -a folosit o nuanță de gri ce conferă un aspect elegant. Fiecare
pagină are titlul afișat pe o bară gri, iar în dreapta, calea în site. Pe paginile facultăților, siglele
aferente fiecărei specializări sunt acum mai mari ( figura 5 ) iar meniul este colorat în nuanțe de
mov.

Figura 5
Pentru textul paginilor s -a folosit o nuanță de gri ce conferă un aspect elegant. Fiecare
pagină are titlul afișat pe o bară gri, iar în dreapta, calea în site. Pe paginile facultăților, siglele
aferente fi ecărei specializări sunt acum mai mari ( figura 5 ) iar meniul este colorat în nuanțe de
mov. Pagina comunicatelor de presă a fost modificată, documentele fiind acum amplasate într –
un carusel.

17
3.2 Ușurința de navigare
Un studiu recent dovedește că majoritat ea utilizatorilor părăsesc website -ul dacă nu găsesc
ce caută în mai puțin de 2 minute. Noul design a fost structurat în așa manieră încât utilizatorul
să știe unde se află și unde găsește informația căutată. Acest lucru a fost obținut prin:
Folosirea unui design aerisit. Pe lângă impactul vizual, un website cu un design aerisit
este mai ușor de navigat și conținutul este mai ușor de citit. Distanța optima între elemente a
fost păstrată.
Păstrarea unei structuri cât mai simpliste a ramificării paginilor . În multe instanțe,
calea către o pagină este foarte lungă, existând multe pagini de intermediere. Spre exemplu,
pentru a ajunge în pagina de Membri ai Consiliului de administrație, structura paginilor arată
așa: Home > Despre UTM > Organizare > Consiliul de administrație > Membrii. Paginile
Organizare și Consiliul de administrație sunt pagini fantomă, servind doar pentru atribuirea
de sub pagini, fără conținut propriu -zis. Noua cale este simplificată astfel Acasă > Despre
UTM > Consiliul de administra ție. În ultima pagină fiind afișați Membrii. Este importantă
păstrarea unei căi cât mai scurte și organizate pentru a nu pierde sau încurca utilizatorii.
Afișarea titlului pagini alături de calea către pagina principală . Pe lângă afișarea
ramificării pagi nilor parcurse, este importantă afișarea titlului paginii. Astfel utilizatul știe în
permanență pe ce pagină se află.
Existența butonului „Acasă” în meniu . Este foarte util atunci când utilizatorul dorește să
ajungă pe prima pagină a website -ului. Deși apăsarea logo -ului duce la prima pagină, această
metodă nu este intuitivă, iar în unele cazuri precum utilizarea de pe mobil, nu este optimă.
Inserarea unui buton care aduce utilizatorul la începutul paginii . Pentru paginile lungi,
s-a adăugat un buton în su bsol care trimite utilizatorul la începutul pagini (figura 6 ).

Figura 6
Amplasarea link -urilor către versiunile în limba Engleză și Franceză într -un mod cât
mai vizibil . Este foarte posibil ca utilizatorii străini să fie direcționați la website -ul în lim ba
română. Așadar, schimbarea limbii trebuie să fie ușoară și intuitivă. Butoanele au fost plasate

18
pe o bară mov deschis, separate prin bare verticale, cu textul limbii respective în dreptul
steagului ( figura 7 ).
Existența unei funcții de căutare . Pentru website -uri de dimensiuni mari, funcția de
căutare în website este utilă și face navigarea mai ușoară și mai plăcută. În bara de antet, există
o lupă, amplasată intuitiv, ce semnifică funcția de căutare ( figura 7 ).

Figura 7
Meniu ce se derulează . Pentru ca utilizatorii să nu fie nevoiți să deruleze pagina pentru a
ajunge la meniu, acesta coboară odată cu conținutul, fundalul devenind transparent ( figura 8 ).
De asemenea, pe bara de meniu apare și opțiunea de a derula automat și rapid la începutul
paginii.

Figura 8

3.3 Optimizare multilingvistă
Fiind vorba de website -ul unei instituții de prestigiu, ce acceptă și studenți din străinătate,
în modernizarea acesta s -a pus accentul și pe optimizarea conținutului pentru mai multe limbi .
Website -ul are câte o oglindă identică pentru fiecare limbă implementată. Oglinda limbii
engleze are un url propriu, http://utm.sendesign.ro/?lang=en , iar toate paginile
corespunzătoare limbii Engleze au terminația ?lang=en în ad resă. Astfel, când un utilizator
trimite un link, acesta este trimis cu tot cu selecția limbii dorite pentru a nu impune probleme
persoanelor care deschid acel link.
Când un utilizator schimbă limba, este redirecționat către corespondentul paginii pe care se
află, în limbă aleasă. De exemplu, dacă un utilizator se află pe pagina Facultatea de
Informatică , când alege limba Engleză, va fi direcționat către pagina Faculty of Informatics .

19
Conținutul a fost tradus integral în limba Engleză și amplasamentul textului modificat în
concordanță. Elementele statice precum subsolul sau meniul au corespondenți în limba
Engleză. La schimbarea limbi se schimbă și logo -ul alături de link -ul către prima pagină.

3.4 Adaptabilitatea pentru mobile
În 2018, peste 80% din utilizato rii de internet dețin un
dispozitiv mobil din care 48% îl folosesc la navigarea de zi
cu zi. Până de curând, website -urile aveau o lățime fixă de
900px în speranța că toți utilizatorii vor avea o experiență
similară și uniformă. Odată cu apariția telefoane lor mobile
capabile de a naviga pe internet, această caracteristică a
devenit o limitare drastică. Un website de succes poate fi
utilizat atât de pe dispozitive desktop, laptop, televizoare,
tablete sau mobile, indiferent de rezoluție.
Pentru ai satisfac e pe utilizatorii de dispozitive mobile,
noul design se adaptează automat în funcție de rezoluția
dispozitivului. Elementele sunt repoziționate în funcție de
dispozitiv și orientarea acestuia , pe o singură coloană, una sub
altă (figura 9 ).
Design -ul este realizat în totalitate folosind tehnologii
compatibile cu toate dispozitivele, precum HTML5, CSS3 și
JavaScript. Nu există segmente sau porțiuni de conținut ce
necesită aplicații suplimentare spre a fi redate, precum Flash
Player.
Dimensiunea font -ului se micșorează în funcție de
densitatea de pixeli / inch a dispozitivului, pentru a rămâne
lizibil. Imaginile au valori relative și sunt amplasate spre a
ocupa un procent din suprafața ecranului, neavând o
dimensiune fixă.
Meniul dispare, în locul acestuia ap ărând un buton. Când
acest buton este apăsat, se suprapune o pagină cu meniul ce
Figura 9
Figura 10

20
poate fi controlat prin atingeri ( figura 10 ). Acest meniu poate fi închis prin apăsarea unui buton
ce nu își schimbă poziția când meniul este derulat .
Au fost alese animații care să nu obstrucționeze conținutul sau
să îl facă inutilizabil. Butoanele răspund atât la click -uri de mouse
cât și la atingeri și sunt suficient de mari pentru a putea fi folosite
și de persoanele cu degete mai groase . Elementele dinamice,
precum carus elul de imagini și caruselele de știri și noutăți pot fi
controlate prin mișcări tactile.
Majoritatea navigatoarelor pentru dispozitive mobile nu oferă
suport pentru deschiderea documentelor PDF în interiorul paginii
web. Pentru a remedia această problemă și pentru a face
conținutul accesibil, când website -ul este accesat de pe un
dispozitiv mobil, documentele PDF sunt transformate în link -uri
de descărcare.
Meniurile lateralele de pe paginile facultăților sunt a mplasate
în partea superioară a pagini și p ot fi deschise printr -o singură
atingere (figura 11 ).
Fișierele cu codurile HTML, CSS3 și JavaScript au fost optimizate pentru o încărcare
rapidă chiar și pe dispozitivele lente folosind procesul de minificare.

3.5 Tehnici de design
Pentru realizarea desi gn-ului, s -a folosit tema de WordPress, University cu o serie de
modificări asupra fișierelor de stil și a fișierelor de funcționalitate. Culorile au fost modificate
folosit opțiunile oferite de temă, cu excepția unor elemente ce au fost modificate în lini e de
cod.
În fișierul style.css au fost modificate culorile elementelor de antet și subsol. Culoarea
antetului a fost modificată din #17376e în #221666 și folosită drept culoare principală.
Culoarea #46a5e5 a fost modificată în #6F3BA2 fiind folosită drept culoare secundară (figura
12).
Figura 11

21
Tema nu oferea
opțiunea schimbării
poziției sau dimensiunii
logo-ului și nici
schimbarea acestuia în
funcție de limbă. Pentru
putea facilita aceste
funcționalități, s -a utilizat
modulul Easy Logo.
Pentru a integra modu lui, din fișierul header -navigation.php, a fost ște arsă funcția ce afișa
logo-ul oferită de temă , $background_image_post = wp_get_attachment_image_src( Figura 12 .main -color -1, .main -color -1-hover:hover{
color:#6F3BA2;}
.main -color -1, .main -color -1-hover:hover{
color:#6F3BA2;}
.main -color -1-bg, .main -color -1-bg-hover:hover{
background -color:#6F3BA2;}
.main -color -1-border{
border -color:#6F3BA2;}
.main -color -2, .main -color -2-hover:hover{
color:#221666;}
.main -color -2-bg{
background -color:#221666;}

<div id="main -nav" class="dark -div nav -style -<?php echo $nav_style ?>">
<nav class="navbar navbar -inverse main -color -2-bg" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<?php show_easylogo(); ?> // aici este introdusă funcția Easy Logo
<div class="navbar -header">
<?php if($nav_style=='3'){
echo '<div class="navbar -right callout -text">';
echo ot_get_option('nav_callout_text');
echo '</div>';
} ?>
</div>
<!– Collect the nav lin ks, forms, and other content for toggling –>
<?php $nav_logo_sticky = ot_get_option('nav_logo_sticky');
$cl_stk ='';
if($nav_logo_sticky=='2'){ $cl_stk = 'stck_logo';}
?>
<div class="main -menu hidden -xs <?php echo $cl_stk.' '; echo $nav_sticky==2?'stick y-
light':'' ?>" <?php if($nav_sticky){ ?>data -spy="affix" data -offset -top="500"<?php } ?>>
<?php
if($nav_logo_sticky=='2'){
?>
<div class="container clearfix logo -menu -st">
<div class="row">
<!–<?php
$logo = ot_get_option('logo_image_sticky');
if($logo== ''){
$logo = ot_get_option('logo_image');
}
//$background_image_post = wp_get_attachment_image_src( $logo, 'full', $icon );
Figura 1 3

22
$logo, 'full', $icon ) . A fost adăugată funcția show_easylogo() deasupra meniului pentru a -l
întinde pe to ată lățimea ecranului. (figura 13).
Fișierul easylogo.php al
modulului Easy Logo a fost
modificat pentru a afișa un logo
diferit în funcție de limba website –
ului ( figura 14 ). Funcția if(
ICL_LANGUAGE_CODE==en )
Verifică dacă website -ul este în
limba Eng leză iar funcția if(
ICL_LANGUAGE_CODE==ro )
verifică dacă website -ul se află în
modul limbi Române. Variabila
$elv_easylogo_image memorează
adresa imaginii logo -ului.

Pentru operativitatea multilingvă a website -ului s -a utilizat modulul WPML Multilingual
CMS. Acest modul permite oglindirea website -ului în mai multe limbi și schimbarea acestora
prin apăsarea unui buton. Modulul este integrat în partea de front -end a platformei. Pentru a
crea oglinda unei pagini, se alege opțiunea Translate din meniul conte xtual din partea dreaptă.
WPML Multilingual CMS permite crearea de meniuri individuale pentru fiecare limbă
implementată în website.
Pentru traducerea textelor temei respectiv a elementelor ce nu țin de conținutul paginii,
precum subsolul, calea paginii ș i alte module, s -a utilizat extensia WPML String Translation
a modulului WPML Multilingual CMS. Acesta permite editarea și oglindirea textelor prezente
în fișierele codului sursă PHP. Pentru traducerea unui text, se intră în meniul WPML și se alege
modulu i sau tema de care aparține. Se caută textul în listă și apoi se inserează traducerile.
Pentru conținutul pagini și poziționarea elementelor s -a utilizat modului WPBakery Page
Builder . Acesta este un front -end builder ce oferă opțiunea de a plasa elemente predefinite
HTML, formatate cu CSS cu funcționalitate JavaScript (figura 15 ). Elementele pot fi plasate
pe rânduri și coloane. Coloanele au opțiunea de a fi ascunse pe un anumit tip de dispozitive / function show_easylogo() {
$options = elv_easylogo_get_options();

if(ICL_LANGUAGE_CODE==en){
$elv_easylogo_image = "http://utm.sendesign.ro/wp –
content/uploads/2017/02/logo -eng3.png";}
if(ICL_LANGUAGE_CODE==ro){
$elv_easylogo_image = "http://utm.se ndesign.ro/wp –
content/uploads/2017/02/logo -nou2.png";}

$elv_easylogo_hover_effect = $options['hover'];
$elv_easylogo_is_responsive = $options['responsive'];
$url = isset( $options['url'] ) ? $options['url'] : "";
if( isset($options['center']) && $options ['center'] ==
true) {
$elv_easylogo_center = 'style = "text -align: center" ';
}
else {
$elv_easylogo_center = "";
}
Figura 1 4

23
rezoluții. Această funcție a fost folosita la înlocuirea documentelor PDF în link -uri de
descărcare.

Figura 1 5
Din gama de elemente oferite s -au utilizat elementele Text Block pentru text, Single
Image, pentru inserarea de imagini, Separator pentru lini orizontale, Custom Caption pen tru
titluri și Video pentru inserarea clipurilor video.
Complementar modului WPBakery Page Builde r, a fost folosită extensia Ultimate Addons
for WPBakery Page Builder . Aceasta adaugă noi elemente predefinite ce pot fi utilizate. Din
noua gamă s -au utilizat Advanced Button, pentru butoane, Content Box pentru chenarele de pe
prima pagină și Advanced Carousel pentru Noutăți și Evenimentele Maioresciene.
Pentru animații, a fost utilizat modului Animate It! Ce oferă animații simple CSS3 și
tranziții pentru elem entele WPBakery Page Builde r. Avantajul acestui modul este
compatibilitatea cu dispozitivele mobile și dimensiunea redusă a codului.
Caruselul de imagini de pe prima pagină și de pe paginile facultăților a fost plasat utilizând
modulul Slider Revolution . Acesta permite tranziționarea imaginilor și redimensionarea
automată în funcție de dispozitiv. Oferă controlul tactil al tranziției și încarcă imaginile în
modul Lazy Load, ce presupune că nu sunt încărcate până nu urmează a fi afișate. Această
funcție măre ște viteza de încărcare a website-ului.

24
Paginile facultăților au meniuri individuale alături de sigle, plasate pe secțiunea Sidebar a
paginii. Pentru a crea o secțiune individuală pentru fiecare facultate, s -a utilizat modului
Custom Sidebars . Acesta permite crearea unui număr foarte mare de secțiuni și opțiunea de a
alege ce secțiune să fie afișată pe pagină. Pentru meniurile individuale s -a utilizat modulul
UberMenu . Acesta permite plasarea meniurile pe secțiunile Sidebar și stilizarea acestora.
Pentru opt imizarea pentru dispozitivele mobile, funcția care apelează elementul Sidebar
get_sidebar( ) (figura 1 6), a fost mutată la începutul paginii, ea aflându -se inițial sub conținut.
Astfel, meniul fiecărei pagini apare la început, iar utilizatorul nu trebuie să navigheze prin
conținutul pagini pentru a -l găsi.

Formularele de contact au fost construite utilizând modulul Contact Form 7. Acesta permite
creare și configurarea de formulare și direcționarea rezultatului pe o adresă de email stabilită .
Hărțile au fost introduse folosind modulul WP Google Map Pro . Acesta permite implementarea
api-ului Google în website și afișarea mai multor hărți în funcție de adresa aleasă.
Pagina de Noutăți a fost construită prin afișarea unei liste de pagini marcate cu catego ria
Noutate în interiorul acesteia. Pentru a atribuii o categorie unei pagini s -a utilizat modulul Post
Tags and Categories for Pages . Acest modul aduce funcționalitatea de categorisire ce exista
deja în paginile de tip articol. P entru listarea paginilor î n pagina de noutăți s-a ales modulul
Posts in Pag e. După alegerea categoriei paginilor se generează codul ce va fi inserat în pagina
părinte.

<?php }?>
<div class="row">

php if($layout != 'full'){get_sidebar();} ?>

<div id="content" class="<?php echo ($layout != 'full' && $layo ut !=
'true-full')?'col -md-9':'col -md-12' ?><?php echo ($layout == 'left') ? "
revert -layout":"";?>" role="main">
<article class="single -page -content">
Figura 1 6

25
4. Securitate

4.1 Standarde de securitate
Modernizarea website -ului Universității Titu Maiorescu presupune și asigurarea unui nivel
de securitate adecvat. Cuvântul securitate înseamnă, conform DEX -ului, a fi la adăpost de orice
pericol , sentiment de încredere și de liniște pe care îl dă cuiva absența oricărui pericol. De
asemenea, înseamnă protecție, apărare. Defi niția securității depinde de contextul în care este
menționată. În cazul de față, securitatea website -ului presupune următoarele elemente:
• Confidențialitatea : Implică împiedicarea divulgării neautorizate a datelor private
către terți. Aceste date pot fi pa role de administrare a platformei sau a bazei de date,
informații despre vizitatori, statistici de utilizare, articole și pagini nepublicate, date
personale colectate utilizând formularele de pe website, etc.
• Integritatea : Implică împiedicarea modificării neautorizat e a fișierelor , a bazei de
date sau conținutului website -ului. Astfel veridicitatea conținutului prezent pe
website nu poate fi pusă la îndoială.
• Criptarea datelor : Este o tehnică de protejare a confidențialității informației, de
către intercept ori. În cazul website -ului Universității Titu Maiorescu, aceasta
presupune criptarea datelor transmise de către administratori sau vizitatori.
• Autentificarea : Presupune identificarea corectă a utilizatorilor autorizați să se
conecteze la platformă și să e fectueze modificări asupra conținutului.
• Disponibilitatea : Presupune ca website -ul să fie disponibil tuturor utilizatorilor
indiferent de regiune sau de momentul zilei.

4.2 Vulnerabilități le platformei WordPress și ale limbajelor utilizate
Mulțumită natu rii sale open -source, platforma WordPress este verificată și testată de o
comunitate largă de dezvoltatori și experți în securitate. Fiecare actualizare a platformei rezolvă
o multitudine de vulnerabilități descoperite atât în codul platformei dar și a lim bajelor utilizate.

26
Deși platforma WordPress, tema și modulele utilizate vin cu o serie de măsuri de securitate
implementate și sunt protejate de majoritatea vulnerabilităților cunoscute, există câteva tipuri
de atac ce pot avea loc dacă nu se implementeaz ă metode de protecție suplimentare.
• Cross -site Scripting (XSS) – Are loc când o persoană rău intenționată injectează
cod malițios în website. De obicei, acest tip de atac este aplicat asupra formularelor
de contact, asupra paginii de autentificare sau a căsuței de căutare. Orice câmp în
care utilizatorul poate scrie tex t este vulnerabil și predispus la acest tip de atac.
• Cross -Site Request Forgery (CSRF) – Porțiuni de cod sunt inserate și executate
din adresa URL a website -ului.
• Brute Force – Reprezintă tentativele de ghicire a parole i de administrare a
platformei Wordp ress prin încercarea de variante p ână la găsirea celei corecte.
• Denial of Service (DoS) – Încercarea de suprasolicitare a resurselor serverului
printr -un flux constant accesări venit din partea unui server dedicat. Numărul de
solicitări pe secundă fiind f oarte mare, website -ul devine nefuncțional pentru restul
utilizatorilor.
• Distributed Denial of Service (DDoS) – Similar cu atacul DoS, diferența aflându –
se în faptul că atacatorul trimite trafic din mai multe surse precum calculatoare,
servere sau routere infectate. Traficul venind de pe o adrese IP diferite la fiecare
accesare, devine foarte dificil de blocat.
• Open Redirect – Are loc prin exploatarea unei vulnerabilități și presupune
redirecționarea utilizatorilor către un website ales de către hacker. Ac esta este de
multe ori rău intenționat și conține cod malițios.
• Phishing ( Furt de identitate ) – Un website creat de către un hacker arată și se
comportă identic cu website -ul original, dar este folosi pentru a fura date de la
vizitatori sau a păcălii uti lizatorii autorizați să își introducă datele de autentificare
în website -ul fals.
• Malware – Un program sau cod malițios care are scopul de a infecta website -ul
sau serverul gazdă.
• Local File Inclusion (LFI) – Un atacator poate controla ce fișier este ex ecutat la
un anumit moment de către platforma WordPress.
• Eliminarea autentificării – O breșă de securitate care permite unei persoane
neautorizate să aibă acces la panoul de control al platformei WordPress fără a se
autentifica mai întâi.

27
• Full Path Discl osure (FPD) – Când calea către directorul rădăcină al serverului
este descoperită și sunt expuse directoarele, fișierele și erorile.
• Enumerarea Utilizatorilor – Atunci când un atacator are posibilitate de a
determina un nume de utilizator acreditat și îl poate folosit în atacuri de tip Brute
Force pentru a afla parola. Acest atac are loc prin adăugarea de parametri la sfârșitul
adresei unui website WordPress pentru a cere ID -ul utilizatorului cu ajutorul căruia
se poate cere numele de utilizator.
• XML Exte rnal Entity (XXE) – Are loc atunci când un flux de date XML este
accesat dintr -o sursă externă și folosit pentru a exploata vulnerabilitățile procesorul
XML.
• Eliminare securității – Similar cu eliminarea autentificării, cu diferența că hacker –
ul sare pest e un sistem de securitate existent pentru a primi acces la porțiuni din
website.
• Remote Code Execution (RCE) – O persoană neautorizată are posibilitate de a
executa cod pe serverul gazdă din altă sursă precum un server sau un website.
• Remote File Inclusio n (RFI) – Exploatarea unei referințe la o porțiune de cod ce
este preluată dintr -o sursă externă cu scopul de a încărca viruși pe website dintr -o
sursă total diferită.
• Server Side Request Forgery (SSRF) – Când un hacker preia controlul unui server
parțial sau total și îl folosește pentru a executa cod de la distanță.
• Directory Traversal – Cazuri în care protocolul HTTP poate fi exploatat pentru a
accesa directoarele website -ului și a executa cod din afara directorului rădăcină al
serverului.

4.3 Securizare a platformei împotriva tipurilor de atac cunoscute
Unul din motivele pentru care a fost aleasă platforma WordPress o reprezintă cantitatea de
vulnerabilități ce sunt rezolvate la fiecare update. O bună practică este aplicarea celor mai noi
actualizări ale platformei, temei și a modulelor folosite.
Toate modulele implementate, au fost foarte bine analizate din punct de vedere al securității
înainte de a fi instalate pe website. Au fost folosite numai module verificate și aprobate de
comunitatea open -source.

28
Deoarece există o scurtă perioadă de timp între descoperirea unei vulnerabilități și lansarea
unei actualizări de securitate, persoanele rău intenționate încearcă mai întâi să obțină versiunea
platformei pentru a lansa atacuri specializate. Ascunderea ve rsiuni WordPress îngreunează
mult încercările atacatorilor de a crea breșe de securitate. Pentru a ascunde versiunea
platformei, s -a folosit funcția add_filter pe metoda the_generator ( figura 17 ). Metoda generator
este cea care se ocupă cu afișarea mai mul tor elemente WordPress inclusiv versiunea. Filtrul
aplicat returnează un caracter generic în locul versiunii. Această funcție a fost plasată în fișierul
functions.php al temei, deoarece acesta este executat la fiecare afișare.

O serie de modificări au avu t loc asupra fișierului .htaccess. Acesta este un fișier de
configurare și este utilizat în a seta diferiți parametrii webserver -ului.
Atunci când nu există un fișier index.html sau index.php, browser -ul afișează structura de
fișiere a website -ului. Pentr u elimina acesta vulnerabilitate, a fost adăugată următoare opțiune
în fișierul .htaccess: Options -Indexes . Utilizatorii vor fi redirecționați către o pagină de eroare
404.
O altă metodă de atac este executarea codului malițios din interiorul
directoar elor WordPress. Pentru a elimina posibilitatea acestui atac, s -a
creat un fișier .htaccess personalizat pentru directoarele vizate Uploads
și WP -INCLUDES. În acest fișier s -a inserat comanda deny from all
asupra executabilelor PHP ( figura 18 ).
În fișieru l wp-config.php al platformei are loc conexiunea
la baza de date și configurarea elementelor funcționale. Din
această cauză, el este o țintă constantă a atacatorilor. Pentru
a-l proteja, a fost blocat accesul la acesta folosind funcția deny
from all în .ht access ( figura 19 ). function remove_version_i nfo() {
return '';
}
add_filter('the_generator', 'remove_version_info');
Figura 1 7
<Files *.php>
deny from all
</Files>
Figura 1 9 <files wp -config.php>
order allow,deny
deny from all
</files> Figura 18

29
Pentru a elimina vulnerabilitatea prin care sunt listați toți utilizatorii WordPress, s -a folosit
funcția RewriteCond %{QUERY_STRING} (author= \d+) [NC] (figura 20 ) ce blochează
manipularea adresei URL pentru a interoga baza de date.

În cele din urmă a fost blocat accesul la fișierul
.htaccess în sine, pentru ca codul de securitate să nu
sufere modificări, utilizând asupra sa funcția deny from
all (figura 21 ).
Pentru a asigura un nivel crescut de securitate, s -a
utilizat modului Wo rdfence Security. Acest modul adaugă un strat de protecția activ website –
ului prin intermediul mai multor funcționalități ce pot fi catalogate astfel:
• Funcționalități de scanare .
• Funcționalități de monitorizare .
• Funcționalități Firewall.
• Funcționalități de reparare.
Pe partea de Firewall, modulul Wordfence analizează traficul de pe website și identifică
atacatorii utilizând o bază de criterii actualizată zilnic. Atacurile folosind vulnerabilitățile
cunoscute sunt blocate chiar și atunci tema sau modulele ut ilizate nu au codul sursă optim.
Wordferce oferă protecție împotriva următoarelor tipuri de atacuri: Injecții SQL, XSS, Inserția
cu fișierel malițioase, Directory Traversal, Local File Inclusion, XXE și o vulnerabilitate a
modulului Slider Revolution de tip Local File Inclusion . Fiind vorba de un modul Firewall,
există și opțiunea de a bloca accesul anumitor adrese IP sau chiar a tuturor adreselor dintr -o
anumită regiune geografică.
Wordfence limitează numărul de încercări de autentificare la cinci. După c inci încercări
eșuate de autentificare, utilizatorul este nevoit de a aștepta 30 de minute înainte de a mai avea
voie să se autentifice. Aceiași regulă este aplicată și pentru funcția Am uitat Parola . Astfel se
asigură protecția împotriva atacurilor de tip Brute Force. RewriteEngine On
RewriteBase /
RewriteCond %{QUERY_STRING} (author= \d+) [NC]
RewriteRule .* – [F]
Figura 20
<files ~ "^.* \.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</files>
Figura 21

30
Pentru a elimina posibilitatea atacurilor de tip DoS și DDoS, Wordfence analizează
comportamentul vizitatorilor. Dacă există mai mult de 60 de accesări pe minut din partea unui
vizitator, accesul acestuia este blocat pentru o zi. Pentru a nu afecta imaginea SEO a website –
ului, Wordfence deține o listă de roboți Google de tip Crawler acreditați ce au acces nelimitat
la website. Roboții neacreditați sunt blocați imediat.
Funcționalitatea de scanare, analizează la intervale definite fișierele w ebsite -ului pentru
porțiuni de cod malițios, vulnerabilități, fișiere modificare sau module neactualizate. Atunci
când se găsește un fișier modificat sau o porțiune de cod malițios, administratorul este
atenționat. Wordfence evidențiază porțiunile infectat e din fișier, chiar și atunci când codul este
ofuscat. Atunci când este detectat un modul neactualizat, Wordfence oferă opțiunea de
actualizare automată în fundal. În cazul unui volum mare de trafic, există și opțiunea unei
scanări ce consumă mai puține re surse, dar durează mult mai mult.
Funcționalitatea de monitorizare permite trimiterea de email -uri administratorului cu
rapoarte privind activitatea website -ului. Wordfence trimite alerte atunci când:
• Se detectează module neactualizate . Sunt menționate nu mele și versiunile
modulelor.
• Se detectează porțiuni de cod infectate . Sunt menționate fișierele sau secțiunea de
cod malițioasă.
• Au loc încercări eșuate de autentificare . Se enumeră numele de utilizator de pe care
s-a încercat autentificarea alături de IP -ul persoanei.
• Se blochează traficul de pe o adresă IP.
• Un administrator se contează de pe un nou dispozitiv sau regiune.
• Există o creștere bruscă a fluxului de accesări pe una sau mai multe pagini.
• Când se detectează vulnerabilități în codul temei sau al e modulelor.
• Atunci când adresa domeniului este schimbată și face trimitere la un alt IP.
• Hard Disk -ul sau spațiul alocat pe care este găzduit website -ul este plin.
Pe lângă aceste funcții, Wordfence monitorizează și activitatea utilizatorilor acreditați d e
la conectare până la reconectare.
Uneltele de reparare a website -ului, permit recuperarea automată a fișierului infectat de pe
serverul oficial WordPress respectiv serverul furnizorului modului , sau în cazul unui fișier
nerecunoscut, ștergerea acestuia.

31
Pentru a oferi dezvoltatorilor o metodă de a comunica cu un website bazat pe platforma
WordPress, există un fișier numit xmlrpc.php. Acestea permite control website -ului de la
distanță. Deși teoretic util, pentru că permite adăugarea sau ștergerea de conț inut de pe un
dispozitiv mobil sau aplicație externă, prezintă un pericol pentru securitatea server -ului fiind
folosit pentru a insera cod malițios, pentru atacuri de tip DoS, DDoS sau Brute -Force. Această
vulnerabilitate a fost rezolvată folosind modulul Stop XML -RPC Attack . Acesta blochează
accesul la fișierul xmlrpc.php atunci când este accesat din exteriorul serverului. Pentru a nu
bloca funcționalitatea unor module ce ar putea depinde de acest fișier, accesul din interiorul
serverului a fost permis.
Este importantă securizarea conexiunii dintre utilizator și website. Atât pentru protecția
conturilor de administrator cât și pentru protecția datelor personale ale utilizatorilor. Astfel, s –
a implementat un certificat SSL. Pentru a nu se putea ajunge din gr eșeală sau intenționat la
website prin protocolul HTTP simplu, nesecurizat, s -a utilizat modulul Force HTTPS . Acesta
redirecționează tot traficul către și dinspre website prin protocolul securizat HTTPS.
Ca măsură finală de securitate, s -a utilizat modulul UpdraftPlus – Backup/Restore . Acesta
permite crearea de copii de rezervă a bazei de date și a elementelor structurale ale website -ului
precum temele, modulele sau traducerile. Crearea copiei de rezervă ale loc săptămânal și sunt
păstrate până la 20 de cop ii de rezervă. În cazul în care o breșă de securitate compromite
integritatea website -ului, aceste copii de rezervă pot fi oricând restaurate, total sau parțial .
• UpdraftPlus permite stocarea copiilor de rezervă:
• Local pe dispozitiv prin descărcare.
• Pe serverul website -ului.
• Într-un serviciu cloud precum Dropbox, Google Drive, Amazon S3 sau Microsoft
Azure .
• Pe serverul UpdraftPlus contra -cost.

4.4 Securizarea infrastructurii serverului gazdă
Asigurarea securității platformei și a website -ului nu este suf icientă, fiind necesară și
asigurarea securității serverului ce găzduiește website -ul. Cele mai simple atacuri au de multe
ori ca țintă serverul și resursele sale, nu aplicațiile găzduite.

32
Există numeroase amenințări la adresa securității, care provin din multe surse diferite și au
la bază o varietate de motive. Toate aceste amenințări pot fi grupate în câteva tipuri care includ:
• Întreruperea serviciului: atacuri de tip DDoS care presupun accesarea serverului din
unul sau mai multe un număr foarte mare de o ri. În majoritatea cazurilor, aceste
atacuri sunt direcționate la adresa de autentificare sau punctul de acces al serverului.
Scopul este supra utilizarea resurselor pentru a îngreuna și bloca orice activitate ține
de acel server.
• Accesul persoanelor neaut orizate: atacuri ce au ca scop evitarea autentificării și
accesul pe server a unuia sau mai multor intruși. Acestea pot avea la bază injecții
SQL sau atacuri de tip brute -force.
• Furtul de informații: atacuri ce au ca scop furtul informațiilor, de cele mai multe ori
prin interceptarea lor sau prin accesul neautorizat și neautentificat. O altă cauză a
furtului de informații o reprezintă injecția de cookie -uri preluate de pe dispozitivele
utilizatorilor autentificați.
Următorul este un scenariu tipic de atac:
1. Atacatorul adună informații despre organizație utilizând rețele de socializare sau
motoarele de căutare.
2. Atacatorul determină cea mai bună metodă de inițiere a unui atac cum ar fi un e –
mail de phishing sau sondarea serviciilor rețelei.
3. Atacatorul inițiază un atac pentru a avea un punct de intrare în rețea.
4. Atacatorul obține acces și apoi, folosind una sau mai multe identități compromise,
încearcă să își acorde privilegii de acces.
5. Atacantul obține privilegiile și continuă să compromită serviciile și servere le din
cadrul organizației, să compromită și să copieze datele și / sau să cauzeze o
întrerupere a funcționării.
Cu cât atacul rămâne nedetectat pe o perioadă cât mai lungă, cu atât mai mult poate provoca
daune și cu atât mai greu va fi eliminarea atacator ului din rețea. Obiectivul este de a extinde
timpul necesar pentru a -și privilegiile la săptămâni și luni, astfel încât atacul să poată fi detectat
și să se răspundă la acesta înainte ca atacatorul să poată obține controlul deplin.
Pentru a asigura securit atea serverului , există mai multe metode / etape care trebuie
parcurse și implementate.

33
Politica de securitate . Există mai multe opinii în legătură cu necesitatea unui plan de
securitate. Uni experți o consideră redundantă, pe când alții o considera vital ă. Cu toate astea,
politica de securitate reprezintă un element foarte important în securizarea unui mediu de lucru
de tip corporație. Planul de securitate pune accentul pe un număr de factori pornind
identificarea punctelor și operaților cheie ale rețelei ce se dorește securizat ă, ce operații sunt
necesare zilnic, dar nu critice, ce pot fi securizate. A doua prioritate o reprezintă resursele
sistemului și informația stocată pe fiecare. Politica de securitate va acorda factori de risc
fiecărei resurse alătu ri de o listă de măsuri de securitate. De asemenea, categorizează
activitățile acceptabile și neacceptabile ale sistemului.
Politica de securitate include și persoanele care utilizează sistemul, împărțindu -le în două
grupuri: persoanele din echipa de secur itate și restul utilizatorilor. Fiecare grup este educat și
pregătit corespunzător asupra elementelor ce constituie securitatea rețelei și cum trebuie
procedat în cazul unei breșe. Politicile de securitate diferă în funcție de caz, de la companie la
compan ie.
Protecțiile de tip Firewall . Programele și dispozitivele de tip firewall, cunoscute și drept
paravane de protecție, sunt o utilitară de protejare a rețelei. Acestea pot fi ori un dispozitiv
fizic, ori un program instalat pe un calculator din rețea. Sco pul principal este de a izola rețea
sau porțiuni individuale din acesta de lumea exterioară pentru a limita pierderile pe care le
poate cauze un intrus în cazul unei breșe.
Similar cu implementarea la nivelul platformei WordPress, Firewall -ul rețelei are r olul
important de a blocat atacurile de tip DDoS. Întrucât are ca scop blocarea serviciului prin
accesări repetare din mai multe surse, paravanul de protecție detectează atacul și blochează
sursele. De asemenea, poate restricționa accesul utilizatorilor di n interiorul rețelei, la resurse
periculoase din exteriorul acesteia.
Controlul accesului . Una din cele mai importante metode de securizare a unei rețele de
calculatoare este implementarea unui regim puternic de acces pentru a combate numărul tot
mai mare al hoților și al hacker -ilor. Acest control se bazează pe o varietate de tehnici. Există
lista de acces care identifică utilizatorii individual și grupului asociat fiecărui obiect din baza
de date, alături de drepturile pe care le au respectivii utilizator i asupra obiectului. Drepturile
sunt de citire, de scriere și de execuție. Astfel se decide ce proces are dreptul să ruleze, să
acceseze resurse respectiv cine are voie să îl folosească.

34
Programele de control a accesului oferă posibilitatea de a urmării r ețeaua sau dispozitivele
conectate și de a identifica comportamentul ilegal sau anormal. Se pot identifica utilizatorii
care accesează date importante, programele care consumă resursele sau limitează banda,
utilizatorii neidentificați și așa mai departe. P rin intermediul programelor de control al
accesului, se pot acorda sau restricționa drepturile utilizatorilor, grupurilor sau programelor.
Pentru ca această metodă să fie eficientă, este necesară o politică de securitate care să servească
drept set de regu li ce trebuie respectate. Astfel, administratorul poate identifica corect și rapid
persoanele rău intenționate atât din interiorul cât și din exteriorul rețelei sau a dispozitivului.
Utilizarea algoritmilor de criptare puternici . Pe zi ce trece cantitatea de informație
stocată și accesată în interiorul rețelelor de calculatoare este tot mai mare și mai valoroasă. Din
acest motiv, există tot mai multe amenințări la adresa securității acestora. Principalii vinovați
sunt programele slabe calitativ folosite în crearea protocoalelor și a aplicațiilor utilizate.
Statisticile arată ca un număr foarte mare de vulnerabilități ale rețelelor provin din cauza
protocoalelor foarte salbe. Hackeri pot să exploateze aceste vulnerabilități și erori software,
care uneori sun t ușor de fixat, și să spioneze rețeaua și să intercepteze transmisiunile cu
ușurință. Așadar, securitatea rețelei se bazează pe utilizarea unui algoritm de criptare puternic
cu un termen de valabilitate cel puțin egal cu perioada de valabilitate a informa ției.
Utilizarea metodelor de autentificare sigure și inovative . Dintre toate metodele de
securitate, printre cele mai bune se numără autentificarea, care are cele mai mari șanse de a
opri vandalii și intrușii. Tehnicile avansate de autentificare și cripta re stau la temelia
infrastructuri serverului .
Kerberos este o schemă de management al cheilor, care autentifică participanții
necunoscuții care doresc să comunice între ei. Rolul acestuia este de a crea certificare unice de
identificare și să mențină o ba ză de date a participanților, proceselor, serverelor, a sistemelor
și a altor informații.
IPSec este o suită de protocoale pentru securizarea comunicațiilor ce oferă capabilitatea de
a securiza datele într -o rețea de comunicare. Criptează și autentifică to t traficul la nivel de IP
de rețea. Este folosit în toate aplicațiile din internet, precum e -mail-ul, transferul de fișiere,
accesul securizat în web, etc.
SSL este un sistem de criptare cu scop general care funcționează la nivelul TCP / IP pentru
a autent ifica serverul și, opțional, clientul. În acest sens, SSL presupune o cheie secretă pe care
atât clientul, cât și serverul o utilizează pentru a trimite mesaje criptate.

35
S / key este o schemă de parolă unică, bazată pe o funcție hash neinversabilă. Fiecare parolă
utilizată în sistem poate fi folosită numai pentru o singură autentificare. Din cauza politicii sale
de utilizare unică, parolele nu pot fi interceptate și o secvență de parole utilizată nu oferă
informații despre parolele viitoare.
Parola indirect ă de uz unic (OTP) este o tehnică de autentificare care generează și utilizează
o parolă apoi o elimină. Serverul stochează sau generează o listă prestabilită de parole pe care
un client le poate utiliza. Securitatea sistemului OTP se bazează pe neinversa bilitatea unei
funcții hash securizate și pe un dispozitiv de tip token pentru a furniza codul de autentificare.

Detectarea și prevenirea intruziunilor . Detectarea intruziunilor este o tehnologie care
monitorizează activitățile rețelei bazându -se pe faptu l că programele utilizate în atacurile
cibernetice lasă frecvent în urmă o semnătură caracteristică. Acesta semnătură este folosită de
către dispozitivul de detectare și sunt adunate informații pentru a identifica natura atacului. La
nivelul fiecărui proto col, au loc investigații ale rețelei pornind de la semnăturile de activitate,
anomalii de comportament și alți factori.
Există o varietate largă de sisteme de detectare a intruziunilor, ce pot funcționa atât în mod
pasiv cât și activ. Unul din tipuri est e plasat la punctele strategice ale rețelei, cu o privire de
ansamblu asupra rețelei în întregime. Cel de al doilea tip este instalat pe un calculator gazdă și
monitorizează activitatea acestuia, identificând comportamentul anormal bazându -se pe
evenimente le ce au loc pe gazdă.
Un mod eficient de a utiliza dispozitivele de detectare a intruziunilor este de le grupă alături
de un firewall. Aceste tehnologii aplicate în mod eficient pot duce la asigurarea securității
infrastructurii.
Auditul . Auditul securită ții unui sistem sau rețele, este procesul prin care sunt identificare
vulnerabilitățile înaintea atacatorului. Cu cât rețeaua este testată mai des, cu atât este mai dificil
pentru o persoană rău intenționată să pătrundă. Un audit de securitate scoate la iv eală
problemele și chichițele necunoscute ce pot fi exploatate pentru a pătrunde în rețea sau
intercepta date. Realizate de către cineva din afară, oricât de slab ar fi auditul de securitate,
acesta creează un standard de securitate ce va servi drept etalo n. Un audit de securitate poate
fi activ sau pasiv. Auditul activ constă în reacția activă la accesul ilicit și la intruziuni, așa cum

36
sunt ele observate în timp real, în timp ce un audit pasiv se referă doar la rapoartele care s -au
strâns timp, nu în timp real. Cu toate acestea, auditul pasiv este o soluție mai ieftină.
Protecții de tip antivirus . Protecțiile de tip antivirus sunt importante atât pentru serverele
cât și pentru calculatoarele individuale conectate într -o rețea. O foarte mare parte din atacu rile
ce au loc asupra unei rețele sunt pe bază de viruși, cripto -viruși sau alte programe malițioase.
Virușii sunt programe care au rolul de a sabota sistemul pe care îl infectează, ducând la pierderi
de date, coruperi de date sau chiar arderea componentel or. Cripto -virușii sunt programe care
preiau controlul sistemului și îl blochează definitiv, criptând datele, până la achitarea unei sume
de bani de către victimă. Dacă suma cerută nu este achitată, fișiere sunt șterse definitiv. Alte
programe malițioase p ot fi cele de tip spion, care transmit, la o sursă aleasă, datele, mesajele
comunicate, activitatea, conturile și parolele de pe dispozitivul infectat. Virușii blochează
instalarea unui antivirus sau a oricărui alt program pe durata infecției. Este necesar ă instalarea
unui antivirus încă de la prima rulare a calculatorului.

5. Optimizare SEO

5.1 Importanța optimizării SEO
Mediul online devine din ce în ce mai aglomerat , sute de mii de website -uri în fiecare
domeniu concurează pentru o poziție cât mai îna ltă în motoarele de căutare. Uneori succesul
unui website poate fi puternic afectat dacă acesta este afișat cu 3 rezultate mai jos decât
concurența. Majoritatea vizitatorilor nu avansează mai departe de prima pagină de rezultate ,
deci este foarte important ca website -ul să aibă o poziție cât mai înaltă în motoarele de căutare.
Optimizarea SEO (Search Engine Optimization), este o optimizare dedicată motoarelor de
căutare și a modului în care acestea interacționează și indexează website -ul. Această optimizare
presupune optimizarea design -ului, a conținutului, a codului sursă și a conexiunii utilizatorului
cu serverul. Avantajele acestui proces sunt:
• Vizibilitate . Un website optimizat este ușor de găsit în motoarele de căutare. Acest
lucru este valabil atât atu nci când se caută numele website -ului cât și când este
căutat un cuvânt cheie relevant website -ului.

37
• Creșterea traficului . O poziționare cât mai bună a website -ului în căutări
garantează o creștere semnificativă a traficului pe website.
• Mai ușor de utiliza t. Atunci când un vizitator nu cunoaște exact numele paginii
sau adresa acesteia, poate folosi un motor de căutare pentru a găsi conținutul dorit.
Un exemplu de căutare este „utm facultatea de informatica orar”. Este foarte
important ca fiecare pagină a we bsite -ului să fie optimizată tocmai pentru a facilita
astfel de căutări.
• Îmbunătățirea reputației online și offline . Apariția reperată în căutări a website –
ului Universității Titu Maiorescu, va îmbunătății semnificativ imaginea instituției
atât în mediul o nline cât și în lumea reală. Cum website -ul reprezintă imaginea
UTM și primul contact cu universitatea, rezultatele în motoarele de căutare
reprezintă imaginea website -ului și primul contact cu acesta.
• Rata de conversie mut mai mare . Rata de conversie este raportul dintre cei care
aleg să se înscrie la o facultate din cadrul universității și totalul de vizitatori ai
website -ului. Optimizare SEO corectă va crește semnificativ rata de conversie.
Vizitatorii website -ului fiind doar cei care sunt interesați de serviciile oferite.

5.2 Standardele Google
Google este cel mai popular motor de căutare având o cotă de piață de 74.54% . Google
reprezintă sursă principală a traficului către website. Din această cauză optimizarea SEO s -a
făcut în funcție de setul de regu li și recomandări oferit de Google.
Algoritmul de căutare și indexare Google este extrem de complex și are la bază peste 200
de criterii. O parte din aceste criterii sunt publice, pe când altele sunt ținute secret de către
companie. În fiecare an sunt adă ugare noi criterii și optimizare criteriile existente. Standardele
Google presupun:
• Vechimea, reputația și relevanța domeniului . Vechimea domeniului influențează
pozitiv afișarea în listele de căutare. Cu cât domeniul este mai vechi, cu atât are mai
multe șanse de afișare. Reputația unui domeniu este influențată de conținutul de pe
website. O reputație bună presupune ca în trecut să nu fi fost trimite mesaje de tip
SPAM de pe acest domeniu, să nu fi existat tentative de phishing și website -ul să
nu fi conți nut fișiere malițioase. Relevanța domeniului constă în cât de apropiat este
numele domeniului de cuvintele cheie din căutare.

38
• Viteza de încărcare . Un alt aspect foarte important îl reprezintă viteza de încărcare
a website -ului. Un website care se încarcă l ent, va fi afișat pe o poziție inferioară
față de cele care se încarcă mult mai repede. Fiecare fracțiune de secundă contează.
• Dimensiunea codului . Google recomandă ca dimensiunea codului sursă (HTML,
CSS și JavaScript) să nu fie prea mare. Astfel poate fi procesat ușor de către orice
dispozitiv. Ideală este existența unui singur fișier CSS.
• Adaptabilitatea pentru mobile . Întrucât dispozitivele mobile sunt tot mai
populare, adaptabilitatea pentru ecranele lor a devenit unul dintre criteriile cheie în
poziți onarea în rezultatele Google.
• Optimizarea cuvintelor cheie. Cuvintele cheie sunt expresiile care descriu
serviciile oferite și sunt utilizare în căutările pe web. Spre exemplu, „studii
masterat„. Este important ca paginile care descriu aceste servicii și a ibă o densitate
între 2% și 4%. Prea puține cuvinte cheie nu vor afișa pagina în listele de căutări.
Prea multe cuvinte cheie și Google va penaliza website -ul.
• Dimensiunea website -ului. Dimensiunea website -ului conferă două avantaje.
Primul este credibilit atea acestuia, datorată cantității mari de conținut relevant. Al
doilea avantaj este prezența mai multor pagini cu cuvinte cheie ce pot atrage
vizitatori.
• Optimizarea imaginilor . Imaginile trebuie să fie cât mai mici și să conțină
atributele alt și title. Se recomandă utilizarea cuvintelor cheie în aceste atribute.
• Utilizarea etichetelor HTML heading. Aceste etichete, h1, h2 … h6, servesc ca
titluri în pagină. Existența lor este necesară, Google verificându -le întâi pe acestea
pentru cuvinte cheie.
• Existe nța META titlurilor și a META descrierilor. META titlurile sunt afișate
în listele de căutare și reprezintă titlurile paginilor. Optim acestea trebuie să conțină
60-70 de caractere. META descrierile s unt texul de sub META titlu ( figura 22 ), în
care este de scrisă pagina. Acestea pot avea între 150 și 160 de caractere. Atât
META titlurile cât și META descrierile trebuie să conțină cuvintele cheie relevante
paginii.

Figura 22

39
• Existența favicon -ului. Favicon -ul este un fișier de tip icon ce se afișează în ba ra
de stare a navigatorului când este deschis website -ul. Acesta apare și când website –
ul este adăugat la semnele de carte sau îi se face o scurtătură pe desktop.
• Existența fișierului robots.txt . Acest fișier interacționează cu algoritmul de
indexare al w ebsite -ului și conferă informații precum ce pagini să nu fie indexate .
• Existența fișierelor sitemap .xml și sitemap.html . Aceste fișiere conțin o listă
ierarhizată a website -ului și sunt folosite de motoarele de căutare pentru a știi ce
pagini există pe web site și trebuie indexate.
• Lipsa conținutului duplicat . Nu trebuie să existe 2 pagini în website cu același
conținut.

5.3 Tehnici utilizate
Pentru optimizarea SEO s-au respectat toate criteriile și standardele motorului de căutare
Google. Website -ul se ad aptează pentru toate dispozitivele, iar codul a fost minificat. De
asemenea viteza de încărcare a fost optimizată printr -o varietate de metode.
Pentru monitorizarea cuvintelor cheie și modificarea META datelor, s -a utilizat modului
Yoast SEO. Acest modul analizează pagini le website -ului și oferă o serie de funcționalități și
verificări precum:
• Calculul densității cuvintelor cheie.
• Prezența cuvintelor cheie în etichete heading
• Prezența cuvintelor cheie în titlul și adresa paginii
• Prezența etichetelor alt și title pentru imagini și prezența cuvintelor cheie în acestea.
• Existența cuvintelor cheie la începutul primului paragraf al paginii.
• Lungimea META titlului paginii și a META descrierii și prezența cuvintelor cheie
în acestea.
• Verificarea conținutului dup licat.
Pe lângă aceste funcționalități, Yoast SEO generează automat fișierele robots.txt,
sitemap.xml și sitemap.html . Noile pagini sunt adăugate automat în aceste fișiere.
Pentru website -urile realizate în platforma WordPress adresele fiecărei pagini sun t
generate automat în funcție de titlu . Yoast SEO rescrie aceste adrese automat pentru a evidenția

40
cuvintele cheie și a simplifica structura. Atunci când o pagină este ștearsă sau adresa acesteia
este modificată, va fi creată o redirecționare către noua ad resă sau prima pagina a website -ului.
Astfel vizitatorii nu întâmpină pagini de tip 404 Not Found.

6. Optimizare vitezei

Optimizarea vitezei de încărcare a website -ului este un pas crucial în dezvoltarea oricărui
website. Viteza de încărcare afectează w ebsite -ul din mai multe puncte de vedere.
România are o viteză de internet mult peste media celorlalte țări, atât de pe teritoriul
European cât și față de restul lumii. Întrucât website -ul Universității Titu Maiorescu se
adresează și persoanelor din alte regiuni ale lumii cu o viteză de internet mult mai slabă.
Deși puterea de calcul a dispozitivelor mobile este din ce în ce mai mare de la an la an, nu
toată lumea își permite un model de top. Peste 43% dintre utilizatorii de internet de pe
smartphone -uri și tablete nu au mai mult de 2 nuclee de procesare în dotare. Un website mic
ca dimensiune și rapid ca încărcare înseamnă că această gamă de utilizatori nu va întâmpina
probleme la navigare.
Un alt aspect important care este influențat de viteza de încărca re o reprezintă Optimizare
SEO. Website -urile cu conținut optimizat și timp de încărcare mic au parte de un plasament
avantajos în listele de rezultate .

6.1 Optimizarea imaginilor
Primul pas al optimizării vitezei de încărcare a fost optimizarea imaginilo r utilizate. Din
start imaginile au fost utilizate în formatul JPG. Acest format, spre deosebire de PNG sau alte
formate, permite compresarea prin pierdere. Deși algoritmi utilizați pentru compresia JPG
afectează calitatea imaginii, dimensiunea este mult r edusă chiar și atunci când artefactele de
compresie nu sunt vizibile. O imagine în formatul PNG, la dimensiunea de 200kb, va ajunge
la 84kb în format JPG cu diferența vizuale greu sesizabile. Unele imagini au nevoie de

41
transparență, precum logo -ul sau sigl ele. Pentru acestea s -a păstrat formatul PNG dar rata de
compresie este mai mică.
Pentru realizarea compresiei s -a utilizat modulul reSmush.it Image Optimizer . Acest modul
compresează toate imaginile prezente în website și noile imagini pe măsură ce sunt î ncărcate.
S-a ales să se păstreze 75% din calitatea imaginilor originale. Pentru un format web, diferențele
sunt insesizabile. Au fost optimizate 843 de fișiere de tip imagine și s -au economisit 439MB.
Aceasta înseamnă o rată de reducere de 53,15% (figura 23).

Figura 23

6.2 Cache la nivel de server
Platforma WordPress generează conținutul HTML pentru fiecare vizitator. Atunci când
există mulți vizitatori simultan, serverul devine supra solicitat prin procesarea codului PHP și
generarea conținutului. Pent ru a elimina această problemă, se generează fișiere de tip cache la
nivel de server . Aceste fișiere sunt conțin paginile HTML, cu codurile CSS și JavaScript
integrate. Astfel, sunt livrate fișierele deja generate, fără a genera altele noi ( figura 24 ).

Figura 24

42
Pentru a genera fișierele cache, s -a implementat modulul Autoptimize. Pe lângă cache,
acest modul minifică și codul HTML, CSS și JavaScript livrat. Atunci când sunt modificate
sau adăugate pagini, cache -ul este regenerat.

6.3 Cache local
O altă metodă de cache se află la nivel de browser. Acesta devine eficient atunci când
utilizatorii accesează frecvent website -ul. Cache -ul local conține fișierele CSS, HTML și
JavaScript alături de imaginile de pe paginile accesate. Atunci când un utilizator rev ine pe
website, folosește fișierele stocate local și nu descarcă noi fișiere. Cache -ul local are o dată de
expirare, iar browser -ul interoghează serverul la fiecare accesare pentru a verifica dacă cache –
ul mai este sau nu valabil.
Pentru implementarea cac he-ului local s -a utilizat modulul WP Super Cache. Acesta oferă
opțiunea configurării duratei fișierelor cache și excluderea anumitor paginii dacă este
necesar.

6.4 Compresia GZIP
Un website este , de fapt , un amalgam de cuvinte ce compun limbajele de pro gramare.
Multe din aceste cuvinte au un număr foarte mare de apariții. Un fișier text HTML poate
ajunge și la 200kb fără a include imagini. Aceste cuvinte pot fi compresate utilizând
algoritmul GZIP. Atunci când utilizatorul intră pe website, serverul trim ite o variantă
compresată a paginii. Browser -ul o decompresează local. Așadar, în loc să trimitem 200kb,
trimitem 12kb de date crescând viteza și rata de răspuns a website -ului.
Pentru a implementa această compresie, în fișierul .htaccess s -au introdus tip urile de
fișiere ce trebuie compresate utilizând metoda mod_deflate.c ( figura 25 ). Aceste tipuri sunt:
HTML, CSS, JavaScript, XML, PHTML, Text, XHTML și RSS.
Această tehnologie este compatibilă cu toate navigatoarele și dispozitivele moderne.
Fișierele sun t decompresate fără pierderi de date.

43

Figura 25

6.5 Optimizarea bazei de date
Platforma WordPress folosește o bază de date relațională. La fiecare generare de conținut,
baza de date este interogată. Durata interogării depinde de cantitatea de conținut d in baza de
date. Pe lângă conținutul existent, platforma WordPress stochează în baza de date toate
modificările care au avut loc asupra unei pagini împreună cu conținutul anterior. Cu timpul,
pe măsură ce au loc modificări și actualizări ale modulelor, în baza de date se strâng adrese
vechi, conținut orfan, pagini nepublicate și alte date neutilizate. Această cantitate mare de
informație îngreunează mult interogările.
Pentru a curăța baza de date s -a utilizat modulul WP -Sweep. WP-Sweep curăța baza de
date ș i optimizează tabelele pentru interogării rapide. Inițial baza de date avea o dimensiune
de 50.4mb. După optimizare aceasta ajunge la 31.5mb.

6.6 Rezultatele optimizării
Viteza website -ului a fost testată folosind uneltele Google și Pingdom. Amândouă
platforme fiind recunoscute ca fiind corecte și minuțioase în verificare.
În testul Pingdom website -ul a obținut un scor de 93 /100 (figura 26 ), gradul A pe
serverele din Stockholm – Suedia, New York și California din SUA. Aceste rezultate
clasează website -ul peste 75% dintre website -urile testate. În testul Google, website -ul a
obținut un scor de 82% (figura 27). <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/phtml
AddOutputFilterByType DEFLATE text /plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x -javascript
AddOutputFilterByType DEFLATE text/javascript
</IfModule>

44

Figura 2 6

Figura 27

7. Concluzie

Modernizarea website -ului Universității Titu Maiorescu a presupus o serie de
îmbunătățiri față de versiune a originală. S-au utilizat cele mai noi tehnologii și cele mai noi
tehnici pentru a asigura succesul noii versiuni din toate punctele de vedere.
În materie de design, website -ul a fost reconstruit păstrând toate elementele cheie ale
precedentului. Noii ut ilizatorii vor recunoaște structura website -ului și vor beneficia de
aspectul îmbunătățit. Poziționarea pe tot ecranul, evidențierea elementelor ce constituie
identitatea vizuală și reordonarea elementelor informaționale vor conferi website -ului un
aspect modern și un impact vizual puternic.
Au fost aduse multe modificări pentru a spori ușurința de utilizare, precum aerisirea
design -ului, plasarea elementului ce derulează la începutul paginii, meniurile care coboară la

45
derulare, replasarea elementelor socia le și eliminarea paginilor fantomă / redundante. S-a
utilizat un sistem multilingvist ce permite schimbarea limbi fără a părăsi pagina și traducerea
integrară a website -ului.
Interacțiunea de pe dispozitivele mobile a fost complet modificată. Design -ul se auto
adaptează, imaginile se redimensionează și elementele ce se derulează pot fi controlate prin
atingeri. Font -urile au fost adaptate iar documentele PDF au fost înlocuite cu link -uri de
descărcare.
Pentru a asigura securitatea website -ului s -au identifi cat vulnerabilitățile platformei
WordPress și ale limbajelor folosite. Cu ajutorul mai multor module și prin inserarea de
comenzi de configurare în fișierul .htaccess, a fost asigurat un nivel crescut de securitate.
Pentru a prevenii atacurile de tip brute -force și DoS/DDoS, s -a implementat un sistem
firewall la nivel de website.
Optimizarea SEO nu a fost neglijată. Urmând standardele și regulile impuse de motorul
de căutare Google, website -ul beneficiază de o optimizare corectă și are toate șansele să
ocupe poziții înalte în listele de căutare.
Viteza website -ului a fost îmbunătățită printr -o varietate de metode. Codul a fost
minificat, imaginile au fost optimizate, s -a activat compresia GZIP la nivel de server, a fost
implementat cache -ul atât local cât și pe server iar baza de date a fost micșorată pe cât
posibil. Rezultatul a fost verificat utilizând atât uneltele oferite de Google cât și platforma
Pingdom. Scorurile obținute plasează website -ul cu mult peste media website -urilor testate.

Bibliografie

• HTML5 and CSS3 All – in – One For Dummies – Andy Harris
• JavaScript & jQuery – The Missing Manual – David Sawyer McFarland
• Learning PHP 7 – Antonio Lopez
• The WordPress Guidebook – BDM
• Responsive Web Design – Ethan Marcotte

46
• Don’t Make Me Think, Revisited: A Common Sense Approach To Web Usability
– Steve Krug
• Securing the Information Infrastructure – Joseph Kizza, Florence Migga Kizza
• Cryptography and Network Security Principlesand Practices – William Stallings
• http://www.wpbeginner.com/wordpress -security
• Search Engine Optimization Starter Guide – Google
• www.wikipedia.com