FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT IOAN SLAVICI TIMIȘOARA [308610]

Licență

FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT IOAN SLAVICI TIMIȘOARA [308610]

Byadmin ianuarie 1, 2024

FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT “IOAN SLAVICI” TIMIȘOARA

UNIVERSITATEA “IOAN SLAVICI” [anonimizat]./conf./ș.l.. dr . ………

ABSOLVENT: [anonimizat]

2018

FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT “IOAN SLAVICI” TIMIȘOARA

UNIVERSITATEA “IOAN SLAVICI” [anonimizat]./conf./ș.l. dr . ………

ABSOLVENT: [anonimizat]

2018

UNIVERSITATEA DIN ORADEA

FACULTATEA de Inginerie Electrică și Tehnologia Informației

DEPARTAMENTUL Calculatoare și tehnologia informației

TEMA _________________

Proiectul de Finalizare a studiilor a student: [anonimizat]________________________

1). Tema proiectului de finalizare a studiilor:______________________________________________________________________________________________________________________________________________

2). Termenul pentru predarea proiectului de diplomă

__________________________________

3). Elemente inițiale pentru elaborarea proiectului de finalizare a studiilor ______________________________________________________________________________________________________________________________________________________

4). Conținutul proiectului de finalizare a studiilor :____________________________________________________________________________________________________________________________________________________

5). Material grafic:

__________________________________________________________________________

6). Locul de documentare pentru elaborarea proiectului de diplomă:

___________________________________________________________________________

7). Data emiterii temei____________________________________________________

Coordonatori științifici

REFERAT

PRIVIND PROIECTUL DE DIPLOMĂ

A

ABSOLVENT: [anonimizat] / ABSOLVENT: [anonimizat] : ……………………………………….

DOMENIUL Calculatoare și tehnologia informației

SPECIALIZAREA Tehnologia informației

PROMOȚIA 2019

Titlul proiectului …………………………………………………………………..

…..…………………………………………………………………………………………………

Structura proiectului ………………………………………………………………..

…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

…………………………………………………………………………………………………………………………………………………………………………………………………………………

Aprecieri asupra conținutului proiectului de DIPLOMĂ (finalizare a studiilor), mod de abordare, complexitate, actualitate, deficiențe

………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

Aprecieri asupra proiectului (se va menționa: numărul titlurilor bibliografice consultate, frecvența notelor de subsol, calitatea și diversitatea surselor consultate; modul în care absolventul a prelucrat informațiile din surse teoretice)

……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

(se va menționa: opțional locul de documentare și modul în care absolventul a realizat cercetarea menționându-se contribuția autorului)

……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

Concluzii (coordonatorul proiectului trebuie să aprecieze valoarea proiectului întocmit, relevanța studiului întreprins, competențele absolventului, rigurozitatea pe parcursul elaborării proiectului, consecvența și seriozitatea de care a dat dovadă absolventul pe parcurs)

……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

Redactarea proiectului respectă ………………………………………………….cerințele academice de redactare (părți, capitole, subcapitole, note de subsol și bibliografie).

Consider că proiectul îndeplinește/ nu îndeplinește condițiile pentru susținere în sesiunea de Examen de LICENȚĂ (finalizare a studiilor) din IULIE 2019 și propun acordarea notei ………………

Oradea,

Data Coordonator științific

Cuprins

Capitolul 1. Internetul

În fiecare zi apar noi sisteme de operare. Browser-ele sunt din ce în ce mai multe. În fiecare zi interacționăm cu dispozitive mai mari sau mai mici, dispozitive cu control prin touch screen, dispozitive cu trackpad-uri și tastaturi direct pe ecran (on-screen keyboards), dispozitive cu capacități incredibil de puternice de a naviga pe internet.

În timp ce apar noutățile, dispozitivele și browser-ele vechi rămân în uz. Deși tehnologia evoluează într-un ritm incredibil de accelerat, acest lucru nu înseamnă că toată lumea trebuie să țină pasul cu ea. Se poate ca un nou dispozitiv nou să fie lansat, numai pentru a fi retras câteva luni mai târziu. Ne putem baza pe foarte puține lucruri. Ceea ce astăzi este valabil, mâine poate nu va mai fi. Iar în urma acestor acțiuni rezultă haosul, care stimulează de asemenea inovația și creativitatea. Pentru că noi factori de formare ajung pe piață și browser-ele continuă să-și depășească limitele, numărul de aplicații și de situații pe care le putem crea cresc exponențial.

Internetul este omniprezent. Este universal. Diferit de orice alt mediu de dinaintea lui, internetul se poate adapta la orice ecran și în orice context. Este inerent flexibil și maleabil.

1.1. Dezvoltarea utilizării dispozitivelor mobile

Chiar dacă în ziua de azi Internetul a devenit parte integrantă a vieții noatre, în ciuda statisticilor impresionante de mai jos, numeroase companii nu au un site web optimizat pentru telefoanele mobile. Statisticile următoare[1] ar trebui să determine pe oricine să înțeleagă importanța adaptării site-urilor web pentru dispozitivele mobile:

Sunt peste 3500 milioane de utilizatori de internet pe mobil unici.

Utilizatorii petrec în medie 69% din timpul lor pe internet de pe smartphone.

Dispozitivele mobile vor ajunge la 80% din utilizarea globală a internetului.

61% dintre respondenți au o părere mai bună despre branduri atunci când acestea oferă o experiență bună de utilizare pe telefonul mobil.

25.85% dintre e-mail-uri sunt deschise pe telefonul mobil și 10.16% sunt deschise pe tabletă.

Peste 50% din căutările pe Google sunt de pe smartphone.

57% din utilizatorii internetului spun că nu recomandă o afacere cu un site fără un design de mobil.

Apple continuă să câștige teren ca producător de echipamente originale de top în materie de smartphone-uri în SUA, însă Samsung a cunoscut cea mai explozivă creștere în această piață din ultimii ani cu o evoluție, de la an la an, de mai mult de 100% și o creștere la 2 ani de 400%.

Disponibilitatea îmbunătățită a accesului la internetul de mare viteză a crescut exponențial experiența de consum a utilizatorilor obișnuiți, contribuind la o creștere rapidă și în consumul de media pe telefonul mobil. Accesul la Wi-Fi al smartphone-urilor și al tabletelor nu numai că a eliberat bandwidth-ul rețelelor, dar a contribuit și la o experiență mai bună pentru utilizatori la locație (ex. in-home). În timp ce utilizarea Wi-Fi a devenit din ce în ce mai răspândită, vitezele rețelelor au fost de asemenea îmbunătățite prin 4G și tehnologia LTE, deoarece un număr mare de telefoane de pe piață sunt dotate pentru aceste viteze. Rezultatul net pentru utilizatorii de internet pe mobil este o experiență mai rapidă, fără probleme, ce a rezultat în media de 1 din fiecare 3 minute de consum media digital să fie prin canalele mobile.

Smartphone-urile au depășit 125 milioane de utilizatori în SUA și peste 50 milioane de oameni dețin tablete. Am trecut acum în Noua Lume Digitală – o nouă paradigmă pentru fragmentarea media digitală în care consumatorii sunt întotdeauna conectați.

La nivel mondial, în anul 2018 a avut loc o creștere exponențială în consumul media mobil, după cum utilizarea smartphone-urilor a crescut până la mai bine de 3500 milioane de utilizatori, în timp ce tabletele au devenit dispozitivele cu cea mai rapidă creștere în vânzări din istorie atingând 50 milioane de utilizatori. Tabletele au atins deja, în 3 ani de zile, un nivel de utilizare pe care smartphone-urile l-au atins în aproape un deceniu de la prima lor apariție pe piață. Smartphone-urile și tabletele restructurează complet felul în care utilizatorii se conectează și experimentează mediul online, aceștia fragmentându-se și mai departe în funcție de platformele care le-au atras atenția.

În această Nouă Lume Digitală, fundamentele economice ale media digitală sunt în joc, dacă trecerea de la o platformă la alta înseamnă mai puțini bani. În același timp, o creștere totală în utilizarea media înseamnă mai multe oportunități de monetizare pentru companiile media și o mai mare abilitate a vânzătorilor de a realiza campanii pe toate platformele. Afacerile digitale mai au încă o șansă să navigheze eficient această tranziție și să-și maximizeze oportunitățile, în timp ce își diminuează riscurile. Acest lucru va necesita o cunoaștere temeinică a peisajului multiplatformelor și o bună înțelegere a felului în care se modifică stilurile de consum ale utilizatorilor. Cei care nu vor reuși să creeze o strategie de multiplatforme eficientă vor fi cu siguranță lăsați în urmă.

În ultimii ani a fost imposibil să ignorăm creștera dispozitivelor mobile în societatea noastră. iPhone-ul a schimbat felul în care vedem telefoanele mobile, iar mai târziu iPad-ul a introdus un nou tip de dispozitiv mobil, care a luat piața cu asalt. Aceste dispozitive au ocupat o mare parte a pieței de calcul și au devenit jucători principali în ceea ce privește internetul.

Analiza comportamentului în media mobilă de top [1] printre utilizatorii de smartphone-uri și tablete indică similitudini și diferențe interesante pentru ambele grupuri. Utilizatorii ambelor platforme demonstrează o înclinație spre implicare în activități ce se pretează la a fi realizate din mers, cum ar fi accesarea buletinelor meteo, a hărților și a update-urilor de știri.

Activitățile principale printre utilizatorii de smartphone sunt:

Trimiterea de mesaje text către alte telefoane (90.5%)

Realizarea de fotografii (83.4%)

Folosirea e-mail-ului (77.8%)

Accesarea buletinelor meteo (67.1%)

Accesarea rețelelor de socializare (65.3%)

Căutări pe internet (58.7%)

Jocuri (52.9%)

Accesarea hărților (51.2%)

Căutări de știri (49.2%)

Ascultarea de muzică pe mobil (48.0%)

Activitățile principale printre utilizatorii de tabletă sunt:

Căutări pe internet (73.9%)

Folosirea e-mail-ului (73.6%)

Accesarea rețelelor de socializare (67.5%)

Jocuri (66.3%)

Accesarea buletinelor meteo (64.6%)

Căutări de știri (58.8%)

Accesarea website-urilor de distribuire a fotografiilor/video-urilor (51.5%)

Citirea de cărți (51.2%)

Vizualizare video (50.9%)

Accesarea de magazine online (49.8%)

Sursă: ComScore Global Digital Future in Focus 2018 [1]

Fig 1. Compararea tipuri de activități efectuate de utilizatori pe PC și pe dispozitive mobile
Sursă: ComScore Global Digital Future in Focus 2018 [1]

Dispozitivele mobile acoperă o mare parte a utilizării internetului și aceasta este în continuă creștere. Potrivit GSMA[2], la sfârșitul anului 2017 au fost 465 milioane de abonați unici în Europa, ehivalentul a 85% din populație.

Definiția unui smartphone, tabletă sau alt dispozitiv conectabil va continua să se schimbe în următorii ani, date fiind numerosele dispozitive noi ce include dimensiuni și specificații tehnice unice.

Dimensiunea ecranului, funcționalitatea, portabilitatea, stilul tastaturii, sistemul de conținut, puterea de procesare, viteza de conexiune și multe alte variabile au o importanță diferită pentru consumatori, ceea ce înseamnă că producătorii de echipamente originale vor continua să aducă inovați și să experimenteze cu ofertele lor pentru a găsi soluții ideale pentru consumatori.

1.2. Evoluția pieței de Internet în România

În “Raportul de date statistice privind serviciile de comunicatii electronice, semestrul I 2018” [2] publicat de către Autoritatea Națională pentru Administrare și Reglementare în Comunicații, se remarcă faptul că rata de penetrare a conexiunilor active de acces la Internet la puncte mobile la 100 locuitori a crescut în anul 2018 de la 79.1% cât era în anul 2016 la 89.9%. Acest lucru dovedește că și piața din România are o dinamică de creștere foarte mare și din ce în ce mai mulți oameni folosesc Internetul pe mobil în viața de zi cu zi pentru a putea afla informații diferite.

Fig 2. . Evoluția ratelor de penetrare a conexiunilor active de acces la internet mobil, în funcție de modul de furnizare, în perioada 30.06.2016 – 30.06.2018

Sursă: Raport de date statistice privind serviciile de comunicatii electronice, semestrul I 2018 [3]

În periaoda 2016–2018 autoritatea Națională pentru Administrare și Reglementare în Comunicații a făcut un studiu în ceea ce privește dinamica traficului de acces la internet [3].

Fig 3. Tipurile de utilizatori de Internet din România conform raportului publicat de Autoritatea Națională pentru Administrare și Reglementare în Comunicații [3]

1.3. Adaptarea site-urilor web

O dată cu schimbarea comportamentului zilnic al utilizatorului de Internet prin folosirea într-un grad tot mai mare a dispozitivelor mobile, trebuie să se schimbe și strategia privind site-urile web. Acestea trebuie să se adapteze noii realități prin :

Afișarea informației dependent de dimensiunea ecranului și tipul de dispozitiv

Să afișeze imaginile și alte materiale media diferit în funcție de dispozitiv

Să reducă dimensiunea infomației trimise către browserul dispozitivelor mobile astfel incât încărcarea să fie rapidă

Evoluția tehnologiei web din ultimii ani oferă mai multe soluții pentru crearea de site-uri web adaptate Internetului mobil. Înainte de a discuta aspectele pur tehnice, trebuie să înțelegem modificarea viziunii privind crearea paginilor web asfel incât acestea să migreze către noua realitate, nu doar să ofere o soluție de moment.

Având în vedere ca dinamica evoluției dispozitivelor mobile este foarte mare, trebuia găsită o soluție care în primul rând să poată evolua o dată cu piața. Astfel a apărut o nouă tehnică de realizare a site-urilor web prin care site-ul părăsește dimensiunea fixă și devine fluid sau mai bine zis răspunde în timp real parametrilor dispozitivului pe care se afișează. Această metodă, denumită RESPONSIVE DESIGN permite site-ului să devină compatibil și cu dispozitivele care se vor crea în viitor.

Designul receptiv înseamnă mai mult decât un layout; înseamnă să creezi pentru internet, adică, în mare parte, pentru cei care folosesc browser-ele. Și acest lucru este cam tot ce știm despre cei care ne vizitează website-urile: folosesc un browser. Despre restul nu știm nimic.

Până nu în urmă cu mult timp, la crearea design-ului și structurii unui site web ne bazam pe presupuneri generale legate de dimensiunea ecranului și de tipul de intrare al celui care va accesa site-ul. Odată cu apariția dispozitivelor cu ecrane de diferite dimensiuni și cu moduri alternative de interacțiune, aceste presupuneri nu mai sunt de încredere. Trebuie să creștem paramterii pe care îi folosim atunci când începem să creăm un website.

Oamenii spun că internetul s-a schimbat. Dar chiar așa să fie? Să aruncăm o privire asupra tuturor lucrurilor care s-au schimbat de fapt.

1.3.1. comprimarea ecranelor

De cele mai multe ori micșorarea este mai grea decât creșterea. Micșorarea designului unui website nu rezultă tot timpul într-o experiență plăcută pe un ecran mic.

Pentru a crea un website care se adaptează, care să funcționeze pe toate tipurile de ecrane, designul acestuia trebuie să înceapă cu ecranul mic. Te obligă să te concentrezi asupra ceea ce este cu adevărat important: dacă nu încape într-un pătrat mic, probabil că nu este extrem de important. Te va obliga să te gândești mai bine la ierarhizare, la ordinea corectă a componentelor în pagină.

Ideea de bază este ca designul să folosească relația dintre diferitele mărimi ale fonturilor. Aproape toată lumea, indiferent de dispozitivul pe care îl are, va fi capabilă să vadă scrisul. Când scrisul este gata, se poate trece la designul pentru ecranele mari.

Și abia după aceea, când sunt gata diferitele layout-uri, site-ul poate începe să fie extins și îmbogățit cu alte elemente de design: culoare, gradient, margine etc. .

Am prezentat toate acestea ca o metodă de lucru foarte strictă; în viața reală, bineînțeles, lucrurile nu sunt atât de rigide. Nu mă gândesc “numai la activare” sau “numai la ecrane mici”. Când spun să începi cu scrisul, nu spun că nu ai voie să te gândești și la desen în același timp. De fapt, încerc să găsesc acele aspecte pe care toate aceste dispozitive diferite le au în comun, cu toate dimensiunile lor de ecrane și cu toate specificațiile lor. Doar că este logic ca mai întâi să creezi cu atenție acest nucleu, ce poate fi distribuit prin toate dispozitivele.

1.4. Soluții de adaptare a site-urilor web la creșterea internetului mobil

Toate elementele menționate precedent au determinat schimbarea modului cum sunt construite site-urile web și mai ales includerea în strategia de dezvoltare a unui site web a elementelor specifice Internetului mobil.

Există mai multe soluții care pot fi adoptate pentru a adapta website-ul la traficul în creștere de internet pe mobil:

Crearea de versiuni dedicate pentru MOBIL și TABLETĂ

Designul adaptabil (Adaptive Web Design sau AWD)

Designul fluid (Responsive Web Design sau RWD)

Aceste metode se pot aplica în funcție și de tipul site-ului. Pentru un site care este deja creat, probabil crearea unei versiuni de mobil si tabletă este metoda cea mai rapidă de rezolvare a expunerii pe dispozitive mobile, pe când un design Adaptiv sau Fluid implică refacerea site-ului într-o măsură destul de mare.

1.4.1. Versiuni dedicate pentru mobil și tabletă

În trecut cea mai întâlnită abordare pentru lucrul cu diversitatea dispozitivelor a fost crearea de website-uri separate pentru fiecare tip de dispozitive. Adesea, acest lucru înseamnă un website pentru mobil și un altul pentru desktop.

Asta înseamnă că o companie avea uneori chiar și patru website-uri diferite: un website pentru desktop, un website pentru tabletă, un website pentru dispozitive mobile cu ecran tactil și un website mai simplu pentru dispozitive mobile fără ecran tactil

Această abordare își are cu siguranță meritele. Crearea unui website separat pentru fiecare tip de dispozitiv face mai ușoară personalizarea experienței – atât în ceea ce privește conținutul, cât și comportamentul. Dacă acest lucru se pretează însă depinde de proiect, de obiectivele afacerii, de utilizatori, de capacitățile echipei, de buget și de toate celelalte componente ale afacerii care trebuie luate în considerare.

Din păcate, acest fapt nu dă randament: înseamnă patru website-uri care trebuie dezvoltate, testate și întreținute. Unii sugerează faptul că un conținut personalizat ar trebui scris pentru fiecare website, ceea ce ar însemna și mai mult timp și efort.

1.4.2. Design Fluid (Responsive Web Design)

Designul Fluid (Resposive Web Design sau RWD) implică un singur site web creat să se adapteze în timp real la toate dimensiunile unui ecran indiferent de dispozitivul pe care este afișat. De exemplu, daca site-ul este accesat de pe un telefon, site-ul se schimbă în timp real în funcție dacă accesăm site-ul în modul Portrait sau Landscape a telefonului. Designul Fluid este o abordare de web design care pune în prim plan utilizatorul.

Schimbările în dispozitive nu sunt noi desigur. După cum monitoarele și ecranele au continuat să crească, provocarea era să se decidă pentru cât din întregul ecran ar trebui să se facă designul, pentru că și dispozitivele au continuat să crească în rezoluția în pixeli. De asemenea, numărul mai mare de pixeli nu era restricționat la ecranele mari; evoluția dispozitivelor mobile a însemnat că ecranele se micșorau.

Avem acum dispozitive mobile în modurile portrait și landscape, tablete în portrait și landscape, laptop-uri, desktop-uri, monitoare și chiar televizoare cu care să ne confruntăm. Era nevoie de o abordare care să permită site-uriloe web să răspundă la orice dispozitiv, iar acest fapt era doar vârful icebergului. Și așa a apărut Designul Fluid (Responsive Web Design).

Fig 4. Design fluid pe mai multe device-uri

Designul Fluid (Responsive Web Design) înseamnă o serie de tehnici și tehnologii, combinate pentru a reda un site web pe un spectru larg de dispozitive într-un mod cât mai practic posibil. Și nu este vorba numai de profesioniștii web care au constatat această nevoie; ci și companiile mici și mari caută metode prin care să-și facă funcțional conținutul web, indiferent de felul în care este folosit de utilizator.

Avantaje:

Un singur site web care se va adapta în timp real la rezoluțiile dispozitivelor

Se implementează mai rapid în comparație cu site-urile create cu Design Adaptiv (AWD)

Site-ul se va adapta automat și la noi tipuri de dispozitive sau noi rezoluții

Din punct de vedere al motoarelor de căutare există un singur URL, deci afișarea în rezultatele motoarelor de căutare nu este afectată

Este metoda recomandată de Google privind realizarea unui site web [4]

Dezavantaje:

Pentru site-uri existente implică crearea site-ului din nou

Dezvoltarea site-ului se bazează pe Media Queries, o metodă care nu funcționeză pe browsere mai vechi, necesitând încărcarea de librării Javascript pentru compatibilitate

Folosește mai multe resurse (CSS și Javascript) față de un site creat cu Design Adaptiv

Capitolul 2. Designul Fluid (Responsive Web Design)

2.1. Scurt istoric al Designului Fluid (Responsive Web Design)

Designul fluid nu a existat dintodeauna. A fost conceupt la începutul anului 2010 și a apărut din interacționarea omului cu dispozitivele mobile inteligente. În esență, designul fluid este o metodă de design care speră să obțină o experiență optimă pentru utilizator pe toate device-urile.

Ethan Marcotte a publicat un articol pe site-ul A List Apart, în mai 2010, pe care l-a denumit isteț “Responsive Web Design.” [5]. În acesta, s-a axat pe fluid grids, pe imagini flexibile și pe media queries ca pilonii tehnici pentru RWD. De asemenea, Marcotte a definit nevoia unei abordări a conținutului care să se potrivească acestor fundamente.

În articolul publicat în 2010 [5], Marcotte cerea designerilor să profite de caractersticile unice ale internetului:

Acesta este drumul nostru înainte. Decât să personalizăm designuri fără legătură pentru fiecare dintre un număr tot mai mare de dispozitive web, le putem trata ca pe fațete ale aceleiași experiențe. Putem face design pentru o experiență vizuală optimă, dar să includem tehnologii de bază în designurile noastre, care să le facă nu numai flexibile, ci și adaptabile la mediul care le redă.

În general, articolul a fost lăudat, și asta pe bună dreptate. Marcotte a demonstrat că este posibil să redăm o experiență perfectă pe o varietate de dispozitive, nu prin ignorarea diferențelor dintre acestea, ci prin eliberarea de acestea și prin adoptarea fluidității internetului.

Să începem prin a clarifica un lucru: un website receptiv nu este egal cu un website mobil. Acest fapt cauzează numeroase confuzii și dezbateri aprinse. Desigur, mult din farmecul unei abordări receptive se află în faptul că poate fi folosit pentru o strategie mobilă, dar nu este nici măcar o soluție de moment.

Aceast concept indiferent la dispozitive este incredibil de important. Nu putem ști ce tipuri de dispozitive vor folosi oamenii pentru a intra pe internet. Niciun alt mediu nu este atât de accesibil pe o gamă atât de diversificată de dispozitive sau de către atât de mulți oameni. Ca designeri, trebuie să valorificăm acest lucru.

Suntem departe de a fi descoperit totul, dar, cu ajutorul muncii și al experimentelor, aboradarea receptivă a fost mult îmbunătățită de la prima sa versiune. Aceleași trei elemente (media queries, fluid grids și imaginile flexibile) rămân ca centru, dar sunt numai vârful icebergului.

După cum s-a deovedit, o abordare de succes privind RWD se construiește pe aceleași principii definite pentru îmbunătățirea progresivă.

De asemenea, înseamnă că până și cele mai mici modificări în felul în care este livrată aplicația poate aduce schimbări rapide pentru utlizatori și, cel mai adesea, acestea ajută și la verificarea pe viitor a muncii tale. Odată cu evoluția rapidă a dispozitivelor mobile, scara noilor dispozitive poate însemna că aplicația ta devine tot mai inutilă. Deși utilizatorii au învățat că prin două atingeri ale ecranului pot da zoom in, RWD poate evita toate acestea și poate îmbunătăți experiența utilizatorului. O simplă modificare creează o mai bună experiență de bază pentru cei cu ecrane mai mici și cu rezoluții variabile ale ecranului. Simpla adăugare a unui element viewport meta îți poate adapta website-ul – dacă ai atributele corecte – la mobil, la tabletă și la orice dimensiune de display.

2.2. Pilonii Designului Fluid (RWD)

Pilonii designului receptiv sunt:

Grid-uri fluide – fluid girds

Imaginile flexibile

Media queries

Conținutul dinamic

2.2.1. Grid-uri fluide (FLUID GRIDS)

Gridurile fluide, primul pilon al RWD, sunt succesorii naturali ai layout-ului fluid, care era subiecte aprinse în 2006, când discuția de trecere de la 800 la 1024 era la modă. Scrierea fluidă joacă un rol important aici, de asemenea, deoarece conținutul trebuie să fie la fel de receptiv ca layoutul.

Aranjarea designului unei pagini web în grid-uri și coloane a fost visul designerilor de la începuturile internetului. Implementările nu au reușit încă, dar lucrurile se pot schimba oricând cu avansul făcut în standarde de către W3C. Deoarece nu sunt grid-uri sau coloane specifice în HTML – nici în HTML5 – trebuie să ne folosim de instrumentele pe care le avem la îndemână.

Viteza de dezvoltare este numai unul dintre beneficiile aduse de folosirea cadrelor; HTML și CSS pe care ne bazăm sunt funcționale între browsere și compatibile, extensibile și accesibile pentru un număr mare de dezvoltatori. Când soluția W3C este suportată de browsere, se va aduce mai multă putere și flexibilitate.

Știm că în timp ce monitoarele calculatoarelor și laptopurilor devin mai largi – cu mai mulți pixeli – dispozitivele mobile popularizează dimensiunile mai mici. Mai mult ca oricând, avem nevoie de o abordare de design care să răspundă la paleta tot mai largă de dimensiuni ale ecranelor. Fluid grids din web designul receptiv sunt parte din această abordare. Pe internet (și în afara lui), un grid este un mod de a coordona spațiul dintr-un layout.

Fig 5. Grid-uri fluide pe diferite tipuri de dispozitive. Numărul de coloane se modifică dependent de dimensiunea ecranului dispozitivului.

Grid-urile simple – formate din una, două sau trei coloane – au de obicei conținut care încape într-un singur rând pe orizontală. Grid-urile mai complexe (având peste 9, 12 sau mai multe coloane) încep de asemenea să aducă mai multe rânduri pentru controlul conținutului. Există mai multe convenții privind grid-urile fluide. Cea mai folosită structură este de 12 coloane a câte 90 pixeli lățime (1080px) sau a câte 80 pixeli lățime (960px). În grid-urile complexe, de exemplu, un rând se poate întinde pe 12 coloane, poate conține 3 întinderi normale pe coloanele 1, 4 și 8 și patru întinderi pe coloanele 1, 3, 5, 8 sau altă combinație.

Și în timp ce grid-urile de internet le urmează pe cele din tipografie cu lățimi fixe, au de asemenea luxul de a deveni fluide. Fluid grids au coloane și canale – spațiul dintre coloane – unde lățimile sunt legate de conținutul lor. Conținuturile în sine pot fi fixe ca lățime sau relative, dar coloanele trebuie să fie o parte din aceste conținuturi pentru a deveni fluide. Ce fac cel mai bine fluid grids în RWD este să furnizeze o metodă prin care să nu ne mai concentrăm asupra grid-ului, în principiu asupra felului în care conținutul este așezat în pagină. În loc să așezi layout-ul website-ului în lățimi fixe ca pixeli, fluid grids folosesc dimensiunile lor proporționale pentru a se adapta la dispozitivul utilizatorului. Astfel, suntem capabili să ne concentrăm asupra conținutului și asupra experienței utilizatorului, în loc să ne concentrăm pe structura aplicației noastre.

2.2.2. MEDIA QUERIES

Media Queries au onoarea de a fi cel mai important element din amestecul pentru HTML5 și de asemenea cele mai bune metode de suport între browsere. S-ar putea să nu funcționeze nativ în versiuni mai vechi ale Internet Explorer – de fapt, în orice înainte de Internet Explorer 9 – dar metodele de îmbunătățire ale vechilor browsere cu ajutorul unor tehnici bazate pe Javascript sunt solide și acceptate. Media Queries funcționează pe dispozitive și pe browsere pe care se regăsesc aplicațiile tale și permit acestora să răspundă la aceste dispozitive.

Funcțiile dispozitivelor sunt folosite de regulile de Media Queries, care pot determian încărcarea unor anumite reguli de CSS dependent de rezoluțiile dispozitivului. Media Queries evaluează capacitățile unui dispozitiv; de exemplu, este capabil browser-ul să întrunească aceste condiții? Dacă da, atunci încarcă CSS-ul sau execută aceste reguli:

Pentru că sintaxa media queries este bazată pe tipurile de media cunoscute încă de la CSS2.0 (1998, cu o revizuire majoră în 2008), folosirea lor este familiară majorității programatorilor web.

Primul exemplu de mai sus este o regulă HTML care determină încărcarea unei librării cu reguli CSS de care browserul să țină cont la operația de tipărie. Cel de-al doilea este un media query. Dacă cel de-al doilea link nu ar fi avut exprimată o valoare a atributului media, mai degrabă decât o listă de tipuri separate prin virgule, cele două elemente ar fi identice.

2.3. Avantajele RWD pentru motoare de cautare

Industria web a crescut foarte mult în ultimii ani, la fel cum a crescut și industria telefoanelor mobile. În ultimul timp majoritatea traficului de pe internet e accesat de pe dispozitivele mobile. Aceste noutăți nu i-a luat prin surprindere pe web designeri, dar cu toate astea foarte multe companii nu au trecut la standardele de baza, adica responsive web design. În jur de 60% din site-uri nu beneficiează de responsive web design.

Google este creat pentru utilizatorii care doresc să caute pe internet. Având în vedere că acești utilizatori au început să caute mai mult de pe dispozitivele mobile, Google a început să favorizeze site-urile care satisfac nevoile utilizatorilor, adică site-urile cu un design responsive. Pe scurt, Google favorizează website-urile optimizate pentru dispozitivele mobile.

2.3.1. o experiență pozitivă a utilizatorului

Site-urile responsive oferă o experiență mult mai bună utilizatorilor, deoarece se adaptează dimensiunii ecranelor și face trecerea mult mai bună între desktop, tabletă și telefon.

Dacă un utilizator ajunge pe un website mobil și este frustrat sau nu vede ceea ce căuta, șansele sunt de 61% ca acesta să iasă imediat și să intre pe alt website (cel mai probabil unul competitor). De asemenea, este știu faptul că, dacă experiența este una pozitivă cu website-ul mobil, șansele sunt de 67% că utilizatorul va cumpăra un produs sau va folosi un serviciu disponibile pe acest site.

Dacă un site nu este responsive sau se încarcă mult mai greu, sunt șanse destul de mari ca utilizatorul să nu se mai întoarcă la el.

2.3.2. Recomandat de Google

Încă din 2015, Google a introdus “mobile-friendliness as a ranking signal” în algoritmul de căutare. Această schimbare a venit după știrea că 60% din căutările pe Google sunt acum de pe dispozivite mobile. Numărul căutărilor de pe mobil se așteaptă să mai crească în următorii ani.

Google preferă RWD deoarece conținutul aflat pe un singur website și pe un singur URL poate fi mai ușor distribuit, este mai ușor de interacționat cu el și se poate face referire prin link la el decât la conținutul care se află separat pe un website pentru mobil.

Să luăm, de exemplu, un utilizator de mobil care distribuie conținut de pe un website mobil către un prieten de pe Facebook, care mai apoi accesează conținutul de pe desktop, ceea ce rezultă în vizualizarea unui website simplificat de mobil pe desktop. Acest lucru creează o experiență mai puțin decât optimă și, datorită importanței crescute pe care o acordă Google experienței utilizatorului ca factor de ranking, este esențial să avem și acest aspect în vedere în privința SEO.

2.3.3. Timp de încărcare redus

Potrivit revistei tehnologice the Wire [7], utilizatorii internetului se așteaptă ca website-ul pe care îl vizitează să se încarce în câteva secunde, altfel acel site riscă să nu mai fie accesat. Acest lucru nu este de obicei posibil atunci când încărcăm un website pentru desktop pe un dispozitiv mobil.

2.3.4. Preferat pentru SEO

În Ianuarie 2012, pe site-ul oficial Webmaster Central Blog de la Google s-a publicat un articol [6] în care se evidenția clar că Google preferă web designul fluid (RWD) în detrimentul versiunilor dedicate pentru dispozitive mobile.

Având un singur URL este mult mai ușor pentru roboții de parsare aparținând Google să verifice website-ul, algoritmul extern de linkuri pe Google, și reduce șansele de erori SEO în pagină. Pentru toate aceste motive, website-urile construite cu RWD funcționează mai bine în general și sunt mai ușor de întreținut decât cele separate cu versiune dedicate pentru mobil.

Construirea unui site web separat pentru mobil are beneficiile sale și, în anumite cazuri, crearea unei versiuni singulare pentru mobil funcționează de asemenea. Dacă un site web include mult conținut (un site web de știri, de exemplu), o versiune fluidă a acestuia poate fi versiunea de “scrolling”, pentru care utilizatorii își vor pune degetul arătător la treabă pentru a naviga conținutul. Acesta este momentul în care un site web dedicat pentru mobil devine folositor, unul care a fost rearanjat pentru navigarea pe mobil.

Din punctul de vedere al Optimizării pentru Motoare de Căutare (SEO), una dintre cele mai mari provocări în a avea un site web separat pentru mobil este necesitatea de a construi autoritate site-ului web încă o dată, iar majoritatea site-urilor web separate de mobil nu au o poziționare bună în motoarele de căutare, pentru că sunt blocate de versiunile lor pentru desktop. De cealaltă parte, redesignul site-ului web ca și fluid ajută la menținerea backlink-urile și permite realizarea campaniile SEO pe un singur site web. Acest lucru înseamnă că toate link-urile vor fi direcționate către un singur domeniu (spre deosebire de un site web pentru mobil și unul pentru desktop), oferind site-ului web fluid un imbold în paginile de rezultate ale motoarelor de căutare (SERP).

Mai mult decât atât, cu un site web fluid se poate construi social shares dintr-un singur URL, iar atunci când site-ul web este distribuit pe diferite rețele de socializare, indiferent de link-ul vizualzat – fie că este vizualizat și distribuit de pe mobil, tabletă sau pe desktop – întregul conținut va fi clar și ușor de navigat.

2.3.5. Un singur site web, mai multe dispozitive

Unul dintre cele mai atrăgătoare aspecte ale Designului Fluid (RWD) constă în faptul că site-urile web astfel construite oferă o experiență plăcută pentru utilizatori pe numeroase dispozitive și dimensiuni de ecrane. Aceasta este o caracteristică importantă, deoarece este imposibil să se anticipeze toate dispozitivele și dimensiunile de ecrane pe care le vor folosi utilizatorii pentru a accesa site-ul web. Un site web care funcționează bine indiferent de aceste variabile va oferi o experiență mai bună și constantă utilizatorilor decât unul separat pentru mobil și tabletă, care a fost creat pentru un anumit dispozitiv și pentru o anumită dimensiune a ecranului.

Să luăm următorul exemplu. Cineva caută un produs pe SmartPhone în timpul pauzei de prânz de la birou. Găsește site-ul web care are produsul căutat și hotărăște să continue cercetările asupra produsului atunci când ajunge acasă. Doar că, atunci când ajunge acasă, va folosi un calculator de tip desktop în loc de SmartPhone.

Dacă website-ul din acest exemplu este creat cu RWD, acea persoană va avea o experiență de utilizator coerentă în trecerea de la versiunea adaptată de mobil la cea de desktop, deoarece va vedea aceleași elemente și design pe desktop pe care l-a văzut pe mobil. Pe de altă parte, dacă site-ul web este dedicat pentru mobil, acea persoană va deveni frustrată din cauza faptului că va trebui să caute versiunea de desktop a website-ului și mai apoi produsul încă o dată.

2.3.6. Creșterea expunerii pe rețelele de socializare

Design-ul responsive e făcut pentru distribuirea pe rețelele de scoializare pentru cea mai dominantă categorie demografică – utilizatorii de smartphone. Din aceste distribuiri rezultă o audiență mult mai mare.

O audiență mai mare poate să însemne mai mult trafic și mai multe căutări al brandului respectiv, ceea ce înseamnă foarte mult pentru algoritmul Google de căutare.Capitolul 3. Analiză a site-ului web www.upfit.one

3.1. Scurtă descriere

Site-ul web www.upfit.one este o revistă online cu articole din domeniul sportului. Site-ul a fost lansat la data de 01.05.2017 având ca scop coagularea unei mari comunități de iubitori de mișcare.

Interfața web a site-ului a fost construită cu HTML și CSS, iar limbajul de programare web folosit e PHP și bază de date de tip MySQL. Site-ul a fost dezvoltat pe o platformă Linux cu un server web Apache. Elementele de funcționalitate client-side au fost implementate folosind framwork-ul jQuery care extinde funcționalitățile standard Javascript.

Am creat și dezvoltat site-ul într-un interval de 2 luni, în perioada 01.03.2017 – 01.05.2017. Ca design, site-ul este simplu, elegant și concentrat pe conținut.

Fig 6. Design-ul site-ului upfit.one pe toate dispozitivele

3.2. Structură și secțiuni site

Site-ul este structurat pe mai multe categorii și articole. Fiecare articol aparține în mod unic la o anumită categorie. Fiecare categorie am asociat-o unei anumite tematici din punct de vedere al conținutului. Această organizare permite vizitatorului să citească articolele în funcție de interes.

Din punct de vedere al afișării conținutului – articolelor – în cadrul site-ului, există mai multe tipuri de pagini (secțiuni).

Pagină categorie: se afișează toate articolele dintr-o categorie selectată

Fig 7. Fiecare categorie are o descriere și mai multe articole

Pagină detaliu articol: se afișează tot conținutul și toate detaliile articolului – poză, autor etc..

Fig 8. Fiecare articol are o poză principală și conținutul text

La sfârșitul fiecărui articol am adăugat și o secțiune dedicată rețelelor de socializare. În această zonă se pot lăsa comentarii prin platforma Facebook și se poate distribui articolul pe Facebook, Twitter, StumbleUpon și Pinterest

Fig 9. Zonă dedicată rețelelor de socializare

Structura completă a site-ului este ilustrată în Fig 10.

Fig 10. Structura secțiunilor site-ului www.upfit.one

3.3. Analiza evoluției traficului de pe dispozitive mobile în perioada 19.06.2018 – 19.06.2019

O dată cu creșterea traficului lunar, am remarcat și creșterea din ce în ce mai mare a ponderei traficului de pe dispozitive mobile – telefoane mobile și tablete. În luna Iulie 2019, traficul de pe dispozitive mobile măsura aproape 65% din traficul lunar.

Majoritatea acceselor de pe dispozitivele mobile au ca sursă motoarele de căutare (Google) și au ca și destinație pagina de detaliu a unui articol.

Fig 11. Graficul evoluției numărului de vizite de pe dispozitive mobile (telefoane și tablete) în perioada 19.06.2018 – 19.06.2019, grupat pe luni
Sursă: Google Analytics [8]

Fig 12. Împărțirea procentuală a vizitelor în funcție de tipul de dispozitiv în perioada 19.06.2018 – 19.06.2019
Sursă: Google Analytics [8]

Fig 13. Reprezentarea grafică a vizitelor de pe dispozitive mobile si desktop realizată în perioada19.06.2018 – 19.06.2019

Sursă: Google Analytics [8]

Așa cum ilustrează datele prezentate anterior, volumul traficului de pe dispozitive mobile a crescut atingând un procent de peste 65% din volumul lunar.

3.4. Optimizarea designului

Implementarea unui design de tip responsive încă de la început și creșterea volumului de conținut (de articole) a crescut treptat traficul lunar.

O sursă importantă de trafic este pagina de Facebook aparținând site-ului https://www.facebook.com/upfitone/, de aceea este importat ca articolele distribuite pe acest canal să poate fi accesate de pe telefoane sau tablete fără probleme.

Pe lângă implementarea unui design de tip Responsive, am vrut să optimizez viteza și navigarea site-ului prin:

Adaptarea designului în timp real în funcție de tipul de dispozitiv și rezoluția acestuia

Micșorarea timpului de încărcare a paginilor din cadrul site-ului prin implementarea de metode de cache-ing și compresie a librăriilor de CSS și Javascript

Îmbunătățirea modului de folosire al site-ului (usability) prin optimizarea navigării în cadrul secțiunilor site-ului

Îmbunătățirea modului de navigare dintr-o pagină în alta (cross-site linking) prin afișarea mai multor artciole în funcție de context

Capitolul 4. Crearea designului fluid

Înainte de implementarea efectivă a site-ului, am creat designul grafic al principalelor secțiuni folosind programul de editare grafică Adobe Photoshop CC. Prin acest mod am putut testa diferite variante privind modul de aranjare al elementelor site-ului și astfel să aleg acea organizare care se apropie cel mai mult de obiectivele definite din punct de vedere funcțional.

În această etapă am creat designul grafic privind layout-ul pentru câteva pagini:

Pagina principală a site-ului (HOMEPAGE)

Pagina de categorie care afișează toate articolele aparținând unei anumite categorii

Pagina de detaliu articol

Pagina de prezentare informație : Despre noi, Echipa noastră etc.

În crearea designului am folosit un Grid format din 12 coloane. Numărul de coloane se modifică în mod dinamic, în funcție de rezoluția de afișare a dispozitivului astfel:

pentru lățime de afișare mai mare de 980 px – 12 coloane

pentru lățime de afișare între 780 px și 980 px – 8 coloane

pentru lățime de afișare între 480 și 780 px – 4 coloane

pentru lățime de afișare până la 480 px – 2 coloane

Din punct de vedere al regulilor privind afișarea elementelor dependent de rezoluția ecranului, pe acestea le-am definit doar în etape de implementare a funcționalității întrucât astfel am putut să observ și să testez în timp real impactul pe care îl prezenta afișarea sau eliminarea unor elemente de layout în funcție de rezoluția de afișare.

Fig 14. Zonele principale de pe Prima pagină a site-ului.

Aceste zone nu sunt folosite doar în prima pagină. Aceste zone sunt structurate în metode folosind principiul OOP. În cazul în care trebuie făcută o modificare unei zone este mult mai ușor de implementat.

Widget-urile cele mai folosite sunt cele de tip banner publicitar. Aceste bannere se găsesc în mai multe pagini sub diferite forme.

Fig 15. Banner publicitar lateral afișat în pagina de detaliu articol

Capitolul 5. Structură directoare și librării utilizate

5.1. Structură directoare

Din punct de vedere al structurii proiectului, avem următoarea organizare a fișierelor proiectului:

5.2. Script inițializare

la începutul fiecărei pagini din site, în prmiul rând se inițializează environmentul necesar implementării funcționalității: încărcarea de librării necesare, inițializarea obiectelor și definirea de parametrii generali, inițializarea conexiunii la baza de date.

Toate acestea se realizează în scriptul _init.php care se găsește în rădăcina site-ului:

<?php

session_start();

ob_start("ob_gzhandler");

error_reporting(E_ERROR);

ini_set('display_errors', 1);

date_default_timezone_set('Europe/Bucharest');

setlocale(LC_TIME, array('ro.utf-8', 'ro_RO.UTF-8', 'ro_RO.utf-8', 'ro', 'ro_RO', 'ro_RO.ISO8859-2'));

define('MYSQL_DEBUG' ,'1');

$s_page = basename($_SERVER['PHP_SELF']);

//Libraries

require 'language/ro.php';

require 'libraries/general.php';

require 'libraries/Blog.php';

require 'libraries/Banners.php';

require 'libraries/Functions.php';

require 'libraries/Authors.php';

require 'libraries/Video.php';

require 'libraries/Quiz.php';

//Parameters

require 'parameters/parameters_site.php';

require 'parameters/config_arrays.php';

require 'parameters/parameters_mysql.php';

require 'parameters/lib_extranet_mysql.php';

require 'data_files/parameters_pagina-publicitate.php';

$mysql = new extranet_MySQL();

header('Content-type: text/html; charset=utf-8');

//initialize the BLOG library

$page = new Blog();

//initialize the banners

$ads = new Banners();

//initialize the QUIZ library

?>

În fiecare pagină a site-ului se încarcă acest script printr-un apel de tip REQUIRE ceea ce înseamnă că în cazul în care acest script lipsește sau conține erori întreaga execuției a paginii este întreruptă printr-o eroare:

<?php

require '_init.php';

5.3. Elemente structurale comune paginilor site-ului

Anumite elemente de interfață – header-ul, footer-ul, partea dreaptă – sunt folosite în mai multe scripturi și de aceea am separat codul respectiv în librării distincte care sunt apoi incluse în funcție de nevoi. Aceste librării sunt incluse toate în directorul /includes/.

În cadrul paginilor site-ului aceste librării sunt incluse prin apeluri de tip REQUIRE care determină generarea unei erori în cazul în care aceste librării nu există:

require 'includes/_html_header.php';

require 'includes/_header.php';

5.4. Scripturi pentru afișare articole

Scripturile site-ului în care se implementează funcționalitatea aferentă afișării articolelor sunt:

Capitolul 6. Implementare interfață site prin HTML și CSS

Interfața web a site-ului am asamblat-o folosind HTML5 și CSS3.

6.1. Regulile CSS

Regulile de CSS privind afișarea elementelor interfeței sunt grupate în mai multe fișiere din cadrul directorului /assets/css/ :

6.2. Elemente structurale de HTML

Pentru o optimizare semantică a site-ului pentru motoare de căutare (SEO) am folosit tag-uri specifice HTML5 : header, footer, menu, item.

Pentru Zona 1 am folosit tag-ul HEADER cu o clasă specifică:

Fiecare zonă de conținut se găsește într-un tag DIV cu clasa WRAPPER care poziționează elementele central în cadrul paginii. Astfel toate blocurile constructoare ale paginii sunt poziționate la fel.

.wrapper {

width: 1200px;

margin: 0px auto;

position: relative;

}

Meniul principal format din mai multe secțiuni, dar conține și un submeniu(Despre noi). Este construit cu ajutorul tag-ului NAV căruia i se asociază o clasă MAIN-MENU pentru formatările CSS și prin intermediul unei liste de tip UL:

<li><a href="<?=HOST;?>" title="UPfit.one"<?=(($s_page == 'index.php')?' class="active"':'');?>><i class="fa fa-home"></i></a></li>

<li><a href="<?=HOST;?>virtual-trainer" title="Virtual Trainer"<?=(($page->category['bfcid'] == "1")?' class="active"':'');?>>Virtual Trainer</a></li>

<li><a href="<?=HOST;?>tips-inspo" title="Tips&Inspo"<?=(($page->category['bfcid'] == "2")?' class="active"':'');?>>Tips&Inspo</a></li>

<li><a href="<?=HOST;?>lifestyle" title="Lifestyle"<?=(($page->category['bfcid'] == "3")?' class="active"':'');?>>Lifestyle</a></li>

<li><a href="<?=HOST;?>fit-map" title="FitMap"<?=(($page->category['bfcid'] == "4")?' class="active"':'');?>>FitMap</a></li>

<li><a href="<?=HOST;?>foodie" title="Foodie"<?=(($page->category['bfcid'] == "5")?' class="active"':'');?>>Foodie</a></li>

<li><a href="<?=HOST;?>fitness-news" title="Fitness News"<?=(($page->category['bfcid'] == "6")?' class="active"':'');?>>News</a></li>

<li><a href="<?=HOST;?>funone" title="FunOne"<?=(($page->category['bfcid'] == "8")?' class="active"':'');?>>FunOne</a></li>

<li><a href="https://upfit.world/" title="Sali fitness" target="_blank">Sali fitness</a></li>

<li>

<a href="#" title="Despre noi"<?=((in_array($s_page, $a_despre_noi))?' class="active"':'');?>>Despre Noi <i class="fa fa-chevron-down"></i></a>

<li><a href="<?=HOST;?>echipa-upfit-one" title="Echipa UPfit.one"<?=(($s_page == 'echipa-upfit-one.php' || $s_page == 'echipa-upfit-one-detaliu.php')?' class="active"':'');?>>Echipa noastra</a></li>

<li><a href="<?=HOST;?>autor-upfit-one" title="Devino autor UPfit.one" <?=(($s_page == 'autor-upfit-one.php')?' class="active"':'');?>>Scrie pentru noi</a></li>

<li><a href="<?=HOST;?>ne-place-sa-citim" title="Ce ne place sa citim"<?=(($s_page == 'blogroll.php')?' class="active"':'');?>>Ne place sa citim</a></li>

<li><a href="<?=HOST;?>publicitate-fitness-lifestyle" title="Publicitate"<?=(($s_page == 'publicitate.php')?' class="active"':'');?>>Publicitate</a></li>

<li><a href="<?=HOST;?>contact-upfit-one" title="Contact UPfit.one"<?=(($s_page == 'contact.php')?' class="active"':'');?>>Contact</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Fig. 16. Versiunea header-ului cu meniului principal pentru desktop

Meniul de mai sus este folosit doar pentru varianta desktop. Pe lângă acest meniu am mai adăugat un meniu folosit doar pentru mobil de tip acordeon. Acest meniu este construit tot cu ajutorul tag-ului NAV căruia i-am adăugat clasele HEADER-TOPMENU și VISIBLE-MOBILE.

<ul>