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

PROIECT DE DIPLOMĂ

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

Ș.l.dr.ing. Dan MUNTEANU

Absolvent: [anonimizat] 2019

SPECIALIZAREA: [anonimizat],

Ș.l.dr.ing. Dan MUNTEANU

Absolvent: [anonimizat] 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 prezentarea principiilor de design, care sunt cunoștințele și aspectele ce trebuiesc luate în considerare pentru realizarea unei interfețe de site.

În primul capitol, se va face identificarea principiilor de design aplicate pe interfețe de web site-uri: layout, culori, tipografie și limitele impuse de tehnologiile web și modul de implementare tehnică a design-urilor.

În capitolul al doilea, este făcută o analiză comparativă pe multiple site-uri românești și străine la nivel tehnic , vizual și de conținut cu scopul de a extrage concluzii în vederea realizării interfeței site-ului Universității „Dunărea de Jos” din Galați.

Cel de-al treilea capitol, constă în realizarea site-ului oficial al universității pe baza analizelor și observaților efectuate pe multiple site-uri academice, cu o interfață modernă și ușor de utilizat.

În capitolul opt se redau concluziile la care s-a ajuns din faza inițială – studiul site-urilor academice până la faza de documentare pentru redactarea licenței și scrierea propriu-zisă, provocările care au fost întâmpinate de-alungul dezvoltării interfeței și soluțiile care au fost aplicate.

CUPRINS

Introducere 1

Capitolul 1. Denumirea capitolului (Heading 1 style) 2

1.1. Instrucțiuni de redactare (Heading 2 style) 2

1.1.1. Contextul proiectului (Heading 3 style) 3

Capitolul 2. Denumirea capitolului 4

Capitolul 3. Denumirea capitolului 5

Capitolul 4. Denumirea capitolului 6

Concluzii 7

Bibliografie 8

Anexa 1 9

LISTA FIGURILOR

Fig. 1 Schema echivalentă a mașinii asincrone în regim staționar 2

LISTA TABELELOR

Tabelul 1 Titlul tabelului 3

Introducere

În cadrul acestui proiect voi prezenta detaliat demersul realizării unei interfețe de site, care sunt cunoștințele și aspectele ce trebuiesc luate în considerare în vederea creării interfeței.

În primul rând, voi identifica principiile de design pentru interfețe de web site-uri: layout, culori, tipografie și limitele impuse de tehnologiile web și modul de implementare tehnică a design-urilor. Pe parcursul lucrării voi pune accent pe comportamentul și așteptările utilizatorilor . Apoi, voi defini caracteristicile importante la nivel vizual și tehnic pentru diferite tipuri de site-uri, cum trebuie să fie redactate textele pe web deoarece un website nu se rezumă doar la grafică sau design; vizitatorul pune accent pe calitatea conținutului.

Voi face un studiu comparativ pe mai multe website-uri academice, străine și românești. Analiza se va efectua la nivel tehnic, vizual și de conținut cu scopul de a extrage concluzii în vederea realizării proiectului de licență: site-ul Universității „Dunărea de Jos” din Galați.

Pentru realizarea unei interfețe, sunt necesare cunoștințe din diferite ramuri deprinse din arta vizuală cât și din tehnologie. Prin aprofundarea domeniilor precum tipografie, layout, design, studiul culorilor și al formelor, realizarea unei interfețe de site este considerabil facilitată și rezultatele sunt net superioare, exprimare prin satisfacția vizitatorilor site-ului sau a clientului. Pentru a transmite mesajul corect utilizatorilor, imaginea site-ului trebuie să conțină elemente vizuale specifice acestuia: culorile, spațierea și proporțiile dintre diferitele elemente ale designului, așezarea și alinierea acestora, principii din tipografie, lizibilitate, etc. O interfață nu este realizată ca o pictură sau un design de obiect, ci este realizată pe baza cunoștințelor tehnice. Designerul este nevoit să aibă în prealabil un grad de cunoaștere destul de înalt al unor tehnologii precum HTML, CSS, JavaScript sau Flash. Aceste tehnologii, sunt folosite ca medii de exprimare artistică pe internet. Orice interfață de website este la început o imagine statică care este transformată ulterior într-un website interactiv de prezentare a unui produs, companie, instituție sau orice altă entitate, fizică sau teoretică.

Interactivitatea website-urilor se bazează pe aceste tehnologii, iar limitele impuse la nivel de implementare trebuie luate în considerare în conceperea unei interfețe de website. Mai mult decât atât, este important de luat în considerare și grupul țintă de utlizatori, căruia i se adresează site-ul, ce scop are. În acest mod se poate determina mai ușor cum trebuie să arate designul, care sunt funcționalitățile ce trebuiesc implementate și ce grad de accesibilitate este necesar. Prin efectuarea de studii de marketing (studierea site-urilor competitorilor, definirea unui grup țintă de consumatori, etc), o interfață de website poate fi schimbată considerabil, astfel încât să corespundă necesităților clienților.

Capitolul 1. PRINCIPII DE DESIGN

În principiu, fiecare website trebuie să fie unic, să conțină elemente distinctive la nivel de design, conținut sau chiar prin funcționalitățile oferite utilizatorilor. Designerul are datoria de a realiza o interfață unică prin layout-ul, fonturile sau culorile folosite. La nivel vizual trebuie să aibă o interfață adecvată conținutului prezentat, cu specificul acestuia și este concepută astfel încât să transmită mesajul dorit către client. Mai mult decât atât, o interfață trebuie să fie accesibilă și dinamică pentru a facilita schimbările ulterioare la nivel de conținut și funcționalități.

În realizarea interfeței se pot observa următoarele etape: planificare, efectuarea designului, colorarea acestuia, crearea de conținut și în final, implementarea interfeței la nivel tehnic, utilizând HTML și CSS sau alte tehnologii web. Aceste etape se bazează pe mai multe principii de design la nivel de layout, culori, tipografie, implementare și accesibilitate. Despre acestea voi vorbi în acest capitol.

În planificare se stabilesc funcționalitățile oferite utilizatorilor (căutare, schimbare de limbă, etc), tipul de web site (personal, instituțional, de prezentare produs, etc), preferințe vizuale, structura site-ului la lansare, ce informații apar pe prima pagină, tehnologiile folosite pentru implementarea site-ului, etc. Un site bogat, cu o structură de meniuri mare, informații multe, nu poate fi, în principiu, foarte intens la nivel vizual, cu design bogat și animat, deoarece, în acest mod, ar fi subminat scopul site-ului, fie prin limitarea informațiilor afișate în favoarea graficii și a designului, fie prin distragerea atenției de la conținut. Astfel, în aceste cazuri, o interfață trebuie să fie simplă, mai concisă, pentru a pune în valoare conținutul și a-l expune vizitatorului într-un mod plăcut. Însă, când este vorba de un site de prezentare de produs, bineînțeles, gradul de libertate la nivel vizual este mult mai mare, iar informațiile se află în plan secund.

Când etapa de planificare este suficient de concludentă, urmează realizarea propriu-zisă a interfeței. Această etapă constă în definirea structurii vizuale, a layout-ului, unde se găsesc elementele funcționale din site în design, ce elemente de design decorativ sunt folosite și se stabilesc proporțiile între acestea, etc. După care, elementele sunt colorate. Culorile sunt esențiale pentru a transmite un mesaj artistic utilizatorilor site-ului. Deobicei se folosesc diferite efecte vizuale în design pentru înfrumusețare, cum ar fi gradienturi, reflexii și umbre.

După ce este realizat designul, se adaugă conținutul textual, pentru a se exemplifica cum va arăta la final site-ul: meniuri, articole, link-uri, etc. Dimensiunile textelor, fonturile utilizate și alinierea trebuie să subscrie unor cunoștințe de tipografie, măcar minimale. Cunoașterea câtorva lucruri de bază din domeniul tipografiei ajută la augmentarea considerabilă a calității interfeței unui website. Lizibilitatea și accesibilitatea informațiilor sunt direct influențate de aceste aspecte.

La final, în mod obișnuit, o interfață de site este o serie de imagini efectuate într-un program de grafică, de design, cum ar fi Corel Draw, Adobe Photoshop, etc. Pentru a avea un site propriu-zis, aceste imagini urmează să fie tăiate (tranșate) în bucățele, în diferite fișiere, în funcție de design, de elementele din interfață și în funcție de tehnologia folosită pentru a implementa interfața. Implementarea unei interfețe constă în programarea HTML și CSS.

1.1 Design

Principalul element al oricărei arte vizuale este punctul. Ca și în pictură, acest element de bază este la fel de important și în designul de interfețe de site-uri web. Punctul este elementul esențial pentru a obține linii. Prin trasarea unei linii două puncte diferite sunt conectate și au rol de capete. Omul are tendința la nivel perceptual de a subînțelege liniile, fără ca acestea să fie trasate. De exemplu în imaginea alăturată, utilizând doar trei puncte, fără nici o linie, am construit o formă geometrică: un triunghi.

Fig. 1 Triunghi

1.1.1 Linie

La nivel vizual, linia are un rol artistic important. Aceasta are potențialul de a ghida privirea într-o lucrare artistică, la nivel compozițional, spre subiectul imaginii sau poate contribui în transmiterea unor mesaje artistice. Liniile pot fi frânte, cu unghiuri ascuțite, obtuze, continue, discontinue, curbate, etc; pot fi groase sau subțiri. Liniile sunt utilizate în design pentru a desena contururi de elemente vizuale, forme sau pentru a delimita spațiu, cum ar fi diferite secțiuni din interfața site-ului sau a unei pagini de revistă, ziar, etc. În diagonală, liniile exprimă mișcare, activitate, vibrație și tensiune. În cultura europeană, occidentală, cele orientate în diagonală de la stânga la dreapta, exprimă căderea, însă în orient, unde se citește de la dreapta la stânga reprezintă opusul: creștere. În picturi, fotografii, liniile diagonale pot exprima și reda adâncimea perspectivei. Astfel de linii exprimă și instabilitate, datorită ambiguității: nici verticale, nici orizontale. [1] Liniile curbe, ondulate, pot aminti privitorului de forme din natură, de formele corpului omenesc. Acestea de obicei exprimă tandrețe, liniște, plăcere, delicatețe, ușurință, etc și nu permit dihotomii, contraste, fiindcă există întotdeauna un interval de parcurs de la un capăt la altul, din aproape în aproape, fără salturi.

1.1.2 Formă

Pentru realizarea formelor sunt necesare fie linii curbe, fie linii frânte. După aspect, formele pot fi geometrice sau organice. O formă organică se obține cu linii curbe, iar o formă geometrică din linii frânte. Cele mai utilizate forme în design de interfețe de site-uri sunt formele primitive studiate în geometria euclidiană: dreptunghiuri, elipse și triunghiuri. Modul de recunoaștere vizuală al procesului de gândire a fost observat de către studenții și profesorii de psihologie de la Școala Berlineză în anii 1920. În linii mari, percepția oricărui design sau pictură a fost definită prin teoria Gestalt – esența sau forma unei entități complete. Potrivit acestei teorii, principiul operațional de bază al creierului uman este holistic, paralel și are tendința de a fi auto-organizatoric [2]. Prin această teorie a psihologiei formelor se pot identifica mai multe moduri în care creierul uman grupează și interpretează elementele într-un design, sau punctele dintr-un plan. Teoria spune că oamenii percep mai întâi întregul prin a distinge obiectele (spațiul pozitiv) de fond (spațiu negativ), apoi sunt conștientizate elementele constituente, părțile din imagine. Principalele legi în gestaltilism sunt: continuitate, proximitate, completare și similaritate. [3]

Fig. 2 Continuitate Fig. 3 Proximitate Fig. 4 Completare

Fig. 5 Similaritate

1.1.3 Layout

Layout-ul unui design de website este definit de succesiunea și de poziționarea a elementelor din interfață, având diferite proporții și spații stabilite de distanța dintre acestea. În vederea conceperii unui layout, un designer trebuie să stabilească liniile principale ale interfeței. Orice website este navigat fie de sus în jos, fie (foarte rar) de la stânga la dreapta, adică pe verticală sau pe orizontală. În acest sens, trebuie stabilite principalele linii verticale și orizontale în layout. Aceste linii nu vor fi întotdeauna vizibile în designul final, ci sunt linii orientative, de lucru, sau implicite, perceptibile la nivel vizual la o privire mai atentă. Acestea trebuie definite în mare parte de doi factori: număr de coloane și de secțiuni. Secțiunile esențiale într-un design de interfață a unui site sunt antetul, bara de navigare, partea de conținut – articol, bară laterală și subsolul.

1.1.4 Compoziție

Pentru că interfețele de site-uri reprezintă un fel de artă vizuală, designerii profesioniști implementează mai mult sau mai puțin tehnici din pictură și fotografie, deoarece o interfață de site poate fi considerată o imagine artistică. În acest sens, se pot aplica principii de compoziție cunoscute în aceste forme de exprimare artistică: echilibru compozițional, repetiție, simetrii, proporții, etc. O tehnică împrumutată din pictură pentru a realiza design-uri de interfețe care să iasă din context este realizarea iluziei de adâncime, de spațiu. Designerii pot crea, precum orice pictor, iluzia de adâncime în mai multe moduri. Însă, cele mai utilizate tehnici sunt: suprapunerea formelor, schimbarea dimensiunii, modificarea de perspectivă (perspectivă lineară) și estompare cu ajutorul nuanțelor și al culorilor care creează efectul că elementul recedă în perspectivă [4]. Se mai folosesc și efecte vizuale care au un aport substanțial în obținerea iluzii de adâncime: degradeuri, reflexii și umbre. Următoarele figuri ilustrează diferite procedee de a crea iluzia de adâncime:

Fig. 6 Figuri geometrice care ilustrează diferite procedee de a crea iluzia de adâncime

a) – suprapunere și linii care marchează conturul obiectelor.

b) – suprapunere și estompare – schimbarea nuanței în funcție de distanță.

c) – suprapunere, estompare, reflexii și umbre.

d) – suprapunere, estompare și schimbarea dimensiunii obiectelor în funcție de distanță.

1.2 Culori

În designul de interfețe, culorile au o capacitate imensă în stimularea privitorilor. Culorile stârnesc cele mai vii trăiri în oameni. Impactul lor vizual este de departe cel mai important în realizarea oricărei lucrări artistice: poză, pictură sau design. Un designer trebuie să aibă o cunoaștere aprofundată a teoriei culorilor și a semnificaților acestora. Utilizarea lor în mod conștient este imperativă, deoarece permit oricărui designer să transmită mesajul artistic dorit. Folosirea de culori inadecvate poate drastic schimba experiența utilizatorilor pe site: acesta poate fi repulsiv, inaccesibil și ilizibil.

1.2.1 Modele de culori

Pe parcursul istoriei au fost elaborate diferite sisteme pentru a reprezenta și de a denumi culorile. În prezent, cea mai comună modalitate de a reprezenta culorile în domeniile din artă se bazează pe roata de culori, prima dată ilustrată de cercetătorii din acest domeniu în secolul XVIII. Isaac Newton și Johann Wolfgang von Goethe în „Teoria culorilor” din 1810 au marcat progrese considerabile în înțelegerea culorilor [5].

Pentru a obține culori există două moduri de sinteză a acestora: substractivă (CMY) și aditivă (RGB). În principal, diferențele apar din cauza mediului de lucru și a tehnologiilor folosite. Pictorii și industria de tipografie și tipărire folosesc sinteza substractivă pentru a obține culori. Cu cât mai multe vopsele sau pigmenți sunt suprapuse, cu atât mai întunecată devine culoarea. Culorile primare a acestui tip de sinteză sunt cyan, magenta și galben. Prin combinarea acestora se pot obține următoarele culori secundare: roșu, verde și albastru. În tipografie se folosește modelul de culori CMY sau CMYK (Key, cât de neagră este culoarea). Cu alte cuvinte, CMY este un model de reprezentare și reproducere a culorilor standardizat, iar CMYK este doar o variantă particulară a modelului CMY folosită în programele de grafică. [6]

1.2.2 Profile de culori

Un profil de culori este un model numeric al spațiilor de culori. Sistemele de operare și aplicațiile de grafică, de procesare a imaginilor, aparatele foto, imprimantele, ecranele și scannerele folosesc diferite tipuri de profile de culori. Acestea se pot clasifica în următoarele moduri: după tipurile de dispozitive sau după utilizarea lor în software. Profilele de culori pentru dispozitive sunt dependente de acestea și oferă posibilitatea de reproducere a culorilor dorite. La nivel de software, există profile pentru sistemul de operare care gestionează modul în care culorile sunt afișate și adesea depind de dispozitiv, modelul de ecran. Într-un cadru profesional de editare a imaginilor, de fotografii și în design, se recomandă utilizarea profilelor de culori care acoperă un spectru cât mai larg de culori.

1.3 Elemente de tipografie

Un design complet de interfață întotdeauna include text. Sunt folosite texte scurte pentru orientare și navigare în site: meniuri, butoane, legături spre diferite pagini sau funcționalități: căutare, print, ajustarea mărimii textului, etc. În partea centrală, de conținut, în cazul site-urilor de prezentare se preferă texte de lungime redusă, concise pentru a nu plictisi vizitatorii. Însă, în cazul site-urilor de informare (știri, enciclopedii, recenzii, etc), textele pot fi lungi, articole elaborate și detaliate despre subiectul dat. În ambele cazuri, cât și pentru textele orientative din antetul sau subsolul site-ului, un designer trebuie să cunoască un minim de teorie din domeniul tipografiei pentru a alege fețele tipografice (fonturi) pentru textele din interfață mai bine, de a asigura lizibilitatea acestora și a face mai plăcută lectura articolelor întinse pe site-uri de informare.

1.3.1 Margini

O pagină web, poate fi considerată la nivel vizual o pagină de revistă sau chiar o pagină simplă dintr-o carte. În principal, avem antet și subsol, iar în ambele cazuri trebuie menținută o consistență vizuală între pagini. Aceasta este menținută utilizând aceeași interfață (design, layout și culori) pentru toate paginile din site. Într-o carte, consistența vizuală constă în utilizarea consecventă a aceluiași font pentru text, aceleași mărimi pentru paragrafe, titluri, aceleași spații între marginile paginii, etc. Însă, aceste aspecte sunt valabile și la o pagină web. Mai precis, o bară de meniuri, indiferent de orientarea sa, trebuie să aibă elementele vizuale bine aliniate, iar textele să aibă o margine, un spațiu liber. Textele nu trebuie să atingă muchiile oricărui element vizual din site: meniuri, antet, subsol sau conținut.

1.3.2 Paragrafe

Paragrafele sunt unități textuale (fragmente) în care se exprimă o idee sau un punct dintr-o argumentație elaborată. Acestea sunt despărțite prin aliniat nou și au în compoziție mai multe propoziții sau fraze. Delimitarea vizuală între paragrafe este importantă pentru a augmenta plăcerea lecturii pe site. Există două moduri de a scoate în evidență un paragraf: introducerea unui spațiu între acestea și indentarea textului.

Fig. 7 Spațierea între paragrafe

1.3.3 Alinierea textului

Textul într-un paragraf poate fi aliniat în dreapta, stânga, centrat sau justificat. Alinierea textului pe dreapta sau stânga asigură o linie continuă pe marginea dreaptă, respectiv cea stângă. Atunci când este folosită alinierea centrată, fiecare linie este centrată pe orizontală și datorită variațiilor de lungime a acestora, nici pe stângă, nici pe dreapta nu se va obține o linie continuă în plan vertical, o aliniere între ele. Alinierea centrată nu este recomandată, doar în cazuri excepționale. Imaginea alăturată ilustrează alinierea pe stânga, dreapta și justificare. Pentru a alinia textul pe ambele părți, în stânga și dreapta, astfel încât marginile să fie scoase în evidență, se folosește alinierea justificată, unde toate liniile de text au aceeași lungime. Lungimea liniilor este determinată de margini și de lățimea coloanelor de text. Aplicațiile de tipografie și navigatoarele web, în mod automat, pentru fiecare linie de text variază spațiile între litere și cuvinte pentru a alinia textul pe ambele părți. Se poate observa că în alinierea de tip justificare, ultima linie este exclusă. În acest sens, există justificare pe stânga sau dreapta, unde ultima linie este aliniată fie la stânga, fie la dreapta. În coloane de text prea înguste nu se recomandă utilizarea alinierii justificate deoarece apar spații între litere și cuvinte mult prea mari, iar lizibilitatea textului scade drastic. [7]

1.3.4 Fonturi

O față tipografică poate fi formată din fonturi multiple pentru a da posibilitatea designerilor de a stila textele: greutate variabilă (aldin), italic, oblic și condensat. Un font condensat are caracterele reduse în lățime. Se recomandă evitarea confuziei între stilul oblic și italic, deoarece un font oblic are caracterele înclinate, de obicei spre dreapta, iar un font italic reprezintă o formă stilizată a scrisului de mână caligrafic. Greutatea fonturilor definește cât de grase sunt literele: slab, semi-gras, gras, etc. [8] De obicei, în conținut se utilizează un stil aldin, cu greutate mai mare, mai gras, pentru a emfaza aspecte cheie din mesajul scris, iar italic sau oblic pentru citate.

În figura de mai jos am folosit o față tipografică romanic-lineal umanistă pentru a ilustra diferitele stiluri: Myriad Pro.

Fig. 8 Exemple comparative pentru italic, oblic și diferite nivele de greutate / aldin

1.4 Implementarea tehnică

La nivel digital, imaginile sunt făcute fie în mod bitmap (raster, editare la nivel de pixeli), fie în mod parametric și vectorial. În editarea bitmap se manipulează în mod direct pixelii. Acest mod de lucru este folosit adesea în desenare digitală. În editarea vectorială și parametrică, fiecare element este dinamic și manipulabil în mod succesiv. Se folosesc obiecte de diferite tipuri, cu proprietăți și caracteristici variate.

1.4.1 HMTL

HTML (HyperText Markup Language) este un limbaj standard de marcaj pentru pagini web și stă la baza oricărui site. În HTML programatorul definește o structură ierarhică de tag-uri (etichete) în perechi de forma: <body> </body>, <div> </div>,<h1> </h1>, <p> </p>, etc. Se poate observa că fiecare tag este deschis sub forma <exemplu> și închis sub forma </exemplu>. Fiecare tag poate avea atribute care se definesc sub forma: <tag atribut="valoare">conținut</tag>. HTML permite răspândirea de conținut pe web cu structură semantică, deoarece fiecare tag are o valoare semantică. Actualmente se tinde spre un web semantic. Într-o pagină HTML pot fi integrate obiecte externe, imagini, JavaScript-uri pentru interactivitate, CSS-uri pentru stilare și pot fi făcute formulare. [9]

Exemplul următor ilustrează structura unui HTML și cum se poate defini o structură semantică pentru articole.

1. <!doctype html>

2. <html>

3. <head>

4. <title>HTML este un limbaj simplu</title>

5. <link rel="stylesheet" href="/stilare.css" type="text/css" media="all"/>

6. </head>

7. <body>

8. <h1>Titlul capitolului</h1>

9. <p>Exemplu de pagină web.</p>

10. <p>Conțínut</p>

11. <h2 lang=”en”>This is a subchapter</h2>

12. <p>Acest capitol este scris <em>în engleză</em>.</p>

13. <ul>

14. <li>O listă ordonată sau neordonată</li>

15. <li>Poate fi definită foarte ușor.</li>

16. </ul>

17. </body>

18. </html>

Prima linie a codului este inițializarea modului de afișare specific fiecărei versiuni de HTML – doctype. Tag-ul <html> este punctul de pornire a structurii paginii. În tag-ul <head> pot fi definite meta-date care descriu pagina sau site-ul: autorul, titlul paginii, referințe la fișiere sau elemente externe (CSS-uri, JS-uri), etc. Atributele rel și href determină ce tip de referință și ce fișier extern este integrat în pagină. În acest caz, a fost inclus un fișier CSS pentru stilarea paginii. În <body> apare conținutul propriu-zis al paginii pe care navigatorul web o afișează pe ecran: <h1> definește un titlu de nivelul întâi, iar <h2> este de nivelul doi. Pentru <h2> s-a folosit atributul lang pentru a preciza în ce limbă este scris. Tag-ul <p> reprezintă un paragraf, iar <em> este pentru a emfaza ce s-a spus. În final, tag-urile <ol> sau <ul> sunt folosite pentru a defini liste ordonate, respectiv neordonate. Pentru a delimita elementele listei se folosește tag-ul <li> în ambele cazuri.

1.4.2 Sectori CSS

Un CSS este foarte ușor de scris și de citit de cunoscătorii de limba engleză. Programatorul definește blocuri de reguli de prezentare și stilare delimitate de acolade {}. Într-un bloc de reguli se definesc declarații CSS delimitate cu semnul ; (punct și virgulă). Proprietățile CSS sunt cuvinte în engleză ce trebuie urmate de o valoare: proprietate: valoare;. O declarație CSS este perechea formată dintr-o proprietate și o valoare. Fiecare bloc de reguli începe cu un selector sau mai multe selectoare separate de virgulă: selector1, selector2, selector3 {proprietate: valoare;}. Exemple de proprietăți și valori: font-size: 10px; position: absolute; margin: 15px, etc. [10]

În CSS fiecare element din limbajul de marcaj este considerat o cutie, un ”box model”. Orice tag din HTML este afișat în modelul de cutie. Modelul de cutie în CSS este constituit din margine, bordură, umplutură (padding) și conținutul propriu-zis. Aceste proprietăți de stilare a cutiei în CSS sunt pentru ajustarea spațiului între elementele din limbajul de marcaj. Marginea reprezintă spațiul exterior față de element și nu are culoare, este transparent. Bordura poate fi stilată în mai multe moduri: linie continuă, punctată, în culori, etc. Umplutura este un spațiu între bordură și conținutul propriu-zis care preia culoarea sau fundalul stabilit pentru element, nu poate avea o culoare specific setată. Când mai multe elemente se află unul lângă altul, marginile lor se contopesc. În implementarea unei interfețe aceste proprietăți sunt indispensabile pentru layout și nu se poate obține o interfață avansată fără manipularea acestora. [11]

1.4.3 Limitări în implementarea interfețelor

CSS este un limbaj mai mult pentru stilare, nu atât de mult pentru design de layout-uri. De aceea devine mult mai complicat un design de interfață fluidă. Poziționarea elementelor pe verticală este considerabil mai grea, decât pe orizontală. Lipsa suportului pentru expresii matematice la nivelul declarațiilor CSS este adesea evidentă, de exemplu: #pătrat {width: 50% – 10px}. După cum s-a putut observa, în CSS, la ora actuală, nu există nici un mod de a avea selectoare pentru elemente aflate în relație de ascendență. Mai precis, nu există posibilitatea de a aplica proprietăți CSS pe părintele unui element, la nivel ierarhic, în funcție de anumite criterii.

1.4.4 Proprietăți CSS

Anumite proprietăți din aplicația de design folosită pentru realizarea interfeței pot fi reproduse la nivel tehnic, în site, cu ajutorul CSS: umbre și halouri (box-shadow, textshadow), colțuri rotunjite (box-radius), transparențe (opacity sau culori RGBA), degradeuri (linear-gradient), etc. Proprietățile menționate sunt nou introduse în CSS 3 și sunt în curs de implementare în navigatoarele moderne. La nivel tipografic, CSS oferă proprietățile necesare de a obține aceeași stilare a textelor ca în aplicațiile de design, cu un nivel de acuratețe remarcabil: line-height, letter-spacing, text-indent, font-size, fontfamily, etc. Proprietatea display din CSS oferă controlul asupra modului în care fiecare element este afișat în pagină. Display are următoarele valori posibile care ajută în acest sens: auto (implicit), none, hidden, inline, block și multe alte mai rar utilizate. Unele elemente din limbajul de marcaj sunt afișate ca un bloc care forțează un rând nou înaintea și după element și ocupă întreaga lățime a elementului părinte: <p>, <div>, <ol>, etc. Alte elemente sunt afișate inline, în linie. Acestea nu forțează rând nou și nici nu ocupă toată lățimea: <span>, <em>, <a>, etc. CSS permite schimbarea modului de afișare, astfel putem avea <p> sau <div> afișat în linie, ori <span>, <em> afișate ca blocuri. Un programator, utilizând aceste moduri de afișare, poate obține alinierea fie pe verticală, fie pe orizontală a unor elemente din interfață, de exemplu: o bară de meniuri. [12]

În CSS elementele vizuale pot fi reașezate pe orizontală folosind proprietatea float cu valorile: left, right sau center. Elementul cu această proprietate aplicată este mutat din poziția lui inițială pe orizontală în stânga, centru sau în dreapta conținutului, iar modul de afișare este de tip bloc, nu în linie. Lățimea conținutului este dată de primul element părinte cu modul de afișare bloc (display: block). Toatele elemente de marcaj afișate în linie (cu display: inline) aflate la același nivel în structura documentului sau mai adânci față de elementul pe care se aplică declarația CSS float, se mulează după acesta, excepție făcând elemente care la nivel de cod se află înaintea acestuia. Un element cu float poate fi redimensionat utilizând proprietățile width și height, ce permit valori procentuale sau în pixeli. Proprietatea float este utilizată pentru poziționarea pozelor în pagină, astfel încât textele să se muleze după poze. În cazul layout-urilor, se folosește pentru poziționarea într-o extremă sau alta a unor elemente, cum ar fi sigla siteului în stânga, iar bara de meniuri în dreapta, ambele la același nivel pe verticală. [13]

1.4.5 Tipuri de interfețe

Un design de interfață poate fi pe stânga, dreapta sau centrat. Navigarea poate fi pe verticală (cel mai des) sau pe orizontală (foarte rar). O interfață fluidă are o lățime variabilă, procentual, și este mult mai dificil de implementat decât una cu lățime fixă. Designerul din procesul de creație, într-o aplicație precum Photoshop, trebuie să aibă în considerare cum dorește să fie interfața implementată în final. Dacă dorește să aibă o interfață fluidă, atunci elementele vizuale și structura vizuală trebuie gândite astfel încât să permită implementarea propriu-zisă. În principal, trebuie avut în vedere cum vor fi transformate în bitmap și tranșate imaginile, astfel încât să arate la fel. Un alt aspect care trebuie prevăzut este modul în care se lățește interfața, ce elemente trebuie să se redimensioneze, ce imagini trebuie fie repetitive sau să permită lățirea interfeței și cum se poate face să-și mențină proporțiile când se lățește mult.

HTML și CSS sunt tehnologii web standard, client side, care rulează pe calculatorul utilizatorului de Internet. Însă, funcționalități mai mult sau mai puțin avansate sunt implementate folosind tehnologii server side, care rulează pe calculatorul de la distanța de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea celor mai cunoscute funcționalități pe site-uri: schimbarea limbii, căutare, hartă site, conturi, etc. La nivel de interfața se folosește JavaScript pentru a implementa funcționalități ce țin de modul de interacțiune cu site-ul: meniuri în cascadă, sugestii pentru termenii de căutare, încărcare a unor secțiuni din site în mod dinamic, etc.

Capitolul 2. STUDII COMPARATIVE

În continuare voi analiza mai multe site-uri academice, din România și din străinătate. Pentru realizarea lucrării de licență am ales două site-uri academice a unor universități de renume internațional și două site-uri academice românești. Acestea sunt:

Stanford University Stanford, California, SUA

University of Oxford Oxford, Anglia, Marea Britanie

Universitatea Politehnică din București

Universitatea „Alexandru Ioan Cuza” din Iași

Fiecare website va fi analizat din punct de vedere vizual, tehnic dar și la nivel de conținut și structură. În analiza vizuală se va discuta despre: proporțiile și spațierile între elemente și așezarea lor, designul general al interfeței, tipul de layout și structura vizuală, culori și fonturi utilizate. La nivel tehnic discuția va fi despre tehnologiile folosite, funcționalitățile principale oferite utilizatorilor și un accent deosebit va fi pus pe accesibilitatea site-urilor la nivel vizual și tehnic. Ce tip de conținut se află pe prima pagină din site, tipul de informații și modul de prezentare vor fi reliefate în secțiunea dedicată analizei conținutului. Se va pune accent și pe sistemul de navigare (meniurile) și structura site-ului. În final se vor face constatări asupra consecvenței site-urilor la o navigare mai aprofundată. Este menținut același design și același nivel de accesibilitate pe toate paginile sau se schimbă frecvent și nu este menținută nici o caracteristică a paginilor precedente? Pe parcursul analizei fiecărui site vor fi oferite multiple capturi de ecran pentru a ilustra ceea ce se discută. În încheierea capitolul voi prezenta diferențele și asemănările observate între site-urile academice străine și românești.

2.1 Site-uri de universități cu renume internațional

2.1.1 Stanford University

Fig. 9 Prima pagină pe www.stanford.edu

Layout-ul este împărțit în mod clar în secțiunile cunoscute: antet, conținut și subsol. Conținutul este divizat în mare parte în trei coloane verticale și pe secțiuni orizontale care formează chenare. În general, elementele sunt aliniate corect și există spațieri suficient de mari între elemente.

În antet se găsesc sigla universității, o bară de meniuri orizontală și în dreapta antetului utilizatorii pot găsi funcționalitatea de căutare în site. În antet se găsesc sigla universității, bara de meniuri orizontală și un cover cu o imagine reprezentativă. Bara de meniuri este relativ bine realizată. Se găsesc un număr redus de meniuri, ceea ce oferă un confort în navigarea site-ului.

Elementele din antet și din subsol sunt tipice pe web și nu ies din context.

În partea de conținut, în funcție de pagini, există două sau trei coloane. Fiecare chenar din conținut este delimitat prin schimbarea culorii sau a tipului de background. Pe prima pagină se găsesc câteva știri expandate, în coloana centrală, iar sub acestea alte titluri.

În ansamblu, interfața este degajată și simplistă. Se utilizează culori calde. Ambianța este îmbogățită prin utilizarea de imagini viu colorate ca splash, tip antet, în partea superioară dedicată conținutului. Culorile utilizate pentru text și fundalul butoanelor creează un contrast suficient de mare, astfel lizibilitatea lor nu este redusă.

Se folosește un font cu ampatamente pentru titluri (Source Sans Pro), iar pentru restul textelor, fonturi lineale (Helvetica, Arial).

Site-ul este implementat utilizând HTML și CSS. Modul în care este realizat permite o navigare destul de facilă cu aplicații precum Lynx, care afișează doar HTML. Conținutul HTML este bine separat de prezentare.

Stilurile CSS specifice dispozitivelor mobile aplicate pentru interfața site-ului sunt foarte bine realizate. Navigarea de pe celulare sau alte dispozitive similare este plăcută și din punct de vedere estetic designul este suficient de îngrijit.

Opțiuni și facilități oferite utilizatorilor: căutare, informații de contact bine organizate, hărți pentru campusuri, tur virtual comprehensiv (multiple filme narate, poze și descrieri) al clădirilor universității și a campusului implementat în Flash, fluxuri RSS pentru abonare la știri, articole pentru presă sau evenimente și hartă site.

2.1.2 University of Oxford

Fig. 10 Prima pagină pe www.ox.ac.uk

De pe prima pagină suntem întâmpinați cu ceva deosebit. Prima pagină este o doar o privire per ansamblu a întregului site, un fel de hartă site. Pe stânga, în antet se găsește sigla universității Oxford într-un cadran cu contur alb care nu înfrumusețează interfața, ci din contră. Următoarea secțiune este un splash avansat care prezintă știri pe scurt.

În subsol să află câteva legături spre alte pagini: despre site, o hartă a site-ului, contact, etc.

Întregul layout are o lățime fixă și este centrat. În general, layout-ul este bine făcut. Elementele din design sunt bine aliniate șl datorită culorilor reci și monocromatice (doar pe albastru) este foarte sobru. Uneori conținutul de pe unele pagini, din cele trei coloane, nu este aliniat pe verticală.

Paleta de culori este foarte redusă. S-a folosit doar un albastru închis, culoarea dominantă. Textele sunt albe și se utilizează doar fonturi lineale: Georgia, Helvetica, Arial, etc. Pe toate paginile această paletă de culori reci este menținută. Doar splashul și imaginile din conținut au culori variate și diversifică experiența.

După o navigare mai îndelungată se poate observa că doar prima pagină este complet albastră. Toate celelalte pagini sunt împărțite în două: antetul își menține culoarea, iar partea inferioară este pe alb. Însă, textele din această secțiune dedicată conținutului nu ies din paleta de culori stabilită. Legăturile, titlurile și alte elemente din design sunt doar în nuanțe de albastru.

Navigarea este foarte similară cu cea de pe site-ul analizat înainte: Stanford University. Meniurile au relativ același mod de funcționare: opțiunile sunt ascunse în mod dinamic pentru a simplifica meniul.

Fig. 11 O pagină oarecare de pe site-ul principal al universității Oxford.

La fel ca pe celelalte site-uri, conținutul este bine redactat și stilat. Nu par să existe erori evidente. Paragrafele nu au indentare, dar sunt răsfirate.

Structura site-ului este foarte bogată, tipic site-urilor academice, însă paginile de site map nu scot în evidență paginile de nivelul doi, trei, patru, etc, ci se rezumă doar la nivelul doi sau trei.

Turul virtual pe site-ul universității Oxford se rezumă în principal la hărți, informații și poze panoramice.

Pe acest site se pune mai mult accentul pe intrarea în contact cu ei pentru a pune întrebări. Astfel, uneori apar opțiuni de login și se sugerează crearea unui cont pentru a pune întrebări. La fel ca pe celelalte site-uri analizate până acum, utilizatorii se pot abona la fluxuri RSS pentru știri sau evenimente.

La nivel tehnic, site-ul este implementat în HTML și CSS. Separarea dintre codul HTML și prezentarea CSS este foarte bine realizată. Site-ul este foarte accesibil din acest punct de vedere.

2.2 Site-uri de universități românești

2.2.1 Universitatea Politehnică din București

Fig. 12 Prima pagină pe www.upb.ro

Layout-ul este de lățime fixă, centrat pe orizontală. În antet, pe stânga, se găsește emblema universității și numele ei scris cu un font lineal. Layout-ul este foarte bine structurat și toate paginile urmează același design, cu mici schimbări.

În dreapta antetului, avem o bară albastră cu meniurile principale scrise cu alb. Când mouse-ul este deasupra butoanelor apare o listă bogată de meniuri în cascadă de nivelul doi și trei, bine structurată la nivel vizual. Acestea sunt lipsite însă de un reper pentru aliniere.

La o primă impresie interfața pare bine realizată, fiindcă este degajată. Se folosesc culori relaxante, accente albastru pe alb și elementele vizuale nu sunt înghesuite.

Peste tot se folosește doar un font lineal: Source Sans Pro. Se poate spune că este o simplitate exagerată.

La nivel de conținut, trebuie apreciat faptul că titlurile și paragrafele sunt aliniate. Paragrafele nu sunt indentate, însă sunt bine răsfirate, cu un spațiu de 12px. Un alt aspect pozitiv este modul de prezentare a site-ului. Vizitatorul nu este asaltat cu prea multe informații și sigle ale altor instituții sau parteneri direct pe prima pagină sau pe alte pagini. Nu apar erori evidente de stilare și abuzuri în acest sens.

La nivel tehnic, site-ul este implementat în CSS și HTML. Însă, separarea este foarte slabă între codul HTML, pentru conținut, și codul CSS, de prezentare. Pentru layout-ul general se folosește CSS în mare măsură și destul de bine, însă pentru conținut sunt folosite tabele și proprietăți CSS scrise inline, direct în HTML. Din această perspectivă, gradul de accesibilitate nu este ridicat.

Trebuie apreciat faptul că această interfață pare să fie foarte bine optimizată pentru navigarea cu dispozitive mobile. Sunt aplicate stiluri CSS care afișează interfața întrun mod accesibil.

2.2.2 Universitatea „Alexandru Ioan Cuza” din Iași

Fig. 12 Prima pagină pe www.uaic.ro

Layout-ul are o lățime fixă și este centrat. Pe prima pagină antetul este relativ înalt și are o imagine splash frumoasă și atractivă. Înaintea ei, pe stânga se află patru steaguri care permit schimbarea limbii: română, engleză, franceză și germană.

Antetul site-ului este bine realizat, la modul general. Sigla universității și textul aferent sunt poziționate în partea stângă. Site-ul oferă opțiunile următoare: schimbarea limbii, căutare în site și o hartă site. Din nefericire, chiar dacă designul antetului este bine realizat în general, tot se găsesc multiple probleme. Bara dedicată meniurilor ar trebui să fie mai înaltă cu 50%, astfel marginile în jurul textelor ar fi mai mari. Sigla universității ar putea fi și ea mai mare, cu aproximativ 25%.

În bara de meniuri când mouse-ul este deasupra unui buton, apar meniuri în cascadă. Fundalul acestor meniuri este albastru, iar textul este alb.

Paleta de culori este potrivită unui site academic, profesională, deschisă și degajată. În general, interfața ar arăta mult mai bine dacă layout-ul ar fi la fel de degajat prin utilizarea de margini și spațieri generoase între elementele vizuale.

La nivel tehnic interfața este implementată utilizând CSS și HTML. Separarea dintre cele două este destul de bună. Site-ul poate fi navigat cu ușurință utilizând navigatoare de tipul Lynx.

Site-ul are un CSS ce pare să fie destul de bine optimizat pentru dispozitive mobile, deoarece este navigabil cu ușurință pe acestea.

2.3 Diferențe și asemănări între site-urile străine și românești

Din analiza efectuată asupra site-urilor academice se pot extrage multe concluzii cu privire la felul în care un site academic este făcut, la nivel tehnic, vizual și ce fel conținut există pe astfel de site-uri.

În general, un site academic este implementat în HTML, JavaScript și CSS. Funcționalitățile obișnuite sunt: pagină de contact cu formular avansat, hartă site și căutare avansată. Nu se folosesc animații și sunete pe site-uri academice.

La nivel de design, majoritatea site-urilor au un layout cu o lățime fixă și sunt aliniate fie în stânga, fie central. O interfață are secțiunile obișnuite: antet, conținut (adesea pe coloane) și subsol. În antet, se află o siglă pe stânga, iar în dreapta opțiunile cunoscute: contact, hartă site, schimbarea limbii și / sau căutare. De obicei apare o bară orizontală cu meniurile principale și eventual meniuri în cascadă.

În antetul secțiunii de conținut există de obicei un breadcrumb și un titlu al paginii curente. Uneori, conținutul paginilor este împărțit pe coloane.

În subsol, apar date cu privire la copyright-uri, date de contact sumare, autori și legături spre pagini de relevanță scăzută. Culorile utilizate pe site-urile academice nu sunt stridente, ci se caută să fie specifice, să particularizeze imaginea universității. În general, se folosesc palete de culori degajate care să mențină un grad ridicat de lizibilitate a textelor.

La nivel de conținut apar pe prima pagină următoarele: un splash mare, o imagine promoțională, care prezintă evenimente recente și/sau proiecte de anvergură. Aproape întotdeauna prima pagină este formată din coloane pentru a lista evenimente, știri, proiecte, etc.

Structura site-urilor academice este întotdeauna vastă, cu un număr mare de pagini aflate într-o ierarhie elaborată. Astfel, interfețele sunt gândite să acomodeze multitudinea de meniuri: bară orizontală, coloană de meniuri, meniuri în cascadă, etc.

Se poate observa cu ușurință că design-urile site-urilor românești sunt mai puțin îngrijite, detalii de profesionalism sunt adesea neglijate: alinierea elementelor, margini și spațieri consecvente, etc. Aceeași situație este valabilă și la nivel tehnic, unde apar multe erori care degradează funcționalitățile site-ului (căutare nefuncțională), zeci de megabytes de descărcat, etc. Pe site-urile academice străine analizate nu am întâlnit situații la fel de grave.

2.3 Diferențe și asemănări între site-urile străine și românești

Din analiza efectuată asupra site-urilor academice se pot extrage multe concluzii cu privire la felul în care un site academic este făcut, la nivel tehnic, vizual și ce fel conținut există pe astfel de site-uri.

În general, un site academic este implementat în HTML, JavaScript și CSS. Funcționalitățile obișnuite sunt: pagină de contact cu formular avansat, hartă site și căutare avansată. Nu se folosesc animații și sunete pe site-uri academice.

La nivel de design, majoritatea site-urilor au un layout cu o lățime fixă și sunt aliniate fie în stânga, fie central. O interfață are secțiunile obișnuite: antet, conținut (adesea pe coloane) și subsol. În antet, se află o siglă pe stânga, iar în dreapta opțiunile cunoscute: contact, hartă site, schimbarea limbii și / sau căutare. De obicei apare o bară orizontală cu meniurile principale și eventual meniuri în cascadă.

În subsol, apar date cu privire la copyright-uri, date de contact sumare, autori și legături spre pagini de relevanță scăzută.

Culorile utilizate pe site-urile academice nu sunt stridente, ci se caută să fie specifice, să particularizeze imaginea universității. În general, se folosesc palete de culori degajate care să mențină un grad ridicat de lizibilitate a textelor.

La nivel de conținut apar pe prima pagină următoarele: un splash mare, o imagine promoțională, care prezintă evenimente recente și/sau proiecte de anvergură. Aproape întotdeauna prima pagină este formată din coloane pentru a lista evenimente, știri, proiecte, etc.

Structura site-urilor academice este întotdeauna vastă, cu un număr mare de pagini aflate într-o ierarhie elaborată. Astfel, interfețele sunt gândite să acomodeze multitudinea de meniuri: bară orizontală, coloană de meniuri, meniuri în cascadă, etc.

Se poate observa cu ușurință că design-urile site-urilor românești sunt mai puțin îngrijite, detalii de profesionalism sunt adesea neglijate: alinierea elementelor, margini și spațieri consecvente, etc. Aceeași situație este valabilă și la nivel tehnic, unde apar multe erori care degradează funcționalitățile site-ului (căutare nefuncțională), zeci de megabytes de descărcat, etc. Pe site-urile academice străine analizate nu am întâlnit situații la fel de grave.

În general, site-urile străine a universităților de prestigiu sunt considerabil mai vaste și au mult mai mult conținut. În cazul acestor site-uri apare mult mai frecvent inconsecvența între pagini, deoarece există multe departamente, facultăți și site-uri dedicate proiectelor academice care nu sunt făcute de aceeași designeri și programatori. Pe site-urile academice românești, gradul de consecvență este ceva mai ridicat, deoarece acestea sunt mai mici – au mai puțin conținut.

Problema cea mai mare a site-urilor academice românești se manifestă la nivel de conținut, dacă punem accent pe acesta. Stilarea conținutului este adeseori neprofesională, pare neîngrijit și nearanjat. Mai mult decât atât, conținutul nu este scris pentru web. Documente oficiale, de uz intern, sunt copiate în conținut, puse ca pagini foarte lungi în site – un fel de raw dump. De exemplu, regulamentele oficiale interne și structura universității, a departamentelor și a facultăților, regulile de înscriere sau de a primi bursă, apar sub formă juridic-administrativă. Pe site-urile academice străine, nu am întâlnit astfel de pagini. Textele ar trebui citite de specialiști în marketing, de relații cu publicul și scrise pe înțelesul vizitatorilor unui site care scanează și nu citesc fiecare cuvânt. Un text trebuie să fie cât mai succint. O altă problemă este abundența siglelor „a partenerilor” și lauda cu acreditări. În mod evident, este realmente neprofesională listarea așa-numiților parteneri pe prima pagină, indiferent de aspectele ce țin de marketing. Nu am găsit pe site-uri academice străine liste de „parteneri”. Nu mai elaborez asupra lipsei diacriticelor pentru texte, scrierea cu MAJUSCULE sau în roșu pentru a „clarifica” anumite lucruri, erori minore de scriere (de exemplu: lipsește spațiu între semnul de punctuație și următoarea literă) sau cum sunt făcute traducerile în alte limbi. În general, oricât de bine este realizat tehnic și vizual un site, la nivel de conținut, site-ul pierde din calitate.

Pentru persoanele cu dizabilități există secțiuni dedicate pe site-urile academice străine care informează potențialii studenți și profesori de gradul de accesibilizare al clădirilor și a împrejurimilor universităților și informații despre ce servicii sunt disponibile. Pe site-urile românești academice, nu am găsit nici unde astfel de detalii. De obicei, există doar informații pentru studenți străini, internaționali. În general, există o lipsă de consecvență care se exprimă în redactarea conținutului pe site-urile românești, în realizarea design-urilor și chiar la nivelul tehnic. Se poate spune cu ușurință că site-urile românești academice, cu puține eforturi, ar putea fi net superioare, dacă s-ar da o atenție asupra detaliilor. În ultimii ani s-a putut observa că discrepanța dintre profesionalismul site-urilor academice românești și cele străine, s-a redus considerabil. Astfel, se poate spune cu certitudine că în timp site-urile românești vor atinge un nivel înalt de profesionalism.

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

Proiectul de licență constă în realizarea site-ului oficial al universității „Dunărea de Jos” din Galați. În perioada de început am analizat designul site-urilor academice și modul de realizare a acestora, cum este redactat conținutul și ce fel de conținut se găsește. Am comparat multiple site-uri românești și străine, iar pe baza concluziilor expuse în capitolul precedent, am realizat site-ul actual de pe www.udjg.xyz, în strânsă colaborare cu prof.dr.ing. Dan MUNTEANU, coordonatorul acestui proiect de licență. În ceea ce privește organizarea site-ului și conținutul propriu-zis, prima faza a constat în propunerea unei structuri cât mai potrivite unui site academic.

3.1 Design

Noua interfață a site-ului a universității este modernă. Toate elementele vizuale sunt aliniate cu deosebită atenție. Marginile pe verticală din stânga și dreapta sunt respectate în toate secțiunile layout-ului. Între elementele vizuale din design spațiile sunt alese astfel încât să nu fie prea largi sau prea mici, înghesuite. Fiecare element este poziționat în interfață în funcție de importanța lui.

Antetul este format din noua sigla a universității „Dunărea de Jos” din Galați poziționată în partea stângă și o bară orizontală cu meniurile principale. Spații largi separă butoanele din meniu. Când mouse-ul este deasupra unui buton, apare un meniu în cascadă cu meniurile de nivelul doi.

Prima pagină este formată din mai multe coloane și secțiuni. Primul element este diaporama cu imagini. Fiecare imagine este atent realizată. Pozele originale au fost procesate anume să se potrivească cu paleta de culori utilizată și în layout-ul site-ului. Au fost corectate deformările de perspectivă și culorile, eliminată gălăgia din poze, ajustată compoziția, etc.

Sub diaporamă, se află un filtru checkbox organizat pe coloane. Această listă are scopul de a oferi utilizatorilor o privire per ansamblu asupra facultăților și programelor de licență și master.

Capitolul 4. Denumirea capitolului

Concluzii

Vor cuprinde într-o formă cât mai concisă principale rezultatele obținute în tema tratată, subliniindu-se contribuția adusă prin propriile cercetări. Se vor scoate în evidență elementele de noutate ale proiectului/lucrării. Dacă rezultatele obținute pot fi aplicate în activitatea de cercetare, producție sau în alte domenii de activitate, economică sau socială, se vor face recomandările corespunzătoare.

Un bilanț al aspectelor pozitive și negative din activitatea de dezvoltare a proiectului de diplomă sau a lucrării de disertație va încheia partea scrisă a lucrării.

Sistemantiplagiat.ro

Bibliografie

Jirousek Charlotte. The language of design – Introduction to the Elements of Design. http://char.txa.cornell.edu/language/element/element.htm

Gestalt Psychology.

https://en.wikipedia.org/wiki/Gestalt_psychology

Psychologie de la forme. https://fr.wikipedia.org/wiki/Psychologie_de_la_forme

Jirousek Charlotte. The language of design – Principles of Design – Two Dimensional Illusion of Three Dimensional Form.

http://char.txa.cornell.edu/language/element/form/formillu.htm

Color theory.

https://en.wikipedia.org/wiki/Color_theory

Metz Daniel. Espaces colorimétriques – Le modèle CMJN ou quadrichromie.

http://www.profil-couleur.com/ec/107-modele-cmj.php

Typographic alignment.

https://en.wikipedia.org/wiki/Typographic_alignment

Font.

https://en.wikipedia.org/wiki/Font

HyperText Markup Language.

https://en.wikipedia.org/wiki/HTML

Cascading Style Sheets.

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Refsnes Data. CSS Box model.

https://www.w3schools.com/css/css_boxmodel.asp

Refsnes Data. CSS Display Property.

https://www.w3schools.com/css/css_display_visibility.asp

Refsnes Data. CSS Float property.

https://www.w3schools.com/css/css_float.asp

Anexa 1

Anexele (dacă există) – nu se numerotează ca și capitol, se numerotează crescător (Anexa 1, Anexa 2, etc).

Anexele vor conține elemente precum:

porțiuni de cod;

tabele de date;

tabele de rezultate de ieșire;

alte elemente specifice la care s-a făcut referire în cadrul proiectului/lucrării.