CATEDRA „MATEMATICĂ ȘI INFORMATICĂ” CRINTEA NINA IMPORTANȚA RESPECTĂRII PRINCIPIILOR DE DESIGN ALE INTERFEȚELOR PENTRU SITE-UL LICEULUI TEORETIC,,ION… [308164]

Byadmin

UNIVERSITATEA DE STAT „B. P. HASDEU” DIN CAHUL

FACULTATEA „ECONOMIE, INGINERIE ȘI STINTE APLICATE”

CATEDRA „MATEMATICĂ ȘI INFORMATICĂ”

[anonimizat],,ION CREANGĂ” s. ZÎRNEȘTI

TEZĂ DE LICENȚĂ

Domeniul: 14 Științe ale Educației

Specialitatea: Informatică și Matematică

Conducător științific:_____________[anonimizat] (Semnatura)

Autor:__________________

(Semnatura)

Depusă la catedră la ”____”_____________20___

ADMISĂ SPRE SUSȚINERE

Șef catedră:

[anonimizat]

________________________

”____”______________20___

CAHUL – 2017

AVIZ

(PROIECTUL) DE LICENȚĂ

cu tema ___________________________________________________________________________

______________________________________________________________________________________________________________________________________________________,

elaborată de ________________________________________________________________,

(numele, prenumele student: [anonimizat](ei))

specialitatea ________________________________________________________________

Evaluarea componentelor generale a tezei de licență (de an):

1. Oformarea tezei de licență (de an) (nu mai mult de 10 puncte) ______

___________________________________________________________________________(comentariile conducătorului)

2. Respectarea graficului elaborării tezei de pe capitole (nu mai mult de 10 puncte) _______

___________________________________________________________________________

(comentariile conducătorului)

3. Aspecte teoretice și analitice a tezei de licență (de an) (nu mai mult de 35 puncte) _______

___________________________________________________________________________

___________________________________________________________________________

(comentariile conducătorului)

4. Aspecte practice a tezei de licență (de an) (nu mai mult de 30 puncte) _________

___________________________________________________________________________

___________________________________________________________________________

(comentariile conducătorului)

5. [anonimizat] (nu mai mult de 15 puncte) __________

___________________________________________________________________________

___________________________________________________________________________

(comentariile conducătorului)

Total puncte _____________

Comentarii generale a conducătorului științific _____________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

Conducătorul științific_________________________________________________________

(funcția, gradul științific), (numele, prenumele)

Data___________________ Semnătura_____________________________

DECLARAȚIE DE INTEGRITATE A TEZEI

Prin prezenta declar că teza (proiectul) de licență cu tema

„_____________________________________________________________________________

(tema completă a tezei)

_____________________________________________________________________________

_____________________________________________________________________________”

[anonimizat] a mai fost prezentată niciodată la o altă facultate sau instituție de învățământ superior din țară sau străinătate, toate sursele utilizate, inclusiv cele de pe Internet, sunt indicate în lucrare, cu respectarea regulilor de evitare a plagiatului:

toate fragmentele de text reproduse exact, chiar și în traducere proprie din altă limbă, sunt scrise între ghilimele și dețin referința precisă a sursei;

reformularea în cuvinte proprii a textelor scrise de către alți autori deține referința precisă;

rezumarea ideilor altor autori deține referința precisă la textul original.

___________________________________

(numele, prenumele persoanei care declară)

_____________________________

(semnătura persoanei care declară)

Data

CUPRINS

INTRODUCERE…………………………………………………7

PRINCIPII DE DESIGN ……………………………………

1.1. Design………………………………………………………………………………………

Linie……………………………………………………………………………………..

Formă………………………………………………………

Layout…………………………………………………

Compoziție…………………………………………

1.2. Culori. Asociații de culori. Semnificații………………………………..

1.3. Elemente de tipografie……………………………………

Margini…………………………………………………………

Coloane…………………………………………………………

Paragrafe………………………………………………………….

Fonturi……………………………………………………

1.4. Implimentarea tehnică. Tipuri de interfețe……

1.5. Marketing………………………………………………………

1.6. Concluzii la capitolul 1………………………………

2. TEHNOLOGII FOLOSITE ÎN DEZVOLTAREA APLICAȚIILOR WEB ȘI SOFTWARE

2.1. Aplicatii web Design………………………………

2.1.1. Adobe Photoshop CS3………………………………………

2.1.2. Corel DRAW……………………………………………………

2.2. Aplicatii web și dezvoltarea paginilor…………………

2.2.1. PHP și MySQL………………………………………………

2.2.2. ASP.NET……………………………………………………

2.2.3. HTML – HyperText Markup Language ……………………

2.2.4. CSS………………………………………………

2.2.6. JavaScript……………………………………………………

2.2.7. Ajax și jQuery…………………………………………………

2.2.8. Flash………………………………………………………

2.2.9. ActionScript …………………………………………………

2.2.10. SQL…………………………………………………………

2.3. Dezvoltator de website-uri Joomla…………………………….

2.4. Concluzii la capitolul 2………………………………………………

3. SITE-UL LICEULUI TEORETIC ,, ION CREANGĂ”……………………..

3.1. Crearea bazei de date folosind XAMPP ……………………

3.2. Instalare joomla pe server………………………………………….

3.3. Conținutul site-ului. Categorii și articole. ………………………

3.4. Designul și structura site-ului ………………………………………………

3.5. Concluzii la capitolul 3………………………………………….

CONCLUZII GENERALE ȘI RECOMANDĂRI………………………..

BIBLIOGRAFIA……………………………………………………………………………..

INTRODUCERE

În prezent nu mai este necesar de explicat ce este Internet-ul. Cei mai mulți oameni, care se ocupă cu business-ul, știința, producția, într-un mod sau altul, au o închipuire despre aceasta. De regulă, obiectivele de succes ai unui site sunt specifice domeniului de activitate în care se desfășoară. În această lucrare de licența voi prezenta detaliat despre cum se realizează un site respectînd principiile de design ale interfețelor unui site, despre ce să se tină cont atunci când se face o interfața web. Voi revizui principiile de proiectare pentru site-urile de interfața web: aspectul, culoarea, tipografie și limitările tehnologiilor web și modul de implementare tehnică a design-urilor.Pe parcursul lucrării voi accentua im-portanța accesibilitățiilor site-urilor web. Calitatea unui site web poate fi determinată pe baza vizuală, tehnice (programare) și conținut. Proiectantul trebuie să aibă cunoștințe anterioare de un grad destul de ridicat de tehnologii, cum ar fi HTML, CSS, JavaScript sau Flash. Aceste tehnologii sunt folosite ca mijloc de expresie artistică pe internet. Orice interfața web este inițial o imagine statică unde este apoi transformată într-o prezentare web interactiv a unui produs, companie, instituție sau altă entitate, fizică sau teoretică. Pentru a face o interfața web se necesită cunoașterea diferitelor ramuri desprinse din artele vizuale și tehnologie. Prin adâncirea domeniilor, cum ar fi tipografie, design, culori și forme de studiu, realizarea unei interfețe este facilitată în mod considerabil, iar rezultatele sunt superioare, exprimate prin satisfacția vizitatorilor site-ului și a clientului. Interacțiunea dintre utilizatori cu diferite dispozitive pentru a naviga pe Internet, este foarte important în designul de interfața și cum să navigheze pe site. Mouse-ul și tastatura sunt comune pentru a naviga pe Internet, dar tehnologiile încep să se miște spre interacțiune prin senzori tactili, comenzi vocale și așa mai departe. Lucrarea este foarte bine structurată, conține o introducere, trei capitole: Principii de design; Tehnologii folosite în dezvoltarea aplicațiilor web și software; Site-ul liceului teoretic ,,Ion Creangă”, concluzii, bibliografie.

Scopul lucrării  îl constituie să descriu și să demonstrez importanta principiilor de web design și realizarea site-ului web care oferă informație despre Liceul Teoretic ,,Ion Creanga” din s. Zîrnești, concomitent mai multor persoane, din orice colt al lumii. Pe site-ul web va fi posibilitatea să găsiți informația de care aveți nevoie în volum mai mare, în termen mai scurt și foarte comod în același timp.

Obiectul de studiu:

Ca obiect de studiu a servit crearea siteului web a Liceului Teoretic „ Ion Creangă„ din s. Zîrnești.

Metodologia cercetării:

Documentarea teoretică mi-a oferit o imagine clară asupra teoriilor emise și fundamentale din cadrul didactic asupra principiilor de design ale interfețelor. Temelia teoretică a metodologiei de cercetare utilizate o constituie analiza și sinteza cărților și lucrărilor funda-mentale ale lui: Jason Beaird,  Stefan Tanasa,  Stefan Andrei, Cristian Olaru,  Teodoru  Gugoiu, Браун С,   Дж.  Мэрриотт,  Фролов  А.В.,  Фролов Т.В.

Volumul și structura lucrării:

Lucrarea cuprinde introducere, trei capitole, concluzii generale și recomandări, bibliografie și anexe. Textul tezei este expus în limba rămână. În introducere este argumentată actualitatea temei, scopul și obiectivele.Deasemenia este argumentat rolul importanta respect-tării principiilor de design ale interfețelor pentru site-ul liceului teoretic ,, Ion Creanga” s. Zirnesti la momentul actual.

În capitolul 1: Principii de design este inclusă elaborarea teoretică a temei, aspecte generale despre design, culori, elemente de tipografie, implimentarea tehnică, marketing.

Capitolul 2: Tehnologii folosite în dezvoltarea aplicațiilor web și software cuprinde descrierea a mai multor aplicații, platforme și programe utilizate pentru creare paginilor web

Capitolul 3: Realizarea aplicației practice, creara siteului web include nemijlocit partea practică unde s-au elaborat tehnici de analiză a datelor și organizarea lor într-o structură flexibilă și stabilă.

Concluziile finale cuprind păreri generale în legătură cu cunoștintele obținute prin redactarea acestei lucrări și viziunea autorului cu privire la rolul și necesitatea respectării principiilor de design ale interfețelor și rolul crearii siteurilor web pentru toate generațiile care au absolvit sau care încă sunt elevi în incinta liceului care ajută la obținerea unor informații mai rapide și utile.

PRINCIPII DE DESIGN

În general, fiecare site-ul web ar trebui să fie unic, de a avea elemente distinctive de proiectare, conținut sau alte funcționalități furnizate de către utilizatori. Proiectantul are datoria de a oferi o singură interfață cu culori, fonturi și aspect utilizat. Un site bine realizat vizual are o interfață adecvată cu conținut prezentat de specificitatea ei și este conceput pentru a transmite mesajul dorit de producător sau client. Mai mult decât atât, o interfață trebuie să fie accesibilă și să aibă schimbări dinamice pentru a facilita nivelul ulterior de conținut și funcționalitate. Oricine poate să învețe tehnicile creării unei pagini Web. Și oricine poate să creeze o pagina Web urîtă. Totuși singurul motiv pentru care atîtea persoane realizează pagini web slabe este faptul ca nu cunosc principiile de baza ale designului. Noțiunile de “interfață” și “navigare”sunt importante în realizarea unui design atrăgător, dar necesita și un pic de gîndire și planificare. Conceptele utilizate sunt lucruri foarte simple, care vor schimba rapid și cu ușurința banalele pagini Web, în pagini cu aspect mult mai profesionist. Sunt multe aspecte de luat în calcul caînd vine vorba de web design, mai ales în procesul de creare site web, de la utilizarea unui wireframe pentru a desena un schelet și ideea de baza a unui site web și pînă la alegerea potrivita a culorilor, a tipografiei sau a dimensiunii site-ului etc. Lumea designului web este vasta, tendințele în web design vin și se duc și întotdeauna apare o nouă modalitate de a îndeplini o sarcină. În continuare vor fi descrise care sunt noțiunile de bază și de ce anume vom ține cont în etapa de creare site web.[2]

Design

Dacă ai lucrat cu CSS, atunci ești probabil familiarizat cu utilizarea de pixeli ca unitate de măsură. Un pixel (prescurtarea pentru "pictura element") este una dintre sutele de mii de puncte de pe ecranul computerului. Dacă rezoluția este setată la 1280×1024 pixeli  ave-ți 1.310.720 pixeli pe ecran aranjate în 1.024 rânduri și coloane 1.280. Toți acești pixeli vin împreună pentru a crea o imagine digitală. Acest lucru sunt cunoștințele tehnice foarte elementare, dar așa cum suntem pe cale să vedem, se aplică în mod specific conceptul de puncte în design grafic.La fel ca și pixelul este elementul fundamental al imaginilor digitale, punctul (sau punct) este elementul fundamental al designului grafic, și poate fi folosit pentru a construi orice element grafic. Punctele nu au nici o scală sau dimensiune, cu excepția cazului în care au un cadru de referință. De exemplu, un punct de pe un panou imens ar putea arata ca o perioadă, dar de aproape este probabil, aproximativ la fel de mare ca și capul tău. Atunci când punctele sunt grupate împreună, ca în figura 1.1. ele pot crea linii, forme și volum. Chiar dacă există doar un singur punct pe o pagină goală omul are tendință la nivel perceptual de a subînțelege liniile, fără ca acestea sa fie trasate. În cazul în care există două puncte, imediat ochiul va face o conexiune și se va vedea o linie. În cazul în care există trei puncte este inevitabil să nu le interpreteze ca un triunghi, mintea furnizează conexiuni.[1, pag. 82]

Linie

Când sunt conectate două sau mai multe puncte, ele formează o linie. Linia este elementul cel mai comun de design grafic și se numără printre cele mai expresive. Atunci când proiectarea site-uri web cei mai mulți oameni consideră că doar liniile pentru frontiere CSS sau sublinieri pentru hyperlink, dar liniile pot fi utilizate în nenumărate moduri în creațiile tale web. Atunci când o linie este diagonală, ea evocă un sentiment de mișcare și de emoție. Ca un domino care este în mijlocul de cădere, o linie diagonală are un potențial energetic. Cu ajutorul unui model de linii orizontale, ca element de fundal oferă textură și interes pentru un design, dar folosind un motiv de linii diagonale va face design-ul să se simtă un pic mai mult "pe margine", provocând ochii utilizatorilor să se miște în jur constant. Se compară cele două exemple în Figura 1.2.  Ceea ce atrage atenția mai mult succes?

Figura 1.2. Fundaluri create utilizând linii diagonale și orizontale

Doar că liniile diagonale sugerează mișcare, modificarea grosimii și direcției unei linii generează un sentiment de exprimare și de caracter. Liniile mișcate cu unghiuri ascuțite se pot simți periculoase și frenetic. Ușor de rulare, liniile curbe tind să se simtă relaxante și netede. Liniile care cuprind unghiurile de 90 de grade tind să se simtă ascuțite și mecanice. În cele din urmă, liniile cu o mulțime de curbe și unghiuri transmite expresivitate; de exemplu, scrierii de mână, graffiti, și schițe. Atunci când lucrezi la stadiul de prototip de dezvoltare a unui site web, încearcă să țină cont de faptul că liniile sunt mult mai utile decât fiind separatoarele, frontierele și dungile. Ei sunt temelia artei, desenului și design. Pe măsură ce Web-ul este un astfel de mediu rigid și tehnic este ușor să uităm despre instrumentele de artă fundamentale, cum ar fi stilourile și periile. Așa că încercați să creați variații în calitatea unei linii, fie prin scanarea în unele dintre propriile tale eforturi artistice tradiționale sau cu ajutorul periilor predefinite într-un program cum ar fi Adobe Ilustrator, așa cum am în figura 1.3. Aceasta este o modalitate foarte bună de a aduce un simț tradițional artistic într-un mediu care este uneori prea digital.

Figura 1.3. Experimentând calitatea, direcția și grosimea liniei

Un exemplu foarte bun de variație a liniei poate fi văzută în site-ul idealiștii din figura 1.4. Observați combinația de linii foarte subțiri asociate cu linii groase grele, cum ar fi negru.

"Cum funcționează" benzile în centrul paginii, iar barele colorate de mai sus, navigarea principală. Rețineți de asemenea, utilizarea ludică a modelului în zigzag sub logoul și pe site, repetarea acestui model, atât pe orizontală cât și pe verticală, ajută la unificarea design-ului, împreună cu schema de culori consistente. [1, pag. 83]

1.2.2. Formă

De fiecare dată când cele două puncte de capăt ale unei linii vin împreună, se creează o formă. Probabil puțin mai pot adăuga la cunoștințele de forme geometrice de bază: cercuri, triunghiuri și dreptunghiuri. Săgeți, stele, diamante, elipse, plus semne, semicercuri, și mai sunt geometrice cât de bine Figura 1.5. ilustrează câteva dintre ele. Cele mai precise curbe, unghiuri și linii drepte implicate în forme geometrice le face dificil de a trage de mână, dacă nu aveți o busolă, pro tractor și conducător. Pe un computer deși, definite geometric linii, curbe și unghiuri sunt de obicei formele implicite în orice program-imagine creare. Din acest motiv, aceste tipuri de forme au o reputație de senzație tehnică și mecanică.

Figura 1.5. Forme geometrice și cu formă liberă

Cealaltă categorie principală de formă este organică sau cu formă neregulată. Formele cu formă liberă sunt mai abstracte decât formele geometrice și constau din curbe non geometric, unghiuri aleatoare și linii neregulate, așa cum se poate observa în figura 1.5. formele au o natură cu formă liberă cu curgere liberă, care transmite un sentiment de informalități și spontaneitate. Ele pot reprezenta conturul unui produs, gesturi umane sau o mâzgălitură organică. Figura 1.6 reprezintă transformarea treptată a unei forme geometrice într-o formă cu formă neregulată.

Figura 1.6. Transformarea unei forme geometrice într-una organică

Când vine vorba de design, multi oameni par să uite că există forme cu formă liberă. Spre deosebire de design de imprimare, ceea ce ne dă libertatea de a desena oricare forme de aspect ne place, Web-ul ne limitează la dreptunghiuri. Cu toate acestea, deși blocurile care conțin pot fi dreptunghiulare, asta nu înseamnă că trebuie să se uite dreptunghiular. Una dintre cele mai comune metode putem folosi pentru a ascunde sub forma de bază a unui element HTML este de a da o imagine de fundal. Ai putea folosi un cerc sau un oval ca imagine de fundal, apoi în centru toate pauzele de linie de înserarea unui text în cazul în care este necesar, pentru a crea iluzia că aveți un bloc de text circular în aspect. Figura 1.7. prezintă un exemplu al acestei abordări. Problema este că, dacă textul dvs. se extinde dincolo de partea de jos a ovalului sau dacă uitați să înserați o pauză de linie undeva ovalul nu se va extinde pentru a se potrivi cu textul.

Modul de recunoaștere vizuală al procesului de gândire a fost observat de către studenții și profesorii de psihologie de la Școala Berlineză în anii 1920. În linii mari, percepția oricărui design sau pictură a fost definită prin teoria Gestalt – esența sau forma unei entități complete. Potrivit acestei teorii, principiul operațional de baza al creierului uman este holistic, paralel și are tendința de a fi auto-organizatoric. [1, pag. 86]. Prin aceasta teorie a psihologiei formelor se pot identifica mai multe moduri în care creierul uman grupează și interpretează elementele într-un design sau punctele dintr-un plan. Legile principale in gestaltism sunt: continuitate, proximitate, completare si similaritate. [3]

Continuitate: Ideea din spatele continuării sau a fluxului este că, atunci când ochii noștri începe să se miște într-o singură direcție, ele tind să continue pe această cale, până când o caracteristică mai dominantă vine de-a lungul. Figura 1.8. demonstrează acest efect. Chiar dacă mâzgăleală de jos este mai mare și deci tinde să prindă ochi în primul rând, creierul nu poate ajuta, dar du-te "Hei, uită-acolo, o săgeata!” Destul de repede, te vei găsi uitându-se la obiectul mai mic.

Figura 1.8. Continuitatea: crearea de accent

Continuitatea este una dintre acele mai comune metode pe care designerii web le folosesc pentru a unifica un aspect. Implicit, marginea din stânga a pozițiilor, copiere și imaginile plasate pe o pagină web formează o linie verticală în jos în partea stângă a unei pagini înainte de aplicarea styling. Un mod simplu de a face utilizare suplimentară a acestui concept este de a alinia elemente la liniile din grilă. Acest lucru creează mai multe linii de continuare pentru ochii vizitatorilor dvs. pentru a urmări în jos a paginii.

Proximitatea este un mod evident, dar de multe ori trecute cu vederea, pentru a face un grup de obiecte simt ca o singură unitate. Plasarea obiectelor apropiate într-un aspect creează un punct focal spre care ochiul va gravita. Aruncați o privire la pictura digitala din figura 1.9. Deși compus dintr-un sortiment aparent aleatoriu de accidente vasculare cerebrale, cele cinci accidente vasculare cerebrale, care sunt cele mai apropiate între ele par să formeze un obiect unitar.

Figura 1.9. Crearea unui grup folosind proximitatea

Practicăm conceptul de proximitate de pe Web atunci când vom începe setarea marginilor și umplutură pentru elemente. De exemplu, atunci când am defini regulile de stil CSS pentru site-uri, am schimba de obicei, marja implicită care există între elementele HTML comune, cum ar fi pozițiile (hi, h2, h3 …), paragrafe, blockquotes, și chiar imagini. Prin modificarea acestor valori, pot provoca spațiu maimult sau mai Puțin să apară între elemente, creând astfel grupuri. Dacă te uiți la cele două coloane de text în figura 1.10, aveți observa că ele arata similar. Singura diferența este în plasarea a titlurilor. În coloana din stânga, cuvântul "Unkgnome" este echidistant fată de punctele de sus și de jos. Rezultatul este că arată mai mult ca un separator decât un titlu pentru paragraful următor. În a doua coloană, "Gnomenclature" poziția este plasată mai aproape de punctul pe care îl urmează. În conformitate cu normele de proximitate, această poziție pare să aparțină acelui bloc de text.[1 pag. 19]

Completare: Forma este completată cu elementele sau partea lipsă deoarece o forma închisă este mai ușor de perceput decît una deschisă. În exemplul următor  (fig.1.11), se pot observa un cerc și un pătrat (spațiu pozitiv). Ambele forme sunt incomplete, decupate. După o privire mai atentă, se poate percepe încă un  pătrat  suprapus (spații negative) care creează impresia de decupare, dar acesta   se confundă cu fundalul.
Similaritate: Elementele vizuale sunt grupate după formă, culoare sau proporții. In figura a) de mai jos, elementele pot fi grupate în funcție de dimensiuni, iar în b) pe lîngă diferitele proporții, avem și diferite forme: cercuri și pătrate. În c) avem în plus culorile ca al treilea criteriu pentru a regrupa elementele. Aceste principii observate prin psihologia formelor sunt aplicate în mod involuntar și constant atît de privitori, cît și de designeri sau artiști în artele vizuale. In cele ce urmează voi reliefa cum o interfață de site este de obicei structurata la nivel vizual. Se va putea observa facil cum legile mai sus enumerate sunt exprimate.[4]

1.1.3. Layout

Layout-ul determină scheletul unui site – structura și spațiul în care elementele de design trebuie să își îndeplinească rolul. Crearea unui layout nu este ușoară, designerul fiind nevoit să ia în considerare inconsistentele dintre browsere și argumentele pro și contra unui tip de layout anume.Alegerea unui anume tip de layout este deseori influențată de aptitudinile designerului și de perspectiva acestuia asupra layout-urilor, fie ca sunt "pixel-perfect" sau adaptabile.Layout-urile pot fi împărțite în 4 mari categorii, denumite în funcție de abilitatea sau inabilitatea de a-și adapta dimensiunile în concordanța cu fereastra browser-ului utilizatorului.

Layout cu latime fixă

După cum reiese și din nume, layout-ul cu lățime fixa este un layout static a cărei lățime este setată în pixeli la o valoare absolută. Designer-ul deține mai mult control asupra poziționării elementelor de design în zonele de conținut și navigare și poate lucra mult mai precis. Acest tip de layout este o alegere populară fiindcă lățimea fixă asigură păstrarea proporției dintre elementele de design indiferent de rezoluția monitorului utilizatorului. Astfel, site-ul va arăta la fel la rezoluții variate, iar timpul necesar dezvoltării site-ului va fi redus datorită scăderii cerințelor de testare în diferite condiții. Unul dintre cele mai mari avantaje ale acestui tip de layout este poziționarea "pixel-perfect" a blocurilor de conținut, aceasta devenind previzibilă odată ce designerul este conștient de lățimea layout-ului său. Dezavantajul major al acestui tip de layout este că nu profită de întreaga fereastră a browserului. Printre utilizatorii de monitoare vide există într-adevăr tendința de a redimensiona ferestrele browserelor astfel încît să poată vedea și alte aplicații ce sunt folosite în paralel (de exemplu clienți de chat). Totuși, există riscul de a fi în situația în care layout-ul poate crea spațiu lateral în exces, devenind supărător pentru echilibrul site-ului. Desigur, alegerea acestui tip de layout atrage după sine întrebarea: "Care este lățimea potrivită pentru layout-ul site-ului meu?”Cel mai bun răspuns la aceasta întrebare stă în profilul utilizatorilor site-ului respectiv. Statisticile sunt o metodă de a afla, evaluând preferințele de browsing ale utilizatorilor. Din statistici se poate afla cu ușurință care sunt rezoluțiile cele mai întâlnite. O regulă nescrisă arată că menținerea unei lățimi între 800 și 1000 de pixeli va conduce la o experiență bună a utilizatorului. Dacă se dorește ca utilizatorul să aibă mai mult control asupra layout-ului, probabil designerul va opta pentru un layout adaptabil.

2. Layout variabil (fluid)

Acest tip de layout își adaptează lățimea în funcție de mărimea ferestrei browserului. În acest tip de layout, majoritatea elementelor sunt definite în valori procentuale, plecând de la proprietățile curente ale ferestrei browserului. Layout-ul variabil poate folosi foarte mult din fereastra browserului, distribuind astfel spațiul gol într-un mod echilibrat. Astfel, dacă dimensiunea ferestrei se modifică, același lucru se va întâmpla și cu layout-ul. Acesta determină și un dezavantaj major în cazul rezoluțiilor mari, unde liniile de text pot deveni lungi și greu de citit, iar utilizatorul poate ajunge să vadă doar cîteva linii scrise în zona de conținut și elemente de navigare ce pot părea disproporționate.Totuși, fața de layout-ul cu lățime fixă, cel variabil îi permite utilizatorului să controleze cum arată site-ul pe care îl vede și reduce derularea paginilor. Nu uitați că uneori o asemenea alegere este riscantă deoarece elimină previzibilitatea poziționării elementelor din mâinile designerului, iar realizarea unui asemenea layout necesita cunoștințe solide despre structura designului.

3. Layout-elastic

Pentru a limita dezavantajul major al layout-ului variabil menționat mai devreme, designerul limitează lățimea maxima a acestuia din proprietățile CSS. Un layout elastic prezintă o abordare diferita care are același scop; practic designerul ajustează lățimea layout-ului bazându-se pe dimensiunea fontului utilizatorului, nu pe a ferestrei browserului. Daca un pixel nu este scalabil, un em este o unitate de măsura a mărimii fontului. Mărimea fontului variază, iar em-ul este acea unitate relativa care se adaptează preferințelor utilizatorilor in privința textului. Prin folosirea acestei unități atât pentru blocurile de layout, cat si pentru text, layout-ul se va redimensiona consistent, dând impresia unui efect realist de zoom. Pe măsura ce utilizatorul mărește fontul, layout-ul se "întinde" automat, imitând un obiect elastic.Layout-ul elastic se comporta similar cu layout-ul cu lățime fixa (deoarece nu depinde de mărimea ferestrei browserului) si astfel moștenește avantajele si dezavantajele acestuia. Totuși, pot apărea câteva probleme pentru designer cînd lucrează la un asemenea layout. Prima este calculul corect al valorilor in em, care poate da bățăi de cap. A doua este impactul asupra conținutului multimedia. De exemplu, imaginile se vor redimensiona, depinzând de preferințele utilizatorului. Aceasta problema se poate repara prin diverse metode, însa va duce la creșterea complexității realizării layout-ului. Acest tip de layout este potrivit designerului care dorește un compromis intre lățimea fixa si variabila. Alegând layout-ul elastic, designerul profita de avantajele fiecăruia, dar trebuie sa fie conștient ca este mai dificil de implementat si necesita mai multe ore de testare pentru a găsi combinația perfecta pentru majoritatea utilizatorilor.

4.Layout-hibrid
De multe ori, designerul încearcă să găsească soluția care sa împace toate cele trei tipuri de layout descrise mai sus, păstrând avantajele fiecăruia si dorind reducerea la minim a dezavantajelor.Un exemplu popular este setarea in unități em a zonei de conținut si a pixelilor pentru un bloc lateral (side bar), dar exista posibilități multiple de a combina procente, pixeli si unități em pentru a obține efectul dorit. Desigur, e de la sine înțeles ca designerul trebuie sa înțeleagă pe deplin structura layout-ului si interdependenta acestor combinații, însa rezultatul poate fi o recompensa binemeritata [5].

Bara de meniuri într-un site poate fi compusa din mai multe componente si funcționalități, in funcție de cît de bogat este în conținut site-ul. O bara de meniuri este constituita din elemente vizuale și/sau de tip text care permit utilizatorilor să navigheze între diferitele pagini ale site-ului în vederea satisfacerii nevoii de informare prin conținutul pus la dispoziție. Ca o prima etapa, se definesc meniurile principale, si in cazul unui site extins, ierarhia conținutului, a paginilor. Designerul stabilește cum vor fi orientate in interfața: pe verticala sau pe orizontala. Meniurile aflate mai adânc in ierarhie (adică submeniuri de multiple nivele) pot fi afișate implicit sau in urma unui anumit tip de interacțiunea cu site-ul care determina apariția acestora. De obicei, în designul de interfețe pentru site-uri cu o cantitate medie de conținut, apare o bara de meniuri orizontala si o coloana pentru cele de nivelul doi si trei. O alta varianta pentru a avea meniuri cu multiple nivele este folosirea meniurilor in cascada care apar doar când mouse-ul se afla deasupra unui buton.In secțiunea dedicata conținutului, se poate stabili cum apar titlurile, subtitlurile, tabele, coloanele in articol etc. Opțional se poate folosi în design și o bară laterală pentru a oferi utilizatorilor funcționalități în plus sau doar pentru a afișa mai multe legături sau informații cu privire la conținut. În partea de subsol a site-ului de obicei apar elemente precum mențiuni de drepturi de autor, sigle, date de contact, legături la pagini mai Puțin importante și alte facilitate.

1.2. Culori. Asociații de culoare. Semnificații

Pentru a avea succes pe piața online trebuie să dai personalitate site-ului tău web. Una din trăsăturile cele mai importante este limbajul vizual. Limbajul vizual poate fi definit ca un mod de comunicare pe baza elementelor vizuale prin fiecare imagine, formă ne comunică o idee despre ceea ce reprezintă ea de fapt. Un element foarte important în web design este culoarea, aceasta este un instrument puternic care afectează simțurile și au o expresie asupra celui ce o interceptează.Culorile au o influentă foarte mare asupra utilizatorilor unei pagini sau a unui web site deoarece poate determina starea de spirit a celui ce o vizualizează. Nu este de ajuns doar a alege culorile ci este necesară o armonie între acestea, pentru ca rezultatul să fie garantat. Atunci cînd vizualizăm o broșură, o siglă sau un site web trebuie să înțelegem cum percep atît ochiul cît și mintea anumite culori și mesajul transmis de acestea. Fiecare culoare are semnificația sa iar combinarea acestora trebuiește făcută cu gust astfel încît să nu creeze disconfort vizitatorilor. Culorile sunt calde și reci. Din culorile calde fac parte roșu, portocaliu, galben și alte nuanțe ale acestora. Aceste culori sunt culori de foc și semnifică energie, pozitivitate, pasiune, fericirea și entuziasm. Folosirea de culori inadecvate poate drastic schimba experienta utilizatorilor pe site: acesta poate fi repulsiv, inaccesibil și ilizibil. Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele uneia dintre cele 16 culori "sigure", adică acele culori care vor fi recunoscute si afișate de majoritatea calculatoarelor. Exprimarea numerica se realizează prin codul RGB (adică RED-GREEN-BLUE) al culorii.Codul este alcătuit din 3 numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimând prezenta cantitativa a uneia dintre cele trei nuanțe care definesc codul culorii respective.  [7,p.44]. De ce sunt culorile unui website atât de importante? Răspunsul este foarte simplu – culorile sunt primele elemente pe care le observă utilizatorul atunci când dă click pe adresa site-ului și i se afișează pagina de destinație.

Culorile influențează starea de spirit a privitorilor și nu cred că este nevoie să mai intru în detalii când vine vorba de importanta emoțiilor când vine vorba de succes în marketing.

Roșu -culoarea dragostei pasionale, poate atrage entuziasm și energie pentru brandul tău. Roșul este însă și culoarea sângelui, a pericolului și a mâniei, atrăgând imediat atenția.  De aceea, culoarea roșie este des întâlnită la website-uri care vând obiecte legate de riscuri precum programe antivirus, parfumuri, cosmetică. Printre efectele pe care roșul le are asupra simțurilor se numără creșterea apetitului și accelerarea respirației, de aceea este o culoare populară pentru fast-food-uri unde se dorește atragerea atenției clientului și servirea unei cantități cât mai mari de mâncare într-un timp scurt. Atunci când clienții „văd roșu în fata ochilor” pentru o perioadă mai lungă de timp însă, acesta provoacă un sentiment de anxietate și supra stimulare la care se adaugă respirația mai rapidă. Toate acestea contribuie la crearea unei stări de disconfort care va rămâne în subconștientul vizitatorului și va conta când va lua decizia de a reveni în același loc sau să meargă în altă parte unde s-a simțit relaxat. E la fel și pentru website-uri: alege roșu pentru butoane și oferte pe care vrei ca vizitatorii să dea click, însă nu-l folosi ca fundal pentru blogul tău dacă vrei un timp mediu pe pagină rezonabil și utilizatori recurenți. Pentru a minimiza impactul puternic al acestei culori este indicat să-l folosești în combinație cu alte culori complementare. Branduri cunoscute care folosesc culoarea roșie: Rom, McDonalds, Coca Cola, Google, YouTube, Pinterest, Vodafone, Ziarul Financiar, BitDefender.

Galben – o culoare optimistă, caldă, care îndeamnă la distracție, dar în același timp culoarea geloziei și a impulsivității. Culoarea galben-lămâie este cea mai iritantă culoare pentru ochi, deci nu o folosi vreodată ca și culoare de fundal dacă dorești utilizatori care să nu plece de pe pagină în timp record. Galben în combinație cu negru este folosit pe panourile de avertizare care indică pericol pentru că galbenul e prima culoare pe care o observă ochiul uman și, în plus, oferă o stimulare cerebrală rapidă. Galbenul te face mai critic și mai analitic, dar în același timp dă senzația de fericire, pace, încredere și relaxare. Galbenul este indicat pentru site-uri de entertainment, fast-food-uri, precum și pentru site-uri care vând jucării și obiecte/servicii pentru copii pentru că stimulează joaca și creativitatea. Benzinăriile preferă galben pentru a atrage atenția șoferilor chiar și atunci când sunt grăbiți. Branduri cunoscute care folosesc culoarea galben: McDonalds, Ikea, Shell, Raiffeisen Bank, Africana, Maggi.

Albastru – cea mai populară culoare. Culoarea albastră este neutră, are efect calmant, scade ritmul cardiac și induce o stare plăcută de relaxare. Vrei ca brandul tău să inspire încredere, responsabilitate, unitate și înțelegere? Albastrul este soluția. Această culoare este preferata companiilor conservative care se bazează pe loialitatea clienților. Folosirea excesivă a acestei culori poate da un sentiment de rigiditate. Culoarea albastră este recomandată pentru companii aeriene, bănci, companii de asigurări, restaurante, forumuri și rețele sociale.Patronii localurilor preferă albastrul datorită efectului relaxant care contribuie la o stare de bine generală a clienților, ceea ce îi determină să petreacă mai mult timp în local și, implicit, să facă mai multă consumație. Să nu uităm totuși că albastrul scade ritmul cardiac, deci reduce și apetitul; de aceea se recomandă utilizarea cu moderatie în restaurante  Branduri cunoscute care folosesc culoarea albastru: Dedeman, Facebook, LinkedIn, Twitter, Intel, Gilette.

Portocaliu – pentru entuziaști, aventurieri, optimiști. Este o culoare care dă senzația de prospețime și este îndrăgită de tineri. Instituțiile financiare și brandurile care vor să promoveze prosperitatea și luxul evită de obicei culoarea portocalie deoarece aceasta face trimitere la superficialitate și preturi reduse. Portocaliul este preferat de site-uri care pun accentul pe comunitate, de restaurante, firme de curățenie și industria muzicală. Branduri cunoscute care folosesc culoarea portocaliu: Orange, Fanta, Mozilla, SoundCloud, Tide, Rompetrol.

Verde – asociat de obicei cu sănătatea, vindecarea, natura, creșterea, regenerarea și adaptabilitatea. Dacă verdele deschis are un efect calmant, nu la fel putem spune și despre verde închis. Culoarea verde închis folosită în exces face trimitere la bani, prestigiu, egoism, avariție și invidie. Verdele este atât culoarea organizațiilor ecologiste, a medicamentelor, a alimentelor organice, cât și a instituțiilor financiare. Branduri cunoscute care folosesc culoarea verde: CEC Bank, Garnier Fructis, Cosmetic Plant, Sprite, Heineken, Ciucaș, Trilulilu, Evernote.

Violet – simbolul regalității, luxului, decadentei, misterului și creativității. Majoritatea celor care utilizează culoarea violet pe website au un scop precis: să atragă atenția asupra celor mai bune produse sau servicii pe care le oferă(pachetele tip platinăm). Violetul este perfect pentru site-urile de produse cosmetice, parfumuri, haine, ciocolată și magazine de antichități.Branduri cunoscute care folosesc culoarea violet: Yahoo, Cadbury, Milka, Farmec.

Alb – cea mai folosită culoare pentru fundal datorită efectului calmant și a contrastului foarte bun cu majoritatea culorilor, exceptându-le pe cele foarte deschise. Albul este neutru, simplu și rece. Utilizarea albului în exces dă senzația de plictiseală, iar un website cu prea mult alb poate da impresia de amatorism în materie de web design. Majoritatea site-urilor care folosesc intens albul, îl combină cu o altă culoare foarte contrastantă precum negrul, pentru a induce ideea de lux și simplicitate. Albul este folosit de website-uri și companii din cele mai diverse domenii precum ziare, sport, haine, produse pentru curățenie, mașini și tehnologie. Branduri cunoscute care folosesc culoarea alb: Dell, IBM, Puma, Toyota, The New York Times, TP-LINK, Chanel.

Negru – simbolul de netăgăduit al misterului și clasei. Utilizarea negrului este o adevărată artă – în cantitatea ideală te poate transforma într-un model de rafinament și elegantă. Prea mult negru poate transmite depresie, negativitate, putere și control în exces. Site-urile care preferă negrul ca și culoare predominantă aparțin de obicei trupelor rock, cosmeticelor de lux și mașinilor scumpe, dar nu a fost evitat nici de mărcile de cafea, tehnologie și bloguri.Branduri cunoscute care folosesc culoarea negru: Asus, Cellini, Monster Energy Drink, Lavazza, Loreal, Sony.

Gri – o culoare din ce în ce mai apreciată și utilizată pentru fundal și antet pentru că e neutru, clasic și confortabil pentru ochi. Nuanțele mai închise de gri sunt percepute ca rigide și apăsătoare. Website-urile și brandurile care preferă griul sunt de obicei cele cu greutate – mărci cunoscute de alcool, bloguri(mai ales pentru fundal), mașini. Branduri cunoscute care folosesc culoarea gri: Allview, Jack Daniels, Forbes, bogdanstoica.ro(blog)[6]

1.3. Elemente de tipografie

Designul deplin de interfața cuprinde mereu texte. Texte scurte sunt utilizate pentru orientare și navigare în site-ul meniuri, butoane, link-uri către diferite pagini sau caracteristici: căutare, imprimare, ajustarea dimensiunii textului etc. În mijloc, conținutul, în cazul în care texte scurte site-uri de prezentare preferate, lungime concis pentru vizitatorii nu forate. Cu toate acestea, în cazul în care site-urile de informații (știri, enciclopedii, comentarii etc.), articole de tip text pot fi informații lungi, elaborate și detaliate cu privire la acest subiect. În ambele cazuri, precum și materiale de îndrumare în antetul sau subsolul site-ului, un designer ar trebui să știe un minim de teorie a tipografie pentru a alege imprimarea fete (fonturi) pentru o mai bună interfața text pentru a asigura lizibilitatea și să le facă mai multe articole plăcute de lectură pe site-uri web răspândite cu informații.

1.3.1. Margini

O pagină web, chiar dacă este interactiv, vizual poate fi considerat ca o pagină de revistă sau o simplă pagină dintr-o carte. În principal, avem antet și subsol, și în ambele cazuri, trebuie să fie menținută consistenta vizuală între pagini. Se folosește aceeași interfață (proiectare, aspect și culoare) pentru toate paginile site-ului. Într-o carte, coerenta vizuală este de a folosi același font pentru textul în mod constant aceeași dimensiune pentru paragrafe, titluri, aceleași zone din marginile paginii etc. Dar aceste probleme se aplică, de asemenea, o pagină web. Vizuale și text în mod special o bara de meniu, indiferent de orientare, ar trebui să fie aliniate mai bine pentru a avea un avantaj, un spațiu liber. Textele nu trebuie să atingă marginile de orice element vizual in meniul site-ului, antet, subsol, sau conținut. Pentru a evidenția tot textul de mai sus distribuție, figura de mai jos arată pagina. Pentru a asigura consistenta vizuală, au fost utilizate pentru margini de text de dimensiuni egale (verticală și orizontală), a subliniat galben. În general, în scopul de a asigura consistenta vizuală în poziționarea și alinierea textului nu este imperativ să se utilizeze aceeași dimensiune pe ambele părți ale axei. Astfel, un designer are libertatea de a defini marginile verticale la o dimensiune diferită fată de orizontală. spații deschise și margini groase transmite o stare de lejeritate și vizitatorii sunt de o interfața de respirație la nivel de design. Acesta poate fi, de asemenea, văzut în imagine și cum să utilizați coloanele pentru layout. Formularea, articolul este împărțit în două coloane. Meniul este cea de-a treia coloană bara laterală.

1.3.2. Coloane

Într-o pagină, indiferent dacă virtuale sau reale, diviziunea în coloane a conținutului face lectura mai plăcută, deoarece liniile de text nu sunt foarte lungi. În cazul în care într-un ziar sau într-o revistă, în format mare de articole care nu ar trebui să fie împărțite pe coloane și rânduri de text va începe la un capăt al paginii și se va încheia în celălalt capăt, numărul de cititori ar scădea drastic Cititorii sunt din ce în ce mai puțin dispuși să citească articolele, deoarece ochiul uman preocupă pentru mențină aceeași linie pentru prea mult timp. Astfel, soluția este pentru a parcurge conținutul și coloane verticale, împărțind în mai multe articole pentru a micșora gradul de oboseală. Aceste aspecte sunt disponibile pe site-ul nostru, mai ales atunci când folosiți ecrane de mari dimensiuni care permite site-uri cu interfața de fluid sa devina prea mare, devenind astfel mai greu și obositor pentru a citi. Este necesar să se a menționat că în cazul în care se abuzează de coloane și linii devin prea scurt, impactul acestora nu este pozitiv, dar negativ, deoarece cititorii pot fi enervanți prin citirea liniilor de text prea scurt. Pentru a obține cea mai bună plăcere pentru cititori este recomandat ca o linie pentru avea aproximativ 70 pînă la 90 de litere. Trebuie să fie luate în considerare lățimea și dimensiunea textului, astfel încât să se obțină această recomandare a prejudiciului. . O soluție în acest sens ar fi folosirea de formule care să pună în relație aceste variabile. Utilizați coloanele înguste transmite cititorilor un aer de superficialitate, lumina citire, pentru articole colecția academice, este de preferat coloane mai largi. [7] La nivel de text există o multitudine de moduri, de la o sticlă și de a influenta modul în care este prezentat: culori, spatii între litere, cuvinte, paragrafe, stiluri, fonturi și alte lucruri.

1.3.3. Paragrafe

Paragrafe constituie unități textuale (fragmente), în scopul de a-și exprima o idee sau un punct într-un argument dezvoltat. Ele sunt separate de aliniat nou și de o compoziție de mai multe propoziții sau expresii. Delimitarea vizuală între paragrafe este important pentru a argumenta plăcerea lecturii pe site. (sau cărți). Există două moduri pentru evidenția un paragraf: tastarea unui spațiu liber între ele și indentarea textului. Uita la textul din paragrafele care nu sunt definite în nici un fel, se va găsi drept, chiar plictisitoare și neatractive, nu putem vedea dintr-o privire rapidă în cazul în care începe un paragraf iar în timpul lecturii orientarea în text este realmente mai dificilă: nu avem un reper vizual, spațiul între paragrafe are rolul important de a facilita orientarea în text a cititorului în timpul lecturii. [8]

1.3.4. Fonturi

O față tipografică poate fi formată din mai multe fonturi pentru a permite designerilor să stileze textul: greutate variabilă (bold), cursiv, oblic și condensat. Un font de caractere condensat este redus în lățime. Se recomandă să se evite confuzia între oblică și stilul cursiv, deoarece un font oblic este înclinat oblic, de obicei, la dreapta și un font cursiv este o formă stilizată a scrierii de mână caligrafic. Greutatea fontului definește modul de grosime a literelor: slab, semi-grase, grase etc. [9] De obicei in conținut se folosește un stil aldine, de greutate mai mare, mai gras, pentru a pune accent pe aspectele cheie din mesajul scris, iar italic sau oblic pentru citate. Pentru a scrie expresii matematice sau formule chimice care folosesc caractere expozant sau index sau direct în MathML [10]. Orice site, precum și realizarea lui la nivel vizual (design, aspectul, culorile și din punct de vedere tipografic), poate lăsa de dorit în cazul în care nu are un conținut în mod corespunzător, coerent și bine scris. Astfel am decis să prezint unele principii de redactare a conținutului care vin să sprijine un design bine realizat la toate nivelele, inclusiv tipografic

Implementarea tehnică. Tipuri de interfețe

La nivel digital, imaginile sunt făcute fie în mod bitmap (raster, editare la nivel de pixeli), fie în mod parametric și vectorial. În editarea bitmap se manipulează în mod direct pixelii. Acest mod de lucru este folosit adesea în desenare digitală. În editarea vectorială și parametrică, fiecare element este dinamic și manipulabil în mod succesiv. Se folosesc obiecte de diferite tipuri, cu proprietăți și caracteristici variate. Un design de interfață poate fi pe stânga, dreapta sau centrat. Navigarea poate fi pe verticală (cel mai des) sau pe orizontală (foarte rar). O interfață fluidă are o lățime variabilă, procentual, și este mult mai dificil de implementat decât una cu lățime fixă. Interfața reprezinta totalitatea mecanismelor care permit interacțiunea dintre о aplicație și utilizatorii ei. О particularizare a interfeței cu utilizatorul reprezintă interfața grafică, pe scurt GUI (engl. Graphics User Interface), care se refera strict la comunicarea vizuala dintre utilizator și aplicație. Putem spune ca interfața grafica este locul de întâlnire dintre utilizatori și aplicația care le este destinata. Deseori aplicațiile sunt percepute de utilizatorii finali doar prin intermediul interfețelor acestora și, de aceea, interfața realizată deficitar poate compromite întreaga aplicație, chiar daca funcțional ea este bine realizata. In acest sens, problema în procesul de realizare a interfeței grafice reprezintă posibilitatea ca utilizatorul sa nu înțeleagă cum sa utilizeze după ce a fost creata. Acest lucru se întâmplă mai ales pentru ca, in general, utilizatorii unei aplicații nu sunt și programatori, aceștia din urma având intenția de a crea interfața conform propriului model mental, diferit de cel al utilizatorilor. De aceea, dezvoltatorii aplicației trebuie să intuiască modalitățile prin care utilizatorii modelează conceptual diferitele funcționalități sau, in general, aspecte ale aplicației, și sa incorporeze aceste modele in viitoarea interfața grafica. Metoda folosita in acest proces este analogia concretizata prin metafora. Acolo unde analogiile sunt greu de realizat, sunt folosite idiomurile care reprezinta convenții între creatorii și utilizatorii interfeței, ușor de reținut de aceștia din urma. Spre exemplu, funcția de ștergere într-o aplicație poate fi mai ușor conceputa (modelata) de utilizatori ca aruncarea unui obiect nefolositor la coș. Astfel, pentru a șterge pictograma, utilizatorul îl trage deasupra coșului de gunoi (engl. trash), reprezentat grafic de о alta pictograma, unde îl eliberează. Acest mod de a vedea lucrurile poarta numele de „înglobarea semanticii in sintaxa, deoarece se îсеаrсă  folosirea simbolurilor care sunt mai ușor de înțeles și de reținut.

Un alt exemplu ar putea fi folosirea de pictograme in barele de unelte, care ascund printr-o reprezentare grafica uneltele ce se vor folosi după selectarea lor (spre exemplu, lupa folosita mai apoi ca unealta pentru realizarea operației de micșorare-mărire). Se poate observa faptul ca, in general, exista un număr limitat de astfel de metafore și simboluri care se repeta in mai toate aplicațiile și pe toate platformele.Compania Sun, cea care da specificările limbajului Java, sugerează folosirea unui set standard de pictograme și idiomuri, grupate într-o arhiva pe care о găsim la adresa http://developerfava.sun. com/developer/techDocs/Ы/repository/. [11]

HTML si CSS reprezintă tehnologii web standard, pe partea de client, care rulează pe computerul utilizatorului la Internet. Funcționalități mai mult sau mai puțin avansate sunt implementate folosind tehnologii server side, care rulează pe calculatorul de la distanța de tip server: PHP, ASP, mySQL  et. Aceste tehnologii permit punerea în aplicare a celor mai populare funcții de pe paginile web: schimbarea limbii, căutare, hartă site, conturi etc La nivel de interfața se folosește JavaScript pentru a pune în aplicare funcționalitate legată de interacțiunea cu site-ul: meniuri în cascadă, sugestii pentru termenii de căutare, secțiuni ale site-ului de încărcare dinamic etc. O altă tehnologie este utilizată în mod obișnuit Adobe Flash pentru interfețe interactive și mai ales pentru de integrare a video de pe web.

1.5. Marketing

Interfața unui site web sau aplicației web trebuie să fie cale prin care vizitatorul, utilizatorul sau site-ul este în căutarea de date și de sprijin si care facilitează de asemenea de interacțiunea cu orice siteu dat. Mai exact, o interfața de site nu trebuie să se afle în calea vizitatorului sau să distragă atenția printr-un design încărcat prea exuberant. Acesta trebuie să fie redusă la un număr minimal de masuri pentru a ajunge la informații. Utilizatorul trebuie să fie în măsură să desfășoare operațiuni pentru care reprezintă pe site-ul cel mai eficient. Interfața ar trebui să fie "centrate" pe utilizator, proiectat special pentru utilizator. Structura site-ului și funcționalitatea trebuie să fie concepute astfel încât utilizatorul nu va fi confuz atunci când ajunge pe siteu, din cauza numărul de pagini sau funcționalitatea prea bogată, mai mult sau mai puțin utile. În această privință, conținutul trebuie să fie la fel de fapt, concis și clar. Structura site-ului este de preferat să fie la fel de simpla și ficționalitățile oferite trebuie să aibă un nivel de relevantă mai mare posibil. [12]. Atunci când începem un site este necesar a fi studiat concurenta, consumatorii – potențialii utilizator a site-ului, nevoile și abilitățile. Ei au stabilit ce caracteristici sunt necesare (căutare, blog, RSS sau fluxuri de Atom etc.), care oferă potențialilor utilizatori ai site-ului ce funcționalități ar dori pentru a atrage tipul de interfață, care sunt gusturile lor, modul în care aceștia navighează pe web, obiceiurile lor în acest sens etc. Astfel, ele pot determina care caracteristici sunt relevante, ce culori ar trebui să fie utilizate (mai strident, mai palide), ce tip de design (mai minimalist, mai grele etc.), dispunerea și chiar structura site-ului. O interfață web reprezintă nu numai să-l decorați, dar sa arătați conținutul fiecărei pagini și, în general, ar trebui să fie unic, privat. Un alt aspect care trebuie luat în considerare este nivelul de utilizare și accesibilitate. Interfața site-ului ar trebui să fie ajustata pentru a maximiza aceste atribute.

Site-urile oficiale care reprezintă diferite societăți guvernamentale, academice sau profesionale trebuie să fie realizate la toate nivelurile. La nivel de design, să ia în considerare profilul instituției și mesajul pe care dorește să impresioneze opinia publică, adesea conceptele cheie sunt cum ar fi încrederea, consecventa, inovația etc, și se studiază publicului țintă ca să se știe cum să transmită un astfel de mesaj, idee sau un concept. Se efectuează o imagine de brand corporatist si identitatea vizuala sa fie recunoscuta de client: logo, interfața site-ului web, broșuri, cataloage, campanii publicitare, spoturi TV etc. Toate trebuie să fie efectuate în aceeași linie de design, concept vizual.[13]

1.6. Concluzii la capitolul 1

Orice produs, fie ca ne referim la un mp3 sau la un magazin virtual, are nevoie de un design care sa respecte anumite principii sau, cu alte cuvinte, nevoi ale consumatorilor obișnuiți. Să faci design nu înseamnă doar sa-ți lași frâu liber imaginației, ci presupune respectarea unor principii – în funcție de produs, desigur! Tendința permanentă de evoluție, descoperire și redescoperire a umanității se face „vinovată” de apariția unora dintre cele mai importante invenții, a celor mai benefice tehnici si tehnologii. Daca invențiile off line guvernează evoluția omenirii în ultimii 3000 de ani, apariția online-ului a revoluționat comunicarea, industria si economia ultimelor decenii într-un ritm care părea greu de imaginat în 1965. Tehnicile de realizare site au evoluat în mod constant, aceasta dezvoltare având ca principal obiectiv îmbunătățirea experientei utilizatorului. Ca in orice alt domeniu, tendințele în realizare site au menirea de a stabili direcția de dezvoltare și opțiunea utilizatorilor, iar respectarea acestora are menirea de a atrage noi vizitatori, potențiali parteneri sau clienți. Realizarea unui site competitiv, cu un design profesionist este mai important decât respectarea unor tendințe care nu servesc scopului pe care vi l-ați propus pentru site. Este foarte important ca înainte sa decideți modificările pe care le aduceți site-ului dumneavoastră să vă consultați cu o agenție de web design, stabilind împreună cu profesioniștii obiectivele site-ului si modul in care obiectivele si valorile companiei dumneavoastră se regăsesc in elementele de web design ale acestuia. Fiecare pagina a site-ului trebuie sa aibă elemente care sa capteze atenția, astfel încât fiecare dintre pagini sa aibă stabilit un scop: prezentarea unui produs, prezentarea companiei, noutăți in domeniul de activitate. Design-ul fiecărei pagini trebuie să aibă un element central, pe care sa pună accent. Acesta trebuie sa fie evident, observabil de la prima privire, astfel încât sa le ofere vizitatorilor o imagine imediata a scopului pentru care au accesat pagina. Acest lucru poate fi realizat prin indicii de navigare sau prin header, in completarea conținutului paginii. Psihologia web design-ului este unul dintre aspectele căruia orice web designer ar trebui sa ii ofere importanta cuvenita. Acestea nu ocupa mult timp si nici nu sunt dificil de implementat, astfel ca nu exista scuze pentru a nu încercă să aplici cel puțin o parte dintre aceste principii, astfel încât sa crești gradul de satisfacere al clienților tai și să sporești eficiența graficii realizate de tine, element cheie in garantarea succesului proiectului.

Tehnologii folosite în dezvoltarea aplicatiilor web și software

Aplicațiile web moderne sunt sisteme software complexe, iar dezvoltarea acestora necesită o abordare metodologică a proiectării lor. Similar cu proiectarea aplicațiilor software, proiectarea web implică utilizarea unei abordări sistematice și cuantificabile pentru realizarea specificațiilor, implementării, operațiilor și întreținerii aplicațiilor web de calitate superioara. Din punct de vedere al istoricului dezvoltării și complexitații distingem anumite tipuri de aplicații web, aplicațiile web pot fi orientate pe documente, interactive, tranzacționale, pot dispune de caracteristici ubicue sau chiar de trăsături ale web-ului semantic. Cerințele particulare ale proiectării aplicațiilor web rezultă din caracteristicile lor speciale din sfera produselor software, dezvoltării și utilizării acestora. Evoluția este o caracteristică care cuprinde cele trei sfere menționate.

World Wide Web are o influenta enorma și permanentă asupra vieții noastre. Economia, industria, educația, sănătatea, administrația publică și distracția reprezintă componente ale vieții noastre care nu au fost pătrunse de World Wide Web. Motivul acestei constă în special în natura web-ului, caracterizată prin disponibilitatea globală și permanentă dar și prin accesul omogen la informațiile distribuite la nivel global produse de indivizi sub forma paginilor web[14]

O aplicație Web rezidenta pe un server, fiind accesata – prin intermediul unei rețele (Internet sau intranet) – de către utilizatori, care folosesc un client Web (browser), funcționează în mod obișnuit pe trei niveluri:

1. Nivelul I – browserul Web

2. Nivelul II (sau nivelul intermediar) – tehnologia utilizata pentru generarea dinamica a conținutului(server de aplicații)

3. Nivelul III – surse de date, reprezentate de baze de date (BD) si/sau fișiere XML.

Figura 2.1 Arhitectura generala a unei aplicații

O aplicație web este un program care rulează într-o arhitectură client-server folosind tehnologiile deschise World Wide Web. Ele înlocuiesc modelele în care atât serverul cât și clientul rulează tehnologii proprietar, mentenanța aplicațiilor de pe partea de client fiind prea complexă, costisitoare și susceptibilă la erori. În schimb, omniprezenta browserelor web și comoditatea de a le folosi drept client conduce la eliminarea acestei mari probleme. Astfel, au evoluat și pe partea de server serverele de aplicații, iar pe lângă limbajele de programare au apărut frameworkuri și tehnologii dedicate programării acestora.

2.1 Aplicatii web Design

2.1.1 Adobe Photoshop CS3

Este un program utilizat în prelucrări generale de imagini in format electronic, grafica pentru tipar, video si web. Printre multe altele pune la dispoziție instru-mente web pentru optimizarea si previzualizarea imaginilor dina-mice sau statice, realizarea ima-ginilor rollover, imagini care își schimba aspectul la trecerea cu mouse-ul peste, precum si pentru rea-lizarea de GIF-uri animate. [15] Există mai multe moduri diferite de abordare proiectarea unui site web. Unii aleg să proiecteze totul în Dreamweaver, sau să facă o schiță rapidă pe hârtie și apoi a construi site-ul lor, în timp ce alții preferă o abordare de design grafic și de a folosi Photoshop ca instrument de proiectare. Crearea site – ul dvs. ca un fișier Photoshop face în primul rând mult mai ușor din diverse motive.  Începutul oricărui concept de design este de a obține o sursă de inspirație bun de la ceva ce se poate vedea deja. Cum ar fi un pictor se inspira din lumea din jurul lor, un web designer va primi, de asemenea, inspirat din ceea ce văd.  În plus fată de o sursă de inspirație bună recunoaște publicul țintă și proiectarea în jurul valorii de ceea ce ei sunt confortabile, cu. Aspectul și stilul ar trebui să fie în conformitate cu unele ceea ce publicul dvs. utilizează deja la rezoluția ecranului trebuie să fie, de asemenea, luate în considerare la proiectarea unui site web. Lățimea paginii și primul pliu al paginii dvs. sunt importante pentru succesul site- ului. (Pliul este zona spectatorul unde vede înainte de a avea pentru a defila în jos a paginii.). Majoritatea utilizatorilor de web astăzi folosesc rezoluții de ecran mai mare decât oricând înainte și în viitoarele site – uri web construite pentru rezoluții de ecran mici vor deveni mai puțin de un factor, dar pentru moment încă trebuie să fie luate în considerare.  De asemenea, este posibil ca site – ul dvs. să aibă o lățime flexibilă, astfel încât se extinde și contracte bazate pe o dimensiune a ferestrei utilizatori, acest lucru este optim atunci când încercarea de a crea un site care va găzdui toată lumea.Un site conceput pentru a găzdui o dimensiune a ferestrei de cel puțin 750 de pixeli este optimă.  Rezoluția minimă folosită de cei mai mulți oameni astăzi este de 800×600.  Etapele de creare a site- ului dvs. folosind Photoshop sunt:

1. Utilizarea Photoshop pentru a proiecta aspectul și aspectul site – ului pe care îl doresc.

2. Slice imaginea în Photoshop, exportul de imagini, tăiate felii sau ca HTML. Înțelegerea de formatare HTML ajută foarte mult pentru interpretarea cum să felie imaginea dvs. pentru a merge în HTML.

3.  Creați șablonul HTML pentru a se potrivi cu site – ul de design Photoshop și fixați imaginile tăiate felii sau utilizați Dreamweaver pentru a ajusta fișierul HTML care Photoshop creat din feliile tale PSD.

2.1.2 Corel DRAW

Este un editor grafic vectorial precum Adobe Ilustrator. Este utilizat de designerii de grafica si web design si a fost creat pentru a rula pe platforme Microsoft Windows.  Permite crearea imaginilor vectoriale si nu numai. Desenele și schițele tehnice sunt vitale în activitatea inginerească. Cărțile tehnice ale utilajelor, care conțin descrierea grafică a mecanismelor componente, fișele de produs cu detalii constructive și reprezentări ale structurii acestuia, partea grafică a etapei de proiectare, inclusiv sisteme CAD sunt exemple pertinente care ilustrează importanta desenelor în transmiterea de informații tehnice. Era firesc să apară pe piață programe specializate în desenare și editare de desene. Astfel de programe au avut un succes deosebit și sau dezvoltat de-a lungul timpului. Au fost create programe ultra specializate, pentru desen artistic și desen tehnic, pentru desenare 2D și 3D. În cazul programelor pentru desen tehnic se pot menționa printre altele AutoCAD, Inventor, Katia, programe extrem de răspândite în prezent. Totodată, trebuie spus că proiectarea produselor textile se face cu ajutorul sistemelor CAD, care utilizează interfețe grafice de mare complexitate pentru reprezentarea și programarea acestora. Multi designeri din industrie folosesc CorelDraw pentru a realiza schițele produselor sau pentru a crea diferite modele pentru materialele textile.

CorelDRAW este un program realizat pentru crearea și editarea elementelor de grafică, destinat atât profesioniștilor în domeniul graficii, cât și utilizatorilor nespecializați. Este un program versatil, oferind o gamă deosebit de largă de posibilități de desenare și generare de efecte, folosind o paletă largă de culori și nuanțe care să satisfacă toate cerințele. Desenele pot fi realizate în plan sau tridimensional, folosind tehnici de creare a perspectivei și tehnici de extrudere pe verticală a obiectelor vectoriale.[16] Cu CorelDRAW, aveți libertatea de a crea modele. Ai putea exprima ideile dvs. în orice mod doriți pentru tine va începe cu adevărat de la zero. Vi se oferă posibilitatea de a crea tot ce doriți să faceți cu instrumentele din CorelDRAW. Pentru sigur, indiferent de design pe care doriți să faceți, se va întoarce întotdeauna bine.

Toate lucrările de artă originale folosind vector se poate face în CorelDRAW, care pune logo-ul de proiectare pentru prima dată în linie. Utilizând instrumentul stilou, puteți crea forme pentru logo-ul. Logo-ul dvs. va avea, de asemenea, un fundal izolat făcându-l ușor pentru tine să-l utilizați oriunde doriți. Puteți alege culori mari, care sunt potrivite pentru logo-ul.
Obiectele și desene ar putea fi realizat în mod realist în CorelDRAW. Cu ajutorul instrumentului de gradient și instrumentul de plasă, puteți face obiecte pară real. Aceste instrumente pot ajuta la crearea unor suprafețe netede și nuanțări mari. Puteți da, de asemenea, accentul unor detalii în desen. Rezultatul muncii va impresiona cu siguranță și uimi clienții. Un alt avantaj al utilizării CorelDRAW este abilitatea de a salva fișierul ca EPS, fișiere EPS face ușor pentru a imprima ieșiri ascuțite. Vei fi asigurată de a avea un logo bun în căutarea sau o artă detaliate pentru broșuri și postere. Dacă imprimați semne sau grafice de vinil, ar trebui să-l salvați ca EPS, de asemenea CorelDRAW poate fi de fapt utilizat pentru aproape orice referitoare la proiectare. Cu siguranță vă oferă libertatea de a-și exprima creativitatea prin diferite lucrări de artă. CorelDRAW este o mare bucată de un software, cu toate acestea este de departe nu standardul în industrie. Produsele Adobe sunt domină în prezent atunci când vine vorba de designeri profesioniști, în timp ce amatorii folosesc gratuit instrumente de proiectare 2D.

2.2 Aplicatii web și dezvoltarea paginilor

2.2.1 PHP și MySQL

PHP este un limbaj de programare web server-side, ceea ce înseamnă că rulează pe un server, permițând dezvoltatorilor web sa creeze site-uri dinamice și aplicații web-based software ce interacționează cu utilizatorii și baze de date.  În utilizarea acestui limbaj cel mai comun si mai des folosit server este Serverul Apache.  Pentru stocarea datelor in baze de date folosim MySQL care este cel mai des utilizat server de baze de date open source. Se caracterizează prin flexibilitate, stabilitate, fiabilitate și viteza in prelucrarea datelor stocate. MySQL folosește Structured Query Language (SQL), limbajul cel mai frecvent folosit pentru adăugarea accesarea și prelucrarea datelor în bazele de date.[15]

Limbajul PHP permite de a crea pagini cu context dinamic. PHP este un limbaj de “scripting” utilizat în fișierele HTML. Scriptul PHP este rulat de a permite programatorilor Web să scrie rapid pagini ce se generează dinamic. Prin intermediul PHP se pot accesa Microsoft SQL Server și baze de date Microsoft ACCES cu ajutorul ODBC. PHP este un limbaj de programare destul de tânăr. El a fost creat în 1994 de către pogromistul Расмусом Лердофом. Chiar de la început limbajul reprezenta în sine CGI-interfața, scrisă pe Perl, care a lucrat pe pagina de acasă a lui Лердофом. Pe urmă autorul a copiat interfața de pe Perl pe C. Toate schimbările sau inclus în întregul pachet, apărut în anul 1995 și numindu-se Personal Home Page Tools (PHP). El includea în sine cîteva macrouri folositoare, parțial, se putea de găsit cartea de adrese, contorul și multe altele. Rasmus Ledorf  s-a pasionat serios de baze de date, adăugând interfața sa, mijloace pentru organizarea interpelării favorabile. Pogromistul de asemenea a scris interfața pentru schimbul comod între bazele de date și formele textuale – Form Interpreter. Unirea lucrărilor trecute și de asemenea descrierea de mai sus a pachetelor sau inclus în crearea PHP/FI (PHP and Form Interpreter). Anume acest limbaj a rămas actual pentru PHP4. În perioada de la 1996-1997 îl foloseau circa 50 mii de WebMasters. În anul 1997 codul limbajului a fost transcris și completat de Zivom Suranski și Endy Gatmensom – anume ei au creat pachetul de bază PHP4. Limbajul a început treptat cucerirea lumii. El a fost un sistem deschis, a adus la aceea că sute de specialiști începeau să creeze complectarea și corectarea pentru PHP4, aprovizionarea lui cu noile posibilități. Oficial el se numește preprocesorul hiper textual. Spre deosebire de Perl, care cerea scrierea programului aparte, PHP lucrează cu scenariu, aflându-se în failul obișnuit HTML. Cum numai acest script este găsit, el se trimite pe ordonarea interpretorului pe server, care și îndeplinește toate instrucțiunile scrise de WebMasters. Acest mecanism este foarte comod din punct de vedere al programării și el este utilizat în cele mai populare limbaje ale serverelor, cum sunt ASP și ColdFusion. Cu ajutorul PHP se pot crea pagini de WEB dinamice, care sunt generate în momentul în care programul utilizator (de exemplu: Netscape) a formulat cererea către serverul de VEB. Serverul de WEB trebuie să aibă activat suportul pentru PHP. Toate fișierele care au extensia php4 trebuie să fie rulate de către motorul PHP. Fișierele se creează în aceeași manieră ca și fișierele HTML.Începutul semnalului PHP – scenariul este containerul . Alte însemnări ale PHP-script este exprimarea, [removed]cod[removed]. La determinarea reglării PHP e posibil chiar întrebuințarea tegului ASP-lui. În total este comod, desigur, de atribuit primul variant, astfel încît el este compact.

Exemplu de pagină cu tag-uri PHP:

<html><head><title>PHP Test</title></head>

<body>

<?php echo “Hello World<P>”: ?>

</body></html>

Fiecare tag PHP începe cu <? php, se continuă cu propoziția PHP și se închide în partea dreaptă cu ?>. Într-un fișier HTML pot exista un număr nelimitat de tag-uri PHP.

Identificarea tipului de browser o putem vedea în cazul când tipul de browser pe care utilizatorul îl folosește pentru a vizualiza pagina dorită, informațiile pe care browserul le trimite împreună cu cererea pe care o face către serverul web. PHP este foarte asemănător cu C – acest limbaj de programare Rasmus Ledorf îl stima și-l aprecia – așa dar, daca voi sunteți cunoscuți măcar cu JavaScript, atunci cu comanda PHP nu este atât de greu să te descurci [17]. În cazul paginilor statice create cu HTML utilizatorul poate vedea doar imagini și text. Folosind PHP însă vom putea crea așa numitele pagini dinamice în care apare elementul de interactivitate: se pot prelua date din formulare realizate în PHP, citi, prelucra și afișa. De asemenea se poate face interacțiunea cu o bază de date creată pe un server. Pentru a putea lucra cu PHP trebuie în primul rând să avem acces la un server pe care rulează PHP (acesta poate fi server separat sau server virtual creat pe calculatorul personal). Acest server (cel virtual) poate fi instalat folosind pachetul WAMP care este free pe internet. Pentru implementarea unui website dinamic pot fi folosite diverse limbaje de programare si diverse sisteme de gestiune a bazelor de date.

AVANTAJELE PHP :

PHP (limbaj de programare server-side) este o tehnologie open source folosita pentru dezvoltarea aplicațiilor web dinamice. Dintre criteriile pentru care am alegere acesta tehnologie amintim:

PHP este o tehnologie gratuită.

Comunitatea PHP este foarte dinamică, pe internet găsindu-se cu ușurință soluții la o diversitate mare de problem.

PHP rulează fără probleme pe o varietate mare de servere și sisteme de operare (Unix, Windows, Mac OS).

Este cel mai folosit limbaj de programare pentru dezvoltarea aplicațiilor web dinamice.

AVANTAJELE MYSQL :

In cazul unui website dinamic, informațiile vizualizate de vizitatori trebuiesc preluate pentru afișare dintr-o baza de date relaționala. Un sistem relațional de baze de date (RDBMS – Relațional DataBase Management System) este un software complex care are ca scop înmagazinarea, gestiunea si returnarea cat mai rapida a informațiilor solicitate. Sunt multe astfel de sisteme care pot conlucra cu PHP, amintind aici MySQL, PostgreSQL, Oracle etc. Totuși studiile teoretice si practica arata ca sistemul MySQL este lider detașat pentru implementarea proiectelor care folosesc ca limbaj de scripting PHP-ul.

Criteriile care conduc la alegerea acestei tehnologii sunt:

MySQL este cel mai popular RDBMS

Este o tehnologie open source, gratuita (pentru uz non comercial)

Cele mai multe servicii de găzduire web oferă acces la MySQL

Este foarte rapid

Documentație online bogata si bine structurata

În rețeaua Internet se găsesc ușor soluții la o diversitate mare de probleme.

Deși aveți posibilitatea să instalați individual web serverul Apache, limbajul de programare web pe partea de server PHP și programul baza de date server MySQL, eu vă recomand să instalați pachetul de aplicații XAMPP. Cu o singură instalare veți include toate aceste aplicații, și anume: web server Apache, limbajul de programare PHP și baza de date server MySQL împreună cu PHPMyAdmin. În plus, prin instalarea acestui pachet de aplicații XAMPP veți avea Perl, FileZilla, Tomcat, Mercury.[18]

Pentru a instala XAMPP parcurgeți următorii pașii:

1.Introduceți în bara de adrese a browser-ului următorul URL:

http://www.apachefriends.org/en/xampp.html

2. După apariția pagini web XAMPP, veți merge și veți da un clic pe xampp for windows.

3. Va apare pagina xampp for windows, unde aveți trei opțiuni:

xampp cu următoarele variante de descărcare:

installer, este metoda cea mai confortabilă și ușoară de instalare. Vă recomand să descărcati această variantă.

xampp zip, pachet arhivat zip.

xampp 7zip, pachet arhivat 7zip

xampp Add-Ons – extensii ale pachetelor de bază.

xampp lite USB – este o optiune extra care poate fi folosit pe dispozitivele usb. Și această optiune are trei variante de descărcare, și anume:

exe – arhivă cu auto-extragere.

7zip – arhivă 7zip.

Zip – arhivă zip

Vă recomand pe-ntru instalare să utilizați versiunea Installer de-oarece este cea mai ușoa-ră modalitate de instalare. După ce ați descărcat fiși-erul Installer –xampp 1.7.4 win-32, dați un dublu clic pe icoana respectivă și va începe instalarea după cum puteți vedea în imaginea de mai alături.

Dup ce instalarea a luat sfârșit, trebuie să aveți o icoană pe desktop sau Start|Programs|Xampp și lansați XAMPP Control Panel, pe care-l veți utiliza pentru a porni/opri serviciile respective.

Dezvoltatorii PHP au la dispoziție mai mult de 180 de biblioteci, care conțin peste 1000 de funcții. Suplimentar funcțiilor native, PHP asigură conectarea către un nivel de abstractizare a bazelor de date numită PHP Database Objects (PDO), care permite accesul către practici de codificare securizată. De asemenea PHP poate face următoarele:

Interfața cu sistem de gestionare a bazelor de date.

Manipularea informațiilor dintr-un formular.

Crearea de pagini dinamice.

Crearea și manipularea Adobe Flash și Portabile Document Format (PDF).

Evaluarea unei parole pentru autentificare.

Analiza șirurilor complexe de caractere folosind POXIS și Perl bazate pe expresii regulate.

Autentificarea utilizatorilor prin utilizarea unor fișiere text sau baze de date

Comunicarea cu o mare varietate de protocoale LDAP, IMAP, POP3, NNTP, DNS.

Integrare cu o gamă largă de soluții de procesare a cardurilor de credit

De asemenea, oferă interfața cu următoarele sisteme de gestionare a bazelor de date: MySQL, Microsoft SQL, Oracle, PostgreSQL etc. Utilizând Open Database Connectivity Standard (ODBC) te poți conecta către orice bază de date care oferă un driver ODBC. Aceasta include produsele Microsoft și multe altele.[19, pag. 37]

2.2.2 ASP.NET

ASP.NET este un framework dezvoltat și comercializat de Microsoft pentru a permite dezvoltatorilor web să construiască pagini web dinamice și interactive, aplicații și servicii web. ASP.NET este construit pe limbajul comun Runtime (CLR), care permite dezvoltatorilor să scrie cod ASP.NET folosind orice limbaj acceptat NET. Aceasta teh-nologie  este o tehnologie puternica ce permite dezvoltatorilor să dezvolte aplicații web care să lucreze cu baze de date,  fiind deseori utilizata în aplicații complexe și de mare amploare.  Fiind o tehnologie Microsoft se caracterizează prin rapiditatea cu care se dezvolta precum și prin viteza  prin care paginile web se încarcă în browser.  Aceasta din urma se datorează faptului că este un limbaj în care codul este compilat în "limbajul mașină" înainte ca utilizatorul să ajungă în pagina web. Ambele tehnologii detaliate mai sus interacționează în dezvoltarea aplicațiilor web și procesul de creare site-uri cu alte limbaje precum:  Html, Css,  XML, JavaScript, Ajax, jQuery, Flash, ActionScript.[15]
Una dintre cele mai importante calități ale ASP.NET este timpul redus necesar dezvoltării aplicațiilor web. Atât tehnologia în sine, cât și uneltele de dezvoltare de aplicații web de la Microsoft (cum ar fi Visual Web Developer Express – VWD) – reduc considerabil timpul de dezvoltare al aplicațiilor web față de alte tehnologii – prin simplitatea unui limbaj de programare ”managed” de genul C# sau Visual Basic .NET, prin colecția bogată de biblioteci de clase și controale .NET care oferă foarte multă funcționalitate ”out of the box”, prin orientarea pe construirea de aplicații web a mediului de dezvoltare VWD. Chiar dacă ASP.NET este gândit pentru a dezvolta aplicații web foarte complexe – prin faptul că se bazează pe .NET, prin faptul că se insistă pe un model de dezvoltare OOP, respectiv pe separarea interfeței de logica aplicației – totuși, este extrem de simplu ca folosind ASP.NET să dezvoltăm aplicații mici, de genul magazinelor online, al aplicațiilor care sunt pur și simplu un ”front-end” pentru o bază de date, sau al site-urilor personale.

ASP.NET cuprinde toate tehnologiile necesare pentru a dezvolta o aplicație web, scriind cantitatea minimă de cod. Limbajele de programare care pot fi utilizate pentru a crea aplicații ASP.NET sunt cele suportate de platforma .NET – cum sunt Visual Basic .NET și C#, iar o altă caracteristica importanta a acestor limbaje (înafara faptului că sunt ”managed”) este ca au fost create având în vedere paradigma programării orientată pe obiecte. Totul din .NET, și evident din ASP.NET, este un obiect. Evident, orice site / aplicație web trebuie să fie găzduită pe un server pentru a putea fi utilizată. Chiar dacă în capitolele viitoare vom discuta mai mult despre instalarea aplicațiilor ASP.NET, aici aș dori să prezint pe scurt variantele de găzduire. Pentru o persoană / companie care dorește să beneficieze de o aplicație ASP.NET, după ce a fost dezvoltată, trebuie instalată undeva. Presupunând că ea a fost dezvoltată pentru .NET, aplicația are nevoie de un server web IIS (internet Informations Services). Există două variante de a găzdui aplicațiile ASP.NET: (1) intern, pe serverele proprii sau (2) extern, la o firmă care oferă servicii de găzduire (hosting).

Decizia trebuie luată ținănd cont de câțiva parametri:

Costul de mentenanță. Intern costă administrarea serverelor cu tot ce presupune asta: hardware, software, specialiști. Extern costă un abonament fix pe lună/an.

Securitatea. Dacă vorbim de o aplicație extrem de importantă și care manipulează informații sensibile, probabil vom dori să fie sub controlul propriu.

Etc.

Pentru programatorii care doresc să aibă un site dezvoltat din pasiune sau pentru a învăța, dar vor totuși să îl aibă instalat undeva, variantele de mai sus devin: (1) acasă, pe Windows XP / Vista cu IIS; (2) la o firmă care oferă servicii de hosting gratuit. Da, există variante de acest gen, unde vă puteți instala propriul site ASP.NET fără să vă coste nimic (căutați pe www.live.com ”asp.net free hosting”). Pe perioada dezvoltării unei aplicații web, nu este nevoie ca aceasta să fie găzduită pe un server IIS, ci poate fi rulată din Visual Web Developer folosind serverul web integrat (vezi mai multe în capitolul II).[20]

2.2.3 HTML – HyperText Markup Language

Indispensabil în crearea paginilor Web, HTML este un descendent al limbajului SGML, folosit pentru dezvoltarea de documente hiper-text accesibile prin Internet. Denumirea vine de la HyperText Markup Language și se definește ca fiind un limbaj de formatare si structurare a documentelor web utilizând o varietate de etichete si atribute.

World-Wide Web (WWW):

Nu se poate face referire la HTML fără a aminti ce înseamnă World-Wide Web (WWW). Unul dintre cele mai importante și de succes servicii ale rețelei Internet, WWW-ul a fost creat la CERN (Centrul European de Cercetări Nucleare, Geneva) în anul 1989 de Tim Berners-Lee, Robert Caillau și echipa lor, dar dezvoltarea sa ulterioara a fost facilitată de programul client Mosaic, sub mediul X Window, de la NCSA (Centrul național pentru aplicațiile super calculatoarelor, Universitatea Urbana-Champaign) furnizat gratuit din 1993, care avea o mare simplitate de utilizare si facilități multi-media.

WWW este un sistem distribuit de hiper media funcționând în mod client-server prin Internet. Sistemul pune la dispoziție informațiile sub forma de hipertext (mixtura între text, grafică, elemente multi-media, plus referințe încrucișate). Pentru a căpăta acces la WWW, utilizatorul va fi nevoit să folosească un program client (user-agent) cum ar fi Lynx (in mod text) sau Mozaic și Netscape (în mod grafic) și bineînțeles va trebui sa cunoască localizarea fizica a documentului dorit. Localizarea unui document hiper-text se exprima sub forma de URL (Uniform Resource Locator), o modalitate flexibila și eficientă de accesare a oricărei resurse Internet, prin oricare protocol (TELNET, FTP, Gopher, HTTP, mail) bazat pe TCP/IP[21].

Modul de dialogare între clienți și serverele WWW se realizează prin protocolul HTTP (HyperText Transfer Protocol). Un document WWW trebuie în prealabil formatat (sau 'marcat') cu ajutorul limbajului HTML, marcaj ce va descrie structura logică a documentului și va fi procesat de programul client. Orice astfel de document poate cuprinde legături de tip hipertext, indicate prin zone de text sau imagini, conducându-l pe cititor fie în alt punct al aceluiași document, fie într-un alt document, care poate sa se găsească stocat local (pe serverul curent) sau la distantă (pe oricare alt server Web din lume). Aceste legături încrucișate între miile și sutele de mii de servere WWW realizează o adevărată pânză de păianjen (web) planetara (world-wide) de unde vine și denumirea WWW, iar utilizatorul navighează în ciber-spatiul reprezentat de această rețea.

Clientul WWW poate manipula documente multimedia datorită facilitaților puse la dispoziție de diferitele versiuni ale limbajului HTML ce prevăd includerea de imagini (formate grafice precum GIF sau JPG), fișiere audio și video. Mai mult, programele client se pot comporta ca programe client FTP, Gopher sau News (NNTP) și sunt capabile să gestioneze poșta electronică. În HTML pot fi concepute formulare (forms) pentru introducerea interactivă a datelor (texte, meniuri, liste, butoane de selecție etc.) și trimiterea lor către server spre a fi procesate. Îmbinarea limbajului HTML cu rutine scrise în alte limbaje (scripturi) conferă o sporită interactivitate a Web-ului. Deși în prezent nu există standarde privind securitatea schimbului de informații între client și server, compania Netscape a propus protocolul SSL (Secure Socket Layer) pentru canale de comunicații fiabile, autentificate și sigure, protocol independent de aplicație, putând fi folosit și de alte programe TCP/IP (ca de exemplu FTP ori TELNET). O alternativă este S-HTTP (Secure HyperText Transfer Protocol) propus de NCSA. Viitorul Web-ului este extinderea sa la cea de a treia dimensiune. In primăvara anului 1994, la prima conferință asupra problematicii Web-ului de la Geneva, s-a născut proiectul VRML (Virtual Reality Modeling Language), limbaj de descriere a spațiului virtual tridimensional bazat pe formatul Open Inventor al firmei Silicon Graphics. Succesul VRML va depinde de existenta programelor client capabile a interpreta acest limbaj pentru diverse platforme. Aceasta va constitui cu siguranță o nouă sursă de aplicații, mai ales în arhitectură, tele-medicină, industria jocurilor. Tot în 1994 a apărut și termenul de telesensation, concept care combină grafica computațională, realitatea virtuală, programarea vizuală și telecomunicațiile, imaginile transmise de la distantă fiind percepute global.

2.2.4 CSS

Cascading Style Sheets (CSS) este un limbaj „style sheet” folosit pentru a descrie aspectul si formatarea unui document scris intr-un limbaj markup.  Aplicarea sa cea mai comună este in paginile web scrise in HTML si XHTML, însă poate fi aplicat la orice tip de document XML. CSS este un acronim pentru Cascading Style Sheets (foi de stil în cascadă). CSS este utilizat la îmbunătățirea prezentării unei pagini Web (adică a modului in care browserul o afișează). CSS vă permite să stabiliți proprietăți pentru elementele HTML utilizând o gamă uriașă de valori. Avînd la dispoziție mai mult de 100 de proprietăți, CSS este un instrument avansat destinat proiectanților Web pentru crearea de siteuri Web profesionale care nu pot fi construite folosind atribute HTML obișnuite.[15]

În momentul de față codul CSS se poate stoca sau pune în trei locuri și anume:

fisier extern (.css)

intern – in head

în tagul care se vrea personalizat (online)

În general fișierele externe de CSS sunt cele mai folosite. Este de recomandat să folosiți această metoda pentru o mai simpla modificare a întregului website. În acest fel se poate modifica un site întreg schimbând conținutul unui singur fișier.css. Singura condiție este ca toate paginile sitului să conțină în secțiunea head tag-ul.

Un fișier CSS se poate scrie în orice editor de text, notepad, notepad++, word, macromedia etc dar trebuiesc salvate cu extensia ".css"

Un exemplu simplu de cod CSS ar fi următorul:

Observație: NU lăsa spațiu între numărul specificat și unitatea de măsură. Folosind "margin-left:15 px;" în loc de "margin-left:15px;" va genera erori în Firefox si Opera.

Codul CSS in head, nu ar trebuii folosit prea mult cu excepția faptului că ai o pagina care are nevoie de un stil propriu și nu îl împarte cu nici o alta pagina.

Codul CSS intern este același ca și la cel introdus într-un CSS extern., cu excepția unor taguri.  După cum am menționat anterior, pentru a plasa CSS în HTML vom folosi tagul împreuna cu atributul type="text/css", pe care le vom pune in secțiunea head a documentului HTML.

CSS online nu înseamna nici mai mult nici mai puțin decât CSS în interiorul tagului HTML. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele pentru care a fost creat și anume pentru a nu amesteca tagurile HTML cu formatarea și prezentarea lor. Exista totuși și avantaje în a folosi CSS-ul în aceasta manieră după cum vom vedea.Dar mai întâi să vedem cum anume se poate introduce CSS într-un tag HTML. [22]

Odată cu introducerea HTML 3.2 au fost introduse și atributele de personalizare a tag-urilor precum "font", "color" etc. A fost atunci când limbajul de programare HTML a devenit greoi. Fiecare pagina a web siteului trebuia luată separat și modificate proprietățile elementelor principale.Aceasta problema a fost rezolvata în versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase și salvate într-un fișier extern cu extensia ".css".În felul acesta modificând un singur fișier putem schimba forma în care sunt afișate toate paginile unui website. Putem schimba culoarea textului, fontul, mărimea, putem personaliza div-uri, formulare și multe altele.

2.2.5 XML

XML este un acronim pentru Extensibile Markup Language XML a fost proiectat pentru a adăuga facilitați noi tehnologiilor Web existente. XML reprezintă o structură ierarhica de date stocate în fișiere format text care utilizează un limbaj de marcare. Să explicăm pe scurt ce înseamnă aceste lucruri:

XML este un limbaj de marcare similar cu SGML( Standard Generalized Markup Lan-guage) și H ГМI

XMI utilizează un format de fișier text ceea ce îl face tehnologic, independent de aplicații software și echipamente hardware.

XML a fost proiectat pentru a descrie și a transporta datele similar unei baze de date

XML este o structura ierarhică bazată pe relația părinte-copil.[11]

Acest limbaj a fost conceput pentru a înlocui limbajul HTML, care a fost considerat prea limitat in elemente si atribute. XML este tot mai mult folosit pentru schimbul de date si configurarea lor.  Cea mai des folosita forma a XML-urilor in interacțiunea cu utilizatorul este crearea RSS feed-urilor pentru aplicațiile web dezvoltate[15] . Datele XML pot fi utilizate în limbajul HTML, permit o identificare rapidă a documentelor cu ajutorul motoarelor de căutare. Cu ajutorul codurilor JavaScript, PHP etc. fișierele XML pot fi înglobate în paginile de internet, cel mai elocvent exemplu este sistemul RSS care folosește un fișier XML pentru a transporta informațiile dintr-o pagină web către mai multe pagini web.

Avantaje:

extensibilitate (se pot defini noi indicatori dacă este nevoie)

validitate (se verifică corectitudinea structurală a datelor )

oferă utilizatorilor posibilitatea de a-și reprezenta datele într-un mod independent de aplicație

XML este simplu și accesibil (sunt fișiere text create pentru a structura, stoca și a transporta informația)

poate fi editat, modificat foarte ușor (necesită doar un editor text simplu precum notepad, wordpad etc.)

Dezavantaje

Oferă un model de date ne-normalizat;

Dificil de decis ce sa fie conținut și ce să fie atribut;

Flexibilitate (uneori dezavantaj);

Lipsa de suport in browser-e sau alte aplicații end user;

Mai strict decît HTML (daca exista o eroare în document nu se oprește rularea scriptului).

Cerințele, criteriile, pentru scrierea unui document XML corect sunt simple și minime. Totuși, un document XML valid si ușor de înțeles are nevoie sa urmeze anumite reguli stabilite, cunoscute generic ca DTD (Document Type Definition). Pentru a folosi datele din documentele XML, trebuie sa le cunoașteți structura aranjării lor si forma ierarhica, astfel puteți adaugă noi date (de exemplu aici cărți) care trebuie sa respecte același format. Iar in cazul unor documente mai mari, cu ierarhii mai multe, înțelegerea lor devine mai greoaie si va dura mai mult timp.  Aici intervine rolul DTD, o forma de explicare pe scurt a structurii aranjării datelor și relația dintre ele. Adică, scrierea sub forma unei liste a specificațiilor exacte despre cum sunt elementele legate între ele, ce tip și nume au fiecare și ce atribute sunt necesare.

XML este, de asemenea, independent de platforma, ceea ce înseamnă că orice program încorporat pentru a utiliza XML poate citi și proces date XML, indiferent de hardware sau un sistem de operare. De exemplu, cu etichete XML corect, puteți utiliza un program desktop pentru a deschide și lucrul cu date de pe un computer mainframe. Și, indiferent care creează un corp de date XML, puteți lucra cu aceleași date în mai multe programe Office. Deoarece este atât portabil, XML a devenit una dintre cele mai populare tehnologii pentru schimbul de date între bazele de date și desktopuri utilizator.[23]

2.2.6 JavaScript

JavaScript (JS) este un limbaj de programare orientat pe obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul JavaScript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încadrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netsca-pe  Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript. Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate. Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer. 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ă.[24]

Ce poate face JavaScript?

JavaScript oferă proiectanților HTML un instrument de programare – în general proiectanții paginilor HTML nu sunt programatori, dar JavaScript este un limbaj cu o sintaxă foarte simplă și aproape oricine poate insera mici secvente de cod în paginile HTML

JavaScript poate insera în mod dinamic text într-o pagină HTML – O instrucțiune JavaScript ca aceasta: [removed]("" + name + "") poate scrie un text variabil în pagina HTML

JavaScript poate reacționa la evenimente – Un cod JavaScript poate fi proiecta să se execute când se întâmplă ceva, spre exemplu când pagina s-a încărcat complet sau utilizatorul acționează un element HTML

JavaScript poate citi și scrie elementele HTML – Un cod JavaScript poate citi și modifică conținutul unui element HTML

JavaScript poate fi folosit pentru a valida datele – Un cod JavaScript poate fi folosit pentru a valida datele înainte de a fi trimise către server. În acest fel serverul nu mai face procesări suplimentare.

JavaScript poate fi folosit pentru a detecta browserul utilizatorului – Un cod JavaScript poate detecta tipul browserului și poate încărca o pagină proiectată special pentru tipul respectiv de browser 15

JavaScript poate fi folosit pentru a crea cookies – Un cod JavaScript poate fi utilizat pentru a stoca și extrage informații pe calculatorul vizitatorului paginii HTML.

2.2.7 Ajax și jQuery

Ajax (Asynchronous JavaScript and XML) este o tehnică de comunicare dintre browserul clientului și server folosită, în special, la programarea aplicațiilor Web. Scopul principal al tehnologiei este de a transmite și a prelua cantități mici de date de la server de către browser în mod asincron, adică fără a reîncărca toată pagina site-ului, ci numai porțiunea în care datele se schimbă. Această tehnică a apărut prima dată în anii 1990, după care a fost folosită în applet-ruile Java în anii 1995. Denumirea de Ajax a fost inventată tocmai în anii 2005-2006 când a fost folosit din plin de către Google la crearea proiectelor Google Suggest, Gmail și Google Maps.[60]

Caracteristici:
JQuery se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

extensii (vezi mai jos)

utilități – versiunea browser-ului, funcția each.

Ajax (sau AJAX), prescurtare pentru Asynchronous JavaScript and XML, este o tehnică de programare pentru crearea de aplicații web interactive. Intenția este să facă paginile web să devină mai rapide și deci mai acceptate, prin schimbul în fundal al unor cantități mici de date cu serverul, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web. Ajax nu este o tehnologie în sine. Termenul este folosit pentru definirea aplicațiilor web ce folosesc un ansamblu de tehnologii:

HTML sau XHTML pentru structura semantică a informațiilor;

CSS pentru prezentarea informațiilor;

JavaScript pentru interactivitate, pentru procesarea informațiilor prezentate;

Obiectul XMLHttpRequest pentru schimbul și manipularea informațiilor într-o manieră asincronă cu server-ul web;

XML este folosit de obicei pentru transferarea datelor între server și client, deși orice format funcționează, inclusiv HTML preformatat, text simplu etc[61]

Avantaje pentru folosirea Ajax-ului:

în primul rînd elimina refresh-ul paginii web, ceea ce face ca aplicația web sa semene cu una desktop si astfel duce la o îmbunătățire a interfeței utilizatori

îmbunătățire lungimei de bandă

separare a datelor, funcționalității și a formatării paginii

Dezavantaje

nu rulează pe versiuni vechi ale browserelor

Lisa funcționalității butoanelor de back și forward (deși mai nou s-au găsit work around-uri)

la timpi de răspuns foarte mari utilizatorul are impresia ca cererea lui nu este procesata (acest lucru poate fi evitat introducând un preloader)

dezavantaje în privința SEO (Search Engine Optimisation)

nu rulează dacă JavaScript-ul este oprit de către utilizator

2.2.8. Flash

Flash-ul este o tehnologie multimedia care permite dezvoltatorilor web să includă animații simple și complexe precum și conținut interactiv în site-urile și aplicațiile pe care le dezvolta. O animație în format de fișier Flash utilizează extensia .swf. Flash-urile pot conține de asemenea sunete și video. Un web site poate folosi parțial fișiere flash integrate în conținutul html al paginilor sale sau poate fi realizat in totalitate in flash. Deși în prezent există și alte tehnologii alternative, mai sigure și mai eficiente, Adobe Flash Player rămâne o componentă necesară pentru orice web browser, fără de care nu avem acces la anumite jocuri online, clipuri video și elemente multimedia incluse în paginile web.

Principalele facilitați oferite de Adobe Flash Player:

Suport pentru streaming video în paginile web pe care le vizităm

Redarea fluidă a clipurilor video, inclusiv filme HD, folosind capabilitățile de accelerare hardware oferite de GPU

Redarea fluidă a elementelor de grafică 3D, vector și raster, apelând capabilitățile de accelerare 3D oferite de GPU

Acces la o gamă variată de jocuri online ce folosesc tehnologiile Adobe Flash

La instalare, Adobe Flash Player este adăugat automat ca plugin pentru browser-ul web detectat în calculator, urmând să fie activat automat ori de câte ori vizităm o pagină care necesită tehnologiile Adobe Flash.[62] Ca tehnologie/platformă Adobe Flash folosește grafica vectorială și cea rasterială pentru a asigura animația textului și a imaginilor. Folosind fluxurile bidirecționale asigură în Internet transmiterea conținutului audio și video, precum și captarea interactivității pentru diversele dispozitive: șoricel, tastatură, microfon, cameră video. Adobe Flash este integrat cu ActionScript – limbaj de programare orientat pe obiecte.

Platforma Adobe Flash se aseamănă întrucâtva cu platforma Java prin faptul că nu depinde de platforma hard, având și ea trei elemente distincte, caracteristice platformei Java:

conținut/format Flash, integrat cu platforma (fișiere de tip: fla, flv, swf, as, …),

aplicații de lucru cu conținutul Flash (Adobe Flash CS5, Adobe Flash Builder CS5,…),

player-ul Flash (include mașina virtuală de rulare a conținutului Flash).

De menționat că platforma este procurată în 2005 de către Adobe Systems odată cu procurarea companiei Macromedia, platforma fiind lansată în 1996 și având origini mai vechi și mai adânci în afara companiei Macromedia. Actualmente, dezvoltarea platformei este asigurată de către Adobe Systems. Cel mai cunoscut și mai răspândit produs al firmei este plugin-ul/player-ul Flash. Este un program de vizualizare a animaților, de rulare a conținutului video și a celui multimedia, de acces la diverse jocuri, inclusiv la cele 3D. Adobe Systems menține și plugin-ul/player-ul Adobe Shockwave. Prin conținut/ format Flash se subînțelege câteva tipuri de formate, fișierele corespunzătoare având una dintre extensiunile: fla, flv, swf, as etc. Cele mai populare tipuri de formate sunt Flash (fla)  și Shockwave (swf), ultimul mai fiind denumit și Short Web Format.  Nu sunt unicele formate pentru acest tip de animație, dar sunt cele mai populare. Pot apărea confuzii în legătură cu folosirea denumirii formatelor, toate fiind adesea referite ca format Flash, urmând ca să se subânțeleagă și ulterior să se specifice tipul concret. În continuare vom folosi termenul de format Flash atât ca unul generic pentru toate tipurile, cât și pentru tipul concret fla. Este interesant faptul că Adobe Systems oferă o descriere deschisă detaliată doar pentru formatul fișierelor de tip swf, nu și pentru cel formatelor de tip fla. Explicațiile acestei situații țin de interesele de afaceri ale companiei Adobe Systems. Formatul Flash a câștigat o mare popularitate deoarece este rulat de majoritatea browser-elor și poate transmite foarte rapid animația într-un mod fluid și atractiv.

Descărcarea rapidă a fișierelor în formatele Flash și Shockwave e posibilă grație la doi factori inovatori.

Primul factor este determinat de însăși esența majorității fișierelor de tip Fash și Shockwave, integrate, în general, cu grafică vectorială, spre deosebire de animația GIF, bazată pe imagini BMP. Aceasta înseamnă că imaginea nu-i reprezentată printr-o consecutivitate de pixeli, ci printr-o consecutivitate de linii, forme și culori, pe care aplicațiile respective le tratează ca formule matematice. Reamintim că dreaptă, spre exemplu, este descrisă prin unghiul format cu o axă, prin coordonatele și lungimea ei în raport cu alte forme. Astfel, un fișier, care salvează o imagine în formă vectorială, poate fi mult mai mic decât cel în forma BMP, care trebuie să salveze informația despre fiecare pixel. Aplicațiile Shockwave și Flash pot folosi și imagini de tip BMP, care sunt comprimate și reduse pentru a asigura dimensiunile reduse ale fișierelor. Imaginile BMP pot fi deplasate, de asemenea, de-a lungul ecranului, în mod asemănător cu cel din animația HTML, care ajută la menținerea dimensiunilor reduse pentru fișiere. Majoritatea fișierelor Flash sunt complet vectoriale, ceea ce asigură să fie extrem de mici. În tehnologia Flash se folosește tehnica interpolării, prin care se creează ușor cadre intermediare între cadrele vectoriale cheie prin calcularea schimbărilor ce au loc în informația geometrică între cele două imagini cheie. Ca rezultat, animația vectorială ocupă mai puțin spațiu decât cea de tip BMP, care stochează fiecare cadru ca o imagine unică.

Al doilea factor care asigură descărcarea rapidă a animaților de tip Flash și Shockwave este determinat de modul prin care fișierele sunt transmise real prin Internet. Fișierele de tip Flash și Shockwave sunt transmise în flux în așa mod încât browser-ul să poată să inițieze rularea „filmului” înainte ca întregul fișier să fie descărcat. Îndată ce serverul transmite textul paginii Web și apoi a fișierelor de imagine, un site te tip Flash poate fi configurat astfel ca să trimită un film introductiv în timpul rulării căruia se va încărca restul conținutului Flash. Webmasterul poate codifica fișierul astfel încât un browser va începe să ruleze filmul îndată ce o anumită parte din fișier este descărcată. Partiția în timp este realizată astfel încât fiecare parte din fișier este descărcată înainte ca filmul să fie rulat până la acel punct. De altfel, acesta este și modul în care funcționează video de tip streaming.

Tehnologiile Flash și Shockwave sunt preferate de foarte multi utilizatori și designeri Web datorită, în mare măsură, accesibilității asigurate prin strategia de promovare adoptate de Macromedia și continuate de Adobe. Plugin-urile corespunzătoare sunt integrate cu cele mai importante browser-e și sisteme de operare. Plugin-ul se obține simplu și gratuit atunci când nu-i integrat în browser. Toate procedurile de instalare se execută în fundal, astfel încât utilizatorul nu trebuie să iasă din browser pentru procesul de descărcare de lungă durată. Plugin-urile se actualizează cu ușurința, ceea ce permite companiei Adobe să dezvolte continuu și să distribuie noile tehnologii. Player-ele Flash și Shockwave sunt intenționat proiectate astfel încât să fie ușor adaptabile la viitor ele se modificări și utilizatorul să actualizeze player-ele doar printr-o simplă descărcare a fișierului corespunzător. Si din moment ce aceste fișiere sunt destul de mici ca mărime, timpul de descărcare va fi scurt. Actualizarea player-elor este asigurată automat de către browser-ele utilizatorilor.

Diversele formate de animație de pe Web au variate particularități care le pot avantaja din anumite puncte de vedere și le pot dezavantaja din altele. Totuși majoritatea dintre designerii Web preferă tehnologia Flash, chiar și atunci când un alt format ar putea fi mai bine adaptat necesitaților lor. Se explică acest fenomen prin simplul fapt eu cunosc că majoritatea utilizatorilor Web au deja capacitățile necesare pentru aplicarea tehnologiei Flash, iar atunci când nu le au, le pot ușor obține. Universalitatea tehnologiei Adobe Flash face ca mai mulți dintre designerii Web să includă conținuturi de tip Flash în paginile lor, ca apoi să accepte definitiv și formatele.

Chiar dacă tipurile de formate Flash (fla) și Shockwave (swf) se referă, în general, la același domeniu și sunt asigurate de aceeași companie, ele au câteva distincții semnificative. Explicația similitudinilor, dar și a deosebirilor, este legată, în primul rând, de originile celor două formate de fișiere:

Aplicația software Director, utilizată pentru a crea conținut Shockwave, există de multă vreme, chiar mai de mult decât există Internetul în forma sa actuală. A fost inițial dezvoltată pentru a crea conținut dinamic pentru CD-ROM-uri, și este încă folosită în acest scop. Când conținutul dinamic a devenit popular pe Internet, versiunile actualizate au inclus și caracteristici care să permită folosirea fișierelor Shockwave pe Web.

Flash, pe de altă parte, a fost construit chiar din start pentru utilizare pe Web. Macromedia a adaptat Flash de la Future Splash Animator, program de animație în grafică vectorială. Versiunea Macromedia a fost special adaptată pentru transmisia prin conexiunile de linii telefonice.

O explicație în plus a „invaziei” animației Flash pe Web este faptul că se generează surprinzător de ușor. Și programul Flash, dar și programul Director, pun un studio de animație funcțional chiar pe desktop, și automatizează o mulțime de sarcini complexe caracteristice pentru multimedia. Odată cu procurarea platformei Flash de către Adobe Systems, situația s-a simplificat întrucâtva deoarece toate pârghiile legate de asigurarea unui viitor pentru aceste formate sunt concentrate într-un singur loc. Rămâne la discreția Adobe Systems să decidă soarta de mai departe a formatelor fla și swf. Totuși la moment, într-o aproximare foarte lejeră am putea spune formatele fla și swf se deosebesc la fel cum se deosebesc fișierele care conțin codurile programelor în anumite limbaje de programare și fișierele executabile (exe sau com) corespunzătoare.[63]

2.2.9 ActionScript

ActionScript este un limbaj de programare orientată pe obiecte folosit în principal pentru dezvoltarea de funcționalități în cadrul animaților Adobe Flash prin generarea fișierelor cu extensia .swf ce rulează în Adobe Flash Player. A fost dezvoltat inițial de compania Macromedia, iar acum aparține companiei Adobe, care a achiziționat Macromedia în 2005. Limbajul de programare are la bază standardul ECMA. El a fost creat pentru desenarea și comandarea animaților vectoriale 2D, dar de-a lungul vremii s-a dezvoltat și pentru a realiza aplicații web complexe sau chiar jocuri. Este un derivat al HyperTalk, limbajul de scripting al HyperCard.

In partea de jos a imaginii de mai jos este panoul Timeline, cu stratul "Actions" creat pentru adăugare ordonată a codului ActionScript la cadrele din el. Aici, cadrul selectat este primul din acest Layer. Iată ce fac opțiunile din panoul "ACTI-ONS – FRAME":

Categorie Script – Se alege tipul de script/versiune fo-losită la cod.

Toolbox – Oferă o listă cu toate ac-țiunile instalate în program, la versi-unea de script ale-asă, organizate pe categorii.

Zona de navigare – Aici sunt organizate toate scripturile din document, și pot fi găsite după "Strat: Număr cadru".

Script Tag – Indică ce script (din ce "Cadru : Frame") este editat.

Pin Script – Adaugă în acea linie un "Tab" la scriptul curent, pentru a naviga mai ușor din unu în altu când se lucrează cu scripturi în mai multe cadre.

Zona scriere cod – Este locul unde se scrie codul ActionScript.

Help – Deschide pagina online de Ajutor de la Adobe, pentru elementul din cod selectat.

Meniu Opțiuni – Meniul cu opțiuni ale panoului, pentru control, format, și altele.

Script Assist – Când aceasta opțiune este activata, codul în script se adaugă controlat, din zona "Toolbox". Script Assist "supraveghează" să se scrie cod fără erori.

Code Snippets – Deschide un panou care oferă segmente de cod gata făcute pentru cele mai utilizate acțiuni, organizate pe categorii.

Toolbar Actions – Bara de instrumente a panoului, cu opțiunile prezentate mai jos:

how/Hide Toolbox – Ascunde și afișează Tollbox.

Remove Comment – Șterge caracterele specifice pentru comentarii; de la cel selectat.

Apply Line Comment – Adaugă caracterele "//" (pentru creare linie comentariu) la începutul rândurilor selectate.

Apply Block Comment – Transforma liniile selectate într-un "bloc de comentariu".

Expand All – Permite extinderea tuturor codurilor care au fost restrânse.

Collapse Selection – Restrânge rândurile de cod selectate.

Collapse between braces – Restrânge codul dintre acolade.

Debug Options – Adaugă /șterge "Breakpoints" (puncte de pauza), unde intenționat se face o pauză a execuției scriptului la o anumita linie din cod, pentru examinarea lui.

Show code hint – Afișează indicii pentru auto-completare cod.

Auto Format – Aranjează scriptul pentru o mai ușoară citire a lui, aplicând spatii si culori. Opțiunile pentru format pot fi setate din meniul Edit -> Preferences -> ActionScript.

Check syntax – Verifica scriptul, căutând erori de sintaxa, și afișează detalii într-un panou "Compiler Errors".

Insert target path – Ajută la alegerea obiectelor la care face referire o anumita funcție din cod.

Find – Ofera posibilitatea de căutare și înlocuire cuvinte din codul scriptului.

Add script items – Oferă acces la elemente din limbajul ActionScript, precum cele din Toolbox.

Acest panou, cu toate opțiunile lui, este folosit pentru adăugarea de scripturi în documentul Flash. Esențial la oricare limbaj de programare este scrierea corecta a codului, respectând syntaxa limbajului. Flash oferă indicii destul de bune în cazul unor erori, pentru depistarea cît mai exacta a lor. Imporțant de avut în vedere este faptul ca ActionScript este un limbaj cu sintaxa case-sensitive (face diferența între majuscule și litere mici), astfel, "Buton" e diferit de "buton".[64]

2.2.10 SQL

SQL (Structured Query Language) este în prezent, unul din cele mai puternice limbaje structurate pentru interogarea bazelor de date relaționale. Pronunția oficială: „si-q-el”. Neoficial, „si-quel”. Este un limbaj neprocedural și declarativ, deoarece utilizatorul descrie ce date vrea să obțină, fără a fi nevoie să stabilească modalitățile de a ajunge la datele respective. Nu poate fi considerat un limbaj de programare sau unul de sistem, ci mai degrabă face parte din categoria limbajelor de aplicații, fiind orientat pe mulțimi. Foarte frecvent, este utilizat în administrarea bazelor de date client/server, aplicația client fiind cea care generează instrucțiunile SQL. Lansat inițial de IBM. Standardizat prima dată de ANSI, apoi ISO. Actualmente, ISO 92. Pentru că există o standardizare a limbajului SQL, multe SGBD (Oracle, Access, Sybase) recunosc principalele instrucțiuni ale acestuia. Caracteristicile adăugate standardului se numesc extensii. De exemplu, în standard sunt specificate 6 tipuri diferite de date pentru o BD SQL. În multe implementări, această listă este completată cu o diversitate de extensii. Fiecare implementare se numește dialect. Dialectul ACCSES conține unele particularități, fiind conceput mai mult pentru crearea interogărilor de selecție.

Există 3 metode de bază privind implementarea limbajului SQL:
apelare directă (Direct Invocation): constă în introducerea instrucțiunilor direct de la prompter

modulară (Modul Language): folosește proceduri apelate de programele aplicație

încapsulată (Embedded SQL): conține instrucțiuni încapsulate în codul de program.

Instrucțiunile SQL pot fi grupate în:

instrucțiuni de definire a datelor, care permit descrierea structurii BD

instrucțiuni de manipulate a datelor: adaugă, șterge, modifică înregistrări

instrucțiuni de selecție a datelor, care permit consultarea BD

instrucțiuni de procesare a tranzacțiilor ‰ instrucțiuni de control al cursorului

instrucțiuni privind controlul accesului la date.

În limbajul SQL standardizat de ISO nu se folosesc termenii formali de relație, atribut-cuplu, ci tabel, coloană, rând.[65]

Trăsături caracteristice SQL

SQL este prezentat in limba engleza. Folosește cuvintele select, insert, delete ca părți ale setului de comenzi.

SQL este un limbaj neprocedural :specifica ce informații dorești, nu cum să le obții.Cu alte cuvinte SQL nu iți cere să specifici metoda de acces la date.Toate cererile SQL folosesc optimizarea cererilor- o parte a RDBMS- pentru a determina rapid remedierea datelor specificate.Aceste trăsături ușurează obținerea rezultatelor dorite.

Procesarea SQL asupra înregistrărilor nu se poate face deciî asupra unei singure înregistrări la un moment dat.Cea mai comună forma a unui set de înregistrări este un tabel.

SQL poate fi folosit de un sir de utilizatori incluzând DBA, programatori de aplicații, personal de management si multe alte tipuri de utilizatori.

SQL pune la dispoziție comenzi pentru o varietate de tas curi incluzând:

date interrogate

inserarea, extragerea și ștergerea rândurilor într-un tabel.

crearea, modificarea și ștergerea obiectelor de tip baza de date

controlul accesului la baza de date si la obiectele de tip baza de date.

garantarea consistentei bazei de date

SQL a devenit un limbaj standard industrial pentru bazele de date relaționale. Institutul Național American de Standarde(ANSI) a adoptat SQL ca limbaj standard pentru RDBMS in anul 1986.Organizația Internațională de Standarde (ISO) a adoptat de asemenea SQL ca limbaj standard pentru RDBMS.Toate RDBMS-urile suporta unele forme de SQL și toți vânzătorii de RDBMS intenționează să se alinieze la standardele ANSI. [66]

2.3. Dezvoltator de website-uri Joomla

Joomla! Este un sistem de management al conținutului Open Source, scris in PHP, destinat publicării de conținut pe local sau online prin intermediul bazelor de date SQL. Numele reprezinta transcrierea fonetica al cuvântului din limba Swahili, ceea ce înseamna împreuna sau toți împreuna. Este motto-ul dezvoltatorilor de sistem, care doresc să creeze un sistem prin care se poate crea tot ce vrei. Părintele Joomla! Poate fi considerat CMS Mambo, de care compania s-a despărțit din cauza neînțelegerilor financiare și influența în companie. Ziua oficiala de naștere a Joomla! Este considerata ziua de 16 septembrie anului 2005, practic a fost același Mambo, doar cu corectarea erorilor, unele adăugări nesemnificative și bineînțeles un nume nou! A venit anul 2006 și lumea a văzut una dintre cele mai populare versiuni Joomla! 1.5 Beta si începe lucrul la localizarea sistemului, în acest scop au fost atrași specialiști din multe țări și Joomla începe marșul triumfal în jurul lumii. La sfârșitul acelui an sistemul a fost considerat ca cel mai bun sistem gratuit de management al conținutului a anului 2006, ceea ce a fost un semnal pentru dezvoltatori ca sunt pe drumul cel bun. În anul 2007 a fost lansată versiunea finala 1.5 cu o schimbare imensă, a fost cu totul un nou CMS, care nu se asemăna nici cu Mambo, nici cu versiunea precedenta 1.0. și de data aceasta sistemul din nou primește un premiu, pentru cel mai bun sistem de management gratuit al conținutului. În anul 2008 are loc localizarea finala, si acum toate barierele pentru Joomla! Sunt dispărute. După asta compania nu s-a oprit si a lansat noi versiuni ale sistemului cu o mulțime de îmbunătățiri și corectări de erori. Anul 2009 CMS Joomla! 1.6, suport întrerupt în luna august anului 2011. În decembrie 2011 a fost lansat Joomla! 2.5. Iar pe 27 septembrie 2012 a fost lansata versiunea Joomla! 3.0.

Avantaje Joomla!

Acum vom analiza avantajele Joomla!. De fapt, sunt mult mai multe avantaje decât cele prezentate de mine, acestea sunt principale, care te vor ajuta să alegi acest sistem sau sa alegi alt sistem, de exemplu WordPress.

Gratuit. Este avantajul principal al acestui sistem, și ceea ce atrage pe începători, care nu sunt dispuși să plătească o mulțime de bani pentru conținut. Acest lucru atrage multi specialiști care creează site-uri web.

Sursa deschisa. Ești programator si vrei sa schimbi ceva? Nici o problema! Tot ce vrei, important să cunoști.

Un număr mare de elemente suplimentare. Sistemul are un număr foarte mare de module, template-uri etc, la nevoie se poate găsi tot ce vrei.

Instalare rapida și ușoară. De asemenea un factor important în favoarea utilizării sistemului, sau poți găsi hosting cu Joomla preinstalat și să nu-ți bați capul.
Setări prestabilite. Sistemul imediat după instalare are un minim necesar pentru lucru.

Actualizări constante. Dezvoltatorii găsesc vulnerabilități și imediat le închid.

Documentația. Deoarece CMS Joomla! Este creat cu mult timp în urmă, pentru el s-au făcut o mulțime de documente și instrucțiuni. De asemenea cu probleme te pot ajuta pe forumuri.

Traducerea. Aproape toate modulele gratuite sunt traduse in limba romana, panoul de administrare de asemenea este tradus in romana.

Dezavantaje Joomla!

Crezi că nu există? Greșești, chiar sunt foarte grave:

Dificil pentru începători. Îmi amintesc cum prima data am instalat Joomla! Panoul administrativ este oarecum greoi, a înțelege din prima principiul de funcționare este imposibil. După aceea am trecut pe WordPress, care este mult mai simplu. Dar, exista un DAR, după ce am lucrat o perioada cu WordPress iar am trecut pe Joomla!, și totul a devenit mult mai clar și mai simplu. Și de aici concluzia: nu trebuie sa înveți sa creezi site-uri pe Joomla!, mai bine sa începi cu ceva mai simplu.

Cod suplimentar. Acest sistem creează o mulțime de cod suplimentar, care nu este necesar de fiecare data. Un începător nu va înțelege și nu va reuși să elimine codul suplimentar, este o sarcina pentru un profesionist cu experiența.

Module și teme plătite. Așa cum am spus mai devreme, pentru Joomla! sunt create o mulțime de module si teme gratuite, care în cele mai multe cazuri sunt suficiente. Dar daca vrei sa faci site-ul mai avansat nu vei reuși fără module plătite, iar prețul, după cum se știe, nu este mic și poate afecta portofelul.

Încărcarea lenta a paginii. Din cauza ca site-ul nou are o mulțime de cod suplimentar și o mulțime de module va trebui luate masuri serioase pentru accelerare.
Indexarea lenta. Nu sunt de acord cu afirmația ca un site creat in Joomla! Se indexează greu. Indexarea este aceeași ca și pentru alte platforme (am indexat un site in Joomla! In 2 ore), totul depinde de web master.Acestea sunt cele mai importante aspecte care merită atenția si poate influenta alegerea platformei CMS.

Exemple de site-uri create in Joomla! Primul site www.Graphics-advertising.ro este un site frumos cu design elegant și viteza de încărcare rapidă Sau putem sa ne uitam la unul din site-urile oficiale ale sistemului Joomla.ro care are multe vizualizări, iar viteza de încărcare de asemenea este rapida.Sau, un site foarte mare cu trafic imens și viteza de încărcare mare – thehill.com (fig.2.7) [67]

Instalarea sistemului Joomla:

Înainte de a instala Joomla! pe calculatorul personal, instalarea unui server local este obligatorie, deoarece Joomla! este dezvoltată în PHP, are bază de date MySQL și nu poate rula fără un server de web. Urmează o listă de unde pot fi alese acestea în funcție de configurația pe care o aveți pe calculatoarele pe care rulați:

XAMPP – Multi sistem de operare Mac, Windows, Linux, Solaris;

WAMP – Sistem de operare Windows;

MAMP-Sistem de operare Apple Mac OSX;

Instalați spre exemplu XAMPP(fig.2.8) :

Figura 2.8. pagina pentru XAMPP

După instalare:

se merge în C:\xampp\htdocs\ (depinde pe ce partiție s-a instalat XAMPP-ul, poate fi D, E, …), creați un folder al site-ului pe care îl creați cu Joomla! (ex. test_joomla) –astfel încât vom avea:

C:\xampp\htdocs\test_joomla\

În acel folder copiati fișierele dezarhivate mai devreme, care se află în Joomla_1.5, 2.5-Stable-Full_Package [sunt 13 directoare (Administrator – – -> Templates) și 14 fișiere (offline.php – – -> CHANGELOG.php)].

Acum tastati în browser: http://localhost/phpmyadmin/ – ne vom duce să creăm o bază de date (fig.2.9) pentru viitorul site. În pagina principală, care o să apară, se poate vedea Create new database, introduceți un nume (de ex. joomla1) și selectăm UTF_8 general_ce și click pe Create.

Figura 2.9. pagina pentru crearea unei baze de date

Fereastra următoare vă anunță că nu dețineți nici un tabel creat întrebând totodată dacă se dorește crearea unui tabel nou. Ignorați acel mesaj, puteti chiar să închideți pagina, însă RETINETI numele pe care l-ati dat bazei de date, pentru că ne trebuie mai târziu )

Pașii pentru instalarea Joomla! 3.6 sunt în pricipiu la fel ca și pentru instalarea Joomla! 2.5 sau 1.5.

DECI, INSTALAREA JOOMLA ÎNCEPE CU:

instalare server local;

mutare fișiere din pachetele de instalare în \htdocs\

creare baza de date;

rulare pași instalare joomla în browser

Nu treceți peste pașii de mai sus pentru că nu o să funcționeze. Pentru a trece acești pași de instalare și pentru a putea dezvolta acest proces, a fost creată pentru fiecare pas o nouă pagină.

6. Deschideti un browser și tastati:

http://localhost/test_joomla,

unde test_joomla este numele folderului care conține Joomla!.

Primul pas reprezintă alegerea limbii în care doriți să decurgă instalarea Joomla.

Joomla verifică cerințele minime necesare pentru instalare. Dacă toate cerințele sunt marcate cu DA, veți putea instala joomla.

La acest pas trebuie citită Licenta GNU/GPL. După ce citiți aceste informații, veți putea trece la pasul următor.

Acest pas reprezintă completarea datelor bazei de date: În pasul patru trebuie să introducem datele referitoare la baza de date:

Tipul bazei de date: în cazul nostru alegem MySQL;

Numele serverului: de obicei se folosește  localhost,

Utilizator: aici introducem utilizatorul bazei de date;

Parola: în acest cîmp introducem parola pentru utilizatorul bazei de date;

-Numele bazei de date:  introducem numele bazei de date;

Completarea informațiilor pentru conectarea la interfața FTP, însă nu este obligatorie, se recomandă să săriți peste acest pas.

Completarea numelui site-ului și datele pentru admin.

Dacă apăsați butonul pentru instalare date mostra, veti avea niște articole puse de cei de la joomla ca să puteți vedea cum arată site-ul cu articole ( un fel de exemplu ).

Ștergerea fișierului instalare

Joomla este o platformă puternică de administrare a conținutului, iar flexibilitatea acesteia este dată de faptul că suportă instalarea unor extensii cu ajutorul cărora funcțiile de baza sunt îmbunătățite sș extinse cu noi funcții specializate. Extensiile se împart în mai multe tipuri principale:

Components – component

Modules – module

Plugins – pluginuri

Templates – teme grafice

Languages – pachete lingvistice

În Joomla!, grafica unui site se schimbă foarte ușor cu ajutorul template-urilor. Oriunde cautați o să găsiți termenii de "template, joomla templates, template-uri Joomla", pentru ceea ce dă aspectul vizual al unui site. Grafica este independentă de content și se adresează elementelor de style existente în pagină.

Ca și structură, în Joomla! fiecare template are câteva foldere și fișiere obligatorii:

index.php – fișier care conține codul de HTML/PHP și poate JavaScript în combinație cu CSS-ul și imaginile din site, o să afișeze grafica finală a site-ului;

templateDetails.xml – acest fișier conține informațiile template-ului (nume, data de creare, autorul, copyright, email-ul și site-ul creatorului, versiunea, descrierea și toate fișierele (fișiere plus imagini) conținute în template;

template_thumbnail.png – imagine a template-ului pe care o putem vedea în admin, Site ->Template Manager ->Site Templates, când trecem cu mouse-ul peste numele template-urilor instalate;

CSS/ – este un folder care conține fișierele de CSS din template (cel mai important este template_css.css). Aici o să găsim clasele din site care ne dau aspectul fonturilor utilizate (familie, dimensiune, culoare), culorile din site, diverse clase pentru div-uri, celule și multe alte clase. Este de menționat faptul că, atunci când căutăm să schimbăm ceva legat de style, aici este locul unde trebuie să căutam;

mages/ – este folderul care conține imaginile utilizate în template, imagini cu extensia.gif.,JPG., PNG; aici o să găsim și logo.gif.[68]

Instalarea site-ului în joomla pe un server

Ce este un server? Serverul web sau web server este serverul care stochează (găzduiește) pagini web și le pune la dispoziția solicitanților prin protocolulHTTP. Și de dată aceasta relația server-client se bazează pe o aplicație care este instalată pe server și care este programată să transfere paginile web găzduite. Putem observa aici că ideea de web server presupune și noțiunea de hosting (găzduire), asta deoarece serverul trebuie să dețină datele pe care urmează să le returneze la cerere. Relația este următoarea: utilizatorul (clientul) aflat în dreptul unui computer pe care are instalată o aplicație tip browser solicită (serverului) prin intermediul unui url o anumită pagină web; serverul rulează anumite linii de cod și returnează un rezultat. Descrierea de mai sus se potrivește perfect în cazul site-urilor (paginilor web) statice (adică cele bazate în exclusivitate doar pe limbajul de programare html și css). Există însă așa numitele site-uri dinamice care au în compunere alături de limbajul rudimentar de afișare a paginii web și un limbaj de comunicare între serverul web și o bază de date. De această dată relația este următoarea: utilizatorul (clientul) aflat în dreptul unui computer pe care are instalată o aplicație tip browser solicită (serverului) prin intermediul unui url o anumita pagină web; serverul web verifică solicitarea și prin intermediul unui limbaj de programare special interoghează o bază de date, dacă anumite condiții sunt intrunite, baza de date returnează serverului web datele solicitate care la rândul lui furnizează datele mai departe clientului inițial. În această ultimă relație între web server și utilizator sunt transmise doar informații destinate afișării în browser într-o formă prietenoasă a informațiilor solicitate. Până să ajungă la utilizator, așa cum am văzut mai sus, serverul web prin intermediul unui scripting special schimbă o serie de informații cu o bază de date stocată.[90]

Cum să alegeți hosting pentru joomla:

Una dintre cele mai mari provocări atunci cînd vă creați un web-site de la zero este de a găsi furnizorul de web hosting cel mai potrivit. Un site creat cu Joomla nu face exceptie de la regulă. Serviciile de hosting abundă în oferte, dar cum știți pe care să-l alegeți? Iată cîteva indicații care v-ar putea ajuta să găsiți serviciul de web hosting potrivit pentru site-ul dvs. Joomla.

Hosting gratuit- Să începeți cu primul dvs. site pe un serviciu gratuit de hosting nu este neaparat o idee rea. Dar, rețineți că nu este nici o idee bună atunci cînd aveți planuri de extindere. Hosting-ul gratuit este suficient pentru site-uri personale sau bloguri. Dar daca aveti de gînd să creați un site de afaceri sau de e-commerce, săriți peste această opțiune, deoarece mai mult ca sigur că nu va veni cu caracteristicile de care aveți nevoie.

Preț- Compararea prețurilor diferitelor servicii de hosting și caracteristicilor pe care le oferă trebuie sa fie luata ca o prioritate. Nu alegeți în mod automat ce e mai ieftin. Verificați în primul rînd caracteristicile pe care le oferă serviciul respectiv. Rețineți că niciun preț nu este prea mare în cazul în care o companie de hosting vă poate garanta uptime de 100% și vă oferă caracteristici importante și suport tehnic 24/7.

Securitate- Unii furnizori de web hosting ofera sisteme de securitate mai complexe și sisteme stricte de codificare pentru a proteja conținutul site-ului dvs. de atacuri venite din exterior. Informați-vă dinainte asupra furnizorului ales, pentru a verifica dacă au existat antecedente de securitate pe sistemul său.

Lațime de bandă- Lațimea de bandă dictează cît de repede poate fi descărcat un fișier și stabilește, de asemenea, timpul de încărcare a unei pagini web. Dacă site-ul dvs. are conținut “greu”, cum ar fi grafica și plugin-uri, alegeți furnizorul de hosting care ofera o lațime de bandă cea mai mare.

Spațiu pe disc- Ca proprietar de site, trebuie sa aveți o idee generala despre cît de multe date veți avea nevoie pentru site-ul dvs. Cele mai multe servicii de web hosting ofera mult spațiu pe disc, chiar și pentru planurile mai mici.[91]

2.4. Concluzii la capitolul 2

Noțiunea de website (sau pur și simplu site, ori „site web”) desemnează o grupă de pagini web multimediale (conținând texte, imagini fixe, imagini mișcătoare și chiar sunete), accesibile în Internet în principiu oricui, de obicei pe o temă anume, și care sunt conectate între ele prin așa- numite hyperlinkuri. Diversele situri web pot fi oferite de către o companie, un proiect, o rețea de utilizatori, o persoană particulară, o administrație publică și multe altele.nPentru crearea paginilor web s-a impus limbajul HTML (HyperText Markup Language) – un limbaj de marcare, al cărui scop constă în prezentarea într-un anumit format a informațiilor: paragrafe, tabele, fonturi, culori, ș.a.m.d. Calculatorul pe care se găsește site-ul se numește „server”, iar calculatoarele care accesează continutul site-ului se numesc „client”. Orice calculator client trebuie să dispună de un program specializat, numit „browser”, cu ajutorul căruia să se poată interpreta și deci vizualiza fișierele HTML. Pe server trebuie să se găsească un program care răspunde cererilor browser-ului aflat pe calculatorul client. Cererea efectuată de către browser și răspunsul server-ului se fac prin respectarea unui anumit protocol. Acest protocol se numește HTTP (HyperText Transfer Protocol). Constructia World Wide Web este pe baza unui protocol numit Hypertext Transfer  Protocol ( HTTP ) . HTTP este un protocol mic și rapid care se potrivește foarte bine sistemelor informatice multimedia și distribuite în salturile între site-uri. PHP vă permite să furnizați un conținut Web dinamic, adică un conținut Web care se modifică automat de la o zi la alta sau chiar dela un minut la altul. SQL fiind cel mai popular limbaj utilizat pentru creearea,modificarea, regăsirea și manipularea datelor de către SGBD-urile (Sistemele de Gestiune aBazelor de Date) relaționale. Web-ul constă în pagini cu informații de pe gazde care rulează software de tip server Web Gazda este de multe ori identificată cu serverul Web, lucru care nu este corect.Serverul Web este un software, nu calculatorul în sine.Un Web server  este un program care furnizează pagini Web la cerere. Când un utilizator de la o adresă IP specifică solicită un anumit fișier, serverul Web încearcă să obtină acel fișier și să-l trimită înapoi utilizatorului. Fișierul solicitat poate fi codul sursă HTML al unei pagini Web, o imagine GIF, un fișier Flash, un document XML, sau un fișier AVI. Browserul Web este cel care determină ceea ce trebuie cerut, nu serverul Web.Conexiunile la serverul Web stabilesc pe măsură ce sunt accesate, se solicită o cere a unei pagini de la un server Web, o conexiune IP este stabilită prin Internet între gazda solicitantă și gazda pe care rulează serverul Web. Pagina Web cerută este transmisă prin acea conexiune, iar aceasta este întreruptă de îndată ce pagina este primită (de exemplu, imaginiGIF sau JPG). HTML este un limbaj de markup. El permite crearea layout-ului paginilor și a formularelor, dar nimic mai mult. Pentru a se construi interfețe intuitive și sofisticate este necesar și un limbaj descripting la nivel de client.

3.SITE-UL LICEULUI TEORETIC ,,ION CREANGĂ” S. ZÎRNEȘTI

Partea practică în lucrarea de licență va consta în realizarea site-ului oficial al Liceului Teoretic ,, Ion Creangă” din s. Zirnești. Site-ul va fi efectuat în perioada noiembrie 2016 – mai 2017. În aceasta lucrare se va lucre la nivel de design. În perioada de început se va cerceta designul site-urilor educaționale și modul de efectuare, modul de administrare a acestora, cum este conceput conținutul și ce fel de conținut se găsește. Se va asemui multiple site-uri din R. Moldova și străine, iar pe baza concluziilor obținute se va realiza site-ul Liceului Teoretic ,, Ion Creangă” din s. Zîrnești , în strânsă colaborare cu prof. lector superior. univ. Popovici Ilona, coordonatorul acestei lucrări de licență. În ceea ce referă la organizarea site-ului și conținutul despre liceu, la prima etapă se va constata organizarea structurii cât mai potrivite unui site educațional și se va oferit consultanță și sprijin la nivel tehnic pentru realizarea conținutului.

3.1. Crearea bazei de date folosind XAMPP

Baza de date a fost realizată cu aplicația XAMPP folosind phpMyAdmin.

Pentru deschiderea aplicației phpMyAdmin se pornește XAMPP și se tastează în caseta de text pentru adrese a aplicației Internet Explorer adresa http://localhost/phpmyadmin/

Figura 3.1 Accesarea aplicației phpMyAdmin

În fereastra afișată se va tasta numele noii baze de date (gimnaziu) și se va apăsa butonul Creare(Fig.3.2):

phpMyAdmin va crea comanda SQL de creare a unei baze de date și o va trimite serverului MySQL. phpMyAdmin va afișa de fiecare dată comenzile pe care le-a trimis serverului de baze de date MySQL.

Odată creată, baza de date gimnaziu va fi bază de date curentă. Comenzile ulteriore, de exemplu cele prin care se vor crea tabelele (fișierele) acesteia, se vor adresa acesteia.

La următoarele porniri ale aplicației phpMyAdmin intrarea în baza de date gimnaziu se va realiza prin selectarea acesteia în arborele afișat în panoul din stânga al aplicației (fig. 3.3).

Dupa ce se va creea baza de date se va apăsa pe linkul de sus Server:localhost. Și se va dat clik pe Users (fig.3.4).

Va trebui să se creeze un nou user pentru asta apăsați pe Add a new user. Acum va trebui să completați căsuțele. La user name veți pune numele userul , la host veți alege local(sau scrieți localhost) dup aceea puteți pune parola. Pentru ca userul să poată avea accest la toate comenzile apasați pe Check all. După ce ați completat tot apasați pe butonul Go pentru a creea userul (fig.3.5.). Acum deschideți browserul și la adresa veți pune așa:

http://localhost/security/xamppsecurity.php

Acum se va completa spațiile goale cu datele necesare pentru a îmbunătăți securitatea. Pentru a vedea statisticile din aceasta luna se va instrat pe http://localhost/xampp și din meniul din stînga se va da clik pe Webalize și se va putea vedea statisticile.

3.2. Instalare joomla pe server

Instalarea acestui CMS este una cat se poate de simpla. Pentru inceput trebuie sa downloadati una din versiuni pe calculatorul dumneavoastra de la Joomla, dupa care va trebui sa dezarhivati acel zip. Și să-l copiati în C:\xampp\htdocs și să-l redenumiți dupa numele de domeniu dorit al site-ului.

Configurația principală

Porniți Joomla! instalator web, prin deschiderea browser-ului dvs. preferat și navigarea la numele de domeniu al site-ului. La instalarea gazdei veți folosi http://www.yoursitename.com. Dacă instalați Joomla! Pe plan local, veți folosi http: // localhost / <cale spre fișiere Joomla> și ar trebui să vedeți ecranul de instalare.(fig.3.6.)

Numele site-ului: numele site-ului dvs. Web – acesta poate fi modificat în orice moment mai târziu în pagina Configurare globală a site-ului.

Descriere: introduceți o descriere a site-ului. Aceasta este o descriere globală a metașelor de rezervă folosită pe fiecare pagină care va fi utilizată de motoarele de căutare. În general, un maxim de 20 până la 25 de cuvinte este optim. Din nou, acest lucru poate fi modificat în pagina Configurație globală a site-ului în orice moment. Pentru mai multe informații despre metadate, consultați setările globale de metadate și introducerea meta-datelor motorului de căutare.

Adresa de email a administratorului: adresa de e-mail de administrare. Introduceți un e-mail valid în cazul în care vă uitați parola. Aceasta este adresa de e-mail unde veți primi un link pentru a schimba parola de administrator.

Admin Nume utilizator: Joomla! Folosește un "admin" implicit ca nume de utilizator pentru Super Utilizator. Puteți să o lăsați ca atare, să o schimbați acum (care este o bună măsură de securitate) sau să utilizați profilul meu în interfața Administrare pentru al modifica mai târziu.

Parola de administrator: rețineți că utilizatorul super are controlul maxim al site-ului (frontend & backend), deci încercați să utilizați o parolă dificilă. Utilizați Profilul meu în interfața Administrare pentru al modifica mai târziu. Confirmați parola în caseta Confirm Password Admin.

Site Offline: faceți clic pe caseta Da sau Nu. Da – aceasta înseamnă că, atunci când instalarea este completă, Joomla! Site-ul Web va afișa mesajul "Site-ul este offline" atunci când navigați la site-ul dvs.name.com pentru a vedea pagina de pornire. Nu – acest lucru înseamnă că site-ul este live când navigați pe site-ul dvs. pentru a vedea pagina de pornire. Puteți utiliza Configurația globală a site-ului în interfața Administrare pentru a schimba starea offline în orice moment.

Când totul de pe prima pagină este finalizat, faceți clic pe butonul următor pentru a continua:

Setări de configurare

În continuare va trebui să introduceți informațiile despre baza de date pe care o veți folosi pentru Joomla! acum. A fost sugerat să scrieți aceste informații în fila "Pregătiți pentru instalare". De asemenea, puteți citi sau revizui Crearea unei baze de date pentru simplificare, aceste instrucțiuni reprezintă o referință la instalarea cu o bază de date MySQLi. Instrucțiunile de pe pagina de instalare sunt explicite, dar aici sunt din nou:

Tipul bazei de date: MySQLi este baza de date comună utilizată

Numele gazdei: Unde se găsește baza dvs. de date? Obișnuită este localhost, dar unii gazde utilizează un anumit server de baze de date, cum ar fi dbserver1.yourhost.com

Nume de utilizator: numele de utilizator utilizat pentru a vă conecta la baza de date

Parola: parola pentru numele de utilizator al bazei de date

Numele bazei de date: numele bazei de date

Prefixul tablei: unul este generat automat, dar îl poți schimba. De exemplu, jos3_ poate fi folosit. Doar nu uitați să puneți caracterul de subliniere (_) la sfârșitul prefixului.

Vechiul proces de baze de date: ar trebui instalatorul să copieze backup sau să șterge tabele existente în timpul instalării de tabele noi? Faceți clic, Da sau Nu pentru a selecta opțiunea.

Toate aceste opțiuni pot fi editate pe pagina Configurație globală a site-ului, sub opțiunile Server după terminarea instalării. Rețineți că veți întrerupe instalarea dacă modificați aceste setări după instalare dacă nu aveți o copie completă a bazei de date curente utilizate de Joomla! instalare. Utilizările uzuale ar fi actualizarea numelui de utilizator și a parolei bazei de date sau completarea unei mutare a unei instalări existente într-o gazdă nouă cu parametri diferiți.

După completarea tuturor informațiilor, faceți clic pe butonul următor pentru a continua.

Prezentare generală

Acum este momentul să finalizați Joomla! instalare. Ultima pagină a instalării browserului web conține toate informațiile despre instalare. Aceasta include opțiunile (în partea superioară) pentru instalarea datelor de probă și configurațiile instalării (în partea de jos) instalați exemple de date și configurații de e-mail: Primele opțiuni sunt pentru instalarea automată a conținutului eșantionului pe site și trimiterea prin e-mail a setărilor de configurare. Dacă sunteți nou în Joomla! Ar fi benefic să instalați câteva date de probă pentru a vedea cum Joomla! lucriază. Puteți alege în acest moment să vă trimiteți prin e-mail setările de configurare. Dacă este selectată opțiunea Configurare e-mail, va apărea opțiunea Parolă e-mail. Parola de e-mail este dezactivată în mod prestabilit pentru securitate. Puteți alege să includeți parola, faceți clic pe Da. Este timpul să verificați configurațiile instalării și mediul de instalare. Verificarea configurației.

Verificarea configurațiilor

Dacă totul este în ordine, veți vedea instalarea în partea de sus a paginii de ansamblu. Dacă nu, acesta este locul pentru a verifica și a vedea ce poate provoca o problemă.

Secțiunea este împărțită în 4 grupe:

Configurația principală: toate informațiile specifice site-ului, cum ar fi numele site-ului web, descrierea, numele de utilizator admin etc.

Configurarea bazei de date: conține informațiile despre baza de date Joomla! Care va fi folosită.

Verificare preliminară: toate aceste cerințe trebuie să fie afișate ca Da, altfel nu veți putea instala Joomla! Cu excepția versiunii PHP, restul sunt de obicei controlate în versiunea php Este posibil să aveți nevoie de asistență din partea gazdei pentru a corecta aceste setări sau pentru a verifica dacă este posibil să le ajustați. Setările tipice pentru PHP care ar putea duce la eșecul instalării și pot necesita ajustări includ următoarele valori sugerate: (1) memory_limit (64M); (2) max_execution_time (300); (3) post_max_size (30M); (4) upload_max_filesize 30M).

Setări recomandate: aceste setări sunt recomandate în configurația dvs. PHP, dar nu vor împiedica pe Joomla! de la instalare. Puteți consulta instrucțiunile de mai sus despre cum pot fi modificate.(fig.3.9.)

Dacă totul este corect și toate verificările sunt transmise, puteți face clic pe butonul Instalare din colțul din dreapta sus al paginii ,,Prezentare generală”. Aceasta va începe procesul de instalare real. După ce faceți clic pe butonul Instalare, ar trebui să vedeți o bară de progres cu informații suplimentare despre instalare. După finalizarea instalării, ar trebui să vedeți pagina de succes!

Succesul și finalizarea instalării

Felicitări! Joomla! 3 este acum instalat. Dacă doriți să începeți să utilizați Joomla! Fără a instala limbi suplimentare, există un ultim pas pentru a finaliza instalarea. Trebuie să ștergeți dosarul de instalare. Dați clic pe Eliminați dosarul de instalare și va apărea un mesaj de succes. Acum puteți naviga la conectarea Administratorului făcând clic pe Administrator sau mergeți direct la site-ul dvs. făcând clic pe Site.(fig. 3.10.)

3.3. Conținutul site-ului. Categorii și articole

Continutul unui site Joomla, reprezinta partea de text si imagini ce apar pe paginile site-ului. Joomla face ca adaugarea de articole sa fie o treaba foarte usoara si intuitiva. Utilizând partea de administrare a site-ului, puteti adauga foarte usor continut, utilizând un editor care seamana cu Microsoft Word Document. Imediat ce salvati în panoul de administrare, noul continut va fi automat afisat în paginile siteului. Continutul (Content în meniul panoului de configurare) este organizat pe 3 niveluri: Articole recomandate (Featured articles), Categorii(Category Manager) si Articole (Article Manager).(fig. 3.11) Articolele în site-ul Joomla, sunt continute în categorii si categoriile fac parte din sectiuni. Este un mod foarte util de a va tine toate articolele într-o perfecta ordine. Administrarea acestora se face din panoul Joomla, din meniul Content.

Pentru crearea unei categorii navigati in meniul Content –> Category Manager. Odata creată categoria dorita se pot crea sau modifica articolele existente. Accesând meniulContent –> Article Manager veti vedea un tabel asemanator cu cel din imaginea de mai jos (Figura 3.12).

Tabelul cu articole contine mai multe coloane cu urmatoarele informatii:

# – numar curent, casuta de selectare,

Title – titlul articolului,

Published – indica daca un articol este publicat sau nu,

Front Page – indica articolul afisat pe prima pagina,

Order – ordinea articolelor în cadrul categoriei (prin click pe sageti se poate muta un articol mai sus sau mai jos in lista),

Access Level – indica cine are acces la citirea articolului (implicit este Public),

Section – sectiunea din care face parte categoria,

Category – categoria din care face parte articolul,

Author – autorul articolului,

Date – data la care a fost creat articolul,

Hits – numar de accesari de la publicare (accesari din panoul de configurare în vederea revizuirii, si nu accesari de catre vizitatori),

ID – identificator unic.

Spre exemplu, pentru a sterge un articol se bifeaza casuta din dreptul numelui articolului, si se face click pe butonul Trash. Articolul nu este sters complet, ci este mutat în Content –> Article Trash. Pentru stergerea definitiva a unui articol, acesta trebuie eliminat si din cosul de gunoi. Pentru editare se poate da click pe titlu sau se poate selecta articolul si apoi se face click pe butonul Edit din meniul de sus. Pentru crearea unui articol nou se da click pe butonul New.

In continuare sa analizam pagina de editare a unui articol. În partea dreapta sus avem meniul paginii cu butoanele Save (salvare si iesire), Apply (salvare fara a iesi din pagina de editare), Close (iesire fara salvare). Zona de editare este împartita în doua coloane. Coloana stânga contine câmpurile de setare a titlului articolului, a linkului prietenos (alias) si a sectiunii si categoriei din care face parte articolul. Folositi un Titlu sugestiv pentru articol, care sa aiba maxim 65 de caractere. Alias-ul reprezinta titlul folosit în linkul site-ului si acesta este recomandat sa fie scris doar cu litere mici si fara spatii. Mai jos gasim câmpul de editare propriu-zis ce are doua bare de instrumente. Sus sunt butoanele de formatare a textului, similare cu cele din Word, iar în partea de jos vom gasi butoane suplimentare de inserare imagini, video sau sfârsit de pagina. Bara de formatare a textului poate diferi in functie de editorul de text ales. Coloana din dreapta contine 3 zone (Parameters Article, Parameters Advanced si Metadata Information) ce reprezinta o serie de parametri pentru modul în care este afisat articolul în site. Este recomandat sa lasati setarile globale pentru Parametri, întrucât acestea pot fi configurate pentru întreg site-ul in meniul Content -> Article Manager -> Parameters. În zona “Metadata information” pot fi adaugate descrierea (Description) si cuvintele 33 cheie (Keywords) pentru articolul respectiv. Descrierea trebuie sa aiba maxim 160 de caractere, ea nu apare pe site, ci doar în codul sursa, având importanta doar pentru SEO. Cuvintele cheie trebuie sa fie în numar de 5 – 8, despartite prin virgula si scrise cu litere mici si fara caractere speciale sau diacritice. Daca nu completati aceste câmpuri, nu este nici o problema pentru ca articolul va mosteni descrierea si cuvintele cheie globale ale site-ului. (fig. 3.13.)

Când editati un articol aveti grija cât stati pâna salvati, pentru ca se poate ca timpul sesiunii voastre de administrator sa expire si sa aveti neplacuta surpriza sa fiti dati afara din panoul de control si sa pierdeti articolul la care tocmai ati muncit. De aceea este bine sa salvati cât mai des sau sa redactati textul în Notepad, sa îl copiati în editorul Joomla si apoi sa realizati formatarea finala a acestuia. Acel lacatel ne arata ca articolul este în “editare”, nu a fost salvat. Nu-i nimic, intrati pe acel articol si la iesire utilizati unul din butoanele prezentate mai sus. Evitati sa copiati text direct din Word. Odata cu textul, se vor insera si coduri invizibile ce vor incarca suplimentar pagina site-ului. Daca totusi aveti text redactat in Word, copiati-l mai intai in NotePad si de acolo copiati-l in editorul Joomla.

Adaugarea unei imagini intr-un articol se face foarte usor din bara aflata in subsolul editorului articolului. Puneti cursorul de la mouse în locul unde vreti sa inserati imaginea si dati click pe butonul “Image”. Alegeti o imagine existenta pe server (în site) sau dati click pe Browse pentru a alege o imagine de pe calculatorul dvs. Nu uitati sa dati apoi click pe Start upload pentru a încarca pe server poza de pe calculator. Adaugati detalii ca Image description si Title pentru ca acestea servesc atât utilizatorilor ce au activata functia de blocare a imaginilor din site-uri cât si motoarelor de cautare (Google). Click pe Insert. Pentru aliniere pe centru în cadrul articolului, click pe poza si alegeti aliniere centru în pagina de editare a articolului.(fig. 3.14)

NU confundați categoriile cu articolele. Articolul aparține unei categorii și nu invers. Faptul că ați creeat o categorie nouă, nu înseamnă că ați creeat un articol/ conținut pe site. Categoriile vin în ajutorul dumneavoastră în scopul organizării eficiente a articolelor.

Pentru adaugarea unui link în cadrul articolului se redacteaza întai paragraful complet. Apoi se selecteaza textul care va deveni link, si se da click pe pictograma din bara de instrumente sub forma unor zale de lant. În noua fereasta se trece linkul în casuta URL si se da click pe Insert. Textul selectat se va transforma într-un link de culoare albastra, subliniat.(fig. 3.15)

.

3.4. Designul și structura site-ului.

.

Interfața site-ului de liceu este actuală.( Fig. 3.16.) Toate elementele vizuale sunt organizate cu mare atenție. Marginile verticale din stânga și dreapta sunt respectate în toate secțiunile de aspect. Între elementele vizuale în proiectare, spațiile sunt stabilite astfel încât acestea nu sunt prea mari sau prea mici sau înghesuite. Fiecare element este poziționat în interfață în funcție de importanța sa. Aranjarea este centrată și are o lățime fixă: 966px. Secțiunea de conținut este delimitată pe ambele laturi de o umbră de intensitate scăzută concepute pentru a evidenția structura vizuală a interfeței.

Antetul este conceput din două linii orizontale. Prima linie a antetului este dedicată logo-ului Liceului Teoretic "Ion Creangă". S-a decis să se utilizeze un degradeu radiala cu nuanțe de albastru, cu un contrast foarte scăzut. Un degradeu strălucitor ar fi stîrnit un contrast prea mare și nu ar fi profesional. Nu am folosit un colaj de fotografii în antet pentru a împedicad distragerea de conținut și crearea senzație unui design liber, confortabil și simpatic. Culoarea albastră este o culoare odihnitoare și manifestă profesionalism, seriozitate și relaxare. S-a demonstrat că atunci cînd se citește un text albastru oamenii reușesc să rețină mai multe informații. A doua linie din antet este o bară orizontă unde sunt incluse meniurile principale. Spațiile mari separă butoanele din meniu. În denumirea meniului am folosit un gradient de intensitate scăzută pe nuanțe portocalii. Când mouse-ul îl dăm peste un buton, apare un meniu în cascadă aceste sunt meniurile din al doilea nivel. Meniurile cascadă au o culoare în spate, un a albastru mai închis pentru a le deosebi de fundal. (fig.3.17)

În subsol, pentru stabilitate, s-a utilizat aceeași culoare ca în antet. Aici s-a situat mențiunile de copyright și o legătură spre autorul site-ului.

Prima pagină este realizată din mai multe coloane și diviziuni. Site-ul conține un șablon universal pentru școală, este un șoblon adecvat unde este echipat cu un panou de administrare prin care se poate schimba toți parametrii , pornind de la imaginile încărcate de animație pînă la subsolul site-ului.

Sub imaginile șablonului, la mijlocul paginii se află o listă de legături organizate pe coloane. Acestă listă are rolul de a oferi utilizatorilor o privire asupra principalelor pagini din site. (fig. 3.18)

Următoarea secțiune de pe prima pagină este formată din mai multe coloane principale: noutăți, articolele cele mai citite și un traducător. Coloana de noutăți este divizată în trei și sunt listate ultimele știri publicate pe site. În coloana articole- cele mai citite, apare informații despre aticolele cele mai citite. Iar în coloana traducator utilizatorul are posibilitatea să traducă informația de pe site-ul liceului în limba dorită engleză, franceză , rusă sau să o traduca in limba de bază română.

Mai jos sub noutăți se află diaporama cu imagini. Fiecare imagine este atent realizată. Pozele lansate au fost prelucrate anume să se potrivească cu paleta de culori utilizată și în layout-ul site-ului. Au fost corectate desfigurările de perspectivă și culorile, s-a eliminat gălăgia din poze și s-a potrivit compoziția, etc. În subsolul paginii se afă o rubrică cu partenerii liceului ce sunt în strinsă colaborare.

În site-ul Liceului Teoretic ,,Ion Creangă” s. Zîrnești s-a structurat o structură bine gîndită și regîndită. După cum am precizat mai sus s-a realizat analiza a mai multor site-uri naționale cît și internaționale. Împreuna cu cordonatorul practicii de licență am rezumat ca site-ul liceului să fie realizat atăt la nivel vizual cît și tehnic. S-a elaborat o structură a site-ului în baza analizelor și deasemenea a observațiilor efectute pe multiplele site-uri educaționale. În final după ce s-a schițat structura vom vorbi despre meniurile principale din site.

Pagina principală. Reprezintă pagina de bază a site-ului, unde vor apărea ultimele articole plasate pe site (versiunea scurtă a articolelor), cu butonul „citește mai mult”. De asemenea, pe pagină vor exista spații pentru a adăuga bannere ale partenerilor, calendarul evenimentelor, integrarea rețelelor sociale pe site și un slideshou cu imagini actuale.

Informații. Aici se gasește pagina care reprezintă Liceul Teoretic ,,Ion Creangă” din s. Zîrnești . Se găsesc foarte multe informații despre liceu :scurt istoric, misiunea școlii, orar, tabere, cercuri , proiecte și altele.

Personal. În această secțiune se găsește prezentarea personalul didactic și ceva informații despre fiecare persoană.

Liceul în Imagini. În acest meniu sunt repartizate pe submeniuri activitățile cele mai actuale ale Liceului și în fiecare submeniu se manifestă cîte o galerie de fotografii : școala în imagini; activități; sarbătoare în lumea dascălilor, 2016; festivalul portului popular, ediția a II, 2016; săptămîna limbii ruse în școală; seminar raional Francophonia.

Examene. Aici se găsește informații despre examene, admitere elevilor, programarea candidaților, rezultatele elevilor, rezultatele candidatilor la simularea examenului de bacalaureat, regulamentul unic de ordine interna în liceul teoretic "Ion Creanga" și deasemenea s-a inclus documentație despre organizarea învățămîntului general.

Elevi. Această parte a siteului conține informații de interes pentru elevii liceului. Se găsesc informații despre : premii și distincții, despre clasele de elevi și despre activitățile petrecute sau care vor avea loc.

Forum. În acest meniu s-a inclus un forum unde fiecare elev, părinte sau chiar absolvenți pot conversa diferite teme sau pot să propună diferite sugestii. Pentru a avea acces la forum este nevoie de logare pe site-ul liceului.

Bibliotecă online. Aici se gasește linkul site-ului bibliotecii naționale a Republicii Moldova. Fiecare elev îl poate accesa pentru lista pginile bibliotecii online.

Contact. Acest meniu este organizat pe două coloane. În dreapta se află un formular de contact iar în stînga se află datele de contact și o hartă unde te poți orientă să ajungi la adresa liceului.

3.5. Concluzii la capitolul 3

Joomla! este un sistem gratuit cadru sursă și publicarea de conținut deschis proiectat pentru a crea rapid extreme de interactive multi-lingvistice site-uri web, comunități online, portaluri media, blog-uri și aplicații comerț. Joomla! Oferă o interfață grafică ușor de utilizat, care simplifică administrarea și publicarea de volume mari de conținut, inclusiv HTML, documente și conținut media bogat. Joomla! Este utilizat de organizații de toate dimensiunile pentru rețele intranet și extranet și este susținut de o comunitate de zeci de mii de utilizatori. Joomla! permite personalizarea fiecărui aspect al unui site Web, inclusiv prezentarea, aspectul, administrarea și integrarea rapidă cu aplicațiile de la terți. Joomla! Oferă acum mai multă putere dezvoltatorului, făcând totodată experiența utilizatorului mai prietenoasă. Pentru cei care doresc întotdeauna o extensibilitate sporită. Joomla, are o astfel de putere incredibila si flexibilă, esti liber sa iei orice directie .

Joomla este absolut gratuit. 100% gratuit de utilizat, indiferent de implementarea dvs. Acest lucru se datorează, în parte, rădăcinilor sale non-corporative și structurii de sprijin bazate pe voluntari. Există puține proiecte pe care proiectul Joomla trebuie să le plătească pentru a-și menține poziția și toată lumea care contribuie la dezvoltarea sa face acest lucru dintr-o pasiune pentru a crea ceva care să răspundă cu adevărat nevoilor site-urilor mari și mici.

Joomla este o sursă deschisă, ceea ce înseamnă că nu vor apărea surprize odată ce ați început site-ul. Fiecare parte a platformei Joomla este deschisă pentru a vă inspecta și chiar modifica pentru a satisface nevoile individuale ale site-ului dvs. Comunitatea extensivă de dezvoltare a comunității Joomla a creat mii de pluginuri, extensii, șabloane și alte opțiuni pentru a vă permite să profitați la maximum de site-ul dvs. fără a trebui să fiți un expert în dezvoltarea Web.

S-ar putea să vă întrebați de ce atât de mulți oameni contribuie la Joomla doar pentru a le pune la dispoziția publicului. Răspunsul este, pur și simplu, că există o serie de companii aflate pe baza principiului furnizării de software și servicii premium care funcționează cu mediul Joomla. Aceste companii și persoane fizice își petrec zilele lucrand cu clienții pentru ai ajuta să-și transforme conceptele de site ambițioase în realitate. Noaptea se întâlnesc frecvent contribuind la proiectul Joomla, pentru a face platforma chiar mai bună. RocketTheme, de exemplu, oferă o serie de șabloane și extensii utile și gratuite pentru Joomla, creând în același timp șabloane premium și aplicații pentru oricine dorește să-și bage site-ul într-un loc, fără a cheltui prea mult timp și bani pentru a face acest lucru. Joomla este utilă pentru o gamă largă de tipuri și stiluri diferite de site-uri. Pe lângă faptul că este cea mai mare platformă de software web pentru organizațiile guvernamentale din întreaga lume, este folosită în mare măsură pentru educație, mass-media, corporații, comerț electronic și chiar site-uri personale și bloguri. Este extrem de versatil.

Una dintre punctele forte principalele este utilitatea sa. Indiferent dacă sunteți un student care începe doar în designul web sau un pensionar care dorește să învețe să facă un site web, Joomla poate fi o alegere excelentă pentru dvs. Chiar nu trebuie să știi nimic despre programare sau dezvoltare Web pentru a configura și a personaliza un site, deși poți să intri în codul deschis pentru a crea ceva cu totul original și unic. Doriți să creați un modul personalizat pentru site-ul dvs. pe care nici un alt site de pe Web nu îl are? Puteți face acest lucru cu Joomla.

CONCLUZII GENERALE ȘI RECOMANDĂRI

Studiind diversitatea site-uri educaționale s-a ajuns la concluzia că web site-uile de pe Internet la momentul actual este cel care poate fi folosit pe scară foarte înaltă datorită simplității de utilizarea a lui și accesibilității foarte înalte a acestuia, deoarece la momentul dat serviciile Internet sunt accesibile pentru majoritatea populației de pe pământ.

Dezvăluirea acestei teme ne-a permis să descoperim toată gama largă a mediilor de programare, așa ca HTML, PHP, JavaScript, HTTP, care sunt utilizate pe larg în prezent pentru comanda, comunicarea între calculatoare și prelucrarea unor informații.

Cel puțin pentru cinci ani de acum încolo, HTML-ul, mai ales prin facilitățile oferite de standardul 4.0, și limbajul JavaScript vor fi principalele limbaje de marcare a paginilor Web, dând proiectanților de site-uri Web flexibilitate, ușurință în design și suport pentru includerea de elemente interactive. Va trebui însă să ofere și posibilitatea de introducere de formule matematice oricât de complicate și elemente de realitate virtuală, plus mecanisme de interogare a bazelor de date eterogene si distribuite. Complementar, XML se află încă la începuturi atât privind cercetările teoretice, cit si aplicațiile dezvoltate. Pentru indeplinirea obiectivelor educației, site-urile oferă atît accesul la informație cît și un mod de comunicare cu dascălii educației.

Site-ul Liceului oferă facilități atât elevilor, părinților cât și celor care au absolvit. El asigură accesul la informații și servicii indiferent de locația geografică fiind disponibil 24/24.

Crearea unei identități originale prin intermediul site-urilor este un prim pas pentru prezența organizației educaționale pe Internet. Creșterii semnificative a interesului organizațiilor educaționale pentru dezvoltarea de strategii de comunicare bazate pe web, cât și a interesului general al publicului, simpla creare a unui web-site nu mai este suficientă. Acesta trebuie să fie profesionist și să se ridice la nivelul ultimelor standarde. Pentru a avea siguranța unui site de calitate, clar, simplu și bine structurat, trebuie de acordat importanță etapelor prezentate mai sus ți anume respectarea principilor de design. Accesibilitatea funcțiilor, vizibilitatea butoanelor, poziționarea meniurilor și a diverselor elemente de interes într-o pagina web este esențiala pentru transformarea simplilor vizitatori în utilizatori permanenți. Odată cu creșterea complexității unui site, structura acestuia trebuie să asigure o ierarhie clară a paginilor și o navigare ușoară pentru utilizator.

Un web-site bine structurat va grupa paginile astfel încât să permită vizitatorilor să acceseze imediat conținutul de care au nevoie și să navigheze ușor prin submeniurile paginilor care le oferă informații de ajutor.

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: CATEDRA „MATEMATICĂ ȘI INFORMATICĂ” CRINTEA NINA IMPORTANȚA RESPECTĂRII PRINCIPIILOR DE DESIGN ALE INTERFEȚELOR PENTRU SITE-UL LICEULUI TEORETIC,,ION… [308164] (ID: 308164)

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.

Similar Posts