Modalități de Realizare a Unui Portofoliu Electronic

Diverse

Modalități de Realizare a Unui Portofoliu Electronic

Byadmin ianuarie 1, 2024

PROIECT DE DIPLOMĂ

COJOCARU MIHAELA – ALINA

COORDONATOR ȘTIINȚIFIC

Ș.l.dr ing. Virginia Maria Rădulescu

Iulie 2016

CRAIOVA

[TITLUL PROIECTULUI DE DIPLOMĂ]

[Prenumele și numele candidatului]

COORDONATOR ȘTIINȚIFIC

[Titlul științific, prenumele și numele coordonatorului]

[Luna (în litere) și anul susținerii proiectului]

CRAIOVA

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

Proverb popular

DECLARAȚIE DE ORIGINALITATE

Subsemnata COJOCARU MIHAELA-ALINA ,studentă la specializarea INGINERIA SISTEMELOR MULTIMEDIA din cadrul Facultății de Automatică, Calculatoare și Electronică a Universității din Craiova, certific prin prezenta că am luat la cunoștință de cele prezentate mai jos și că îmi asum, în acest context, originalitatea proiectului meu de licență:

cu titlul MODALITĂȚI DE REALIZARE A UNUI PORTOFOLIU ELECTRONIC,

coordonată de [TITLUL ȘTIINȚIFIC, PRENUMELE ȘI NUMELE COORDONATORULUI],

prezentată în sesiunea IULIE 2016.

La elaborarea proiectului de licență, se consideră plagiat una dintre următoarele acțiuni:

reproducerea exactă a cuvintelor unui alt autor, dintr-o altă lucrare, în limba română sau prin traducere dintr-o altă limbă, dacă se omit ghilimele și referința precisă,

redarea cu alte cuvinte, reformularea prin cuvinte proprii sau rezumarea ideilor din alte lucrări, dacă nu se indică sursa bibliografică,

prezentarea unor date experimentale obținute sau a unor aplicații realizate de alți autori fără menționarea corectă a acestor surse,

însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate, dar care are alt autor.

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

plasarea între ghilimele a citatelor directe și indicarea referinței într-o listă corespunzătoare la sfărșitul lucrării,

indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de referințe a sursei originale de la care s-a făcut preluarea,

precizarea sursei de la care s-au preluat date experimentale, descrieri tehnice, figuri, imagini, statistici, tabele et caetera,

precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii arhicunoscute, a căror paternitate este unanim cunoscută și acceptată.

Data, Semnătura candidatului,

PROIECTUL DE DIPLOMĂ

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

În urma analizei lucrării candidatului au fost constatate următoarele:

În concluzie, se propune:

Data, Semnătura conducătorului științific,

REZUMATUL PROIECTULUI

Paginile Web dinamice, care interacționează cu utilizatorul, au devenit o cerință cvasi-obligatorie pentru orice site Web. O aplicație eficientă, ușor de utilizat și întreținut, completată cu o bază de date și o interfață prietenoasă reprezintă idealul oricărui designer web.

Ca și proiect, pentru lucrarea de diplomă am ales realizarea unui site web cu tema “Modalități de realizare a unui portofoliu electronic” bazat pe limbajul HTML, CSS, jQuery, MySQL.

În realizarea proiectului s-a urmărit realizarea și structurarea unui site de prezentare a unui fotograf/ student.

Prin realizarea acestei teme, mi-am aprofundat și am pus în practică cunoștințele acumulate în cei patru ani de studiu din facultate, în special la disciplinele: Grafică 2D, Java, Software pentru sisteme multimedia, Aplicații internet, Interfețe om-mașină; Design, estetică și semiotică audio-video; Echipamente audio-video, Tehnologii Multimedia în E-learning, Tehnologii și Tehnici TV și Multimedia, Tehnologii WEB.

Conceperea temei s-a datorat atât abordării teoretice a materiilor studiate, cât și experimentarea cunoștințelor la laborator, care au permis conturarea noțiunilor învățate.

Principalul obiectiv al lucrării este să aducă și să prezinte informații despre artistul fotograf și serviciile prestate de acesta în scopul promovării, într-un mod cât mai accesibil. Acest lucru este primordial pentru orice site web – prezentarea de informații/promovarea serviciilor – urmărind bineînțeles specificul site-ului, cât mai ușor și cât mai util.

Activitatea de proiectare a site-urilor Web implică: imaginație, capacitate de analiză, creativitate și o cunoaștere temeinică a limbajului HTML. Proiectarea unui site are mai multe etape: identificarea cu exactitate a obiectivului, culegerea și selectarea informațiilor, proiectarea structurii și a aspectului grafic al site-ului, implementarea, testarea, publicarea și etapa de promovare.

Acest site a fost realizat în limba romana, în principal cu ajutorul limbajului HTML. Pentru stilizarea site-ului s-a folosit limbajul CSS3, pentru animații: librăria jQuery, iar pentru formularul de contact s-a folosit limbajul de programare PHP pentru conectarea la baza de date MySQL. În crearea logo-ului, schiței site-ului și editarea fotografiilor s-a folosit programul de editare Adobe Photoshop CS6.

Site-ul este prezentat în formă “SPA”(Single Page Application) pentru a fi user-friendly, simplu și prietenos cu viziatatorii – potențiali clienți.

Pentru a creea site-ul am folosit editorul NotePad ++, datorită interfeței sale grafice ușor de utilizat.

Lucrarea de licență cuprinde 7 capitole. În primul capitol “Introducere” am vorbit despre ceea ce m-a motivat în alegerea acestei teme pentru proiect. În cel de-al doilea m-am axat pe prezentarea tehnologiilor utilizate în realizarea site-ului web. În al treilea capitol intitulat “Noțiuni generale despre web-design” am prezentat câteva noțiuni teoretice despre ceea ce presupune o grafică bună pentru un web-site. Al patru-lea capitol prezintă aprofundat aplicația realizată și paginile acesteia. Capitolul 5 prezintă concluziile realizării aplicației, iar următoarele două sunt reprezentate de “Bibliografie” și “Referințe web”.

Termenii cheie: web-site, design, grafică, prezentare, artist, fotografie, interacțiune.

MULȚUMIRI

În această secțiune opțională (în eng., Acknowledgements), autorul are ocazia de a face o declarație de recunoștință față de oricine (conducătorul științific/alte persoane apropiate autorului/instituții/organizații/et caetera) a susținut sau a contribuit la realizarea lucrării sale.

POTI SCOATE ACEASTA PAGINA

PROLOG

SCOTI SI ASTA

CUPRINSUL

Introducere

Scopul

Lucrarea de față are ca scop crearea unui site Web ce prezintă cariera și portofoliul unui tânăr artist fotograf. Site-ul este doar pentru prezentare. Potențialii clienți pot găsi aici informații recente despre activitatea acestuia și îl pot contacta pentru prestarea serviciilor.

Site-ul își propune să fie capabil să acopere o gamă cât mai largă de interese și cerințe ale utilizatorilor / potențialilor clienți.

Motivația

Motivul alegerii acestei teme a fost în mare parte pasiunea pentru fotografie și web-design. Pasiunea pentru fotografie am descoperit-o și aprofundat-o în primii ani de facultate, iar cea pentru web-design am descoperit-o în ultimul an de facultate, datorită materiilor de profil din programa școlară.

tehnologii utilizate în proiectarea și design-ul site-ului web

World Wide Web ( WWW)

Serviciul World-Wide Web a luat naștere în anul 1989 la inițiativa lui Tim Berners-Lee care l-a propus ca sistem de comunicare a informațiilor pentru o comunitate de fizicieni de la CERN, pornind de la ideea integrării unor sisteme informaționale complexe în manieră unitară, fără diferențe între sursele de date.

Definiția pentru World-Wide Web este: Wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.

Sistemul este bazat pe extinderea tehnicii hypertext la nivel de rețele. Un document hypertext este un fișier normal de text care are însă și proprietatea de a conține legături la alte părți ale documentului sau la alte documente.

Descrierea unui document Web se face prin “HyperText Markup Language” (HTML). Conținutul său îl constituie textul documentului împreună cu diverse comenzi de formatare.

Sistemul WWW utilizează modelul client-server:

un server WWW – este constituit dintr-un program care rulează permanent pe un calculator (http)

un client WWW – este constituit dintr-un program care permite utilizatorului să trimită cereri către un server WWW și care ajută la vizualizarea rezultatului.

Protocolul utilizat pentru comunicare între client și server se numește HTTP (HyperText Transmission Protocol).

Arhitectura Web-ului este una simplă, reducându-se la următoarele caracteristici:

resursele sunt identificate prin adresa lor, reprezentată la nivel sintactic de identificatori uniformi de resurse (URI – Uniform Resource Identifiers);

accesul la conținutul resurselor se realizează prin intermediul unui protocol, cel mai folosit fiind HTTP (HyperText Transfer Protocol);

resursele, considerate documente sau pagini Web, includ marcaje exprimate îmtr-un limbaj de marcare;

marcajele conțin la rândul lor URI-uri, astfel constituindu-se hipertextul / hipermedia.

În prezent, avem la dispoziție un mediu Web specializat în oferirea de servicii, și nu utilizarea de pachete software, aplicațiile Web bazându-se pe o arhitectură orientată spre servicii (SOA – Service Oriented Architecture). Web-ul este considerat ca fiind o platformă în care utilizatorul își controlează propriile date. Fiecare utilizator poate participa activ la dezvoltarea acestuia prin diferite metode: colaborare, comunități, conectivitate între persoane; Web-ul nu mai este un mediu de aprovizionare, ci unul participativ (read/write Web). Datele ce sunt trimise sau primite pe Web pot fi transformate și refolosite după necesități, în mod independent de platformă (sistem de operare, limbaj de programare, protocol etc.). Software-ul poate fi rulat oriunde, interfața utilizator având un caracter unitar, furnizat de actualele standarde Web pe baza unor formate de prezentare a conținutului precum XHTML, SVG, X3D, XForms.

În actuala etapa a Web-ului, denumit acum Web 2.0, un rol important îl are inteligența colectivă – conținutul este rafinat pe măsură ce comunitatea de utilizatori contribuind la un site Web evoluează și se diversifică (un exemplu edificator este wikipedia.org). De asemenea, au apărut noi tipuri de aplicații, precum weblog-urile (jurnale Web individuale sau colective), wiki-urile (site-uri colaborative), rețelele sociale – social networks (comunități de interese axate pe un anumit domeniu), podcast-urile (streaming Web la cerere) și aplicații hibride – mashup-urile (combinarea conținutului din mai multe surse, oferindu-se o funcționalitate nouă). Acestea necesită o interacțiune avansată cu utilizatorul, similară celei oferite de aplicațiile convenționale.

Se pune accentul pe o interacțiune amplă cu utilizatorul: crearea așa-numitelor aplicații RIA (Rich Internet Applications) oferind o interfață “bogată” în controale de interacțiune și un feedback în timp real, rapid. Avantajele Web-ului sunt îmbinate cu o interacțiune sofisticată și cu accentuarea caracterului de a fi utilizabil. Desigur, un impact major îl are suita de tehnologii AJAX (Asynchronous JavaScript And XML).

Așadar, apar diverse categorii de aplicații Web cu noi exigențe în ceea ce privește interacțiunea și reutilizarea datelor. Evoluția în timp a complexității permite o clasificare a aplicațiilor Web:

centrate pe documente – pagini statice, site-uri de prezentare și altele;

interactive – expoziții virtuale, siteuri de știri etc.;

tranzacții – în domeniul e-banking, soluții business-to-business;

collaborative – e.g., chat Web, aplicații de teleconferințe Web în contextul e-learning, siteuri wiki etc.;

orientate spre portaluri – concentrate pe comunități sau disponibile în mediul afacerilor electronice;

de tip ubicuu – servicii bazate pe locație, disponibilitate multiplatformă, servicii configurabile în cadrul Web-ului mobil;

de tip social – blog-uri, spații de lucru virtuale, filtrare colaborativă a informațiilor etc.

aliniate Web-ului semantic – sisteme de recomandare, mediatizare inteligentă, management avansat de cunoștințe.

La baza întregului Internet modern stau serverele Web. Prin definiția sa, un server Web este un program care acceptă cereri HTTP de la clienți (de obicei browsere web) și le furnizează răspunsuri împreună cu un eventual conținut de date, răspunsuri care de obicei reprezintă pagini HTML sau alte obiecte ( imagini, etc.). Termenul de server Web este de obicei asociat unui calculator pe care rulează un program descris anterior.

Standardul HTML

HTML ( Hypertext Markup Language ) este setul de simboluri de marcare(tag-uri) sau coduri inserate într -un fișier destinat pentru afișarea pe o pagină browser World Wide Web. Acesta are scopul de a prezenta informații, fonturi, tabele ș.a.m.d.

Limbajul a fost dezvoltat inițial de oamenii de știință ca o unealtă utilizată la partajarea documentelor (rapoarte de cercetare, documentații, etc) în întreaga comunitate științifică internațională care utiliza (și utilizează) Internetul. Pentru a publica informații care să fie distribuite global în Internet este necesar un limbaj universal de descriere a acestora, limbaj care să fie potențial înțeles de toate computerele din Internet. Limbajul folosit de World Wide Web este HTML.

Cu ajutorul HTML se pot realiza documente independente de sistemul de operare, legături la alte documente de pe Internet, introducerea de imagini, sunet și video. Un document HTML “spune” browser-ului folosit, prin intermediul tag-urilor, ce să facă cu textul, imaginile, sunetul și celelalte elemente cuprinse în document.

Limbajul HTML este utilizat pentru a descrie structura documentului și referințele conținute de acesta. HTML a apãrut ca o aplicație ISO standard (aparține standardului SGML – Standard Generalized Markup Language, un sistem pentru definirea tipurilor de documente structurate, destinat să reprezinte instanțe ale acestor tipuri de documente).

La baza SGML și a HTML se află același principiu: descrierea conținutului unui document se face într-un fișier text obișnuit (ASCII). Se urmărește ca aceste fișiere să fie editabile cu aplicații software nepretențioase (exemplu Notepad++, WordPad).

Paginile HTML sunt formate din etichete sau tag-uri și au extensia „.html” sau „.htm”.

Sintaxa limbajului HTML

Toate comenzile (tag-urile) sunt scrise sub forma <nume_marcaj>. Acestea sunt de două feluri: de început <nume_marcaj> și de sfârșit </nume_marcaj> și au efect asupra informației descrise între ele (paragraf de text, imagine, sunet, etc). Navigatorul web interpretează aceste etichete afișând rezultatul pe ecran.

Există și marcaje cu atribute; acestea sunt de forma <nume_marcaj optiune1=valoare1 optiune2=valoare2 >……</nume_marcaj>. Dacă într-un tag există mai multe atribute, acestea trebuie separate prin spațiu.

Structura unui document HTML

Fiecare document HTML este structurat în două părți:

antetul – <head> … </head>

conținutul – <body> … </body>

Toate paginile HTML încep și se termină cu etichetele <html> și </html>.

Structura unui document HTML arata astfel:

<html>

<head> <title> Titlul Documentului </title> </head>

<body> Conținutul documentului </body>

</html>

Secțiunea HEAD

Secțiunea HEAD este delimitată de marcajele <HEAD> … </HEAD>.

Cuprinde informații care nu vor fi afișate în browser, cu excepția marcajului <title> … </title>, care este obligatoriu și apare doar în secțiunea HEAD. Titlul trebuie să fie reprezentativ pentru documentul HTML și va apărea în bara de titlu la rularea în browser.

Alte marcaje care apar în secțiunea HEAD:

<META> – poate conține cuvinte cheie, numele autorului paginii, frecvența (teoretică) cu care motoarele de căutare ar trebui să reindexeze pagina etc. Acest tag implică în general declararea unei proprietăți și valoarea asociată acesteia.
<META NAME=”nume” CONTENT=”conținut”>

<base> – stabilește URL-ul de “bază” al documentului.

Secțiunea BODY

Secțiunea BODY este inclusă între marcajele <BODY>…</BODY> în care se găsește informația care va fi afișată în browser (text, imagini, video, audio etc).

Odată cu tag-ul <body>, începe conținutul paginii web. Tot ce se va scrie în această secțiune va fi afișat, de către browser, pe ecranul monitorului. Sfârșitul conținutului paginii se indică prin marcajul </body>. Tot ce se va scrie după acest marcaj, nu va mai fi afișat.

Pentru a lăsa un comentariu într-un script HTML ,se folosește sintaxa “ <!—“ conținut “–> ”. În acest fel vom putea lăsa o notă pentru ca mai târziu să ne dăm seama ce este ceeea ce face codul respectiv sau ce anume rămâne de introdus.

Marcaje specifice:

<p> … </p> – indică un paragraf

<hn> … </hn> – Antetele sunt utilizate pentru ierarhizarea diferitelor secțiuni de text. HTML definește șase niveluri pentru antete. La afișare, antetele nu sunt numerotate, diversele navigatoare afișând textul dintre tag-urile <Hn> și </Hn> (unde n=1(cel mai mare…6(cel mai mic)) astfel încât să iasă în evidență.

Liste și referințe

HTML oferă mai multe mecanisme pentru specificarea listelor de informații. Există trei tipuri de liste:

1. liste ordonate (numerotate)

2. liste neordonate (marcate)

3. liste de tip definiție

1. Listele ordonate sunt introduse de marcajele:

<ol> <li> conținut </li> </ol> și sunt de tipul :

element

2. Listele neordonate sunt introduse de marcajele:

<ul><li> conținut </li></ul> și sunt de tipul:

element

3. Listele de tip definiție sunt introduse de marcajele:

<dl>…</dl> – lista definiții (definition list)

<dt>…</dt> – termenul definit (definition term)

<dd> – definiție (definition)

Imagini în HTML

Pentru ca un site web să fie cât mai interactiv și “user-friendly”, se recomandă folosirea imaginilor (.jpg , .png , .gif) și animațiilor.

Pentru a evita incompatibilitatea grafică cu utilizatorul, se evită culorile puternice folosite în abundență, multitudinea imaginilor și o interfață foarte încărcată.

Tag-ul folosit pentru inserarea imaginilor este tag-ul <img>. Acest tag (ca și tag-ul META) nu are corespondent un tag de închidere </img>.

Formatele de fișiere grafice universal recunoscute de browser sunt:

GIF (Graphics Interchange Format) – este un format de compresie fără pierderea calității;

JPG (Joint Photographic Expert Group) – este un format de compresie cu pierdere de calitate. Prin salvarea repetată a unei imagini, ea va pierde din calitate, devenind inutilizabilă;

PNG (Portable Network Graphic) – este un format de compresie fără pierdere de calitate

Atribute:

src – specifică locația imaginii (URL-ul imaginii);

alt – specifică un text alternativ pentru cazul în care imaginea nu se poate afișa de către navigator;

width – definește lățimea imaginii în pixeli;

height – definește înălțimea imaginii în pixeli;

border – trasează un chenar în jurul imaginii;

hspace, vspace – specifică spațiul păstrat în jurul imaginii.

Standardul CSS

Cascading Style Sheets (Foi de Stil în Cascadă) , pe scurt “CSS”, este un limbaj “foaie de stil” care ilustrează semantica de prezentare și este frecvent utilizat pentru a crea un framework de design pentru paginile web și aplicațiile scrise în HTML și XML.

CSS este folosit pentru formatarea structurii conținutului scris în HTML, cum ar fi: fonturi, dimensiuni, culori, margini, linii, lățime, înălțime, imagini de background, butoane și multe alte lucruri.

CSS este destinat în primul rând pentru a separa conținutul documentului propriu-zis de documentul de formatare. Această separare poate îmbunătăți accesibilitatea conținutului, oferi mai multă flexibilitate și control în specificarea caracteristicilor de formatare, permite mai multe pagini HTML pentru a partaja formatarea prin specificarea unui fișier CSS cu extensia .css și de a reduce complexitatea și repetarea în conținutul structural.

Modificările aduse design-ului grafic al unui document (sau a sute de documente) pot fi aplicate rapid și ușor, prin editarea a câteva linii în fișierul CSS pe care îl folosesc, decât prin schimbarea tag-urilor în documente.

Sintaxa generală este de forma:

Selectorul este tag-ul folosit în HTML, căruia i se atribuie o proprietate și o valoare dorită.

Există trei modalități prin care se poate aplica CSS la un document HTML:

In-line ( prin atributul “style”)

exemplu:

<html>

<head>

<title> Exemplu </title>

</head>

<p> Aceasta este o pagina rosie </p>

</body>

</html>

Intern ( prin eticheta “style”)

exemplu:

<html>

<head>

<title> Exemplu </title>

body { background-color: #FF0000; }

</style>

</head>

<body>

<p> Aceasta este o pagina rosie </p>

</body>

</html>

Extern ( prin link către o foaie de stil )

Această metodă este cea mai recomandată și presupune crearea unui link către o foaie de stil externă. Foaia de stil externă este un fișier text simplu, cu extensia .css .

Link-ul este de forma:

Linia de cod se introduce în secțiunea header din documentul HTML astfel:

<html>

<head>

<title>My document</title>

</head>

<body>

…

Biblioteca jQuery

Despre

jQuery este o platformă de dezvoltare JavaScript, o bibliotecă JavaScript, mică, rapidă și bogată în caracteristici. jQuery este proiectat pentru a simplifica partea de scripting în HTML.

Sintaxa jQuery este proiectată pentru a face mai ușoară navigarea într-un document, selectarea elementelor DOM (Document Object Model), crearea animațiilor și efectelor , manipularea evenimentelor din browser, manipularea elementelor CSS și dezvoltarea aplicațiilor Ajax.

jQuery oferă de asemenea posibilitatea dezvoltatorilor de a crea plug-in-uri sau extensii bazate în biblioteca principală JavaScript, care extind funcțiile de bază jQuery cu funcții specifice plug-in-ului. Astfel, biblioteca poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încărcate doar atunci când este nevoie de ele, la cerere.

Există și un set principal de extensii numit jQuery UI (jQuery User Interface), ce oferă un set de extensii pentru animații de bază, efecte complexe față de cele din biblioteca de bază și teme de culori.

În esență, jQuery este o bibliotecă de manipulare DOM (Document Object Model). DOM este o reprezentare structurală arborescentă a tuturor elementelor unei pagini Web și jQuery simplifică sintaxa pentru identificarea, selectarea și manipularea acestor elemente DOM. De exemplu, jQuery poate fi folosit pentru identificarea unui element din document cu o anumită proprietate (de exemplu: toate elementele cu tag-ul H1), schimbarea uneia sau mai multor atribute ale sale ( de exemplu: culoare, vizibilitate), sau făcându-l să răspundă la un eveniment (de exemplu: un click de mouse).

Avantajele folosirii jQuery

Încurajează separarea dintre JavaScript și HTML : librăria jQuery pune la dispoziție sintaxe simple pentru adăugarea evenimentelor din DOM utilizând JavaScript, decât adăugarea atributelor de eveniment în HTML cu apelarea funcțiilor JavaScript.

Concizie și claritate : jQuery promovează concizia și claritatea cu caracteristici cum ar fi funcțiile prescurtate și legate.

Elimina incompatibilitățile de parcurgere a browser-ului : motoarele JavaScript ale diferitelor browsere diferă ușor, astfel un cod care funcționează într-un browser, poate să nu funcționeze în altul. jQuery rezolvă această problemă și pune la dispoziție o interfață consistentă, compatibilă cu diferite browsere.

Extensibil : pot fi adăugate evenimente noi, elemente, metode și apoi reutilizate ca plug-in.

Sintaxa generală a folosirii bibliotecii jQuery este:

Bootstrap

Bootstrap este cel mai popular framework HTML, CSS și JavaScript pentru dezvoltarea site-urilor de tip responsive. Acest lucru înseamnă că aspectul paginilor web se ajustează în mod dinamic, ținând cont de caracteristicile dispozitivului utilizat (desktop, telefon mobil, tabletă).

Bootstrap conține template-uri de design pentru HTML, bazate pe CSS, pentru tipografie, formulare, butoane, navigare și alte componente de interfață, precum și extensii opționale JavaScript. Spre deosebire de alte framework-uri, acesta ajuta doar la dezvoltarea front-end.

Acest framework oferă un set de foi de stil, care oferă definții de stil de bază pentru toate componentele cheie HTML. Acestea asigură un aspect modern și uniform pentru formatarea textului, tabelelor și elementelor de formular.

Sistemul de tip grid și design-ul responsive, vin cu un aspect standard de 1170 pixeli lățime. În mod alternativ, dezvoltatorul poate utiliza un aspect cu lățime variabilă. Pentru ambele cazuri, sistemul de instrumente are patru variante pentru a fi folosit pe diferite rezoluții și tipuri de dispozitive: telefoane mobile, portret și landscape, tablete, PC-uri cu rezoluție mare sau mică. Fiecare variație reglează lățimea coloanelor.

SQL

SQL (Structured Query Language) este un limbaj standard de programare folosit în obținerea informațiilor și actualizarea unei baze de date. Cu toate că SQL este un standard ANSI, cât și ISO, SQL suportă multe produse de baze de date cu extensii ale limbajului standard.

MySQL

MySQL este cel mai popular sistem de gestionare al bazelor de date SQL, Open Source, fiind conceput și dezvoltat de MySQL AB, o companie ce furnizează servicii pentru bazele de date MySQL.

MySQL este un server de baze de date, mic, compact, ideal pentru aplicațiile mici și nu numai. Ca o completare a suportului standard SQL, MySQL este compatibil cu un număr mare de platforme, deținând abilități multifir pentru servere UNIX, rezultând astfel performanțe ridicate. MySQL poate rula și pe sisteme non-Unix, pe sistemele de tip Windows NT rulând ca un serviciu, în timp ce pe cele Windows 9x rulează ca un proces normal.

O bază de date este o colecție structurată de date. Pentru a accesa, adăuga sau prelucra datele stocate într-o bază de date este necesar un sistem de gestiune a bazelor de date, cum este MySQL Server. Deoarece calculatoarele au probleme în privința volumului mare de date, sistemul de gestiune joacă un rol central în prelucrarea lor, atât ca parte a altor aplicații, cât și ca aplicație de sine stătătoare.

Limbajul MySQL are următoarele proprietăți:

poate executa interogări pentru o bază de date;

poate prelua date dintr-o bază de date;

poate introduce înregistrări într-o bază de date;

poate actualiza înregistrările într-o bază de date;

poate șterge înregistrări într-o bază de date;

poate crea noi baze de date;

poate crea tabele într-o bază de date;

poate crea proceduri stocate într-o bază de date;

poate seta perimisiunile pentru tabele, proceduri și vizualizări

Pentru a construi un site web care afișează datele dintr-o bază de date, este nevoie de un program – server (ex.: MS Access, SQL Server, MySQL, XAMPP, etc), pentru a utiliza un limbaj de script server-side – cum ar fi PHP sau ASP, HTML/CSS.

WampServer

În dezvoltarea site-ului – pentru pagina “Contact” am utilizat un server offline pentru Windows numit Wamp (Windows Apache, MySQL and PHP) Server.

WampServer (http://www.wampserver.com) este un mediu de dezvoltare web pentru Windows. Aceasta permite crearea de aplicații web cu Apache, PHP și MySQL ca bază de date. De asemenea, vine cu phpMyAdmin și SQLiteManager pentru a ușura administrarea bazelor de date.

WampServer se instalează în mod automat ,iar utilizarea acesteia este una foarte intuitivă. Se poate optimiza serverul fără să fie atinse fișierele de setare. Are de asemenea un icon ce apare în bara de start pentru a administra serverul și setările aferente.

Funcționalități:

WampServer are funcționalități complete dar foarte ușor de utilizat. Așadar, printr-un simplu click stânga al mouse-ului pe icoana WampServer se pot executa comenzile:

administrarea serviciilorApache și MySQL;

comutarea online/offline;

instalare și activare a noi versiuni pentru Apache, MySQL sau PHP;

administrarea setărilor server-ului;

vizualizarea jurnalelor dvs. ;

accesarea setărilor fișierelor;

crearea unui nou alias.

Cu un click dreapta se poate modifica limba meniului sau accesa pagina de prezentare aflată pe site-ul WampServer.

Editorul de text “Notepad++”

NotePad++ este un program gratuit pentru Windows, găzduit la Sourceforge, un editor de text care permite editarea codului sursă în mai multe limbaje de programare, precum: C, C++,C#, CSS, Java, Javascript, Matlab, XML, Pyton, Pascal, HTML, PHP și multe altele.

Facilitățile de care dispune sunt:

rulează în Microsoft Windows, Unix, Mac OS,

suport pentru macroinstrucțiuni,

interfață cu mai multe tab-uri,

colorare sintactică pentru 50 de limbaje de programare,

autocompletare în cazul cuvintelor de cod din biblioteca utilizată,

back-up automat pentru fișierele nesalvate,

găsește și înlocuiește cu expresii regulate,

zoom,

detectare automată a stării fișierului,

drag-and-drop.

Notepad++ se bazează pe motorul Scintilla, fiind programat în C++ utilizând Win32 API și biblioteca STL, asigurând astfel o execuție rapidă și un consum redus de resurse.

noțiuni generale despre web-design

Structura de bază a unei pagini web

Ierarhia vizuală a elementelor

Ideea de bază o constituie organizarea paginii astfel încât atenția utilizatorului să fie captată, iar informațiile mai puțin importante să poată fi identificate opțional de către utilizator.

Elementele care impun o ierarhie vizuală pot fi:

pentru un impact mai mare, se vor folosi fonturi diferite ca dimensiune și consistență: pentru elementele centrale ale textului se va folosi un font de dimensiune mare și îngroșat;

elementele importante se vor localiza în special în colțul din stânga-sus;

se vor utiliza elemente de culoare pentru background și foreground (ex: scrisul alb pe fond negru este element de captare a atenției);

poziționarea, alinierea și indentarea textului.

Parcurgerea vizuală a paginii

Această directivă de influențare a utilizatorului se bazează pe modul uzual prin care acesta parcurge informația: de sus în jos, respectiv de la stânga la dreapta.

În cazul unei întreruperi în pagină, utilizatorului trebuie să i se atragă atenția prin puncte de focalizare aflate în concordanță cu importanța informației parcurse de acesta.

Gruparea și alinierea informațiilor

În cazul unor obiecte ce par a fi similare unul altuia, apare fenomenul de similaritate. Ochiul uman percepe aceste obiecte ca fiind un singur grup sau un aranjament. O rezolvare poate fi scoaterea în evidență a obiectului disimilar.

Fenomenul de continuitate apare în clipa în care ochiul este forțat să se mute de la un obiect la altul în mod continuu, prin structura vizuală a aranjamentului.

Completarea apare atunci când un obiect este incomplet sau un spațiu nu este complet înconjurat. Dacă informația este suficientă, ochiul uman perecepe obiectul ca fiind un întreg.

Principii de organizare vizuală

Pentru a facilita orientarea utilizatorului într-o pagină web, este esențială aplicarea câtorva principii de organizare vizuală. Principiile sunt următoarele:

Claritate și eleganță – Estetica conținutului, cât și prezentarea sa într-o formă accesibilă utilizatorului au nevoie de o atenție corespunzătoare.

Predictabilitate și regularitate – Structura de prezentare a materialului, odată stabilită, trebuie să rămână constantă de la o pagină la alta a site-ului.

Standardizare și consistență în folosirea unui stil – Acest principiu se referă la producerea unui aranjament care să permită focalizarea rapidă pe elementele importante.

Orientare facilă în conținut – Primordial într-o pagină web este meniul, prezent în fiecare pagină. Acesta trebuie să fie vizibil în orice pagină. Textul de prezentare principal trebuie să fie cât mai scurt și cuprinzător, iar informația să se încarce cât mai rapid.

Unitate și simplitate – Designerii web sunt deseori tentați să includă prea multe detalii în pagină. Este indicată folosirea ideilor principale și link-urilor de acces de tip “show more”.

Poziționarea în ordinea importanței – Informațiile se vor poziționa în pagină în ordinea importanței și relevanței lor. Ordinea începe de obicei din stânga-sus, acesta fiind un loc privilegiat.

Spațiere – Este indicată o folosire a textului în proporție de 25-50% din spațiul total al paginii.

Echilibru și simetrie – Conținutul paginii trebuie distribuit echilibrat prin utilizarea textului și includerea de imagini și grafice.

Elemente esențiale de web-design

● Accesibilitate :

Timpul rezonabil de încărcare a site-ului

Contrast adecvat text – background

Mărimea fonturilor și spațierea literelor

Animații flash cât mai puține

Imagini cu tag-urile ALT setate corect

Pagină de eroare 404 specială

● Identitate:

Informații vizibile în secțiunea “Despre noi”

Logo vizibil

Pagina “Home” cât mai puțin încărcată

● Navigare:

Navigația principală este ușor identificabilă

Denumirile meniurilor sunt clare

Logo cu link către pagina “Home”

Număr rezonabil de butoane și link-uri

Search-bar vizibil și ușor de accesat

● Conținut

Titluri clare și descriptive

Conținutul important situat deasupra bazei ecranului (the fold)

Există consistență în stil și culori

Cât mai puține reclame și pop-up-uri

Textul îngroșat (bold) folosit cu reținere

Prezentarea aplicației

Introducere

Realizarea proiectului a stat la baza ideii de concepere a unui site web de prezentare, a unui e-portofoliu a unui fotograf și web-designer. Aplicația este utilă tuturor utilizatorilor internetului pentru a putea beneficia de serviciile puse la dispoziție de acesta și a se informa despre calitatea serviciilor.

Noțiunea de “site web” desemnează o grupă de pagini web multimedia ce conțin texte, imagini, animații ș.a. , accesibile on-line oricărei persoane și realizate pe o temă anume. Paginile sunt conectate între ele prin hiperlink-uri.

Un e-portofoliu (portofoliu electronic) este o colecție digitală personală, asamblată și gestionată de către un utilizator, de obicei pe web, ce conține informații ce descriu și ilustrează cunoștințele, experiența și cariera unei persoane. Acesta este un CV extins, dinamic, care relatează rezultatele activităților în echipă, realizări profesionale și personale și experiența dobândită pe parcursul muncii și al formării. Portofoliul electronic oferă oportunitatea de a reflecta asupra propriei experiențe profesionale și a împărtăși rezultatele acesteia cu alte persoane.

Un portofoliu electronic include textul de prezentare, fișiere electronice, imagini, multimedia, blog și hyperlink-uri. E-portofoliile sunt atât demonstrațiile cât și abilitățile utilizatorului de auto-exprimare. În cazul în care acestea sunt on-line, utilizatorii le pot administra în mod dinamic în timp.

Prezența online este vitală pentru orice afacere care își propune să crească în cel mai scurt timp și să fie competitivă în mediul online. Un web-site de prezentare este o modalitate prin care se crează o conexiune cu clienții la doar un click distanță, este o formă de mass-media de la care toată lumea poate dobândi informații . Aici, clienții existenți, dar și cei potențiali pot găsi informații despre produsele și serviciile oferite. Web-design-ul are un impact vizual deosebit pentru vizitator, fiind prima părere pe care și-o creează despre respectiva promovare. Simplitatea este o condiție esențială pentru ca o pagină web să fie agreeată de vizitatorii săi.

Design-ul site-ului a fost creat individual, apoi “schițat” în Adobe Photoshop CS6 și realizat cu ajutorul HTML și CSS3.

Aplicația a fost realizată în cea mai mare parte în limbajul HTML , prin programare direct în cod sursă (scrierea liniilor de comandă) în editorul NotePad++.

Stilul aplicației este unul frecvent utilizat în prezent, stilul “one-page”, fiind în același timp și de tip responsive. Toate informațiile sunt accesibile cu mare ușurință și interfața este prietenoasă cu utilizatorul, indiferent de dispozitivul pe care este afișată aplicația: laptop, telefon mobil, tabletă.

Structura aplicației

Design-ul este de tip “web design personalizat” (responsive), cunoscut și sub acronimul englez RDW (Responsive Web Design), care reprezintă o filozofie de design și dezvoltare destinată adaptării vizualizării unei pagini web pe dispozitivul utilizat pentu vizualizare. În secolul nostru, tehnologia este mult mai avansată, iar oamenii beneficiază din plin de asta. Pentru a citi ziare online, a vizita diverse site-uri sau pentru alte activități, oamenii folosesc mai multe tipuri de dispozitive, cum ar fi tablete, smartphone-uri, laptopuri etc. Fiecare dispozitiv are propriile sale caracteristici: dimensiunea ecranului, capacitatea de memorie, rezoluție, putere CPU. Această tehnologie ( responsive web design) își propune ca informația să poată fi vizualizată de pe orice dispozitiv sub un design unic.

Utilizarea de dispozitive mobile a luat amploare, dispozitivele de genul smartphone-urilor și tabletelor crescându-și vânzările în ultimii ani și în acest fel, navigarea pe internet pe astfel de gadgeturi a devenit din ce în ce mai comună. Acesta este motivul pentru care design-ul web responsive a devenit atât de popular, deoarece această tehnologie propune o soluție web ce permite accesarea și vizualizarea web atât pe un dispozitiv desktop, cât și pe unul mobil.

Site-ul web va fi optimizat pentru toate tipurile de dispozitive : PC, tablete, telefoane mobile, etc, adică utilizând o singură versiune în HTML și CSS se vor acoperi toate versiunile de ecran. Astfel, costurile de creație și administrare se reduc atunci când design-ul ecranului este similar pe dispozitive de mărimi diferite.

Web Design-ul Responsiv este creat cu ajutorul introducerii de Media Queries în proprietățile stilurilor CSS din versiunea 3. Media Querie-urile sunt o serie de comenzi ce se includ în pagina de stiluri inclusă în documentul HTML, care indică cum trebuie să se comporte pe diferite tipuri de ecrane.

Acest design web are la bază coloanele, ceea ce înseamnă că , după filozofia design-ului responsive, dacă o pagină web la rezoluția de computer (1028×767 px) are 5 coloane, în cazul unei tablete (800×600 px) sunt necesare doar 4 coloane, în timp ce un telefon mobil inteligent ( care are o lățime cuprinsă între 320 și 480 px) are nevoie de doar 3 coloane.

Aplicația conține o formă principală pentru meniu, alcătuită din butoane aliniate pe orizontală în cazul afișării acesteia pe laptop (fig.1) și meniu “drop-down” pentru afișarea pe tabletă sau telefon mobil (fig.2).

Meniul este alcătuit din butoanele:

ACASĂ

DESPRE

CUNOȘTINȚE

PORTOFOLIU

CONTACT

fig. 1

fig. 2

Aplicația dispune și de buton „back-to-top” pentru redirecționare către partea de sus a paginii fiind vizibil în partea dreaptă atunci când se parcurge pagina web.Acesta s-a realizat cu ajutorul bibliotecii jQuery.

Codul pentru acesta fiind:

<a href="#" class="scrollToTop"><i class="fa fa-chevron-up"></i></a> pentru HTML,

.scrollToTop{

z-index: 1;

width:50px;

height:40px;

padding:10px;

text-align:center;

background: black;

font-weight: bold;

color: white;

text-decoration: none;

position:fixed;

bottom:0;

right:40px;

display:none;

} pentru CSS.

Header

Header-ul este parte din structura unui site. Reprezintă partea de sus, cu alte cuvinte „capul” unui site sau bloc. Acesta include de obicei date despre numele firmei/companiei/ persoanei, sigla/banner, numere de contact și navigarea în site. Unele dintre cele mai importante elemente pe care le conține un header sunt: partea grafică ce captează atenția cu elemente vizuale mai deosebite, logo-ul și sloganul companiei/persoanei, bară de căutare în site, meniul cu navigația primară.

Deoarece , de obicei, header-ul este primul lucru văzut pe un site de către un vizitator, acesta trebuie să conțină elemente grafice care să impresioneze și să atragă, iar conceptul să rezoneze cu design-ul web ales. Este recomandat ca header-ul să fie original, pentru a fi diferit de ceilalți și pentru a fi ușor de reținut de către clienți și vizitatori. În același rând, conținutul acestuia trebuie să fie în balanță cu conținutul site-ului (în cazul în care pagina are un conținut mai redus de informații și detalii, atunci un header bogat va balansa întreg design-ul).

În aplicația prezentată, header-ul este format din logo, urmat de meniul cu navigația primară.

Inițial, acesta are poziție statică, iar pe măsură ce se derulează pagina revine fixat în partea de sus a paginii.

Logo-ul este unul original, cu design simplu și de efect ,creat în Adobe Photoshop CS6 și este prezent de asemenea pe toate fotografiile din portofoliu.

Pentru randarea barei de meniu am folosit liniile de cod:

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

</button>

<li class="active-menu"><a href="#">Acasă</a></li>

<li><a href="#about">Despre</a></li>

<li><a href="#skills">Cunoștințe</a></li>

<li><a href="#portfolio">Portofoliu</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</div>

</nav>

Pagina “Acasă”

Un site are de obicei o pagină inițială sau principală numită homepage (pagina de acasă – principală) , de la care pleacă legături către alte pagini interioare, secundare.

Pagina „ACASĂ” este pagina de start a site-ului,pagina principală pentru un vizitator care navighează pe site-ul găsit cu un motor de căutare web și pe care persoana promovată (ofertantul de informații în web) o face cunoscută publicului drept punct de plecare către întregul site prin furnizarea unor link-uri către celelalte pagini. De aceea, aceasta pagină este cea mai importantă și de cele mai multe ori, este și cea mai vizitată. Scopul acestei pagini este de a oferi un rezumat despre ceea ce vizitatorul/clientul va găsi pe site.

În general, se aplică „regulă celor 8 secunde”, adică în cazul în care în acest interval vizitatorul nu găsește informații sau detalii care să-l motiveze să treacă la o altă acțiune sau să viziteze și restul site-ului, acesta îl va părăsi. În funcție de funcționalitatea și scopul site-ului, acesta trebuie să atragă prin design, estetică, corectitudinea textului și formatarea acestuia, caracterul informațiilor și așezarea în pagină, pentru a evita ca vizitatorul să-l părăsească.

Elementele pe care trebuie să le conțină pagina introductivă sunt:

Logo – identitatea este extrem de importantă, deoarece vizitatorul va asocia în mod direct site-ul web cu reprezentarea grafică. Amplasarea logo-ului se face în partea stângă a fiecărei pagini.

Meniul principal – vizitatorul/potențialul client trebuie să poată parcurge cu ușurință site-ul pentru a găsi rapid informațiile căutate. Meniul principal trebuie să ofere link-uri către celelalte ramuri importante ale site-ului, iar în cazul în care site-ul este complex, se recomandă simplificarea navigării prin integrarea unui meniu de tip „drop-down” cât mai intuitiv. Înainte de publicarea site-ului se va verifica funcționalitatea acestor link-uri.

„Call to action” – odată ajunși pe pagină, vizitatorii trebuie îndrumați să facă ceea ce se dorește: să cumpere, să afle mai multe detalii despre un produs sau serviciu, să se aboneze la un newsletter, să vizualizeze ofertele disponibile. În acest caz, se recomandă introducerea unui mesaj clar despre ce se dorește să facă vizitatorul mai departe. Nu se aglomerează prima pagină, ci se dorește să fie cât mai lizibilă, folosind restul paginilor pentru detalii amănunțite.

Rezumatul produselor și al serviciilor – încă din prima pagină, utilizatorul/ clientul trebuie să fie informat despre ceea ce se oferă. Nu se intra în detalii, ci se alege un mesaj scurt care să stârnească interesul și curiozitatea. De asemenea, nu se includ prețuri pe prima pagină, deoarece produsul sau serviciul poate fi subapreciat din cauza lipsei de informații și nu va părea convingător.

În site-ul prezentat , pagina principală este ilustrată de o imagine reprezentativă în centrul căreia se află un bloc cu fotografia personală și numele artistului fotograf. În acest bloc sunt prezente și două legături către două platforme de media.

Pentru a mă promova și pentru publicitate, am ales mediul online, de aici și cele două shortcut-uri către marile platforme de socializare și fotografie „Facebook” și „Flickr”, platforme foarte mediatizate în zilele noastre, gratis și cu mare impact. Rețelele de socializare joacă un rol foarte important în promovare și în viețile noastre, ajutându-ne să aflăm mai multe detalii despre un produs, companie, persoană, cât și review-uri primite de la alți beneficiari. Orice persoană este atrasă mai mult de un produs promovat într-o reclamă, decât unul necunoscut.

Cod sursă pentru social media :

</div>

În partea de jos a paginii „ACASĂ” este prezentă și o săgeată de navigare către urmatoarele secțiuni din pagină, implementată prin codul :

</div>

Pagina “Despre mine”

Pagina “About me” sau “Despre” este obligatorie într-un site web indiferent de categorie. Această secțiune este similară cu un “CV” sau o carte de vizită, este o pagină de prezentare . Potențialii clienți sau simpli vizitatori au nevoie să să fie informați asupra identității că persoană publică, blog, firmă, companie, magazin online, portal web, revistă on-line, ș.a.m.d. Textul/descrierea trebuie să fie convingătoare și să facă cititorul să revină pe pagină.

În cazul unui site de prezentare, sunt necesare informații cât mai detaliate despre persoană, serviciile prestate, hobby-uri și activitatea în domeniu. Acest lucru ajută la o mai bună comunicare cu vizitatorii.

În aplicația prezentată, secțiunea “Despre mine” conține informații și detalii pe scurt despre artist și activitatea sa , dispuse pe trei categorii sub forma unor coloane : “Despre mine”, “Realizări”, “Activitate”, scrise într-un mod cât mai prietenos pentru crearea unei interacțiuni cu cititorul.

Aceasta pagină are rolul de a ajuta potențialul client să cunoască și să se informeze asupra activităților la care a participat artistul fotograf, pentru a lua o decizie în ceea ce privește prestarea serviciilor. În acest scop, este prezent și un buton pentru vizualizarea CV-ului .

La apăsarea butonului “Vizualizează CV” se va deschide o altă fereastră, unde vizitatorii pot vedea și descarca CV-ul în format .pdf .

Pagina “Cunoștințe”

Pagina “Cunoștințe” este compusă din două părți: “Cunoștințe” și “Testimoniale”.

“Cunoștințe”

Partea de “cunoștințe” dispune de o grafică interactivă cu bare de progres circulare animate cu ajutorul bibliotecii jQuery și CSS.

Bara de progres este o facilitate prin care aplicația indică progresul cunoștințelor ce se completează în funcție de procentajul asimilat.

Aceasta grafică a fost implementată cu ajutorul codului HTML:

<strong>Design</strong>

</div>

Grafica pentru această secțiune a fost implementată cu ajutorul limbajului CSS, după cum urmează :

“Testimoniale”

În această pagină mai este prezentă și secțiunea de testimoniale – feedback-uri primite de la clienți prin intermediul formularului de contact din pagina “Contact”.

Testimonialele reprezintă un instrument de marketing care pot aduce rezultate pozitive în vederea convingerii noilor clienți să aleagă produsul său serviciile oferite. Feedback-urile autentice ale clienților existenți reduc gradul de reticență al potențialilor clienți, determinându-i să apeleze la serviciile din respectivul web-site. Acestea contribuie la construirea unei imagini pozitive și reale pentru produsele/ serviciile promovate.

Mărturiile beneficiarilor anteriori au rolul de a susține activitatea comercială a web-site-ului și de a spulbera temerile pe care potențialii clienți le-ar putea avea cu privire la produsele comercializate. Cele mai frecvente întrebări care apar printre ultilizatorii online sunt : “Sunt aceste produse/servicii de calitate?”, “Pot avea încredere în această persoană?”, “Merită să investesc în această idee?”. Testimonialele postate ar trebui să răspundă acestor întrebări și să ofere o lumină pozitivă privind produsele/serviciile regăsite pe site.

Aceste feedback-uri evidențiază transparența serviciilor oferite, astfel, mesajele trebuie să fie cât se poate de realiste. Pentru mai multă credibilitate se recomandă adăugarea numelui complet al persoanelor de la care au venit feedback-urile și, dacă aceștia sunt de acord, se pot posta și datele lor de contact pentru ca viitorii clienți să poată lua legătura cu ei.

O parte din codul pentru această secțiune de testimoniale este:

</ol>

Pagina “Portofoliu”

Un portofoliu este reprezentat de o colecție de materiale personalizate. De cele mai multe ori, portofoliile sunt considerate a fi caracteristice domeniului artistic precum fotografia, design-ul, organizări evenimente etc.

Rolul unui portofoliu nu este acela de a epata, deoarece multe persoane consideră că fără o experiență profesională copleșitoare într-un domeniu nu poți umple paginile unui portofoliu. Rolul portofoliului este de a demonstra potențialilor clienți abilitățile profesionale, talentul și pasiunea în meseria practicată. Cu alte cuvinte , un portofoliu este o reflecție a subiectului ca profesionist, o înregistrare a evoluției personale, o dovadă a performanțelor la locul de muncă, dovada dobândirii unor abilități noi și materiale tangibile cu ceea ce s-a realizat până în momentul de față.

Portofoliul profesional este o formă de promovare personală pe piața muncii (la fel că scrisoarea de intenție, cartea de vizită sau CV-ul). Este întocmit pentru un anumit scop, un anumit domeniu și cuprinde cele mai importante produse ale activității unei persoane.

Ca și fotograf, crearea unui portofoliu este unul dintre lucrurile esențiale care trebuiesc îndeplinite. Este indicat să se scoată în evidență domeniile și genul preferat de fotografie: macro, portrete, evenimente sau natură, iar fotografiile să fie cât mai reușite, dar și realiste. Scopul este de a selecta cele mai bune lucrări, pentru a reprezenta persoana ca artist.

În ziua de azi este aproape de neconceput ca un fotograf să nu-și expună creațiile și în mediul online: fie în rețele de socializare, fie pe un domeniu personalizat – varianta mai costisitoare. Deci, expunerea portofoliului și a creațiilor în mediul online, este benefică și indispensabilă.

În aplicația prezentată, portofoliul este structurat în patru categorii, a câte 12 fotografii:

Natura : sunt expuse cele mai reușite fotografii din : peisaje, fenomene ale naturii, plante, animale, etc.

Evenimente : este prezentă o selecție de fotografii din diverse evenimente : peisaje, expuneri, întâlniri, nunți, botezuri.

Macro : sunt prezente fotografii macro ( aducerea în prim-plan a subiectelor mici)

Portrete : sunt redate stări și sentimente prin aducerea în prim-plan a expresiilor unor persoane.

Structura grafică inițială este de trei rânduri și patru coloane, afișându-se mai întâi miniaturile fotografiilor, după care se selectează fotografia dorită, ce apare în mod full-screen.

Vizualizarea fotografiilor se face cu ajutorul unui slideshow implementat în jQuery, javaScript și CSS.

Galeria “slideshow” este unul dintre cele mai populare moduri de afișare vizuală în web design în prezent. Această unitate dinamică afișează mai multe piese de conținut (de obicei, imagini) pe o singură pagină, alternând între ele într-un mod care scoate în evidență o imagine de la un moment dat. Numele “slideshow” indica modul original al acestor galerii, în care slide-uri de imagini glisează pe orizontală, dar și în afara ecranului. Astăzi, prezentările fotografiilor sunt din ce în ce mai interactive ,cu stiluri creative și diferite.

Unul din motivele pentru care popularitatea acestui tip de prezentare este în creștere, este dat de faptul că prin mișcarea slide-urilor de pe ecran se generează un sentiment plin de viață. Acest sentiment de acțiune menține vizitatorii site-ului implicați.

În plus, slider-ele permit designerilor web afișarea de tip “real estate” – în loc de a rezerva cel mai bun loc pe pagină doar pentru o singură imagine, se poate distribui mai multe între mai multe efecte vizuale importante. Pe scurt, galeriile de prezentare arată versatilitatea într-un mod dinamic și primitor.

Cu ajutorul galeriilor de prezentare, conținutul ( fotografiile) este organizat într-un mod frumos și curat.

Fotografia selectată apare astfel:

La apropierea cu mouse-ul de una din săgețile de defilare se va observa o umbră în partea selectată.

Sunt prezente săgeți de navigare de tipul slide-show pentru a face posibilă derularea fotografiilor fără a fi necesară selectarea acestora individual. Acest lucru a fost realizat cu ajutorul implementării unor linii de cod din biblioteca jQuery și CSS.

Modul full-screen de vizualizare a fotografiilor din portofoliu dispune și de bloc de închidere. Acesta este dispus în partea dreaptă de sus.

Indicatorii slideshow de tip “bullets” sunt utilizați pentru a indica numărul fotografiilor din prezentare și la ce fotografie se află în prezent utilizatorul. Acești indicatori oferă și posibilitatea de a selecta o anumită poziție a fotografiei pe care se dorește să se vizualizeze.

Pagina “Contact”

În orice pagină web, indiferent de tipul acesteia ( publicitate, blog, magazin online, etc) , este aproximativ obligatorie o pagină de contact. Astfel, vizitatorii sau potențialii clienți află cum pot intra în legătură directă cu administratorul paginii sau compania respectivă.

În pagina “Contact” se folosesc anumite elemente de bază : se specifică adresa sau o harta de localizare, numărul de telefon, adresa de e-mail și desigur un formular de contact. Textul trebuie să fie cât mai prietenos și cât mai original. Fiecare site trebuie să dispună de o pagină de contact cât mai interesantă, creativă și atrăgătoare. În acest fel, clienții vor fi determinați să facă pasul cel mare: să ia legătura cu persoana de contact.

Vizitatorul va găsi formularul și datele de contact (adresa, număr de telefon și fax, adresa de e-mail, precum și rețelele de socializare unde poate fi găsit ) în ultima pagină a site-ului.

Adresarea este una prietenoasă, potențialul client simțindu-se mai relaxat în comunicare.

Formularul de contact

Folosirea formularului de contact reprezintă un avantaj, deoarece este cea mai simplă modalitate prin care se poate contacta respectiva persoană direct prin intermediul site-ului.
De asemenea, prin intermediul formularului există și posibilitatea de feedback. Clienții pot rapid și ușor oferi feedback-uri cu privire la produsul dvs., serviciul prestat și / sau abordare de marketing.

Un formular HTML conține elemente numite controale (controls), care au scopul de a primi informații de la utilizator prin mouse sau tastatură, informații ce sunt trimise apoi către un script ( ca exemplu, un fișier php) aflat pe serverul web. Respectivul script procesează informațiile primite ( le introduce într-o bază de date, loghează utilizatorul etc).

Informațiile completate de utilizator pe o pagină web sunt trimise către script în momentul în care utilizatorul apasa butonul “Trimite” al formularului.

Aplicația prezentată dispune de un formular de contact cu baza de date. Baza de date a fost creată cu ajutorul limbajului PHP și MySQL, în phpMyAdmin. Aici ajung mesajele trimise din site de către vizitatori.

Formularul de contact este format din 4 câmpuri obligatorii :

Numele expeditorului,

E-mailul expeditorului,

Subiectul mesajului,

Mesajul transmis

și un buton de submit a informațiilor scrise numit “Trimite”.

Conexiunea la baza de date

Conexiunea cu baza de date se realizează la începutul fișierului HTML prin comandă:

<?php

include ("connection.php");

// $note = $_REQUEST['note'];

$note = (isset($_REQUEST['note']) ? $_REQUEST['note'] : null);

?>

Pentru apelarea bazei de date s-a creat un fișier .php numit “connection.php” ,apelat în fișierul HTML, care conține:

apelarea tabelelor din baza de date :
$db_host = "localhost";

$db_user = "root";

$db_pass = "";

$db_name = "foto";

crearea conexiunii :
$db_connect = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

verificarea conexiunii :
if(mysqli_connect_error()) {

echo "Conexiunea nu s-a putut realiza:" .mysqli_connect_error();

}

Funcții PHP utilizate pentru accesarea și interogarea bazei de date MySQL

În continuare sunt prezentate cele mai folosite funcții PHP pentru lucrul cu bazele de date MySQL.
Funcția mysql_connect

Această funcție realizează conectarea la un server MySQL. Funcția mysql_connect primește cinci parametri opționali:

primul reprezintă numele server-ului MySQL și dacă lipsește se încearcă conectarea la calculatorul curent.

cel de-al doilea reprezintă numele utilizatorului și în caz că acesta lipsește se folosește valoarea root ca nume de utilizator.

al treilea parametru reprezintă parola utilizatorului și în caz că lipsește se folosește șirul vid în momentul conectării la server.

al patrulea parametru este de tip logic și are rolul de a indica motorului PHP că în cazul în care există o conexiune la același server să se mai creeze încă una în loc să se reutilizeze cea existentă.

ultimul parametru este de tip întreg și reprezintă proprietățile pe care le va avea conexiunea. Acest ultim parametru poate fi o combinație a valorilor:

a) MYSQL_CLIENT_COMPRESS – indică server-ului că va trebui să trimită date comprimate.

b) MYSQL_CLIENT_IGNORE_SPACE – indică server-ului MySQL faptul că va trebui să ignore spațiile care urmează după numele funcțiilor.

c) MYSQL_CLIENT_INTERACTIVE – indică server-ului MYSQL să nu închidă conexiunea după scurgerea unui anumit interval de timp în care script-ul nu a emis cereri către acesta.

Funcția mysql_connect returnează valoarea logică FALSE în cazul în care a eșuat conectarea la server-ul de baze de date și un identificator de acces la conexiunea către server-ul MySQL în cazul în care conectarea a reușit.

Funcția mysql_close

Această funcție primește ca parametru un identificator de acces la o conexiune spre un server MySQL și realizează închiderea acesteia.

Funcția mysql_create_db

Această funcție este utilizată pentru a crea o nouă bază de date pe server-ul MySQL. Funcția are doi parametri. Primul este de tip șir de caractere și reprezintă numele bazei de date care va fi creată, iar cel de-al doilea parametru reprezintă identificatorul de acces la conexiunea către server-ul MySQL. Funcția returnează valoarea logică TRUE în cazul în care a reușit să creeze baza de date și valoarea logică FALSE în caz contrar.

Funcția mysql_select_db

Această funcție setează baza de date pentru o conexiune către un server MySQL pentru interogările care vor urma. Funcția mysql_select_db are doi parametri. Primul este de tip șir de caractere și reprezintă numele bazei de date care va fi folosită pentru interogările ulterioare, iar cel de-al doilea parametru reprezintă identificatorul de acces la conexiunea către serverul MySQL. Funcția returnează valoarea logică TRUE în cazul în care s-a reușit selectarea bazei de date și valoarea logică FALSE în cazul în care baza de date nu există sau utilizatorul nu are drepturi de acces la aceasta.

Funcția mysql_query

Această funcție se folosește pentru a interoga o anumită baza de date. Funcția are 3 parametri:
– primul este de tip șir de caractere și reprezintă cererea emisă server-ului MySQL;
– al doilea parametru reprezintă identificatorul de acces al unei conexiuni către server;
– al treilea parametru este opțional și de tip întreg și reprezintă modul în care va fi returnat rezultatul.

PhpMyAdmin

Baza de date MySQL ce stă în spatele formularului de contact este creată cu ajutorul phpMyAdmin. “phpMyAdmin” este un sistem de gestiune a bazelor de date MySQL, destinat administrării bazelor de date prin intermediul un browser web. Cu ajutorul acestuia se pot crea, modifica sau șterge baze de date, tabele, câmpuri, se pot executa comenzi ( interogări) SQL.

Am creat o bază de date numită “foto”:

În această bază de date am introdus 5 tabele :

ID – reprezintă numărul atribuit persoanei care trimite mail-ul. Este setat cu cheie primară și auto-increment;

message – este de tip text și reprezintă câmpul cu mesajul trimis de vizitatori sau potențiali clienți;

subj – este de tip text și reprezintă câmpul subiectului mesajului trimis și este obligatoriu;

u_email – reprezintă câmpul completat de către expeditor. Acesta este nevoit să completeze câmpul “Email” cu adresa lui de mail din formularul de contact. Câmpul este obligatoriu;

u_name – este de tip text și reprezintă câmpul completat de către expeditor cu numele acestuia. Acest câmp este obligatoriu.

După completarea câmpurilor de către expeditor , mesajele trimise cu succes din formularul de contact din aplicație apar cu un mesaj în pagina principală :

Mesajul trimis poate fi vizualizat de către administratorul bazei de date, introducând în adresa URL a unui browser web comanda “localhost/phpmyadmin” .

Acesta va face conexiunea la baza de date. Se va selecta baza de date “foto” , apoi câmpul “tb_cform”, unde sunt prezente mesajele trimise de vizitatori sau clienți vechi.

Mesaje primite apar sub forma:

Copyright

Despre

Potrivit Oficiului Copyright U.S. , “Dreptul de autor este o formă de protecție oferită autorilor ‘operelor originale ale autorului’, inclusiv literare, dramatice, muzicale, artistice, precum și alte opere intelectuale”.

Acesta oferă autorilor de opere originale drepturi exclusive asupra lucrărilor și opțiunea de a acorda dreptul de utilizare altor persoane. În general, drepturile includ:

reproducerea;

distribuirea;

dezvoltarea unor lucrări derivate;

afișarea publică.

Copyright-ul unui site web

Proiectul original este protejat de copyright din momentul creației, cu condiția ca acesta să fie într-o formă tangibilă. “Tangibil” însemnând că lucrarea trebuie să dispună de documente (scris pe hârtie, salvate pe un hard-disk sau pe un dispozitiv de înregistrare) și comunicate într-un mod vizibil direct sau printr-o mașină sau dispozitiv. Ideile, metodele și sistemele nu pot fi copiate.

Un site web – grafică, conținut, elemente vizuale – are dreptul de autor din momentul dezvoltării. Așadar, punând sigla de copyright în partea de jos a site-ului, se precizează că materialul afișat nu poate fi utilizat fără permisiunea proprietarului.

concluzii

Referințe web

bibliografie

Codul sursă

În această anexă se adaugă codul sursă al aplicației…

Index

B

Bibliografie 9

C

CUPRINSUL xi

D

Dimensiuni 3

F

Figuri 4

Formulele matematice 4

I

Ilustrațiile 4

L

Legenda 6

LISTA FIGURILOR xii

LISTA TABELELOR xiii

R

Referințe web 10

S

Structura documentului 2

T

Tabele 5

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: Modalități de Realizare a Unui Portofoliu Electronic (ID: 118566)

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.

Modalități de Realizare a Unui Portofoliu Electronic

Copyright Notice

Cercetări Privind Influența Micropolunaților Anorganici CU Grad Ridicat DE Toxicitate Asupra Stării Ecosistemelor Acvatice. Studiu DE Caz Râul Argeș Zona 1 Decembrie, Județ Ilfov

Consideratii Generale Asupra Medicatiei Antidepresivedocx

Libertatea de Exprimare In Mediul On Line

Evoluția Sistemului de Învățământ Românesc După 1989

Factori de Succes In Comertul Electronic

Abrevierile In Limba Romana

Copyright Notice

Similar Posts