Aplicație multimedia on-line specializată tip all-in-one Vlad Stoica COORDONATOR ȘTIINȚIFIC Conf. dr. ing. Daniela DANCIU Iulie 2016 CRAIOVA… [302024]

Licență

Aplicație multimedia on-line specializată tip all-in-one Vlad Stoica COORDONATOR ȘTIINȚIFIC Conf. dr. ing. Daniela DANCIU Iulie 2016 CRAIOVA… [302024]

Byadmin ianuarie 1, 2024

PROIECT DE DIPLOMĂ

VLAD STOICA

COORDONATOR ȘTIINȚIFIC

Conf. dr. ing. Daniela DANCIU

Iulie 2016

[anonimizat]-in-one

Vlad Stoica

COORDONATOR ȘTIINȚIFIC

Conf. dr. ing. Daniela DANCIU

Iulie 2016

CRAIOVA

„Învățătura este o comoară care își urmează stăpânul pretutindeni.”

[anonimizat]: [anonimizat], Calculatoare și Electronică a [anonimizat], [anonimizat]:

[anonimizat]-in-one,

coordonată de Conf. dr. ing. [anonimizat] 2016.

[anonimizat]:

reproducerea exactă a [anonimizat]-o [anonimizat]-o [anonimizat],

[anonimizat], [anonimizat] a unor aplicații realizate de alți autori fără menționarea corectă a [anonimizat] a [anonimizat].

Pentru evitarea acestor situații neplăcute se recomandă:

plasarea între ghilimele a citatelor directe și indicarea referinței într-o [anonimizat] a [anonimizat] a sursei originale de la care s-a [anonimizat] s-[anonimizat], figuri, imagini, statistici, [anonimizat], a căror paternitate este unanim cunoscută și acceptată.

Data, Semnătura candidat: [anonimizat],

PROIECTUL DE DIPLOMĂ

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

În urma analizei lucrării candidat: [anonimizat]:

[anonimizat]:

Data, [anonimizat]-ului alături de o prezentare amplă a produsului obținut. Acesta este structurat în opt capitole.

În primul capitol al lucrării regăsim scopul și motivația pentru tema aleasă, o scurtă introducere în temă și prezentarea aplicațiilor folosite în realizarea proiectului.

[anonimizat].

[anonimizat], dar și a formularului de contact.

[anonimizat].

Termenii cheie: HTML,CSS,PHP,JavaScript,Site web.

CUPRINSUL

1 Introducere 1

1.1 Scopul 1

1.2 Motivația 1

1.3 Introducere în web 1

1.4 Aplicatii utilizate 7

2 Organizarea aplicației 9

2.1 Stabilirea Structurii 9

2.2 Organizarea Fișierelor 10

2.3 Centralizarea elementelor 12

2.4 Arhitectura peginilor 15

3 Prezentarea aplicației 16

4 Funcționalitate 28

4.1 Formular comandă 28

4.2 Formular contact 34

5 Design versatil 38

6 Concluzii 48

7 Bibliografie 49

8 Referințe web 50

A. Codul sursă 51

C. CD / DVD 53

Index 54

LISTA FIGURILOR

Fig. 1 – Imagine prezentare – Web design…………………………………………………………………………………………………2

Fig.2 – Imagine de prezentare – HTML…………………………………………………………………………………………………….3

Fig.3 – Imagine de prezentare – CSS………………………………………………………………………………………………………..4

Fig.4 – Imagine de prezentare – JS…………………………………………………………………………………………………………..5

Fig.5 – Imagine de prezentare – PHP………………………………………………………………………………………………………..6

Fig. 6 – Imagine de prezentare – Structură………………………………………………………………………………………………..9

Fig. 7 – Aplicație- Meniu………………………………………………………………………………………………………………………10

Fig. 8 – Aplicație- Meniu secundar…………………………………………………………………………………………………………10

Fig. 9 – Organizarea fișierelor………………………………………………………………………………………………………………..11

Fig. 10 – Cod- Header…………………………………………………………………………………………………………………………..12

Fig. 11 – Cod- Subsol……………………………………………………………………………………………………………………………13

Fig. 12 – Cod- Meniu……………………………………………………………………………………………………………………………14

Fig.13 – Imagine de prezentare – Arhitectura……………………………………………………………………………………………15

Fig. 14 – Aplicație- Antet………………………………………………………………………………………………………………………16

Fig. 15 – Aplicație- Corp……………………………………………………………………………………………………………………….17

Fig. 16 – Aplicație- Extensie………………………………………………………………………………………………………………….18

Fig. 17 – Cod- Extensie…………………………………………………………………………………………………………………………19

Fig. 18 – Aplicație- Banner……………………………………………………………………………………………………………………19

Fig. 19 – Aplicație- Averismente……………………………………………………………………………………………………………20

Fig. 20 – Cod- Avertismente………………………………………………………………………………………………………………….20

Fig. 21 – Aplicație- Socializare………………………………………………………………………………………………………………21

Fig. 22 – Aplicație- Despre……………………………………………………………………………………………………………………22

Fig. 23 – Aplicație- Despre 2…………………………………………………………………………………………………………………23

Fig. 24 – Aplicație- Tutoriale…………………………………………………………………………………………………………………23

Fig. 25 – Aplicație- Externe…………………………………………………………………………………………………………………..24

Fig. 26 – Cod- Externe………………………………………………………………………………………………………………………….24

Fig. 27 – Aplicație- Magazin………………………………………………………………………………………………………………….25

Fig. 28 – Cod- Stil………………………………………………………………………………………………………………………………..26

Fig. 29 – Aplicație- Hartă………………………………………………………………………………………………………………………26

Fig. 30 – Aplicație- Contact…………………………………………………………………………………………………………………..27

Fig. 31 – Aplicație- Coș………………………………………………………………………………………………………………………..28

Fig. 32 – Aplicație- Formular Comandă ………………………………………………………………………………………………. 29

Fig. 33 – Cod- Formular Comandă ………………………………………………………………………………………………………..29

Fig. 34 – Cod- Formular Comandă securitate …………………………………………………………………………………………..30

Fig. 35 – Aplicație- Trimitere comandă…………………………………………………………………………………………………..30

Fig. 36 – Cod- Trimitere comandă………………………………………………………………………………………………………… 31

Fig. 37 – Aplicație- Trimitere comandă succes ……………………………………………………………………………………….31

Fig. 38 – Cod- Trimitere comandă succes……………………………………………………………………………………………… 32

Fig. 39 – Cod- SMTP……………………………………………………………………………………………………………………………32

Fig. 40 – Aplicație- Șablon email……………………………………………………………………………………………………………33

Fig. 41 – Cod- Șablon email…………………………………………………………………………………………………………………..33

Fig. 42 – Cod- Formular Contact……………………………………………………………………………………………………………34

Fig. 43 – Cod- Formular Contact CSS…………………………………………………………………………………………………….34

Fig. 44 – Cod- Formular Contact câmpuri de completat…………………………………………………………………………….35

Fig. 45 – Aplicație- Formular Contact succes…………………………………………………………………………………………..35

Fig. 46 – Cod- Formular Contact PHP…………………………………………………………………………………………………….36

Fig. 47 – Aplicație- Șablon Contact………………………………………………………………………………………………………..36

Fig. 48 – Cod- Șablon Contact……………………………………………………………………………………………………………….37

Fig. 49 – Cod- PHPMailer……………………………………………………………………………………………………………………..37

Fig.50 – Imagine de prezentare – Responsive…………………………………………………………………………………………..38

Fig. 51 – Cod – Responsive……………………………………………………………………………………………………………………39

Fig. 52 – Cod – Responsive 320px………………………………………………………………………………………………………….39

Fig. 53 – Aplicație – Logo……………………………………………………………………………………………………………………..40

Fig. 54 – Aplicație – Meniu responsive…………………………………………………………………………………………………..41

Fig. 55 – Aplicație – Meniu responsive 2………………………………………………………………………………………………..41

Fig. 56 – Aplicație – Meniu responsive 3………………………………………………………………………………………………..42

Fig. 57 – Aplicație – Meniu responsive extins………………………………………………………………………………………….43

Fig. 58 – Aplicație – Meniu responsive CSS……………………………………………………………………………………………43

Fig. 59 – Aplicație – Subsol responsive…………………………………………………………………………………………………..44

Fig. 60 – Aplicație – Subsol responsive 2………………………………………………………………………………………………..44

Fig. 61 – Aplicație – Subsol responsive 3………………………………………………………………………………………………..44

Fig. 62 – Aplicație – Corp responsive……………………………………………………………………………………………………..45

Fig. 63 – Aplicație – Corp responsive 2…………………………………………………………………………………………………..45

Fig. 64 – Aplicație – Corp responsive 3…………………………………………………………………………………………………..46

Fig. 65 – Aplicație – Text responsive………………………………………………………………………………………………………47

Fig. 66 – Aplicație – Text responsive 2……………………………………………………………………………………………………47

Introducere

Scopul

Scopul lucrării este acela de a introduce în lumea tirului cu arcul pe cei interesați, prin prezentarea site-ului construit și ajutarea la formarea acestora prin intermediul informațiilor puse la dispoziție prin intermediul acestuia.

Motivația

Motivația a survenit din dorința de autodepășire a cunoștiințelor dobândite de-a lungul celor patru ani de studii, ani în care am încercat să mă perfecționez și totodată să țin pasul cu evoluția instrumentelor și a tehnicilor folosite în Web Development.

Introducere în web

Pentru a putea înțelege pe deplin pașii și tehnicile necesare creării unui site web este mai întâi nevoie să știm câteva noțiuni de bază despre Web Development.

Pentru un necunoscător termenii de web development și web design par a se referi la același lucru, în general la realizarea de site-uri web. Mai exact termenii sunt destul de diferiți însă într-o stransă legătura, primul referindu-se la conceperea de la zero a unui site punând accent pe funcționalitate iar cel de-al doilea pe partea grafică, ambii fiind necesari pentru realizarea unui site web funcțional.

Tim Berners Lee a fost primul designer web sși chiar inventatorul www-ului publicând primul său site in 1991. La început siteurile bazate exclusiv pe limbajul HTML nu erau nici pe departe atât de complexe și încărcate grafic cum sunt în prezent, limbajul fiind nu prea puternic și permițând numai o serie limitată de formatări, precum și inserarea de linkuri pentru a putea "lega" paginile între ele, designul web fiind, de fapt, mai mult "programare" web.

Web developeri din ziua de azi lucrează majoritatea direct în HTML cu ajutorul unor editoare de text redactând un cod ce va fi preluat de un browser și afișat în așa fel încât să fie înțeles de orice persoană, chiar fără cunoștințe în domeniul informaticii . Practic dacă nu ar exista browserele care știu să interpreteze limbajul de script și să afișeze rezultatul pe ecran, site-urile ar fi doar înșiruiri de texte neformatate și, cel mai probabil fără imagini, limbajul HTML fiind cel care îi indica browserului locul în care să se afișeze diversele elemente vizibile, dimensiunea, culoarea, precum și alți parametrii ai acestuia care conferă unei pagini web atât aspectul cât și funcționalitatea dorită.

Fig. 1 – Imagine prezentare – Web design [Fig 1]

În prezent preocuparea pentru aspectul grafic al site-urilor, devenite puternice instrumente comerciale și publicitare, justifică în întregime denumirea de "design web", iar tehnologiile utilizate s-au diversificat și au devenit din ce în ce mai complexe. Site-urile actuale sunt din ce în ce mai mult axate pe animație interactivă și dinamism, companiile care produc site-uri lucrează cu angajați specializați pentru fiecare etapă a dezvoltării unui site, de la stadiul de concepție grafică la programare și editare de conținut. Optimizarea site-urilor pentru motoarele de căutare este un aspect foarte important având în vedere numarul mare de browsere existente în prezent, dar si posibilitatea accesarii lor de pe platforme mobile.

Un alt lucru de luat în considerare în dezvoltarea unui site web este structura generală pe care vrem să o aibă. Majoritatea site-urilor web sunt formate din mai multe pagini interconectate, fară a avea neapărat o limită de pagini. Insă absolut toate trebuie să aibă o pagină principală denumită generic “index”, fiind pagina pe care o caută automat toate browserele. Aceasta are ca scop facilitarea navigării către alte pagini ale site-ului, fiind cel mai probabil prima văzută de un motor de căutare și poate conține linkuri către informația dorită de fapt.

În lipsa unei pagini “index” cele mai multe servere web, neavând o pagină principală pe care să o acceseze vor afișa o listă cu fișierele localizate în folderul site-ului.

Fig.2 – Imagine de prezentare – HTML [Fig 2]

HTML (HyperText Markup Language) este codul care stă la baza paginilor web. Codul HTML poate fi scris în orice editor de text și salvat cu extensia „.html” sau „.htm” pentru a fi recunoscut de browser. Codul este cuprins între „etichete” sau cum sunt cunoscute internațional „tags”.

Aceste „etichete” sunt pereche, una de deschidere „<eticheta>” și una de închidere “</eticheta>”, în cazul celor la care nu este necesară deschiderea ci doar închiderea se procedează astfel “<eticheta/>”. Conținutul de bază al unei pagini HTML este destul de simplu și cuprinde doar câteva taguri de bază.

<html> -indica browserului tipul fisierului

<head> -delimiteaza sectiunea head a pagini

<title>Exemplu</title> -defineste titlul(afisat in bara de adrese)

</head>

<body> -delimiteaza corpul pagini (singura sectiune care va fi afisata)

Conținut pagină

</body>

</html>

În prezent HTML este la versiunea 5(cinci) având ca etichetă de început <!DOCTYPE HTML>. Acest lucru face browserul să recunoască versiunea pentra a putea afișa conținutul corespunzător.

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp.

Fig.3 – Imagine de prezentare – CSS [Fig 3]

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor lansat la 1996 ce vizează în mare parte un document HTML, însa poate fi utilizat și în formatarea elementelor de tipul XML și SVGL.

Atunci când un browser citește un fișier .css acesta va formata și distribui elementele din HTML conform specificațiilor acestuia. Urmărind exemplul grafic de mai sus observăm anatomia unei reguli CSS și anume: selectorul reprezentat de elementul sau partea de document căreia dorim să îi aplicăm modificarile poate cuprinde doar un paragraf, o clasă, un id sau întreg corpul documentului HTML. După stabilirea selectorului se deschide un set de acolade în interiorul cărora declarăm modificarea pe care dorim să i-o facem. În primul rând se alege o proprietate, iar apoi o valoare a proprietății, fiecare declarație fiind terminată cu “ ; “.

Există trei moduri de inserare a unei pagini de stil:

-În linie, folosit de obicei pentru modificarea stilului unui singur element.

-Intern, folosit de cele mai multe ori atunci când o pagină are un stil unic față de restul. Se intoduce în secțiunea Head a documentului HTML însă cei mai mulți dezvoltatori nu recomandă această metodă.

-Externă, fiind metoda cea mai populară și totodată recomandată de web designeri și developeri din toată lumea. Aceasta metodă presupune creerea unui fișier separat cu extensia .css care va cuprinde exclusiv elemntele de stil și legarea acestuia prin intermediul unui <link> in sectiunea Head a fișierului HTML.

Fig.4 – Imagine de prezentare – JS [Fig 4]

Am discutat până acum despre conținutul și aparența unui site web și a venit momentul să trecem puțin și la comportament, în cazul de fața JavaScript. Asemenea fișierelor HTML și CSS, și JavaScriptul poate fi programat în orice fel de editor de text și salvat cu extensia .js fiind apoi legat printr-un link de script în interiorul secțiunii Head a fișierului HTML sau introdus direct în linei cu ajutorul tagului <script>.

JavaScript este un limbaj de programare pe obiect dezvoltat pentru prima dată în 1995 de către Brendan Eich și ajuns în prezent la versiunea 1.5. În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Pe langă activitățile de bază pe care le îndeplinește limbajul, precum verificarea datelor introduse de utilizatori, JavaScript este cel mai des folosit în crearea de conținut dinamic și efecte animate. Site-urile de tip responsive cu efecte de translație, animație sau de tipul one-page au ajuns foarte populare în ultima vreme, apărând tot mai multe scripturi din ce în ce mai complexe.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucât operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

Fig.5 – Imagine de prezentare – PHP [Fig 5]

PHP(Hipertext Preprocessor) este un limbaj de programare bazat pe funcționalitate, folosit pe scară largă la dezvoltarea paginilor și aplicațiilor web. A fost dezvoltat în 1994 de către Rasmus Lerdorf ca o extensie ce urmărea numărul de vizitatori ai unui site și genera un curiculum vitae. Ajuns în prezent la versiunea cinci, este cel mai popular limbaj de programare web de tip “ open-source”, având versiune pentru toate sistemele de operare și pentru majoritatea web serverelor.

Ceea ce face PHP să difere de un JavaScript este că codul său este executat pe server, care este apoi trimis catre utilizator sub forma de HTML. Utilizatorul va primi rezultatele rulării acelui script, fără a putea cunoaște codul-sursă ce stă la bază.

PHPul posedă facilitați de procesare a textului foarte dezvoltate, însă cea mai puternică facilitate a sa este susținerea unui larg domeniu de baze de date. Cu ajutorul său scrierea unei pagini web ce accesează o bază de date precum mysql sau conversează cu alte “servici” precum HTTP, a devenit accesibilă oricui. „Cel mai bun lucru legat de php este faptul că este extrem de simplu de folosit de către un începator, dar totodata oferă foarte multe avantaje unui utilizator experimenat.” [PC16]

Aplicații utilizate

Deși Web Developmentul cuprinde o mare varietate de elemente, voi vorbi decât despre cele folosite de mine pentru realizarea acestui proiect. Ca și editor de text principal am folosit Sublime Text pentru a scrie și edita tot conținutul siteului, XAMPP pentru a simula condițiile de server și a putea testa funcționalitatea, Adobe Dreamweaver pentru o mai bună aranjare a elementelor grafice în pagină și Google Chrome ca și browser pentru testare și vizualizare a rezultatelor.

Sublime Text este un editor de text foarte sofisticat și totodată versatil, cu o interfață destul de prietenoasă cu utilizatorul și o performață uimitoare. Aparut in 2013 editorul de text a fost creat de Jon Skinner și este în prezent la versiunea 2.0.2, versiunea 3.0 fiind în momentul de față în versiunea beta. Acest editor de cod are câteva elemente care îl fac perfect pentru a edita cod, și anume:

-Scurtături, combinații de taste ce ușurează foarte mult atât navigarea în program cat și scierea de cod.

-Selecție multiplă, pană la zece elemente o dată, prin modificarea mai multor elemente concomitent face ca timpul necesar scrierii de cod să scadă substanțial.

-Paletă de comenzi prin reținerea celor mai populare comenzi dar și a tagurilor uzuale și autocompletarea lor la simpla apăsare a unei taste.

-Suport pentru mai multe monitoare, lucru pe care eu l-am gasit foarte util.

-Este complet personalizabil.

XAMPP , un acronim format din inițialele principalelor limbaje pe care le suporta, este un pachet de programe gratis de genul open source, ideal pentru scripturile în limbajul de programare PHP.

Odată ce XAMPP este instalat, tratează adresa de host locală a calculatorului personal ca pe un server la distanța, simulând comunicarea cu un server. Pentru a fi cât mai ușor de înteles și utilizat, multe din protocoalele de securitate ale programului sunt dezactivate în mod implicit, însă pot fi activate foarte ușor.

Adobe Dreamweaver reprezintă cel mai complex set de instrumente pentru web design ce permite crearea, editarea și gestionarea de cod dar și de front-end. Acesta s-a bucurat de un larg succes încă de la sfârșitul anilor 1990, momentan deținând aproximativ 80 la suta din piața editoarelor HTML. Unii creatori de pagini web critică aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari decât ar fi necesar, ceea ce conduce la o funcționare neperformantă a browserelor web.

Dreamweaver folosește majoritatea browserelor instalate pe calculator pentru a previzualiza site-ul în lucru în timp real, având și optiune de split screen ce permite împarțirea zonei de lucru în doua spații distincte pentru editare și respectiv pentru previzualizare.

Google Chrome este un browser web de tip open source dezvoltat de compania Google în 2008, fiind astăzi cel mai utilizat navigator web. Acesta este disponibil pe toate versiunile de Windows, iar pe Mac și Linux este în stadiul alpha.

Chrome își actualizează periodic bazele de protecție împotriva înșelătoriilor online, dar și iîmpotriva fișierelor de tip malware. Astfel utilizatorii sunt avertizați atunci când vizitează un site sau încearcă să descarce un fișier cu conținut periculos.

Organizarea aplicației

Stabilirea Structurii

Înainte de a începe lucrul efectiv la un Site Web, orice developer trebuie sa știe câteva aspecte cruciale legate de ceea ce urmează să construiască, lucruri precum tipul structurii pe care urmează să o implementeze și numărul de pagini principale și secundare pe care o sa le conțină siteul.

Putem privi această etapă precum construcția unei case. Aceasta poate fi orice stil dorim, cu câte camere vrem, iar spațiul nu reprezintă o problemă. Este de la sine înțeles că nu ne vom apuca să săpăm fundația înainte de a face o schemă arhitecturală. Același lucru și în privința unui site, pagina principală este reprezntată de ce vezi prima dată atunci când intri pe usă. Cu cât aceasta este mai bine structurată, cu atât vei găsi mai ușor camera dorită din prima, însă trebuie avut în vedere și distanța dintre camere. Este de dorit ca orice pagină să nu fie la mai mult de două clickuri distanță. Din acest motiv modelul ales de mine pentru structura lucrării este unul dintre cele mai simplistice și des întâlnite structuri existente.

Fig. 6 – Imagine de prezentare – Structură

Siteul meu denumit +Arrow este construit conform schemei de mai sus și cuprinde cinci pagini în total. Este construit pe baza structurii ”panză de paianjen”, ceea ce presupune ca fiecare pagină să fie la maxim un click distanță una de alta. Este compus din cinci pagini: acasă, despre, tutoriale, magazin și contact.

Paginile sunt accesibile din meniul prezent în partea superioară a paginilor, sub header, dispuse orizontal.

Fig. 7 – Aplicație- Meniu

De asemenea pentru a facilita navigarea pe site, linkuri există și în partea inferioară a fiecărei pagini în secțiunea footer.

Fig. 8 – Aplicație- Meniu secundar

Organizarea Fișierelor

Atunci când realizăm un site web, unul dintre factorii de care trebuie ținut cont este organizarea fișierelor ce compun site-ul pe foldere și sub-foldere. De cele mai multe ori când realizăm un site, este cu scopul de a-l comercializa. De aceea indiferent de natura sa, acesta trebuie să respecte o anumita structură și anumite denumiri specifice ale fișierelor (in limba engleză), pentru ca mai apoi oricine va intra în posesia acestuia să poată gasi elementele dorite sau să facă modificările necesare cu un minim de efort.

În cazul de față folderul principal denumit “licenta” cuprinde cele cinci pagini web salvate exact cu aceeași denumire pe care o poartă și în bara de meniu pentru a fi foarte ușor identificate, salvate cu extensia .php. În același folder se află și folderul assets care cuprinde la rândul său alte patru sub-foldere:

-css care cuprinde toate fișierele de stil salvate cu extensia .css.

-images în care se află toate pozele ce compun site-ul salvate de asemenea cu denumiri ce le fac cât mai ușor identificabile și extensiile de bază .jpeg sau .png.

-js unde se află toate fișierele de JavaScript ce animează pagina web

-plugins compus de asemenea din două sub-fișiere, cel pentru formularul de contact și cel pentru font.

În folderul principal se mai află de asemenea sub-folderul Includes ce conține cinci fișiere: trei fișiere .php în care se află centralizat meniul, headerul si footerul, și două fișiere html reprezentate de pop-ups în cazul plasării unei comenzi de pe pagina de magazin.

Fig. 9 – Organizarea fișierelor

Centralizarea elementelor

Unul dintre cele mai importante criterii pe care trebuie să le respecte orice site este acela de a avea cât mai puțin cod duplicat. Acest lucru presupune practic centralizarea elementelor care se regăsesc pe fiecare pagină într-un document separat, sau documente după necesitate.

În cazul de față am centralizat următoarele trei componente și le-am salvat cu denumirile specifice header, footer și meniu.

Fig. 10 – Cod- Header

Secțiunea Header salvată cu extensia .php cuprinde toate linkurile , metaurile și scripturile către toate fișierele de stil și JavaScript și este legată printr-o funcție php de toate paginile componente ale siteului. Astfel dacă dorim să schimbăm stilul site-ului prin înlocuirea unui fșier CSS de exemplu, nu este necesar să facem modificări la fiecare pagină componentă a site-ului, ci doar în fișierul nostru dedicat secțiunii Header.

De asemenea dacă dorim introducerea unui script nou vom proceda la fel fără a mai fi nevoie să duplicăm codul pe fiecare pagină.

În fișierul footer.php se regăsesc centralizate elementele regăsite în subsolul paginii, linkuri către paginile componente ale siteului dispuse orizontal sub forma unui meniu pentru o navigare cât mai rapidă prin paginile componente fără a mai fi nevoie ca utilizatorul să deruleze pagina până în secțiunea de antet pentru a utiliza meniul principal.

Fig. 11 – Cod- Subsol

Elementele de copyright înaintea cărora se află simbolul specific introdus prin funcția “©” precedat de numele siteului despărțit printr-o bară verticală de numele autorului. Tot aici se regăsesc și câteva scripturi care acționează numai asupra secțiunii footer, tot pentru a evita duplicarea codului și pentru a facilita eventualele modificări aduse secțiunii.

Meniu.php după cum dictează și denumirea cuprinde toate elementele ce alcătuiesc meniul. Astfel adăugarea sau ștergerea unei pagini se poate face foarte simplu prin scrierea sau ștergerea unei singure linii de cod. După cum se poate observa și în imaginea de deasupra, fiecare din cele cinci pagini componente ale site-ului este formată dintr-o listă ordonată ce cuprinde linkurile către fișierele sursă și numele ce apare pe bara de meniu. Acestea mai au și o funcție pentru efecte pe care o voi detalia în capitolul cu numărul trei.

Fig. 12 – Cod- Meniu

Aici regăsim de asemenea un script php pentru fixarea meniului și calibrarea acestuia în funcție de rezoluție, dar și ajustarea acestuia și dispunerea lui verticală în cazul în care site-ul este deschis pe un dispozitiv cu o rezoluție mică. Acest lucru este realizabil și cu ajutorul fucțiilor de JavaScript și câtorva regului de CSS ce nu sunt incluse aici, acestea cuprinzând cod pentru mai multe părți componente ale paginilor.

Arhitectura peginilor

Structura folosită pentru dezvoltarea aplicației este una clasică, fiecare pagină componentă respectând această structură.

Fig.13 – Imagine de prezentare – Arhitectura [Fig 13]

Antetul respectă aceeași structură pe toate paginile componente fiind format din:

-o imagine reprezentativă peste care este așezat logoul siteului în partea superioară, -butoanele de meniu fiind dispuse orizontal sub imagine aliniate în marginea din stânga cu un spațiu de rigoare atât față de margine cât și între ele.

Antetul paginilor componente este identic, excepție făcând pagina index unde imaginea cu logoul siteului este mai extinsă cuprinzând și o scurtă descriere.

Spațiul util sau bodyul diferă ca și elemente componente pe fiecare dintre pagini după cum este și normal, însă respectă aceleași reguli de compoziție din punctul de vedere al poziționării, spațierii, stilului sau încadrării. Elementele ce populează această secțiune pe toate cele cinci pagini sunt construite și stilizate după aceleași reguli, astfel chiar dacă conținutul diferă, dispunerea și stilul lui este la fel.

Subsolul paginilor este identic din toate punctele de vedere pe toate paginile componente.

Prezentarea aplicației

Aplicația constă într-un site format din mai multe pagini ce conțin de la informații utile, tutoriale, modalități de alegerea arcului dar și o pagină magazin de unde un utilizator poate plasa o comandă.

Fișierul principal index.php este asociat paginii acasă, fiind pagina principală și totodată prima accesată de un browser. Aceasta deși are o structură foarte asemănătoare cu restul, este puțin diferită prin prisma secțiunii header, ce ocupă o arie mai mare din ecranul dispozitivului.

Fig. 14 – Aplicație- Antet

+Arrow este denumit siteul și după cum spune și descrierea titlului cuprinde informații despre arcuri, aceasta fiind denumirea pe care o poartă toate paginile în secțiunea <tittle>, lucru ce face ca numele să apară în descrierea filelor browserului utilizat pentru a deschide aplicația.

Textul suprapus imaginii este adăugat pe un strat superior pentru o mai ușoară modificare a descrierii. Acesta este îngrădit în interiorul sintaxei <span>, sintaxă ce este cel mai des folosită pentru a aduce modificări elementelor de text, precum culoare sau mărime. La rândul său aceasta este cuprinsă într-un <div> și are atribuită o clasă denumită standard “slider”.

Acestea sunt apoi stilizate în fișierul style.css, care cuprinde majoritatea elementelor de design majore.

Meniul, după cum se poate observa în imaginea de mai sus, este al doilea element ce ne întâmpină odată cu accesarea paginii, acestea fiind elementele ce formează headerul paginii.

Inclus în divul cu denumirea specifică navbar cu ajutorul sintaxei <div id="navbar" class="navbar-collapse collapse">, acesta capătă un id și o clasă ce va fi folosită ulterior pentru a face ca meniul să fie scalabil în funcție de rezoluție.

Fig. 15 – Aplicație- Corp

“Tipuri de arcuri” este următorul element întâlnit pe pagina index. Înfășurat într-un div cu o clasă container,această secțiune cuprinde după cum se observă mai multe elemente.

Înfășurat în tagul de text dedicat mărimii <h4> se află numele capitolului, precedat de descrierea acestuia. Toate cele patru poze specific sunt încărcate folosind funcția <img class="img-responsive name-in" src="assets/images/img1.jpg" title="coumpound" /> din care putem deduce următoarele lucruri:

Imaginea se află în folderul assets și în subfolderul images al directorului nostru.

Aceasta poartă numele de img1 și este de tipul .jpg

Cu ajutorul funcției responsive, dacă ne poziționăm cu clickul asupra ei va apărea titlul ”compound”, acesta referindu-se la prima imagine.

Toate cele patru imagini au fost introduse după același model, respectându-se denumirile și titlurile fiecărora, toate având de asemenea aceeași rezoluție de 700×394 px.

Sub fiecare imagine se află denumirea arcului însoțită de un scurt paragraf ce cuprinde o descriere sumară. În imediata continuitate a fiecărui text se află un buton ce odată apăsat extinde textul pentru a afișa un plus de informație.

Fig. 16 – Aplicație- Extensie

Odată apăsat butonul, spațiul se extinde coborând elementele aflata sub text, aducând un volum mai mare la vedere. Toate patru butoanele funcționează independent, lungimea textului afișat diferă în fiecare caz, însă toate respectă același principiu.

Apăsarea butonului “MAI PUȚIN” retrage la loc informația afișată la statutul inițial.

Acest lucru este posibil datorită divurilor cu clasele ce împart spațiul de lucru în patru coloane simetrice dar și funcției JavaScript care “animează” tranziția și face posibilă încadrarea elementelor mobile prin deplasarea celor ce le urmează.

Fig. 17 – Cod- Extensie

În imaginea de mai sus se observă funcția bazată pe click compusă dintr-o interogare cu if care face referire la starea inițială și un else a funcției ”see-more”, cu denumirea butoanelor în limba română.

Elementul următor prezent pe pagină este un banner care conține un citat în temă cu conținutul site-ului dezvoltat.

Fig. 18 – Aplicație- Banner

Acesta este format dintr-un text cuprins în <span> și un div cu o clasă denumită specific “testimonial”. Poza peste care se află textul este introdusă separat pe un layer inferior, fiecare element având posibilitatea de a fi modificat și animat separat după cum se poate observa. Aceasta are o animație de fade in din partea stângă cu o întârziere de 0.4 secunde, în timp ce secțiunea <h3> ce cuprinde cuvântul “citate” și paragraful următor definit separat cu sintaxa <p> au un efect de bounce in tot cu o întârziere de 0.4 secunde pentru a se sincroniza cu poza. Citatul în sine preia aceleași valori în materie de animație ca și imaginea pentru un efect vizual optim.

Următoarea secțiune este dedicată avertismentelor și îndrumărilor ce trebuie respectate pentru o practică sigură și lipsită de accidente. După cum se poate observa și în imaginea următoare aceasta este compusă din trei secțiuni, sub formă de coloane, dispuse orizontal.

Fig. 19 – Aplicație- Averismente

Încadrate ca și restul elementelor sub un div cu clasa „container” pentru a fi mai ușor manipulate, fiecare din cele trei elemente sunt apoi separate pe clase precum <div class="col-md-9 bottom-grids-left, right și respectiv center. După cum se observă și în imaginea de mai sus, poza aparține divului cu clasa left, are o rezoluție de 600×400 px și are un efect de fade in din partea stângă cu o întârziere de 0.4 secunde.

Elementul central este reprezentat de un set de avertismente dispuse sub formă de paragrafe cu ajutorul tagului <p> și un titlu încadrat cu <h3>. Din punct de vedere vizual animația este legată de cea a elementului din stânga lui pentru un efect vizual lejer ce nu obosește ochiul.

Coloana din deapta este dispusă sub forma unei liste neordonate prin tagul <ul> și cupinde șapte elemente în lista introduse cu ajutorul tagului <li>. Din punct de vedere al dinamismului precum și celelalte elemente, are un efect de fade in din dreapta, și un efect de hover activat de poziționarea cursorului deasupra elementelor din listă căpătând culoarea și paddingul conform pozei de mai jos din fișierul style.css.

Fig. 20 – Cod- Avertismente

Partea de subsol este identică pentru fiecare dintre cele cinci pagini componente ale site-ului și după cum se observă și în imaginea următoare este compusă din două arii:

-zona destinată legăturilor către două siteuri majore de socializare,

-spațiul antet cuprinzând un meniu auxiliar și drepturile de autor.

Fig. 21 – Aplicație- Socializare

Cele două imagini care fac legătura către site-urile de socializare sunt salvate cu extensia .png și cu ajutorul tagului <a class="site de socializare" href="www.adresasitedesocializare.com"> se accesează paginile dorite. Acestea au o lățime și înălțime de 134 de px și sunt afișate sub forma inline-block. De asemenea tot cu ajutorul funcțiilor css când se face hover cu mouseul în dreptul lor, acestora le scade opacitatea la 0.8 la suta din valoarea inițială, dând un efect plăcut.

Ultimul element de pe pagină fiind reprezentat de zona footer este compus din două elemente amplasate pe un fundal negru. Primul element îl reprezintă meniul auxiliar ce ajută la o mai ușoară navigare prin pagini. Acesta este format dintr-o listă neordonată cu cinci elemente cu ajutorul funcției <a href="index.php">Acasa</a> ce fac legătura între paginile componente precum cea index.php din exemplul alăturat. Denumirile paginilor sunt scrise automat cu majuscule și isi schimbă culoarea o dată poziționat mouseul deasupra lor cu ajutorul funcțiilor css

.footer-left ul li a:hover{ color:#008e10; } si

.footer-left ul li a{ text-transform:uppercase;}

Cel de-al doilea element situat în partea dreaptă a secțiunii footer îl reprezintă secțiunea de copy rights în care este trecut atât numele siteului cât și al autorului cu două fonturi de culori diferite.

Ambele elemente au un efect de fade in, fiecare din direcția specifică pentru un efect vizual plăcut.

Cea de-a doua pagină despre.php respectă de asemenea structura generală a siteului, însă față de pagina principală există câteva diferențe. După cum se poate observa și în imaginea de mai jos secțiunea din header dedicată banerului cu logoul site-ului este mult mai redusă, apărând numai numele fără descriere, în timp ce imaginea este mult mai restrânsă.

Fig. 22 – Aplicație- Despre

Daca la deschiderea primei pagini secțiunea header ocupă în totalitate ecranul dispozitivului, aici ocupă aproximativ o treime din acesta. Acest lucru este posibil datorită funcțiilor css următoare: .top-header{ min-height:150px; } .about-header{ background:url(../images/header-bg.jpg) no-repeat 50%; }

Din aceste funcții ne dăm seama că imaginea noastră aparține clasei top-header și are o dimensiune minimă de 150 px, este de tipul jpg, scalată la 50 la sută din valoarea inițială și nu are voie să se duplice.

Logoul siteului este asemenea primei pagini de tipul text, editat cu ajutorul unui tag <span> singura diferență fiind lipsa descrierii.

În componența corpului paginii regăsim un scut istoric compus din câteva paragrafe ce apar cu un efect de fade in central cu o întârziere de 0.5 secunde de această dată.

Fig. 23 – Aplicație- Despre 2

A doua jumătate a corpului, după cum se poate observa și în imaginea de mai sus este compusă din trei coloane cu poze și text ce conțin informații utile. Pozele sunt legate de textul de sub ele prin divul de coloană pentru a moșteni efectele vizuale ale acestuia. La deschiderea paginii coloanele laterale apar din părțile reprezentative cu o întârziere de 0.4 secunde în timp ce coloana centrală are un efect de fade in simplu cu o întârziere de 0.5 secunde.

Secțiunea de subsol este formată din imaginile ce conțin linkuri către rețelele de socializare și bara footer, elemente prezente de altfel pe toate paginile componente ale siteului.

Următoarea pagină este reprezentată de tutoriale.php a cărei construcție din punct de vedere a secțiunii header și footer este identică. Corpul paginii conține două secțiuni, prima fiind reprezentată de o secțiune de tutoriale. Pagina este dispusă pe patru coloane cu același format, poza, text și același efect de animație.

Fig. 24 – Aplicație- Tutoriale

Fig. 25 – Aplicație- Externe

A doua parte a corpului paginii este dedicată secțiunii legături externe și cuprinde trei poze sugestive ce ne redirecționează către paginile trecute sub ele.

<a href="http://www.tircuarcul.ro" target="_blank"><img class="img-responsive name-in" src="assets/images/link2.jpg" title="tircuarcul" /></a>. În exemplul alăturat se observă tipul de tag care face posibilă accesarea unor pagini externe prin apăsarea unor poze. Funcția „a hraf=” indică locația siteului pe care dorim să îl accesăm , în timp ce funcția target=”_blank” face posibilă deschiderea paginii respective într-un tab nou. Acest lucru este indicat pentru a evita părăsirea paginii prin apăsarea din greșeală a vreunui element. În acest fel utilizatorul poate culege informații de pe paginile sugerate, iar apoi se poate întoarce foarte ușor pe pagina noastră. Funcția „src=” reprezintă practic elementul ce trebuie selectat pentru a accesa linkul dorit, iar în cazul nostru știm acest lucru deoarece odată poziționat clickul asupra pozelor, acesta își schimbă formatul standard într-un pointer. Ultima funcție din exemplu este funcția „title=” ce conține numele ce va apărea în urma pozționării cursorului asupra pozelor sau va arăta numele pozei ce lipsește în cazul unei încărcări greșite a paginii web. Mai jos este atașată o porțiune din codul ce face toate aceste lucruri posibile.

Fig. 26 – Cod- Externe

Corpul paginii magazin.php este compus din lista de produse destinate comercializării. Acestea sunt dispuse pe trei coloane si două randuri sub forma unor poze de tipul jpg. cu o rezoluție de 600×400 pixeli, având denumirea cât și prețul trecut deasupra cu ajutorul tagului <h3 style="text-align:center;"> ce pe lângă setarea dimensiunii fontului aliniază si textul central.

Fig. 27 – Aplicație- Magazin

Atât pozele cât și descrierea lor au un efect de bounce in cu o întârziere de 0.4 secunde. Următorul lucru care se observă pe pagină este efectul de hover aplicat pozelor atunci când poziționăm cursorul deasupra lor, după cum se observă în imaginea de mai sus asupra articolului destinat vânzării „ceară coardă”. Acest efect aplică un filtru verde peste imaginea originală ce se încarcă procentual de la stânga la dreapta și totodată suprapune cu aceeași tranziție o imagine de tipul png peste poza originală, imaginea png reprezentând un coș de cumpărături ce dă de înțeles utilizatorului că aceasta este modalitatea de comandă a produselor.

Structura generală a paginii respectă regulile generale ale siteului atât din punct de vedere structural cât si dinamic, secțiunea de antet și subsol fiind aceeași.

În imaginile de mai jos se observă codul css ce face posibile toate aceste animații.

Fig. 28 – Cod- Stil

Ultima pagină componentă a siteului este contact.php, unde utilizatorul gasește informații utile despre orele și locurile de întâlnire, având la dispoziție și o hartă dar și un formular de contact pe care îl poate completa pentru diverse alte informați sau nemulțumiri cu privire la comanda depusă.

Fig. 29 – Aplicație- Harta

Dupa cum se poate observa în imaginea de deasupra, pagina de contact are imediat sub sescțiunea header și meniu o hartă. Aceasta este introdusă printr-un script pus la dispoziție gratis de Google și are mai multe funcți utile precum:

Folosind butoanele din colțul dreapta jos harta se poate mări sau micșora pentru o mai ușoara recunoaștere a adresei.

Se poate activa sau dezactiva opțiunea de teren sau se poate trece pe modul satelit din butonul situat în stânga sus pentru o mai usoară recunoaștere a zonei.

Poziționând clickul și ținând apăsat se deplaseaza harta, facând posibilă navigarea pe aceasta.

Selectând cu clickul simbolul sub formă de umanoid din partea dreaptă si plasarea acestuia oriunde pe hartă activează funcția street view permițând utilizatorului să vadă imagini reale cu locul indicat și să parcurgă împrejurimile într-un spațiu 3d ce reproduce exact realitatea.

Urmatoarea secțiune este dedicată formularului de contact.

Fig. 30 – Aplicație- Contact

Este compus din patru câmpuri, două pentru completarea datelor de contact și două pentru subiect si mesaj. Descrierea fiecarui câmp este realizată cu ajutorul tagului <span> în timp ce spațiile de completat sunt încadrate de <input> pentru a fi preluat ulterior de php. În interiorul câmpurilor de completat se află placeholderele reprezentate de indicațiile de completare.

Din punct de vedere estetic acesta are o funcție hover implementată în css ce produce o bordură cu grosimea de un pixel și o culoare verde, după cum se poate observa în dreptul câmpului mesaj.

Funcționalitate

Prin termenul de funcționalitate, făcând referire la un site ne gândim la lucrurile din spatele paginilor frumos aranjate pe care le zărim la prima vedere. Această activitate este denumită în domeniu backend, iar cel care o practică este responsabil de programarea elementelor pe care un utilizator normal nu le vede. În cazul de fața ne referim la formularul de comandă și formularul de contact.

Formular comandă

Pentru accesarea formularului de comandă de pe pagina magazin.php este suficientă poziționarea cursorului asupra produsului dorit. O funcție css va afișa peste poza originală cu produsul o altă poză de tip png reprezentând un coș de cumparaturi, lucru ce îndeamnă utilizatorul să apese pe aceasta.

Fig. 31 – Aplicație- Coș

Odată apăsat pe imagine, formularul order-form.html va apărea pe ecran. Acesta este un fișier separat existent în folderul includes și este stiilizat cu ajutorul fișierului css. Formularul apare centrat pe ecran sub forma unui popup, în timp ce opacitatea elementelor din spate este redusă pentru a direcționa atenția asupa acestuia.

Fig. 32 – Aplicație- Formular Comandă

După cum se poate observa și în imaginea de mai sus, aceasta conține numele produsului, cinci câmpuri pe care utilizatorul trebuie să le completeze cât mai corect și un buton de trimitere.

Spațiile destinate completării sunt create cu ajutorul unor divuri în interiorul cărora sunt adăugate taguri de tipul <imput> astfel încat browserul să știe că urmează să fie introduse date de către utilizator. <input type="email" name="orderemail" id="orderemail" class="gui-input" placeholder="Email"> funcția luată ca exemplu se referă la spațiul destinat completării adresei de email a utilizatorului. Funcția „imput tipe=”email””, face ca browserul să permită introducerea de caractere speciale precum „@” sau . (punct) spre deosebire de „imput tipe=”text”” ce se află în restul spațiilor, ce permite numai introducerea caracterelor alfabetice și a cifrelor. Numele și id-ul sunt necesare pentru prelucrarea datelor în timp ce „placeholder=”Email” plasează în câmpul de completat informații suplimentare despre datele ce trebuie introduse. În imaginea alăturată avem exemplu de cod necesar pentru câmpul Nume.

Fig. 33 – Cod- Formular Comandă

Pentru afișarea simbolurilor de dimensiune redusă în câmpurile de completat și peste tot pe site a fost adăugat în fișierul sursă al siteului în folderul assets, sub-folderul plugins, un instrument specializat denumit „Font Awesome”. Acesta conține câteva fișiere ce generează aceste „iconițe” a caror listă completă se află pe siteul dezvoltatorul. Aplicația este gratis de descărcat si folosit în scopuri comerciale.

Pentru trimiterea formularului de comandă trebuie completate corect toate câmpurile. Acesta este protejat din punct de vedere al securitații împotriva încercarii de a completa cod php pentru a produce pagube prin intermediul funcțiilor prezentate în imaginea urmatoare.

Fig. 34 – Cod- Formular Comandă securitate

Încercarea de trimitere a formularului fară a completa vreun spațiu va returna mesajul „Completati-vă prenumele” facând referire la prima valoare ce trebuie introdusă în tabel.

Fig. 35 – Aplicație- Trimitere comandă

Acest lucru este valabil și dacă utilizatorul omite completarea vreunui câmp, funcția recunoscând acest lucru și returând un mesaj corespunzator. În cazul spațiului destinat adresei de email trebuie completată o adresă corectă de forma exemplu@provider.zona fară de care se va afișa mesajul „ Nu ați introdus un email valid”. Acest lucru este posibil datorită funcțiilor JavaScript prezentate în imaginea de mai jos.

Fig. 36 – Cod- Trimitere comandă

După completarea tuturor câmpurilor în mod corespunzător și apăsarea butonului „Trimite comanda”, textul completat va dispărea și se va afișa mesajul „Email-ul a fost trimis cu succes!”. În cazul unei conexiuni proaste la internet sau pur și simplu a altor probleme de rețea se va afișa cu un font roșu textul „Ne pare rău dar email-ul nu s-a putut trimite!”

Fig. 37 – Aplicație- Trimitere comandă succes

Mai jos este prezentat codul JavaScript ce reprezintă continuarea imaginii cu cod de pe pagina anterioară. Acesta prezintă cele doua cazuri existente după completarea corectă a datelor și anume acela de reușită la trimiterea emailului sau nu.

Fig. 38 – Cod- Trimitere comandă succes

Toate aceste lucruri sunt posibile cu ajutorul unui protocol numit SMTP(Simple Mail Transfer Protocol) și o clasă numită PHP Mailer. Acesta reprezintă o alternativă profesională și mult mai securizată la funcția simplă mail din php, ce de altfel nu poate fi rulată pe un server offline de genul localhost folosit pentru dezvoltarea aplicației. Mai jos sunt prezentate cateva dintre setările de bază ce trebuie aduse fișierului smartprocess.php precum tipul de port dar și adresa de mail la care dorim sa fie trimise datele din formularul de comandă.

Fig. 39 – Cod- SMTP

Odată completat și trimis, informațiile din formularul de comandă sunt preluate și transmise pe mailul completat în secțiunea $mail->AddAdress.

Fig. 40 – Aplicație- Șablon email

Imaginea de mai sus reprezintă o captură a ecranului făcută în secțiunea imbox a adresei de mail destinată comenzilor. Email-ul apare cu numele completat de utilizator în formularul de comandă ca și subiect, pentru o mai ușoară organizare a comenzilor. Șablonul personalizat sub forma caruia apare mailul este dat de fișierul smartmessage.php ce conține pe langă cod HTML și sintaxe CSS precum cele din imaginea următoare.

Fig. 41 – Cod- Șablon email

Formular contact

Pe pagina contact.php se poate trimite un mesaj către deținătorul site-ului. Structura paginii este ușor diferită de cea regasită pe pagina magazin, de această dată completarea datelor făcandu-se direct pe pagina și nu prin intermediul unui popup. În imaginea următoare se regăsește codul HTML ce formează tabelul.

Fig. 42 – Cod- Formular Contact

Informațiile de tip text sunt introduse cu ajutorul atributelor <span>, iar casetele de completat au un tag de tipul <input> ce conține mai multe valori. Acestea fac referință la tipul inputului ce va fi introdus de la tastatură iar valoarea „text” permite introducerea caracterelor de tip text și cifre.

Spațiile ce trebuie completate capătă apoi aspect cu ajutorul funcțiilor css prezentate în imaginea de mai jos.

Fig. 43 – Cod- Formular Contact CSS

Asemănător formularului de pe pagina magazin, în cazul apăsării butonului de “send” fără a completa datele necesare browserul va afișa langă buton mesajul “completati-va numele!”, mutând automat cursorul în căsuța respectivă. Adresa de mail trebuie completată în mod corect, altfel va fi afișat mesajul “nu ati introdus un email valid!”. În imaginea următoare sunt prezentate funcțiile JavaScript ce realizează acest lucru.

Fig. 44 – Cod- Formular Contact câmpuri de completat

Câmpurile destinate completării de către utilizator sunt de asemenea protejate împotriva „injecțiilor” de cod php, ce poate dăuna paginii. După completarea corectă a tuturor câmpurilor și apăsarea butonului send se va afșa confirmarea trimiterii mesajului.

Fig. 45 – Aplicație- Formular Contact succes

Funcția JavaScript ce trimite formularul de contact după verificarea datelor menționate mai sus este următoarea.

Fig. 46 – Cod- Formular Contact PHP

Asemeni formularului de comandă, informațiile trimise vor fi primite pe adresa de mail completată in câmpul dedicat din fișierul smartprocess.php sub forma unui șablon. Numele completat de utilizator va apărea ca subiect în mailul primit.

Fig. 47 – Aplicație- Șablon Contact

Acest șablon este definit în interiorul fișierului smartmessage.php prin intermediul sintaxelor HTML. Pentru modificarea aparenței acestuia se folosește tehnica de introducere a funcțiilor css de tipul style direct în liniile de cod HTML. Întregul șablon este construit sub forma unui tabel cu ajutorul funcției <table> după cum se poate observa și în secvențele de cod din imaginea următoare.

Fig. 48 – Cod- Șablon Contact

Expedierea emailului este efectuată folosind protocololul SMTP. În cazul de față este folosit un cont de Google creeat special pentru acest scop. Stabilind credențialele contului și portul pe care se va executa acest protocol, clasa PHPMailer se va conecta la această adresa Google și va trimite mail-ul. De aceea, aceast cont de google va apărea tot timpul ca expeditor al email-ului, deși aplicația încearcă să mascheze acest lucru prin atribuirea numelui venit din formularul de comandă în dreptul acestei adrese.

Google nu permite o mascare completă din motive de securitate, neputându-se înlocui adresa de SMTP folosită în trimiterea email-ului cu adresa de email venită din formularul de comandă.

Fig. 49 – Cod- PHPMailer

Design versatil

Fig.50 – Imagine de prezentare – Responsive [Fig. 50]

Odată cu evoluția tot mai rapidă a tehnologiei și a dispozitivelor capabile să lege o conexiune la internet a apărut și nevoia unui design versatil al paginilor web. De la apariția primelor siteuri în anii nouăzeci și până în prezent tehnologia web a evolual mult mai rapid decât ar fi putut cineva prezice. Odată cu apariția telefoanelor inteligente și a tabletelor a apărut și necesitea adaptării siteurilor web pentru a putea fi încadrate pe rezoluția mică pe care acestea o oferă.

„Controlul pe care designerii îl cunosc intr-un mediu printabil și de cele mai multe ori îl doresc în mediul web, este pur și simplu o funcție ce limitează pagina printată. Ar trebui să îmbrațisăm faptul că mediul web nu are asemenea constrângeri și să optăm spre flexibilitate.”[ADWD00].

Designul web Responsive după cum este denumit, se referă la folosirea codurilor HTML și CSS pentru a predimensiona, ascunde, micșora, mări, sau muta elementele componente ale unei pagini web astfel încât aceasta să arate bine pe orice fel de rezoluție a oricărui dispozitiv.

În aplicația prezentată deoarece a fost folosit CSS versiunea a treia, aceasta fiind ultima versiune, versatilitatea siteului este introdusă prin regula predefinită „@media”.

Fig. 51 – Cod – Responsive

Mai sus este o imagine ce prezintă funcția “@media” aplicată pentro o rezoluție de 640 px. Practic această funcție îi dictează browserului că atunci când accesează aplicația pe un dispozitiv cu o rezoluție mai mică de 640 de pixeli să anuleze regulile anterioare și să le aplice pe cele ce urmează.

În cazul aplicației prezentate au fost implementate funcții pentru a servi mai multor rezoluții. Din punct de vedere al une rezoluții cât mai mari, teoretic aceasta poate să tindă la infinit. Cu cât displayul dispozitivului este mai mare cu atât va prezenta mai multe elemnte o dată, pană la punctul în care pagina va fi încărcată complet fară a mai fi nevoie deplasarea utilizânt bara de scroll. Dupa acest punct se va mări doar spațiul dintre marginea fizică a dispozitivului și elementele componenete ale paginii web.

În cazul unei rezoluții minime au fost implementate setări ce cuprind cele mai populare rezoluți pentru dispozitivele mobile cu valori cuprinse între 1024px și pană la o rezoluție minimă de 320px, aceasta reprezentând pragul inferior.

Fig. 52 – Cod – Responsive 320px

În cazul secțiunii header a siteului web se poate observa că o dată cu scăderea rezoluției, logoul siteului se va redimensiona și va ramâne mereu încadrat în centru, indiferent de imaginea de fundal.

Fig. 53 – Aplicație – Logo

După cum se poate observa în cazul unei rezoluți de 578 px, ce reprezintă lațimea, imaginea de fundal a scăzut pană la punctul în care elementele grafice ce o compun nu mai puteau fi destinse, trecând astfel la funcția de crop. Această funcție a decupat imaginea și a aranjat textul logoului în așa fel încat să nu deranjeze vizual utilizatorul.

Acest lucru este posibil și datorită faptului ca textul ce compune logoul în codul HTML este îngrădit în atributele <span> și poate fi accesat independent.

Fig. 54 – Aplicație – Meniu responsive

În imaginea de mai sus se poate observa meniul și prima componentă a corpului paginii. Acestea sunt prezentate la o rezoluție normală de 1440 de pixeli. Pană la pragul de 768 pixeli meniul va ramâne intact deoarece până la această rezoluție încă este vizibil în totalitate pe ecran, în tmp ce corpul paginii va aranja cele patru coloane din poziția orizontal în verticală.

Fig. 55 – Aplicație – Meniu responsive 2

Sub pragul de 768 px meniul se va restrânge și va fii înlocuit de un buton ce va activa funcția de dropdown după cum se poate observa în imaginile următoare.

Fig. 56 – Aplicație – Meniu responsive 3

Pentru a se putea vizualiza meniul se va accesa iconița reprezentativă ce va activa funcția dropdown. Această funcție va dispune meniul vertical astfel încât toate paginile componente să poată fii accesate fară a utiliza funcția de scroll la. Lucru ce poate fi observat în imaginea următoare.

Fig. 57 – Aplicație – Meniu responsive extins

În urma modificarii rezoluției, elementele componente ale paginii își vor schimba decât poziția si mărimea. Efectele aplicate vor ramâne aceleași, acestea nefiind afectate de scalările produse. O excepție de la acest lucru este repezentată de meniu. Acesta este reorganizat cu totul după cum se poate observa în imaginea de sus, diferind pe versiunea mobilă fața de versiunea desktop.

Fig. 58 – Aplicație – Meniu responsive CSS

Secțiunea de subsol a fiecărei pagini ce conține meniul secundar în partea stangă si drepturile de autor în partea dreaptă este programată să despartă cele două elemente și să le poziționeze separat. Pentru această secțiune au fost aplicate reguli de compoziție pentru cele trei rezoluții majore: desktop, tabletă și dispozitive mobile reprezentate de valoriile 640, 480 si 320 de pixeli.

Fig. 59 – Aplicație – Subsol responsive

Mai sus se poate observa dispunerea elementelor pentru o rezoluție mai mare de 640 de pixeli iar mai jos pentru o rezoluție mai mică decat valoarea menționată.

Fig. 60 – Aplicație – Subsol responsive 2

De asemenea pentru o rezoluție mai mică decât valoare minimă menționată mai sus, elementul din stânga reprezentând meniul secundar, se va despărți în cinci elemente separate ce vor fii ulterior poziționate în funcție de rezoluția dispozitivului după cum se poate observa în imaginea următoare.

Fig. 61 – Aplicație – Subsol responsive 3

În cazul corpului paginilor componente, imaginile își vor păstra dimensiunea inițială până la pragul de 1024 pixeli. Sub această dimensiune unele imagini se vor mări deoarece dispunerea lor pe coloane orizontale se va modifica și acestea vor fi prezentate pe verticală. De exemplu o imagine cu o lățime de 600 de pixeli se va mări cu aproximativ 40 de procente pentru a ocupa întregul spațiu din corpul paginii de 1024 pixeli. Sub rezoluția aceasta va începe să se micșoreze până la rezoluția minimă. Acest lucru se poate observa în imaginile următoare.

Fig. 62 – Aplicație – Corp responsive

Fig. 63 – Aplicație – Corp responsive 2

Fig. 64 – Aplicație – Corp responsive 3

Acest lucru este posibil datorită fișierului style.css sau mai precis a funcțiilor „@media” existente în acesta. Conform regulilor de citire a fișierelor CSS utima regulă citită este afișată. Această funcție însă face excepție fiind apelată numai în cazul în care browserul sesizează că este nevoie, aceasta fiind însă trecută de obicei la sfârșitul fișierului.

Textul prezent pe toate cele cinci pagini componente este programat în CSS să se rearanjeze pe pagină în funcție de dimensiunea ecranului. Fiecare cuvânt din propoziție se repoziționează pe rândul următor păstrând paragrafele și alineatul corespunzător.

Fig. 65 – Aplicație – Text responsive

După cum se poate observa în cazul textului informativ din cadrul paginii despre.php o dată cu micșorarea paginii, propozițiile se vor repoziționa convenabil până la limita inferioară de 320 de pixel. După depașirea acestei limite fontul textului începe să se micșoreze.

Fig. 66 – Aplicație – Text responsive 2

Concluzii

După munca depusă și experiența căpătată în urma realizării acestui proiect, pot spune că sunt relativ mulțumit de rezultatul obținut, atât din punct de vedere funcțional cât și vizual. Am realizat că pentru a duce la bun sfârșit un proiect este nevoie de un plan bine consolidat. Trebuie construită o schemă a ceea ce ne dorim să realizam și stabilite obiective. Fără acest lucru se vor pierde din vedere lucruri esențiale.

Existența programelor de specialitate aduc o contribuție majoră în realizarea aplicațiilor web. Fără acestea procesul de creere ar fi durat mult mai mult și probabil nici rezultatul obținut nu ar fi fost unul la fel de satisfăcător. Totodată și dezvoltarea tehnologică pe care au atins-o aceste aplicații într-o perioadă foarte scurtă de timp este de asemenea foarte uimitoare. Anumite elemente existente în această aplicație nu ar fi fost posibile fără acestea.

În urma realizării designului paginilor web am fost nevoit să studiez reguli de compoziție și complementaritate a culorilor și a formelor. De asemenea și tehnici de amplasare a conținutului astfel încât acesta să nu fie obositor pentru ochi, lucru ce consider că îmi va fi foarte folositor în viitor.

În cele din urmă am concluzionat că orice proiect poate fi dus la bun sfârșit cu condiția de a lucra cu seriozitate și cu o bună organizare a modului de lucru.

Bibliografie

[ADWD00]- John Allsopp © 07, 2000 A Dao of Web Design

[AWSS06]- CSS Mastery: Advanced Web Standards Solutions by Cameron Moll 2006

[SJ04]- Simply JavaScript, Kevin Yank 2004

[TM08]- Professional CodeIgniter, Thomas Myer

[JB07]- The Principles of Beautiful Web Design, Jason Beaird

[WSS04]- Web Standards Solutions: The Markup and Style Handbook, Dan Cederholm

Referințe web

[Fig1]- nfinityweb.com

[Fig2]- www.phptpoint.com

[Fig3]- http://learnwebcode.com/what-is-css/

[Fig4]- http://www.c-sharpcorner.com/

[Fig5]- www.edureka.co

[Fig13]- www.jhoenshing.com

[Fig50]- webways.ro

http://www.w3schools.com/hTml/html_intro.asp

https://ro.wikipedia.org/wiki/HyperText_Markup_Language

http://tutorialehtml.com/

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

http://www.w3schools.com/css/

https://www.jademy.ro/bootcamp/

http://www.w3schools.com/Php/

https://ro.wikipedia.org/wiki/PHP

https://www.youtube.com/watch?v=0tj6VLuSowQ

Codul sursă

<!– header –>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<ul>

<li <?php if(basename($_SERVER['PHP_SELF']) == 'index.php') { echo 'class="active"'; } ?>><a href="index.php">Acasa</a></li>

<li <?php if(basename($_SERVER['PHP_SELF']) == 'despre.php') { echo 'class="active"'; } ?>><a href="despre.php">Despre</a></li>

<li <?php if(basename($_SERVER['PHP_SELF']) == 'tutoriale.php') { echo 'class="active"'; } ?>><a href="tutoriale.php">Tutoriale</a></li>

<li <?php if(basename($_SERVER['PHP_SELF']) == 'magazin.php') { echo 'class="active"'; } ?>><a href="magazin.php">Magazin</a></li>

<li <?php if(basename($_SERVER['PHP_SELF']) == 'contact.php') { echo 'class="active"'; } ?>><a href="contact.php">Contact</a></li>

</ul>

</div>

$("span.menu").click(function(){

$(".top-menu ul").slideToggle(500, function(){

});

</script>

</div>

</nav>

<!– header –>

<!- footer ->

<ul>

<li><a href="index.php">Acasa</a></li>

<li><a href="despre.php">Despre</a></li>

<li><a href="tutoriale.php">Tutoriale</a></li>

<li><a href="magazin.php">Magazin</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</div>

<p><a href="#">© +ARROW 2016</a> | Vlad Stoica</p>

</div>

</div>

<!– footer –>

<!– jquery modal functionality –>

<!– custom js scripts –>

<!– jQuery (necessary for Bootstrap's JavaScript plugins) –>

new WOW().init();

</script>

<!– Custom Theme files –>

<!– Custom Theme files –>

</script>

CSS

body{

font-family: 'Droid Sans', sans-serif;

}

body a{

transition:0.5s all;

-webkit-transition:0.5s all;

-moz-transition:0.5s all;

-ms-transition:0.5s all;

-o-transition:0.5s all;

}

/*–– slider-caption ––*/

.slider{

background:url(../images/header-bg.jpg)0px 0px no-repeat;

width:100%;

min-height:600px;

display:block;

padding:14em 0 0;

}

.slider-caption{

text-align:center;

}

.slider-caption h1{

font-size:8em;

text-transform:uppercase;

font-weight:900;

margin:0;

padding:0;

color:#FFF;

}

.slider-caption h1 span{

color:#008e10;

}

.slider-caption h2{

font-size:3em;

text-transform:uppercase;

font-weight:900;

margin:0;

padding:0;

color:#FFF;

}

.slider-caption h3{

font-size:2em;

text-transform:uppercase;

font-weight:900;

margin:0.5em 0 0 0;

padding:0;

color:#FFF;

}

.slider-caption h3 span{

color:#008e10;

}

/*–sticky-navigation–*/

.header{

z-index: 9;

}

.sticky-navigation

{

background: #FFF;

font-size: 1.2em;

text-transform: uppercase;

border-bottom:1px solid #EEE;

}

.sticky-navigation.stuck

{

position: fixed;

top: 0;

box-shadow: 0 2px 4px rgba(0, 0, 0, .2);

}

.sticky-navigation ul{

list-style-type: none;

margin:0;

padding:0;

}

.sticky-navigation .top-menu{

float:left;

}

.sticky-navigation ul li

{

display: inline;

}

.sticky-navigation a

{

padding: 1em;

color: #222;

text-decoration: none;

display: inline-block;

font-weight:700;

}

.sticky-navigation ul li a:hover,.sticky-navigation ul li.active a{

color:#008e10;

}

.sticky-navigation div.top-search{

float: right;

margin-top: 0.6em;

position: relative;

width: 29%;

}

.sticky-navigation div.top-search input[type="text"]{

border: 1px solid #EEE;

outline: none;

position: relative;

padding: 0.36em;

width: 73%;

transition: border-color 0.4s;

-webkit-transition: border-color 0.4s;

-moz-transition: border-color 0.4s;

-ms-transition: border-color 0.4s;

-o-transition: border-color 0.4s;

color:#008e10;

-webkit-appearance:none;

}

.sticky-navigation div.top-search input[type="text"]:hover{

border-color:#008e10;

}

.sticky-navigation div.top-search input[type="submit"]{

background:#008e10;

color:#FFF;

font-weight:700;

text-transform:uppercase;

border:none;

outline:none;

padding:0.4em 0.8em;

position:absolute;

font-size:1em;

display:inline-block;

right:0;

transition:0.5s all;

-webkit-transition:0.5s all;

-moz-transition:0.5s all;

-o-transition:0.5s all;

-ms-transition:0.5s all;

}

.sticky-navigation div.top-search input[type="submit"]:hover{

background:#000;

}

.fixed {

position: fixed;

top: 0;

width: 100%;

margin: 0 auto;

left: 0;

}

/*––menu––*/

.sticky-navigation span.menu:before{

content: url(../images/menu1.png)no-repeat 0px 0px;

cursor:pointer;

width:100%;

}

.sticky-navigation span.menu{

display: none;

}

/*–responsive */

@media(max-width:768px){

.sticky-navigation ul{

position:absolute;

width:100%;

z-index: 9999;

left: 0%;

margin: 0em 0em;

background:#008e10;

}

.sticky-navigation span.menu {

display: block;

width: 100%;

position: relative;

text-align: right;

padding: 14px 1em 0;

}

.sticky-navigation ul li{

display: block;

float:none;

padding: 0.8em 0;

text-align: center;

}

.sticky-navigation ul li a,.sticky-navigation ul li.active a{

color:#fff;

padding:0;

margin:0;

}

.sticky-navigation ul li a:hover{

color:#000;

}

/*–sticky-navigation–*/

/*–– top-grids ––*/

.top-grids{

padding:4em 0 3.5em;

}

.top-grid{

margin-bottom:1em;

}

.top-grid h4 a{

text-transform:uppercase;

font-weight:700;

font-size:1.1em;

text-decoration:none;

}

.top-grid h4 a:hover{

color:#008e10;

}

.top-grid p{

color:#777;

font-size:1em;

line-height:1.7em;

}

CD / DVD

Autorul atașează în această anexă obligatorie, versiunea electronică a aplicației, a acestei lucrări, precum și prezentarea finală a tezei.

Index

A

Aplicații utilizate………………………………………7

Arhitectura paginilor………………………………..15

B

Bibliografie 9

C

CUPRINSUL xi

Centralizarea elementelor…………………………12

D

Dimensiuni 3

Design verlsatil……………………………………….38

F

Formulele comandă 28

Formular contact……………………………………..34

I

Ilustrațiile 4

Introducere în web…………………………………….1

L

LISTA FIGURILOR xii

M

Motivația…………………………………………………1

O

Organizarea fișierelor………………………………10

Orgaizarea Aplicației………………………………..9

R

Referințe web 10

S

Stabilirea structurii 2

Scopul……………………………………………………..1

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Aplicație multimedia on-line specializată tip all-in-one Vlad Stoica COORDONATOR ȘTIINȚIFIC Conf. dr. ing. Daniela DANCIU Iulie 2016 CRAIOVA… [302024] (ID: 302024)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Aplicație multimedia on-line specializată tip all-in-one Vlad Stoica COORDONATOR ȘTIINȚIFIC Conf. dr. ing. Daniela DANCIU Iulie 2016 CRAIOVA… [302024]

Copyright Notice

CAPITOLUL 1. N OȚIUNI T EORETICE PRIVIND ANALIZA [624716]

See discussions, stats, and author profiles for this publication at: [630570]

INVESTIGATII GEOTEHNI CE IN SITU Tema nr. 18 Tema 1 – Interpretarea datelor SPT Tema 2 – Interpretarea datelor PD Tema 3 – Interpretarea datelor CPT… [625756]

ABREVIERI ………………………….. ………………………….. ………………………….. ………………………….. …. 5… [616359]

Articol: Biomaterials based on chitin and chitosan in wound dressing applications [308872]

Proiect de Diplomă [609297]

Copyright Notice

Similar Posts