Îndrumător proiect/Coordonator științific, Ș.l.dr.ing. Dan MUNTEANU Absolvent, Mircea-Adrian STAN Galați Anul 2019 SPECIALIZAREA: CALCULATOARE ȘI… [309467]

PROIECT DE DIPLOMĂ

Îndrumător proiect/Coordonator științific,

Ș.l.dr.ing. Dan MUNTEANU

Absolvent: [anonimizat]-Adrian STAN

Galați

Anul 2019

SPECIALIZAREA: [anonimizat],

Ș.l.dr.ing. Dan MUNTEANU

Absolvent: [anonimizat]-Adrian STAN

Galați

Anul 2019

Departamentul __________________________________________________________________________

PROIECT DE DIPLOMĂ/LUCRARE DE DISERTAȚIE

Numele si prenumele absolvent: [anonimizat]: _____________________________________________________________

Domeniul / Specializarea: _________________________________________________________________________

Tema proiectului de diplomă/ lucrării de disertație ____________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Conducător științific: ______________________________________________________________________________

Consultant de specialitate: ________________________________________________________________________

Data primirii temei:____________________________

La elaborarea proiectului de diplomă / lucrării de disertație se va respecta Regulamentul de întocmire a proiectelor de diplomă și a [anonimizat]-ul facultății http://www.aciee.ugal.ro/studenti/finalizare-studii/regulamente-si-[anonimizat]: [anonimizat]. _____/__________________

Aprobat,

Decan

DOMNULE DECAN

Subsemnata/Subsemnatul, _______________________________________________________________________, absolventă/absolvent a/[anonimizat], [anonimizat], domeniul __________________________________, specializarea (licență/master) ______________________________________

_____________________________________________________________________________________________________________, promoția ______________, [anonimizat]/disertație sesiunea _________________________________________________.

Am ales proiectul de diplomă/lucrarea de disertație cu titlul _________________________________________________ _____________________________________________________________________________________________________________sub îndrumarea ___________________________________________________________________________.

Am citit cu atenție REGULAMENTUL DE ÎNTOCMIRE A PROIECTELOR DE DIPLOMĂ ȘI LUCRĂRILOR DE DISERTAȚIE și l-am respectat integral.

Data: __________________________ Semnătura ____________________________

Viza îndrumătorului proiectului/coordonatorului lucrării__________________________

Viza Directorului de departament ce coordonează programul __________________

DECLARAȚIE

Subsemnata (ul), _________________________________________________________________________________ absolventă/absolvent a/[anonimizat], [anonimizat] “Dunărea de Jos” [anonimizat] ________________, specializarea _____________________________________________________________________________________________, declar pe proprie răspundere că proiectul de diplomă/lucrare de disertație cu titlul „________________________________________________________________________________________________________________________________________________________________________________________________________________________”este elaborat/elaborată de mine și nu a mai fost prezentat/prezentată niciodată la o altă facultate sau instituție de învățământ superior din țară sau străinătate. De asemenea, declar că toate sursele utilizate, inclusive cele de pe Internet, sunt indicate în proiect/lucrare, cu respectarea regulilor de evitare a plagiatului.

“Plagiatul: însușirea ideilor, metodelor, procedurilor, tehnologiilor, rezultatelor sau textelor unei persoane, indiferent de calea prin care acestea au fost obținute, prezentându-le drept creație proprie.”

Am luat la cunoștință că prezentarea unui/unei proiect/lucrări plagiate va conduce la anularea diplomei de licență/master.

Lucrarea conține un număr de __________ pagini.

Data: ________________ Semnătura ____________________________

ACORD PRIVIND TRANSFERUL REZULTATELOR PROIECTULUI DE DIPLOMĂ/LUCRĂRII DE DISERTAȚIE

Subsemnata (ul), _________________________________________________________, absolventă/absolvent a/al Facultății de Automatică, Calculatoare, Inginerie Electrică și Electronică, din cadrul Universității “Dunărea de Jos” din Galați, promoția _______________________, specializare _____________________________________________________________________________________________________________,

(NU) SUNT DE ACORD * să cedez rezultatele software și hardware – aferente proiectului de diplomă/lucrării de disertație – în favoarea Facultății de Automatică, Calculatoare, Inginerie Electrică și Electronică, din cadrul Universității “Dunărea de Jos” din Galați, pentru creșterea dotării materiale a facultății și în folosul exclusiv al studenților.

Proiectul/lucrarea conține următoarele:

Partea hardware compusă din:

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Partea software compusă din:

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Data: ________________ Semnătura ____________________________

Notă:

* Se taie (bifează), după caz

Departamentul __________________________________________________________________________

Sesiunea:_________________________________________________________________________________

REFERAT DE EVALUARE

a proiectului de diplomă / lucrării de disertație cu titlul ________________________________________

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Elaborat (ă) de absolventul _______________________________________________________________________

Perioada de documentare și pregătire ___________________________________________________________

Conținutul proiectului _____________________________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Contribuții personale ale autorului _______________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Respectă regulile de întocmire și redactare? DA / NU *

Se propune ADMITEREA / RESPINGEREA proiectului / lucrării pentru susținerea publică.

Nota propusă _________________________ (această notă nu va fi luată în calculul mediei finale)

Data, Conducător științific,

Notă:

* Se taie (bifează), după caz

Rezumat

În cadrul acestui proiect s-a dorit realizarea unei interfețe de site pentru Universitatea „Dunărea de Jos” din Galați, prin folosirea principiilor de design care trebuiesc luate în considerare în realizarea de website-uri.

În primul capitol, se va face identificarea principiilor de design aplicate folosite pe interfețele web: layout, culori, tipografie, limite impuse de ultimile tehnologii web si tipul de implementare tehnica a design-ului.

În al doilea capitol, se va face o analiză comparativă atât pe site-uri românești cât și pe site-urile mai multor universități din străinătate la nivel tehnic, vizual și de conținut, din care vor rezulta concluziile în vederea realizării interfeței site-ului Universității „Dunărea de Jos” din Galați.

În capitolul trei, se parcurg etapele realizării site-ului universității pe baza concluziilor și observațiilor la care s-a ajuns în urma analizei efectuate pe mai multe site-uri din domeniul academic, cu o interfață nouă, modernă și ușor de accesat.

În ultimul capitol, se redau concluziile la care s-a ajuns în urma realizării interfeței, de la faza inițială care a constat în studiul website-urilor acadamice până la scrierea și redactarea proiectului, problemele cele mai dificile care au fost întâmpinate de-alungul dezvoltării interfeței și soluțiile care au fost abordate.

CUPRINS

Introducere 1

Capitolul 1. PRINCIPII DE DESIGN FOLOSITE PENTRU REALIZAREA DE INTERFEȚE WEB 2

1.1. Design 3

1.1.1. Linia 3

1.1.2. Forme geometrice și organice 4

1.1.3. Layout 5

1.1.4. Principii de compoziție 5

1.2. Culori 6

1.2.1. Moduri de sinteză a culorilor: CMY și RGB 6

1.2.2. Scheme de culori 7

1.2.3. Semnificațiile culorilor 10

1.3. Tipografie 10

1.3.1. Marginile paginii 10

1.3.2. Coloanele paginii 10

1.3.3. Paragrafele paginii 11

1.3.4. Interlinia 12

1.3.5. Spațiul între două litere 12

1.3.6. Crenajul 13

1.3.7. Alinierea textului 13

1.3.8. Fonturi 14

1.3.9. Lorem ipsum 14

1.3.10. Tehnoredactarea web 15

1.4. Implementare 15

1.4.1. HTML 15

1.4.2. CSS 16

1.4.3. PHP 17

1.4.4. MySQL 17

1.5. Marketing 19

Capitolul 2. STUDII COMPARATIVE PE MAI MULTE SITE-URI ACADEMICE 20

2.1. Site-uri din domeniul academic ale unor universități din Marea Britanie 21

2.1.1. University of Cambridge 21

2.1.2. Loughborough University 23

2.1.3. University of the Arts London 25

2.2. Site-uri din domeniul academic ale unor universități din România 27

2.2.1. Universitatea "Babeș-Bolyai" 27

2.2.2. Universitatea din București 29

2.2.3. Universitatea din Oradea 31

2.3. Concluzii asupra site-urilor academice studiate 33

Capitolul 3. SITE-UL UNIVERSITĂȚII „DUNĂREA DE JOS” DIN GALAȚI 34

3.1. Design 35

3.2. Structura site-ului 37

3.3. Implementarea tehnică a site-ului 38

3.4. Modul de administrare a site-ului 40

Concluzii 41

Bibliografie 42

Introducere

În cadrul proiectului voi arăta clar și detaliat pașii care trebuiesc urmați pentru a realiza o interfață de site, care sunt principalele aspecte ce trebuiesc luate în considerare dar și cunoștințele necesare pentru a putea crea o interfață.

Voi începe cu identificarea principiilor de design folosite în crearea de interfețe web: layout, culori, fonturi, limitele impuse de ultimile tehnologii ale website-urilor și modul lor de implementare. Pe perioada lucrării voi lua în considerare comportamentul și dorințele vizitatorului, voi pune accent pe caracteristicile vizuale și tehnice importante pentru diferite tipuri de site-uri, redactarea conținutului, deoarece vizitatorul este atras atât de calitatea conținutului cât și de designul paginii.

În cadrul realizării proiectului, voi compara mai multe website-uri din domeniul academic pentru a putea face o analiză la nivel vizual și tehnic. În urma concluziilor, voi trece la implementarea site-ului Universității „Dunărea de Jos” din Galați.

În prezent, crearea unei interfețe necesită cunoștințe din domenii precum arta vizuală cât și din tehnologie. Printr-o cercetare amănunțită a domeniilor precum studiul culorilor, tipografie, layout-uri, grid-uri, forme, rezultatele pot fi net superioare. În comunicarea cu utilizatorii sau clienții site-ul trebuie să cuprindă elemente vizuale specifice domeniului care aparține: culori, spațiere, așezare și aliniere, fonturi, etc. Interfețele sunt realizate pe baza cunoștințelor tehnice, nu sunt realizate ca designul de produs sau picturi. De asemenea, cel ce crează o interfață trebuie să aibă cunoștințe avansate ale tehnologiilor din domeniul web precum PHP, HTML, CSS sau JavaScript. La început, fiecare interfață de website se prezintă ca o imagine statică, care mai apoi este modificată într-un site dinamic de prezentare al unei instituții cum este cazul de față sau a unui produs, companie.

Dinamica website-urilor este bazată pe tehnologiile enumerate, iar în conceperea interfeței trebuiesc luate în considerare alături de limitele impuse la nivel de implementare. La fel de important este grupul țintă careia i se adresează site-ul și scopul pe care îl are, ce comunică, cui comunică și cum comunică. În urma acestui studiu se poate determina cum ar trebui să arate designul interfeței, funcționalitățile de care are nevoie și accesibilitatea lui. Necesitatea studiilor de marketing este inevitabilă pentru a răspunde necesităților utilizatorilor sau clienților prin studierea site-urilor altor competitori, definirea profilului clientului și a grupului țintă.

Capitolul 1. PRINCIPII DE DESIGN FOLOSITE PENTRU REALIZAREA DE INTERFEȚE WEB

Datorită elementelor de design destinctive, conținutului dar și funcționalităților, fiecare site este unic sau așa ar trebui să fie. Designerul are responsabilitatea de a crea o interfață unică prin layout-ul, fonturile sau culorile alese. La nivel vizual, trebuie folosită o interfață care să transmită mesajul corect către client, corespunzătoare conținutului prezentat. În plus, pentru a facilita schimbările ulterioare, interfața trebuie să aibă o funcționalitate ușor de accesat și dinamică.

Etapele realizării interfeței sunt următoarele: planificare, crearea designului, redactarea conținutului și la final implementarea interfeței utilizând tehnologii web precum PHP, HTML, CSS, etc. În acest capitol voi trece în revistă fiecare principiu de design atunci când ne referim la layout-uri de website, fațete tipografice (fonturi), culori și semnificațiile lor, implementarea tehnică, etc.

Prima etapă, cea de planificare, constă în stabilirea tuturor funcționalităților pe care vrem să le oferim utilizatorilor, cum ar fi schimbarea limbii sau căutare pe site, stilul vizual artistic, conținutul dorit în pagina de pornire și tehnologiile folosite în crearea site-ului, etc.

Pentru a păstra scopul site-ului și a nu distrage atenția de la conținut, interfața trebuie să fie cât mai aerisită la nivel vizual, mai ales dacă are un conținut bogat de informații și o structură mare de meniuri precum în cazul interfețelor academice. Interfața e recomandat să fie cât ușoară de înțeles, să pună în valoare conținutul și să îl comunice vizitatorului într-un mod plăcut. În cazul în care vorbim de un site de prezentare a unui produs, putem mări gradul vizual de libertate, informațiile trecând în plan secund.

În momentul în care etapa planificării este parcusă cu succes, se trece la realizarea interfeței prin definirea clară a structurii vizuale, layout-ului dorit, elementele funționale și elementele de design decorativ dar și proporțiile între acestea. La final se colorează elementele folosite. Culorile au un rol important în a comunica un mesaj vizual artistic vizitatorului site-ului și deobicei sunt folosite diferite efecte pentru un aspect mai plăcut cum ar fi umbre, reflexii sau gradienturi.

După realizarea designului, este adăugat conținutul textual, pentru a putea vedea rezultatul final al site-ului: meniuri, știri, link-uri, etc. Familiile de fonturi, dimensiunile lor și alinierea trebuie să aparțină unor principii de tipografie, care vor ajuta considerabil la calitatea interfeței website-ului. Aceste aspecte influențează direct lizibilitatea și accesibilitatea informațiilor.

La sfârșit, interfața site-ului conține mai multe imagini create într-un program de grafică, cum ar fi Adobe Photoshop, Sketch. Aceste imagini sunt transferate în mai multe fișiere, în funcție de elementele de design ale interfeței și tehnologia care a fost utilizată pentru implementare. Implementarea unei interfețe constă în folosirea unui limbaj de programare precum PHP, HTML și CSS.

Design

Punctul este principalul element al artei vizuale și are un rol foarte important și în designul de interfețe. Este o componentă esențială pentru a crea linii atunci când unim două puncte.

În momentul în care două puncte sunt conectate, sunt definite cu rolul de capete prin trasarea unei linii. Fără ca liniile să fie trasate, în percepția lui, omul poate să subînțeleagă liniile fără ca ele să fie schițate. În imaginea de mai jos, am construit un triunghi format din trei puncte, fără nicio linie.

Fig. 1 Formă geometrică (triunghi)

1.1.1 Linia

La fel ca și punctul, linia are o atribuție foarte importantă din punct de vedere artistic. Aceasta contribuie la comunicarea unor mesaje vizual artistice și poate ghida privirea persoanelor către o lucrare artistică.

Liniile se împart în mai multe categorii: frânte, obtuze, continue, discontinue, curbate sau cu unghiuri ascuțite, iar din punct de vedere al compoziției pot fi foarte subțiri, subțiri, mai groase, groase, foarte groase, etc.

Se folosesc în crearea de conturilor elementelor vizuale, în crearea formelor sau pentru a trasa limite în spațiu sau diferite secțiuni ale interfeței unui site sau a unei cărți, broșuri, etc.

Orientarea liniilor transmite mesaje diferite privitorilor. De exemplu, cele orientate pe verticală transmit ascensiune, creștere, în timp ce liniile trasate orizontal exprimă siguranță, relaxare sau repaos.

Pe diagonală liniile sunt asociate cu mișcarea. În fotografie și pictură liniile exprimă adâncimea perspectivei. De asemenea aceste linii exprimă și instabilitatea din cauza instabilității. [1]

Cele curbe exprimă forme ale naturii sau forme ale corpului uman. Acestea de obicei exprimă diferite contraste din cauza parcursului de la un capă la celălalt.

Liniile frânte exprimă precizie, claritate în mod direct în timp ce ughiurile ascuțite duc la o exprimare a durității.

Fig. 2 Linii curbe

1.1.2 Forme geometrice și organice

În realizarea formelor sunt folosite linii frânte sau linii curbe. Formele pot fi geometrice sau organice. Cele organice se obțin folosind linii curbe, iar formele geometrice se obțin din linii frânte. În design-ul de interefețe web, cele mai folosite forme sunt cele studiate în geometria euclidiană: triunghiul, eclipsa și dreptunghiul.

În anul 1920, studenții și profesorii de psihologie de la Școala Berlineză au studiat tipul de recunoaștere vizuală în modul de gândire.

Opinia designului sau a picturii a fost determinată de teoria lui Gestalt – esența sau forma unei entități complete. Conform teoriei, creierul uman este holistic, paralel și auto-organizatoric atunci când operează. [2]

Principalele legi în gestaltilism sunt: continuitatea, proximitatea, completarea și similaritatea. În continuitate, punctele crează o formă sau o linie, în timp ce în proximitate punctele sunt grupate după distanța dintre acestea.

În completare, putem observa că forma închisă este mai ușor de perceput decât cea deschisă, iar în similaritate, elementele sunt grupate după forma geometrică, după culorile pe care le au sau după proporții.

Principiile exprimate mai sunt fac parte din psihologia formelor și sunt aplicate involuntar și constat de către oameni. În imaginile de mai jos se pot observa cele 4 legi din gentalism.

Fig. 3 Continuitate Fig. 4 Proximitate Fig. 5 Completare

Fig. 6 Similaritate

1.1.3 Layout

Layout-ul în designul interfețelor se bazează pe definirea formelor geometrice. Elementele care aparțin unui design de interfață, pot fi exprimate în dreptunghiuri ale căror dimensiuni sunt diferite. Teoria Gestalt spune că deobicei un design cuprinde doar la dreptunghiuri multicolore și încărcate în diferite forme.

Elipsele sau formele organice sunt folosite mai puțin, deoarece nu se potrivesc la fiecare site sau implică efort mai mare de implementare la nive tehnic.

Atunci când este creat un layout, designerul trebuie să stabilească principalele linii ale interfeței. În principiu, site-ul este vizualizat de sus în jos sau în cazurile foarte rare de la stânga la dreapta. De asemenea se stabilesc secțiunile interfeței: antetul, bara de navigare, conținutul, și subsolul paginii.

Antetul conține sigla, titlul site-ului sau numele și opțional câteva facilități: căutare, schimbarea limbii, etc.

Bara de meniuri este formată din elemente de tip text care dau voie vizitatorilor să parcurgă toate paginile site-ului, iar aceste sunt orientate pe vertical sau orizontal.

Parte dedicată conținutului stabilește cum pot apărea titlurile, subtitlurile, coloanele articolelor, tabele, etc.

În subsolul paginii apar datele de contact, sigle, drepturi de autor, legaturi la pagini de social media, etc.

1.1.4 Principii de compoziție

În exprimarea artistică există mai multe principii de compoziții folosite și în interfețele web cum ar fi simetria, proporțiile, repetiția, etc. În compoziția unei imagini artistice, există o lățime și o lungime bine definită care conține spațiul desfășurător al creativității. Mai exact, fiecare compoziție grafică, are un potențial artistic.

Atunci când ne referim la layout-ul unui site, ornamentarea lui constă în folosirea de elemente vizuale simetrice în antet, pe mariginile site-ului și în subsol unde proporțiile sunt relativ asemănătoare.

Un alt element este iluzia de adâncime, de spațiu, atunci când designerii suprapun forme, schimbă dimensiunile, modifică perspectiva lineară sau culorile. De asemenea, sunt folosite și efecte precum degradeuri, umbre sau reflexii pentru obținerea iluzii de adâncime.

Fig. 7 Imagini artistice care ilustrează iluzia de adâncime

Culori

În interfețele de site-uri, culorile sunt folosite pentru stimularea vizitatorilor, iar impactul lor este foarte profund în crearea designului. Sunt folosite pentru a capta și pentru a menține cât mai mult timp persoanele pe site.

De aceea o cunoaștere cât mai mare a semnificației culorilor este foarte importantă în transmiterea mesajului dorit.

Folosirea greșită a lor poate duce la repulsie, inaccesibilitate sau ilizibitate pe pagină.

1.2.1 Moduri de sinteză a culorilor: CMY și RGB

În general, designerii, fotografii și pictorii sunt de părere că fiecare culoare are următoarele caracteristici: culoare spectrală, saturație, tentă, intensitate, cromă, luminozitate, etc. Sunt foarte muți de termeni și de aceea între aceștia s-au creat mai multe relații la nivel semantic și pot ușor crea confuzie.

În secolul XVIII, Isaac Newton și Johann Wolfgang von Goethe în opera lor știintificã și cea mai voluminoasă numită și „Teoria culorilor”, au elaborat o modalitate în înțelegerea culorilor bazată pe roata de culori, conform căreia între culori trebuie să existe anumite raporturi, astfel încât culorile unei compoziții devin cantități bine determinate și prestabilite. [3]

În principal, există două moduri pentru a obține culori în funcție de tehnologiile folosite: CMY și RGB. Prima este substractivă în timp ce a doua este aditivă.

Modelul CMY(cyan, magenta, galben) sau CMYK( Key, pentru a închide culoarea), este folosit în tipografie pentru a obține culori în timp ce în designul digital pe monitoare, ecrane se folosește sinteza aditivă, RGB (red, green, blue). [4]

Fig. 8 Modul de sinteză CMY și RGB

1.2.2 Scheme de culori

În general există mai multe moduri de a alege culori, prin prisma diferitelor combinații, de aceea au fost dezvoltate de-a lungul timpului cateva scheme de culori:

Scheme de culori – Acromatice.

Sunt folosite tonuri de gri, negru și alb, iar utilizarea ei cere abilități deosebite în comunicarea artistică și amplă cunoaștere în ceea ce privește contrastul și lumina. Unii oameni privesc o imagine acromatică ca fiind tristă, melancolică sau veche.

Fig. 9 Schemă de culori acromatice

Scheme de culori – Monocromatice.

În schema de culori monocromatice, este aleasă o singură culoare care este modificată în funcție de luminozitate, mai închisă sau mai deschisă. Este des folosită de designeri și pictori deoarece oferă un efect relaxant celui care privește.

Fig. 10 Schemă de culori monocromatice

Scheme de culori – Adiacente.

Această schemă de culori folosește culori apropiate, formând un arc pentru a varia luminozitatea și saturația culorilor.

Fig. 11 Schemă de culori adicente

Scheme de culori – Complementare.

Culorile în această schemă sunt alese în opoziție și formează senzația de energie și vibrație. Este folosită pentru a atrage atenția, însă nu este recomandată folosirea în exces, de asemenea nu este recomandată în utilizarea ei pentru text și fundal deoarce afectează lizibilitatea.

Fig. 12 Schemă de culori complementare

Scheme de culori – Triade.

În această schemă sunt folosite trei spițe culori, la alegerea designer-ului.

Fig. 13 Schemă de culori triade

Culorile primare pot fi roșu, verde și albastru sau roșu, galben și albastru sau cyan, magenta, galben. Roata de culori poate identifica semnificația celor primare, secundare dar și celor terțiare. Culorine secundare se obțin prin combinarea a două culori primare, iar culorile terțiare sunt obțiunte prin combinarea celor secundare.

Fig. 14 Scheme de culori primare, secundare și terțiare

Interfețele web pot fi colorate folosing culori simple sau gradienturi de mai multe tipuri: pătrate, liniare, circulare, radiale, etc. Este recomandată folosirea lor chibzuită pentru a nu crea un disconfort vizual.

Fig. 15 Tipuri de gradient

1.2.3 Semnificațiile culorilor

În funcție de educație, experiențe, cultură, culorile au diferite semnificații pentru privitori.

Roșul este cunoscut ca fiind o culoare pasională, intensă, dar în același timp poate transmite agresivitate.

Culoarea galbenă, este o culoare ce exprimă optimism și în același timp aduce aminte de soarele care este pe cer.

Verdele, exprimă natura, viața, aduce aminte de iarbă, copaci și flori.

Albastrul este o culoare care transmite distanță, nu este o culoare intensă, amintește de cerul albastru și de apă.

Culoarea violet te duce într-o stare de visare.

Roz, este o culoare care exprimă feminitate, fiind folosit deseori la haine și accesorii. În alte contexte, are conotații de homosexualitate. [5]

Negru sugerează moartea și doliul. Tonurile de gri sugerează tristețe, în timp ce albul exprimă puritate.

1.3 Tipografie

Designul de interfață conține text, de aceea pentru a alege fonturile potrivite care să asigure lizibilitatea, este nevoie de un minim de cunoștințe în domeniul tipografiei. Textul este folosit în site la meniuri, butoane, știri, recenzii, etc.

1.3.1 Marginile paginii

În layout-ul unei pagini web, trebuie menținută o consistență vizuală în utilizarea fontului, a mărimii paragrafelor, titlurilor, etc. Textele trebuie să aibă o margine astfel încât să nu atingă celelalte elemente vizuale.

Spațiile libere, designul aerisit, oferă vizitatorilor o stare de lejeritate, iar pentru a realiza consistența vizuală se utilizează aceleași dimensiuni pentru marginile paragrafelor.

1.3.2 Coloanele paginii

Pentru a avea un nivel optim de plăcere pentru cititori, împărțirea pe coloane a conținutului unei pagini web este esențială.

Cititorii au devenit mai puțin dispuși în a citi articole pentru că ochiul uman obosește să citească în aceeși linie mai mult timp, de aceea se recomandă ca linia să aibă aproximativ 70-90 de litere. O altă recomandare este distribuirea pe mai multe coloane pentru a slăbi gradul de obosire al ochilor.

În cazul articolelor academice, trebuie luat în calcul folosirea coloanelor mai largi, deoarece cele înguste transmit superficialitate. [6]

1.3.3 Paragrafele paginii

Paragrafele sunt compuse din mai multe propoziții și fraze, sunt despărțite prin aliniat nou și exprimă un punct de vedere. Pentru a crea o plăcere a lecturii pe site, este importantă delimitarea între paragraf prin două moduri: inserarea unui spațiu între ele și indentarea textului.

Fig. 16 Spațierea paragrafelor

Indentarea se face prin împingerea sprea dreapta a primei linii a paragrafului printr-un spațiu indus la început, iar dimensiunea lui poate varia în funcție de dorința designerului.

Un alt mod de indentare se face prin decalarea spre stânga a primei linii, iar urmatoarele linii încep mai spre dreapta, producând o satisfacție mai mare cititorilor potrivit studiilor. [7]

Fig. 17 Indentarea paragrafelor

1.3.4 Interlinia

Pentru ca crește gradul de plăcere atunci când vizitatorul este pe site, trebuie luat în calcul și spațiul între linii, nu doar cel dintre paragrafe, marginile textului sau lungimea liniilor. Liniile dense crează o tensiune cititorilor, iar asta poate scădea prezența pe pagină, de aceea este recomandată folsirea spațiilor între linii pentru a crea comfort ochilor și aspect plăcut interfeței. Trebuie menționat faptul că această interlinie nu trebuie să fie mare decât spațiul dintre paragrafe.

Fig. 18 Spațiul între linii

1.3.5 Spațiul între două litere

Spațiul dintre două litere este denumit și interletră. Este folosită atât în design-urile de interfață cât și pe print, deoarece spațierea între litere influențează lizibilitatea. În cazul textelor de dimensiuni mici se recomandă folosirea spațiilor mari între litere, dar pentru textele lungi este folosit un spațiu redus pentru a nu reduce lizibilitatea. Distanța dintre cuvinte trebuie să fie mai mare decât distanșa dintre litere. [8]

Fig. 19 Interletra

1.3.6 Crenajul

Crenajul reprezintă ajustarea distanței între mai multe de litere, deoarece unele dintre ele nu au spațiul egal. Aceasta este făcută manual de cei care crează fațete de fonturi, de asemenea există tehnologii pentru web și în aplicațiile pentru design care crenează literele. [9]

Fig. 20 Crenare

1.3.7 Alinierea textului

Alinierea textelor poate fi facută în stânga, centrat, drepta sau justificat. Textul aliniat la dreapta sau stânga oferă o continuitate pe marginea dreaptă sau stângă, în timp ce în alinierea centrată, fiecare linie este centrată orizontal. Cea din urmă este indicată doar în cazuri de excepție. [10]

În imaginea de mai jos este ilustrată alinierea la stânga, dreapta și justificat.

Fig. 21 Tipuri de aliniere a textelor

1.3.8 Fonturi

O familie de fonturi conține o multitudine de fațete pentru a stiliza textele. De exemplu, greutate fonturilor este definită prin cât de îngroșate sunt literele super slab, slab, semi-gras, gras, extra-gras, etc.

Stilul oblic și italic sunt două lucruri diferite, primul având caracterele înclinate în timp ce fontul italic e o formă stilizată a scrisului caligrafic.

Exită diferite tipuri de stilizare a textelor: aldin, italic, oblic, condensat, etc. [11]

În imaginea de mai jos, am folosit fontul Myriad Pro pentru a prezenta diferitele stiluri ale unei fațete tipografice.

Fig. 22 Tipuri de sitilizare a textelor

1.3.9 Lorem ipsum

Deși expresia poate nu are sens, este un text în limba latină utilizat de-a lungul a câteva secole de către tipografi, deoarece literele conținute și spațiile dintre litere din această combinație ilustrează grosimea, forma și alte caracteristici importante ale tipului de literă. A început să fie utilizat de către tipografi din anul 1500, după ce în ediția din 1994 a magazinului „Before & After a aparut un paragraf din teoria etică scrisă de Cicero în 45 Î.Hr.

Mai jos voi exemplifica o parte din acest text:

„Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.” [12]

1.3.10 Tehnoredactarea web

Informațiile trebuie sa fie distinctive și pe înțelesul tuturor atunci când sunt prezentate pe site. Conținutul trebuie sa fie organizat logic, fără greșeli gramaticale sau greșeli de ortografie, să fie folosite corect semnele de punctuație și caracterele distincte fiecărei limbi.

Stilizarea conținutului trebuie să fie făcută în funcție de designul site-ului, să menține aceeași linie vizuală, fără a folosi culori sau fonturi cu scopul de a emfaza anumite părți dintr-o propoziție sau paragraf. De asemenea, folosirea majusculelor din senin este o eroare inadmisibilă doarece poate lăsa impresia că cineva vorbește cu glas tare la cititor.

Sublinierea, folosirea exagerată a semnelor de exclamare sau a culorilor care ies în evidență sunt erori de stilare care dacă apar în designul de interfață pot arăta exasperarea celor ce au creat conținutul propriu-zis.

1.4 Implementare

Modul de lucru în care sunt create imaginie digitale este în mod bitmap sau în mod vectorial. Cea mai folosită este editare este bitmap, deoarece crează pixeli automat, în timp ce în modul vectorial elementele sunt dinamice.

Designul de interfață este implementat pe stânga, la centru sau pe dreapta, iar cel mai folosit tip de navigare este vertical.

Cele mai folosite tehnologii web de către vizitatori sunt HTML și CSS, însă mai sunt și altele mai complexe precum PHP sau mySQL care sunt utilizate pentru a crea diferite proprietăți pe site cum ar fi cont pentru login, schimbarea limbii, etc.

Pentru a crea o dinamică pe site este folisit JavaScript sau Adobe Flash pentru adăugarea de video-uri.

1.4.1 HTML

Limbajul care permite inserarea de text, sunete, imagini și filme; indicatori de prezentare a informației; legături către alte pagini Web;

Pentru crearea unei pagini web folosind limbajul HTML trebuie respectat algoritmul:

Pas1. Editarea fișierului HTML cu ajutorul unui editor de texte (Notepad);

Un fișier HTML este format dintr-o succesiune de blocuri imbricate. Un bloc este delimitat de marcaje speciale incluse în paranteze unghiulare („<” și „>”) și astfel sunt transmise comenzile către browser cu scopul de a afișa conținutul paginii.

Un fișier HTML standard este compus dintr-un bloc <html>…</html>, care include alte blocurile <head>…</head> și <body>…</body>. În blocul <body>…</body> va fi scris conținutul paginii web.

Exemplu:

Un aspect foarte important în crearea unui site academic este reprezentat de legături, acestea asigură interactivitatea paginilor web. Legătura este zona activă a unei pagini web care reacționează atunci când este apăsat butonul stâng al mouse-lui și se stabilește prin etichetele <a href=”adresă”> text de legătură</a>.

Exemplu: <a href=”http://www.ugal.ro”> Universitatea „Dunărea de Jos” </a>.

Pas2. Salvarea fișierului editat cu extensia .html;

Pas3. Vizualizarea paginii create prin intermediul unui browser (Internet Explorer, Chrome, Opera). [13]

1.4.2 CSS

Limbajul HTML nu a fost conceput ca să conțină taguri pentru a formata documente, ci numai pentru a defini conținutul documentelor. În momentul în care taguri ca <font> și atributele de culoare au adăugate în HTML 3.2, au apărut anumite probleme în dezvoltarea paginilor web de mari dimensiuni deoarece secvențele de cod- font și culoare trebuiau să fie adăugate pe fiecare pagină, un efort suplimentar adus proiectanților web. [14]

Acesta a fost motivul pentru care consorțiul World Wide Web ( W3C) a creat CSS și totodată a conceput trei niveluri pentru folie de stiluri:

CSS1 care permite dezvoltatorilor și utilizatorilor de pagini Web să atașeze paginilor diferite stiluri de afișare. Limbajul oferă un mecanism foarte simplu de editare computerizată, de asemenea este facil de înțeles și de folosit;

CSS2 este o extensie a CSS1 și în plus facilitează moștenirea stilurilor, poziționarea și paginarea, efectele vizuale, integrarea mai multor tipuri media precum suportul pentru sunet;

CSS3 reprezintă un upgrade al versiunii de mai sus, aduce niște noi atribute și ajută la dezvoltarea concepte nou apărute în Web design.

Cu ajutorul CSS-ului se rezolvă dificultăți cu care se confruntă creatorii paginilor HTML, este eliminată redundanța stilurilor introduse în paginile prin intermediul unor noi marcatori și paginile Web sunt dezvoltate în noi termeni de design. [15]

1.4.3 PHP

PHP (Hypertext Preprocessor)este cel mai important limbaj de programare care ajută la o mai bună înțelegere a WordPress-ului. PHP este un limbaj de uz general de tip scripting open-source, este utilizat la scară largă de WordPress pentru aproape toate temele, pentru toate plugin-urile. Din acest motiv este afirmat că „WordPress is written in PHP”.

PHP a fost realizat pentru a genera imagini web dinamice. La început se foloseau limbaje cum ar fi C sau fișiere de comenzi și Unix/Linux, fiind executate de interpretorul de comenzi al sistemului de operare. Aceste aplicații au denumirea de scripturi CGI (Common Gateway Interface). Au apărut apoi limbaje precum PERL, Pithon, PHP, ASP, JSP etc.

Limbajul PHP este simplu și independent de sistemul de operare. Este un limbaj de programare multi-platforma, astfel încât un cod scris în Windows va fi la fel de bine interpretat de un server Unix, lucru dovedit util întrucât mediul Windows pune la dispoziție o gamă mai largă de editoare dar și capacități mai bune de testare.

Diferența între PHP și Javascript este reprezentată de execuția codului care in PHP se realizează pe server, astfel că clientul poate vedea doar output-ul scriptului.Sintaxa din PHP este înrudită cu sintaxa din C, Java, existând și o bibliotecă cu proprietăți unice PHP-ului

Principalul avantaj în lucrul cu PHP-ul este posibilitatea lucrării cu bazele de date. PHP-ul poate interacționa cu baze de date precum: Informix PostgreSQL ,Adabas D InterBase Solid, Empress MySQL, Velocis, dBase mSQL Sybase, FilePro Oracle Unix dbm.

Script-ul PHP generează conținutul pentru o pagină care va fi afișată într-un browser selecat, folosind eticheta <?php ?>. În codul sursă trebuie introdus între acele etichete, așa cum codul html trebuie introdus în etichetele <html></html>. [16]

1.4.4 MySQL

Acest sistem de gestiune este destinat realizării și administrării unor baze de date relaționale. Acest tip de aplicații foloșeste terminologia DBMS (Database Management System). Baza de date este modalitatea de păstrarea informațiilor în mod structurat, de căutare eficient în aceste tabele, și de extragere de date utile.

Cel mai bun exemplu este baza de date a unei bănci în care se pot găsi date despre clienți, despre tranzacții și despre angajați) sau sistemul de gestiune a unui supermarket, sistem care conține mai multe tabele, precum produs, client, distribuitor,etc.

Pentru dezvoltarea unui website mai complex, limbajul folosit în dezvoltarea ar trebui să fie conectat la o bază de date (de exemplu MySQL). Este cunoscut faptul că PHP-ul poate accesa sisteme de baze de date MS SQL, Oracle, DB2 și PostgreSQL, însă legătura PHP-ului cu MySQL este mult mai folosită.

Un prim avantaj al acestei legături este faptul că atât PHP-ul cât și MySQL sunt gratuite, open-source și dezvoltatorii au încercat să le facă cât mai compatibile și sa lucreze în mod eficient.

Cu ajutorul MySQL pot fi construite noi aplicații în orice limbaj de programare. Există numeroase scheme API compatibile cu MySQL și acestea permit scrierea aplicațiilor cu scopul accesării bazelei de date MySQL, precum: C, C++, C#, Java, Perl, PHP, Python, FreeBasic, etc.

Interfața de tip ODBC numită și MyODBC permite altor limbajelor de programare să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual Basic. Pentru a sprijini aceste limbaje de programare marile companii produc componente de tip COM/COM+ sau .NET pentru ca limbajele de programare să poată folosi SGBD în mod facil, în comparație cu sistemul ODBC.

Avantajele folosirii MySQL sunt numeroase:

Viteza – Dezvoltatorii au afirmat că MySQL este cel mai rapid sistem de baze de date.

Ușurința în utilizare – Terminologia și sintaxa MySQL sunt ușor de înțeles și se pot realiza performanțe în timp util.

MySQL este free pentru majoritatea utilizărilor.

MySQL oferă suport pentru o gamă largă de limbaje de interogare, SQL (Structured Query Language – limbaj de interogare structurat). Și totodată folosește aplicații compatibile cu ODBC (Open Database –Connectivity).

La un server pot fi conectați simultan mai mulți useri sau clienți și totodată ceștia pot folosi mai multe baze de date. Folosind diversele interfețe ale MySQL se poate obține acces la MySQL interactiv, acest lucru va permite userilorsă introducă interogări și să vizualizeze rezultatele: clienți în linie de comandă, browsere Web sau clienți X Window System.

De asemenea, este disponibilă o gama variată de interfețe pentru limbaje precum C, Perl, Java, PHP și Python. În acest mod, clienților le este oferită oporunitatea de a dezvolta propriile programe și să le modifice ulterior.

MySQL este programul care oferă conectivitate și securitate, adică poate fi folosit integral și bazele de date sunt accesibile în mediul online. Însă MySQL protejează datele utilizatorului, controlul accesului, accesul fiind autorizat.

MySQL poate rula atât pe varietățile UNIX-ului, cât pe alte sisteme non-UNIX, ca de exemplu Windows și OS/2. MySQL poate rula pe diferite echipamente, de la calculatoarele din birou până la servere cu tehnologie avansată.

MySQL furnizează instrumente cu:

Serverul SQL este motorul care activează MySQL și face posibil accesul la bazele de date.

Un program interactiv care permite accesul la server, atât introducerea interogărilor în mod direct cât și vizualizarea rezultatelor.

Biblioteca client pentru scrierea propriilor programe. Se pot scrie programe client în C, deoarece biblioteca este scrisă în C, dar biblioteca mai furnizează și baza pentru terțe asocieri pentru alte limbaje. [17]

1.5 Marketing

Interfața unui site sau a unei aplicații web este mijlocul prin care utilizatorul sau vizitatorul site-ului este ajutat să găsească informațiile de care are nevoie și totodată să faciliteze orice tip de interacțiune cu site-ul dat. Mai exact, o interfață web nu trebuie să distragă atenția printr-un design prea exuberant și încărcat de la mesajul clar care se vrea transmis.

Pentru ca vizitatorul să poată naviga cât mi eficiente, se recomandă reducerea numărului de etape pe care acesta trebuie să le parcurgă pentru a ajunge la informații. Structura site-ului și funcționalitățile trebuiesc alese astfel încât să nu creeze confuzie vizitatorului datorită numărului mare de pagini sau de funcționalități care nu sunt atât de utile, iar conținutul paginii se recomandă a fi cât mai clar și la obiect de putință. [18]

În general, atunci când este creat un site, trebuie studiată competiția și portretul potențialilor vizitatori ai site-ului, nevoile și competențele acestora. Se aleg funcționalitățile de care site-ul ar avea nevoie, tipul de interfețe de care sunt atrași, care sunt gusturile lor, modul în care aceștia navighează pe web, obiceiurile lor în acest sens, etc.

Capitolul 2. STUDII COMPARATIVE PE MAI MULTE SITE-URI ACADEMICE

În acest capitol voi studia multiple site-uri din domeniul academic.

Pentru această analiză am ales două site-uri ale unor universități din Marea Britanie, University of Cambridge și Loughborough University, dar și două site-uri ale unor universități din România, Universitatea "Babeș-Bolyai" din Cluj și Universitatea din București.

University of Cambridge – https://www.cam.ac.uk/

Loughborough University – https://www.lboro.ac.uk/

University of the Arts London – https://www.arts.ac.uk/#

Universitatea "Babeș-Bolyai" – https://www.ubbcluj.ro/ro/

Universitatea din București – https://unibuc.ro/

Universitatea din Oradea – https://www.uoradea.ro/

Pentru crearea site-ului universității „Dunărea de Jos” din Galați voi face un studiu amănunțit pe site-urile enumerate, în care voi analiza pe rând layout-ul folosit, contentul pe fiecare pagină, cum a fost așezat în pagină, ce funcționalități cuprind, etc.

Site-urile vor fi analizate de asemenea și din punct de vedere al design-ului, al aspectului pe care îl au, culorile pe care le-au folosit, fonturile alese, dar și din punct de vedere tehnic unde se va analiza accesibilitatea lui.

Pentru a face mai clară analiza voi atașa mai multe imagini de pe site, pe a explica mai bine studiul făcut, iar la final voi face câteva observații despre ele.

2.1 Site-uri din domeniul academic ale unor universități din Marea Britanie

2.1.1 University of Cambridge

Fig. 23 Prima pagină a site-ului https://www.cam.ac.uk/

Layout-ul site-ului este modern, are lățime fixă și este centrat. Este structurat pe mai multe coloane verticale și secțiuni orizontale care crează chenare. Interfața este deosebită din puncte de vedere al design-ului, numărul de culori fiind destul de puține, doar verde închis fiind cel care predomină pe toate paginile.

Prima pagină începe cu partea de sus în care se află antetul, cu bara de meniuri și o funcționalitate de căutare în site. Mai jos în partea stângă este situat logoul universității, iar în dreapta alte legături ale paginii.

În continuare este amplasat un splash cu diferite știri sau evenimente ale universității. Apoi urmează o secțiune de informații despre cursuri, campus, profesori, etc.

Subsolul conține legături către conturile de social media și alte pagini ale site-ului: cariere, contact, etc.

Pagina este populată de mai multe familii de fonturi: Myriad Pro, Verdana și Arial. Culorile textelor sunt în general albe atunci cand background-ul este colorat și negru atunci cand este scris pe alb.

Se poate observa că pagina este foarte aerisită, astefel încât nu obosește vizitatorul din cauza informațiilor prea multe.

Una din funcționalitățile interesante pe care le are site-ul este meniul principal care pentru a afișia meniurile de la nivelul doi, trebuie sa dai un singur click, iar ele vor apărea în cascadă. Putem observa așezarea pe coloane ce oferă un confort vizual atunci când vizitatoul dorește să caute informațiile de care are nevoie. De asemenea acesta nu dispare până nu este accesat butonul din colțul din dreapta de închidere.

Fig. 24 Meniul principal al site-ului https://www.cam.ac.uk/

La nivel de implementare, site-ul a fost creat utilizând HTML, CSS și JavaScript. Testat pe dispozive mobile, este bine optimizat folosing stiluri CSS, conținutul este aranjat și nu are probleme la nivel vizual.

Fig. 25 Captură a site-ului de pe dispozitivul mobil

2.1.2 Loughborough University

Fig. 26 Prima pagină a site-ului https://www.lboro.ac.uk/

Layout-ul Universității Loughborough are un aspect deosebit, este centrat și are lățimea fixă. Sunt folosite mai multe nuanțe de violet creând un contrast izbitor cu negru.

Interfața este structurată exemplar menținând același stil de design pe fiecare pagină. Sus în partea stângă este situat logoul universității, iar în dreapta bara cu meniurile principale. De asemenea găsim și prima funcționalitate a site-ului, cea de căutare.

Următoare secțiune este creată de un splash care conține diferite știri dar și o altă funcționalitate pe care o are, cea de căutare a cursurilor pe care le oferă Universitatea.

Parte de conținut este formată din mai multe chenare, în care se găsesc informații despre facultate și benefice pentru studenți, profesori sau părinți: unde este situată, cursuri de licență și de master, modalități de contact, știri, etc.

Numărul de culori este redus. Cele două nuanțe de violet și magenta pe celelalte pagingi sunt folosite și cu efect de gradient. Culoarea textelor este albă atunci când este folosit background, iar pe alb sunt folosite nuanțe de gri, violet și negru. Sunt utilizate trei fonturi: DIN, Helvetica și Arial.

Layoutul este bine aranlat în principiu, însă pentru a menține o anumită consecvență pe pagină cred că ar trebui anumite chenare ar fi trebui să păstreze una sau două proporții și să nu aibă fiecare dimensiuni diferite.

Erori la nivel de redactare nu sunt prezente pe site, conținutul arată degajat din punct de vedere al stilului vizual.

O altă problemă pe care am observat-o este că meniurile din nivelul doi nu apar pe prima pagină, ele apar doar atunci când navigăm pe altă pagină a site-ului, iar asta poate crea confuzie vizitatorului. De asemenea meniurile din nivelul doi se deschid în cascadă, însă culoarea care a fost aleasă pentru legături este una care îngreunează cititul.

Ceva deosebit putem observa în subsolul paginii unde sunt situate legături către alte pagini ale site-ului, link-uri către paginile de socializare, dar și o hartă interactivă care atunci când mouse-ul este dus pe una din locațiile universității, se schimbă culoarea și afișează datele de contact. Jos de tot sunt informațiile de copyright în partea stângă iar în dreapta găsim un buton care ne ajută să revenim la partea de început a paginii.

Fig. 27 Subsolul paginii Universității Loughborough

La nivel de implementare au fost folosite tehnologiile web JavaScript și HTML. Este bine implementat și accesibil și pe dispozitive mobile. Elementele vizuale sunt bine aliniate, este menținută consecvența asta și oferă vizitatorului o ușoară navigare pe pagină.

Fig. 28 Captură a site-ului de pe dispozitivul mobil

2.1.3 University of the Arts London

Fig. 29 Prima pagină a site-ului https://www.arts.ac.uk/#

Layout-ul site-ului este deosebit din punct de vedere al design-ului, avem parte de o interfață modernă, cu o lățime fixă și este centrat. Este structurat pe mai multe coloane verticale și secțiuni orizontale care formează chenare, conținutul paginii fiind formatat în categorii diferite, care fac navigarea mult mai ușor de realizat.

În antet, în partea stângă, regăsim sigla universității, legături către paginile cu o importanță crescută și meniul principal care se accesează printr-un simplu click.

De asemenea, conținutul website-ului este bine optimizat pentru ca motoarele de căutare integrate în pagină, să răspundă rapid la cuvintele cheie utilizate în căutare. În continuare se găsesc mai multe informții despre zilele în care stundeții sau viitorii studenți pot veni în vizită, știri sau evenimente ale universității.

Apoi urmează o secțiune de informații despre cursuri, campus, profesori, etc. Subsolul conține legături către conturile de social media și alte pagini ale site-ului: cariere, păreri despre universitate, contact, etc.

Se poate observa că pagina are o tentă artistică, University of Arts London, fiind o universitate de prestigiu în domeniul artelor. Pagina este foarte bine aerisită , astefel încât nu obosește vizitatorul din cauza informațiilor prea multe. Una din funcționalitățile interesante care nu au fost întâlnite pe alte site-uri academice studiate este o parte a conținutului care este populat de postări ale celor care administrează pagina de socializare Twitter a universității, ele fiind legate de site astfel încât vizitatorii pot ajunge imediat și intra în discuție cu ei. De asemenea, imediat după aceste elemente urmează trei butoane prin care se poate distribui pagina web pe unul din canalele de socializare: Facebook, Twitter și Snapchat.

Fig. 30 Secțiune de postări de pe pagina de socializare a universității

La nivel de implementare au fost folosite tehnologiile web JavaScript și HTML. Este bine implementat și accesibil și pe dispozitive mobile. Elementele vizuale sunt bine aliniate, este menținută consecvența asta și oferă vizitatorului o ușoară navigare pe pagină.

Fig. 31 Captură a site-ului de pe dispozitivul mobil

2.2 Site-uri din domeniul academic ale unor universități din România

2.2.1 Universitatea "Babeș-Bolyai"

Fig. 32 Prima pagină a site-ului https://www.ubbcluj.ro

Interfața site-ului conține o lățime fixă, iar layout-ul este repartizat în: antet, conținut și subsol.

Conținutul este împărțit în patru sau trei coloane pe vertical și are secțiuni orizontale care crează mai multe chenare, acestea fiind schițate prin linii subțiri.

Antentul conține în partea stângă mai multe legături către alte pagini ale site-ului, apoi sigla universitășii și o etichetă care simbolizeză cei 100 de ani de când a fost înființată universitatea. O greșeală pe care o putem observa este că nu e centrată nici la centru, nici în dreapta paginii și în acest fel nu înfrumusețează pagina în niciun fel.

Sub antent se regăsesc evenimentele susținute de universitate, care atunci când sunt accesate oferă informații precum tema, locatia, ora si data când este organizate. În continuare apar două secțiuni de știri și anunțuri specifice site-urilor din acest domeniu.

În subsol, apar legături către alte pagini, butoane către conturile de socializare, mențiuni de copyright, date de contact și butonul care duce înapoi la antet.

Bara de meniuri este accesat atunci când mouse-ul este pe unul din butoane, se deschid tip cascadă, iar culoarea este cea predominantă pe site.

Culorile alese sunt fade, dar aparțin domeniului. Cred ca ar fi arătat mai bine dacă contrastul ar fi fost mai puternic. Albastru și auriu sunt două culori care merg foarte bine împreună, însă trebuie setate astfel încât să ne existe probleme de lizibilitate atunci când scriem.

Site-ul este sărac și din punct de vedere al fonturilor. Este folosit un singur font: Roboto. Interfața ar fi arătat mai bine, dacă ar fi fost stilizată cu cel puțin două fonturi pentru a nu se prezenta atât de simplu vizual.

Dintr-o analiză mai aprofundată putem observa că există probleme de redactare, nu sunt folosite diacriticile peste tot, alinierea textelor nu a fost realizată corect, între paragrafe există câteodată spații prea mari, ceea ce face ca layout-ul să pară neîngrijit. Mai jos o să exemplific problemele de aliniere pe care le-am găsit în bara de meniuri.

Fig. 33 Greșeli de aliniere în bara de meniuri a site-ului

Din punct de vedere tehnic, site-ul a fost creat cu CSS și HTML. Exista diferite probleme de implementare la integrarea imaginilor. Însă pare să fie optimizat ok pe dispozitive mobile.

Fig. 34 Captură a site-ului de pe dispozitivul mobil

2.2.2 Universitatea din București

Fig. 35 Prima pagină a site-ului https://unibuc.ro/

Layout-ul are o lățime fixă și este centrat, antetul conține în partea stângă emblema universității și numele ei scris cu un font stilizat. În partea dreaptă se află principalele meniuri, iar deasupra cele secundare. Alături regăsim un steag care permite schimbarea limbii în engleză și un buton de căutare.

Meniul și sigla universității sunt poziționate deasupra imaginei splash, imagine care nu are nicio semnificație și conține câteva efecte care nu au legătura cu tema site-ului. Pe fiecare buton al meniului principal când este dus mouse-ul, apar meniurile din nivelul doi pe un background alb.

În conținutul paginii regăsim evenimentele publicate de universitate, apoi o funcționalitate de abonare la newsletter urmată de un calendar static care după părerea mea ar fi trebuit pus înaintea funcționalității. În continuare regăsim o secțiune cu o galerie video ale activităților pe care le susțin studenții Universității din București.

Subsolul paginii este populat de mai multe legături ale site-ului care nu au un grad atât de relevant, butoane către canalul de Facebook, Instagram și YouTube al Universității, date de contact și drepturile de copyright.

Per ansamblu, interfața arată bine, este plăcută iar culorile sunt corect alese. Deși nu avem o paletă foarte largă, ele aparțin domeniului academic. De precizat este faptul că au folosie mai multe fonturi pentru texte: Lato, Open Sans, Raleway sunt cele care predomină.

La fel ca în cazul precedent există mai multe erori estetice de aliniere, care scad din profesionalismului site-ului și îl afectează din punct de vedere vizual.

Una din funcționalitățile care mi-au atras atenția este secțiunea de evenimente a Universității, unde găsim un calendar care prezintă date despre oră, zi sau tema evenimentului, de asemenea putem seta reminder care să aducă aminte vizitatorului despre el.

Fig. 36 Secțiune de evenimente și calendarul lor

În general site-ul este implementat corect, textele sunt lizibile, desigul este plăcut și nu are probleme tehnice. Tehnologiile folosite în cea mai parte sunt CSS și JavaScript. Acesta este accesibil și pe dispozive mobile, are un aspect îngrijit, și oferă vizitatorului o ușoară navigare pe pagină, însă lasă de dorit fapul că textul din imaginea splash nu apare complet ceea ce duce la o lipsă de profesionalism.

Fig. 37 Captură a site-ului de pe dispozitivul mobil

2.2.3 Universitatea din Oradea

Fig. 38 Prima pagină a site-ului https://www.uoradea.ro/

Layout-ul Universității din Oradea are o structură diferită față de cele studiate până acum, cu o lățime fixă și este centrat. Pe prima pagină antetul este relativ înalt care conține un slider cu imaginii care au o relevanță scăzută domeniului din care face parte pagina, dar și de o calitate slabă.

Sigla universității o regăsim în slider , care este de fapt și meniul principal al interfeței, însă ea apare doar în butonul „Despre noi”.

Paleta de culori este și ea aproape neexistentă, ele fiind prezente doar în textele de pe pagină: legături, titluri, etc.

În subsol, suntem întâmpinați cu o multitudine de legături, mai mult sau mai puțini relevante și cu drepturile de autor, prin care suntem informați că interfața nu a mai fost modificată încă din 2012.

Fonturile utilizate în textele de pe pagină sunt fonturi lineale: Serif a fost foloisit în conținut iar titlurile au fost scrise folosind și Georgia.

Atenția este atrasă în momentul accesării unei pagini aleatorii de pe site. În momentul accesării, layout-ul paginii se modifică. Deși nu este recomandat ca paginile să conțină layout-uri diferite, acesta este unul pe care îl regăsim și pe celelalte pagini din domeniul academic și face ca interfața să devină mai atractivă și dinamică.

Fig. 39 Pagina „Despre noi” a site-ului Universității din Oradea

Din punct de vedere al implementării tehnice, site-ul a fost creat utilizând HTML și JavaScript. Exista diferite probleme de implementare la integrarea imaginilor, iar pe dispozitivele mobile nu este foarte bine optimizat.

Fig. 40 Captură a site-ului de pe dispozitivul mobil

2.3 Concluzii asupra site-urilor academice studiate

În urma studiilor făcute pe site-urile academice din Marea Britanie și România, au rezultat mai multe concluzii din punct de vedere vizual, tehnic și de conținut.

Din punct de vedere tehnic, majoritatea site-urilor au fost implementate folosing HTML, CSS sau JavaScript. Sunt prezente funcționalități precum cele de cătare pe site, schimbarea limbii, de abonare la newsletter, etc.

Din punct de vedere vizual, site-urile folosesc un layout fix și sunt alinate la centru. Interfața conține secțiunile obișnuite: antet, conținut și subsol. Antetul este populat de de sigla universității, meniurile principale și/sau secundare, opțiune de cătare și schimbarea limbii în general română și engleză. Meniu se accesează atunci când mouse-ul este deasupra unui buton și se deschide tip cascadă.

Conținutul este prezentat pe coloane, iar în subsol găsim date despre copyright, contact și legături către celelalte pagini ale site-ului cu un grad scăzut de relevanță.

Paleta de culori utilizată pe site-urile academice studiate folosește culori specifice, care comunică imaginea universității, nu sunt folosite culori țipătoare care să afecteze lizibilitatea textului.

În general, putem spune că layout-urile paginilor românești nu sunt foarte îngrijite, deoarece apar erori de aliniere a elementelor vizuale, margini și spațieri consecvente, dar și din din punct de vedere tehnic unde găsim multe erori care afectează dinamica site-ului, în timp ce pe interfețele site-urilor academice străine analizate nu au găsite situații la fel de grave.

O eroare a paginilor academice din România apare și la nivelul de conținutului, unde stilarea acestuia este neprofesională, și face interfața să pară neîngrijită sau nearanjată.

Conținutul ar trebui scris de specialiști în marketing și comunicare, pe înțelesul vizitatorilor pentru fie cât mai bine țintit. Pentru a nu slăbi calitatea, site-ul trebuie să fie realizat corect și la nivel de conținut, nu doar la nivel de design și implementare tehnică.

Cred că site-urile academice românești vor arăta mult mai bine în viitorul apropiat datorită noilor tehnologii și a generațiilor de specialiști în programare, design și marketing care vor acorda atenție mai multă asupra detaliilor care fac diferența între un site profesionist și unul amator mai ales când vorbim de o instituție de învățământ.

Capitolul 3. SITE-UL UNIVERSITĂȚII „Dunărea de Jos” DIN GALAȚI

Proiectul de diplomă constă în implementarea site-ului oficial al Universității „Dunărea de Jos” din Galați. Am început cu studiul făcut pe site-urile academice din Marea Britanie și România, felul în care au fost realizate și tehnologiile aplicate, precum și conținutul acestora. În continuare am făcut o comparație a lor, iar în urma concluziilor expuse în capitolul precedent, am conceput site-ul – www.udjg.xyz

Chiar dacă structura actuală a site-ului al Universității „Dunărea de Jos” din Galați este bine realizată, pagina este inferioră față de unele site-uri universitare românești dar și față de cele din Marea Britanie.

Fig. 41 Site-ul actual al Universității „Dunărea de Jos” din Galați

3.1 Design

Fig. 42 Prima pagină a site-ului www.udjg.xyz

Interfața creată pentru site-ul Universității este una nouă și modernă, având o identitate reîmprospătată, cu elemente vizuale aliniate și create cu deosebită atenție.

Marginile sunt respectate peste tot în cadrul layout-ului, elementele vizuale crează un spațiu aerisit paginii, nu sunt înghesuite sau prea mari, iar fiecare element este poziționat în interfață în funcție de importanța lui.

Antetul conține în partea stângă sigla nouă a Universității „Dunărea de Jos” din Galați, urmată în dreapta de meniul cu cele mai importante legături: studiază la UDJG, viața în campus, carieră, internațional și contact.

Am folosit culorile albastru și roz pentru a crea un contrast profesional și modern cu o ușoară transparență pe imaginea splash. Culoarea albastră și culoarea roz, sunt două culori relaxante care transmit profesionalism, seriozitate și detașare. Când mouse-ul este deasupra butoanelor din meniu, apar meniurile de nivelul doi afișate în cascadă.

Prima pagină este formată din mai multe coloane și secțiuni. Primul element este filtrul care conține toate facultățile și programele de studiu. Fiecare imagine din programaele de studiu generate este atent realizată. Imaginile au fost procesate să se potrivească cu paleta de culori utilizată și în layout-ul site-ului.

Pe celelalte pagini, interfața site-ului ramâne la fel din punct de vedere vizual. Apar doar mici schimbări. În general, interfața conține o paletă de culori bazată pe schema de culori complementare. Culoarea roz creează contrast, iar tonurile de albastru diversifică ambianța. Aceste culori au creat o ambianță degajată.

La nivelul de layout-ului, s-a încercat pe cât posibil evitarea înghesuirii elementelor vizuale. Fonturile utilizate în textele de pe pagină sunt fonturi lineale: Arial a fost foloisit în conținut iar titlurile au fost scrise folosind și Montserrat.

Prima pagină este formată din mai multe coloane și secțiuni. Primul element este filtrul care ajută la găsirea mai ușoară de către vizitatori a facultății și a programelor de studii ale acestora, de licență sau master.

Fig. 43 Filtrul cu faculățile și programele de studiu

3.2 Structura site-ului

Întreaga structură a site-ului a fost schimbată în urma analizei site-urilor academice din Marea Britanie și din România, nu doar la nivel vizual și tehnic.

În continuare voi discuta despre meniurile principale ale site-ului.

Fig. 44 Meniul principal

Studiază la UDJG – Aici se găsesc foarte multe informații despre misiunea, istoricul universității și de ce să alegi Universitatea „Dunărea de Jos” din Galați .

Viața în campus – În acest meniu sunt prezentate informații despre viața de student, și despre campusul studențesc.

Carieră – Secțiunea este populată cu diferite oportunități de internship-uri și job-uri pentru studenți.

Internațional – Acest meniu prezintă informații pentru potențialii studenți ai universității „Dunărea de Jos” din străinătate.

Contact – În aceasă secțiune, vizitatorii pot găsi date de contact ale universității și programul pe care îl au cu publicul.

În continuarea filtrului, se regăsește conținutul website-ului care este format din text, fișiere foto sau video. Noțiunea de conținut se referă la orice element care se găsește în pagină, de exemplu, reclame, legături cu adresele de mail, fișiere foto, audio și video.

Conținutul web este cheia spre succes a oricărui site web. Formatarea ordonată a conținutului paginii în categorii diferite, fac navigarea mult mai ușor de realizat. Acesta poate fi populat cu text care poate fi adăugat în paginile web sub formă de blocuri sau în interiorul imaginilor. Acesta poate fi reprezentat și prin link-uri care ajută utilizatorii să obțină acces la mai multe infomații despre universitate, facultăți și programa de studiu. De asemenea, este important ca conținutul website-ului să fie optimizat pentru ca motoarele de căutare integrate în pagină, să răspundă rapid la cuvintele cheie utilizate în căutare.

Imaginile sunt cele mai populare opțiuni de a incorpora partea multimedia a website-ului. Clip art, fotografii, sau orice alt desen care poate fi creat prin scanare sau cu un editor grafic. Este recomandat ca imaginile să aibă o dimeniune cât mai mică pentru ca utilizatorii să le poată descărca ușor.

Partea de subsol a paginii Universitatea „Dunărea de Jos” din Galați, este populată cu legături către pagini cu relevanță redusă, legături către paginile de social media, date de contact și de mențiunile de copyright.

3.3 Implementarea tehnică a site-ului

Interfața site-ului este implementată integral în PHP iar pentru unele funcționalități s-a folost HTML, JavaScript, CSS și MySQL.

Fig. 45 Prima pagină udjg.xyz încărcată fără imagini și stiluri CSS

Site-ul udjg.xyz dispune de CSS-uri specifice care oferă un mecanism foarte simplu de editare computerizată și care de asemenea este facil de înțeles și de folosit.

În plus facilitează moștenirea stilurilor, poziționarea și paginarea, efectele vizuale și meniurile în cascadă, etc.

Pentru realizarea filtrului cu facultățile și programele de studiu ale universității „Dunărea de Jos” din Galați a fost conectată o bază de date MySQL. Este cunoscut faptul că PHP-ul poate accesa sisteme de baze de date MS SQL, Oracle, DB2 și PostgreSQL, însă legătura PHP-ului cu MySQL este mult mai folosită.

Un prim avantaj al acestei legături este faptul că atât PHP-ul cât și MySQL sunt gratuite, open-source și dezvoltatorii au încercat să le facă cât mai compatibile și sa lucreze în mod eficient.

La un server pot fi conectați simultan mai mulți useri sau clienți și totodată ceștia pot folosi mai multe baze de date. Folosind diversele interfețe ale MySQL se poate obține acces la MySQL interactiv, acest lucru va permite userilorsă introducă interogări și să vizualizeze rezultatele: clienți în linie de comandă, browsere Web sau clienți X Window System.

Fig. 46 Secvență de cod cu realizarea filtrului populat de facultățile și programele de studiu

3.4 Modul de administrare al site-ului

Interfața modulului de administrare este creată pentru a fi foarte ușor de folosit de către client și de a putea să își actualizeze site-ul într-un mod cât mai facil.

Grafica paginilor, imaginilor și iconițelor au fost realizată în Adobe Photoshop și Adobe Illustrator de către mine. Editorul are integrat funcționalitățile de bază pentru realizarea conținutului de pe site. Se pot realiza legături, tabele, liste aranjate sau nearanjate. De asemenea pot fi adăugate imagini. Textul poate fi stilat: bold, italic, subliniat, tăiat, indice, etc. Paragrafele se pot alinia la stânga, dreapta și centru. De asemenea pot fi modificate culorile, dimensiunea și fontul textelor.

Fig. 47 Adobe Dreamweaver- Editorul viz

CONCLUZII

Realizarea site-ului Universității „Dunărea de Jos” din Galați se bazează pe o perioada de un an de zile de studii pe cont propriu și de muncă în grafică și design.

Așadar, odată cu crearea site-ului udjg.xyz am dezvoltat mai multe aptitudini în domeniul dezvoltarii de pagini web si design-ul lor. Această interfață este una din cele mai reușite de mine până acum, deoarece a fost realizată o muncă bine structurată și organizată. Am aprofundat noțiuni PHP, MySQL, HTML și CSS, am studiat mai mult despre teoria formelor și a culorilor, principii de compoziție și tipografie.

Pentru mine redactarea licenței a fost un proces de sistematizare a lucrurilor ce le-am cunoscut deja de peste ani în domeniul graficii. Din acest motiv consider că întregul proiect, din faza inițială – studiul site-urilor academice, până la faza de documentare pentru redactarea licenței și scrierea propriu-zisă, a fost o ocazie deosebită de a avansa pe plan profesional.

Colaborarea cu dl. prof. dr. Dan Munteanu, coordonatorul proiectului, a decurs foarte bine și a fost benefică pentru rezultatele finale obținute la nivel de site. Astfel, am avut o satisfacție și o plăcere lucrând pentru proiect și licență. Toate imaginile folosite ca ilustrații în această licență sunt realizate de mine, exceptând capturile de ecran a site-urilor din capitolul „Studii comparative pe mai multe site-uri academice”.

Noul site UDJG este mult mai accesibil și are un design modern și atractiv. Acesta dispune de o structură mult mai bine organizată și conținut redactat considerabil mai bine decât site-ul precedent. Pentru a atinge un grad și mai înalt de calitate la nivel de conținut, ar trebui să urmeze într-un mod mai strict și mai aplicat sugestiile expuse în capitolele „Tehnoredactarea web”, „Marketing” și „Concluzii asupra site-urilor academice studiate” care ar ajuta în mod substanțial în acest sens.

Bibliografie

http://char.txa.cornell.edu/language/element/element.htm ,08-01-2019.

https://en.wikipedia.org/wiki/Gestalt_psychology ,8-01-2019.

https://en.wikipedia.org/wiki/Color_theory ,10-01-2019.

http://www.worqx.com/color/color_systems.htm ,15-01-2019.

http://char.txa.cornell.edu/language/element/color/color.htm#psycho,15-01-2019.

https://en.wikipedia.org/wiki/Column_(typography) ,17-01-2019.

https://en.wikipedia.org/wiki/Paragraph ,17-01-2019.

https://en.wikipedia.org/wiki/Letter-spacing ,21-01-2019.

https://en.wikipedia.org/wiki/Kerning ,25-01-2019.

https://en.wikipedia.org/wiki/Typographic_alignment ,02-02-2019.

https://en.wikipedia.org/wiki/Font ,04-02-2019.

https://support.microsoft.com/ro-ro/help/114222/description-of-the-lorem-ipsum-dolor-sit-amet-text-that-appears-in-wor ,10-02-2019.

JON DUCKETT, HTML and CSS design and build websites, Editura Teora

Curs_CSS_a5.pdf

http://www.e-learn.ro/tutorial/css/ce-este-css-a/67/1/37.htm/ ,16-03-2019.

https://wpshout.com/wordpress-programming-language/ ,16-03-2019.

https://ro.wikipedia.org/wiki/MySQL ,21-03-2019.

https://en.wikipedia.org/wiki/User_interface_design ,09-04-2019.