Web design and development

Tema: Prezentarea site-ului, care va fi realizat în cadrul cursului

Bună! Bine ai revenit la lecțiile noastre! Aș vrea să te anunț, că după această lecție: (Ana prezintă)
- vei cunoaște un exemplu de site web, ce ar putea fi dezvoltat cu ajutorul tehnologiilor pe care le vom
învăța în cadrul acestui curs;
- vei afla ce înseamnă noțiunea de ”design sensibil” al site-ului și ce este un meniu de tip ”hamburger”;
- vei afla ce este un slider și pentru ce ar putea fi el implementat într-un site web;
- vei cunoaște recomandări referitoare la structurarea fișierelor, atunci când se dezvoltă un site web.

Astfel, în cadrul acestei lecții vom analiza un exemplu de site, ce ar putea fi dezvoltat în cadrul
cursului de ”Proiectare și Dezvoltare Web”. Am decis să realizez un site, care promovează o
cafenea, ce oferă cafea gustoasă clienților săi. Am numit locația ”Coffee Time”. Deoarece atunci
când cineva se gândește la cafea, o asociază cu culoarea cafenie sau cea a ciocolatei, am decis
că voi utiliza drept culoare predominantă - cafeniul. Voi utiliza un font (mod de a scrie un text)
nu chiar sobru, în cadrul paginilor site-ului. Fontul îl voi prelua de pe site-ul
https://fonts.google.com/. Pe acest site poți găsi foarte multe fonturi mai deosebite. Poți intra
și tu pentru a cerceta ce oferă acest site!
După cum am afirmat deja la lecția anterioară, pagina de start este cea mai importantă într-un
site web, deoarece este prima pe care o vede utilizatorul după ce culege în bara de adrese a
navigatorului web, numele de domeniu al site-ului. Pagina de start, numită și HOME PAGE,
trebuie să capteze atenția utilizatorului.
Putem prezenta schița ei sub forma unei imagini-
machetă prezentată acum pe ecran: în antetul
paginii voi avea pe orizontală: o imagine micuță
numită logo, și trei opțiuni, care fac parte din meniul
superior. Aceste opțiuni îi vor permite utilizatorului
să acceseze mai ușor una din cele trei componente
de bază ale paginii de start, printr-un click pe una din
ele:
● informații generale despre cafea – atunci
când se va face click pe opțiunea DESPRE,
● produsele de bază oferite de cafeneaua pe
care o descriu – făcând click pe opțiunea
PRODUSE,
 Web design and development

● și componenta în care voi descrie coordonatele cafenelei, alături de o hartă interactivă –

atunci când utilizatorul va face click pe opțiunea CONTACTE.
Este bine să știi, că astăzi utilizatorii de resurse web folosesc diferite dispozitive pentru
accesarea site-urilor web și este foarte important ca meniul, dar și toate conținuturile site-
urilor web, să se adapteze la ecranele acestor dispozitive.
Astfel, voi defini noțiunea de design sensibil sau receptiv, care în limba engleză este numit
”responsive design”. Această noțiune presupune utilizarea HTML-lui, CSS-lui și JavaSriptului
pentru: schimbarea dimensiunilor, ascunderea, comprimarea sau mărirea elementelor site-ului
web, astfel încât conținuturile acestuia să arate bine pe toate dispozitivele ce ar putea să le
folosească utilizatorul: PC-uri cu ecrane desk-top, tablete, telefoane, televizoare etc.
Așadar, meniul superior, dar și restul contentului site-ului nostru trebuie să fie responsive (voi
anexa un filmuleț de prezentare a site-ului prezentare_site.mp4).

Atunci când meniul va apărea pe un ecran de smartphone, acesta nu va fi prezentat complet,

așa ca pe un ecran mare. În cazul ecranului mic, în locul meniului, voi utiliza un simbol special,

numit ”hamburger”, care arată așa și pe care foarte mulți utilizatori îl asociază cu un
meniu expandabil cu opțiuni. Utilizatorul, atunci când va dori să vadă opțiunile din meniu pe

ecran mic sau să le ascundă – va face click pe acest

buton :

Sau

Sub meniul de bază, din pagina de start voi include un slider, dar poate fi plasată și o imagine
frumoasă, care redă cât mai sugestiv activitatea cafenelei pe care o promovăm. Bine...Dar ce
este slider-ul? Ai auzit de această componentă web?
 Web design and development

În web design, termenul ”slider” este utilizat pentru o prezentare de slide-uri sau diapozitive
într-o pagină web. Slide-ul, este partea componentă a slider-ului și poate conține imagini sau
imagini cu texte scurte. Slider-ul animează pagina de start. Prezentarea slide-urilor poate fi
realizată automat, adică fără implicarea utilizatorului sau slide-urile pot fi schimbare de
utilizator, în mod individual. Slider-ul meu va fi format din 4 slide-uri, iar fiecare slide are la
bază o fotografie a unui produs, ce are în partea de jos un text scurt, iar în colțul din dreapta-
sus este prezent numărul slide-ului. Exemplul unui slide este prezentat în imagine. Observă că
este al doilea slide din 4.

După slider, urmează un text informativ general, care descrie produsele din cafea, pe care le
prepară cafeneaua.

Mai jos, sub descrierea textuală, voi prezenta succint top 3 cele mai solicitate produse în localul
cu cafeaua. Din această componentă va fi posibilă trecerea la paginile cu descrierea detaliată a
celor trei produse, imaginile și denumirile produselor fiind referințe la alte pagini ale acestui
 Web design and development

site. Referințe înseamnă - că atunci când voi face click pe una din imaginile din această
secțiune, se va face un salt la o altă pagină web.

Urmează componenta cu datele de contact ale locației: adresa fizică, email-ul și numărul de
telefon al cafenelei, iar alături va fi plasată harta interactivă, preluată de pe maps.google.com,
care îl poate ajuta pe utilizator să găsească mai ușor locația - mărind sau micșorând scara hărții.

În partea de jos a paginii de start, dar și pentru celelalte pagini adiționale, va fi ”subsolul”
paginii, numit în engleză ”footer”. Acesta va conține drepturile de autor, cu anul curent, mailul
dezvoltatorului etc.
 Web design and development

Bine, să vedem acum setul de fișiere și mape, necesare realizării acestui proiect... Mapa
proiectului am numit-o PROJECT. În interiorul acestei mape am creat o ierarhie de mape și
fișiere necesare realizării corecte a proiectului. Trebuie să știi că nu este bine să păstrezi toate
fișierele împreună, într-un singur folder.
Am creat mapa cu denumirea CSS, pentru a păstra în ea definirea tuturor stilurilor necesare. În
mapa IMAGES – voi stoca toate imaginile necesare proiectului. În cazul în care sunt necesare
foarte multe imagini – se vor crea câteva subdirectoare, pentru a grupa imaginile și a le găsi
mai ușor. În mapa JS, voi păstra toate JavaScripturile necesare, iar în mapa PAGES – voi păstra
fișierele, ce definesc paginile web, ce descriu detaliat produsele cafenelei. După cum s-a
menționat anterior, voi mai crea 3 pagini secundare, pe lângă cea de bază, în care voi descrie
mai detaliat fiecare din cele 3 produse oferite de cafenea clienților săi: cappuccino, latte și
espresso. Anume aceste 3 pagini și vor fi păstrate în mapa PAGES.

Fișierul index.html – definește pagina de start a site-ului web și va fi stocat în forlder-ul părinte
- PROJECT.
Încheiem aici lecția... Să ne reamintim principalele idei enunțate azi: (Ana le formulează)
● Site-ul poate fi format dintr-o singură pagină, ce are mai multe componente sau
site-ul poate fi format și din mai multe pagini. Atunci când site-ul are mai multe
pagini, mereu trebuie să fie una principală, numită ”HOME PAGE”;
● Este bine ca tot conținutul din paginile site-ului web să fie sensibil la ecranul de
prezentare. Adică, utilizatorului trebuie să-i fie comod să acceseze site-ul și pe
ecran de calculator, dar și pe ecran de smartphone;
● Mulțimea de fișiere, în baza cărora se creează site-ul, trebuie structurate corect,
astfel încât mereu să știm unde sunt păstrate și cum pot fi ele accesate.
 Web design and development

Sper că te-am intrigat... La lecția următoare începem să învățăm limbajul de marcare HTML,
care, după cum am mai spus, este utilizat la definirea conținuturilor paginilor site-ului web. Ne
reauzim curând...