Profesor Opaeț Sergiu, clasa 8

Introducere în designul și dezvoltarea

web
 Ce vom studia astăzi la lecție?

Obiective operaționale:
• O1: Elevii vor putea să definească termenii cheie
precum HTML, CSS, design web și dezvoltare web.
• O2: Elevii vor putea să enumere etapele principale
implicate în crearea unui website.
• O3: Elevii vor putea să creeze o pagină web simplă
utilizând elementele de bază HTML și CSS.
 Importanța paginilor web în viața de zi cu zi...

"Ce vă place la aceste website-uri?",

"Cum credeți că sunt create?", "V-ați
gândit vreodată să creați propriul
website?"
 Importanța paginilor web în viața cotidiană...

Rețele sociale: Platforme precum Facebook, Instagram, Twitter și

LinkedIn ne permit să comunicăm cu prietenii și familia, să împărtășim
Comunicare și

experiențe și să ne conectăm cu oameni din întreaga lume.

conectare

Aplicații de mesagerie: WhatsApp, Telegram, Messenger și altele

facilitează comunicarea instantanee și schimbul de informații în timp real.

Email: Rămâne un instrument esențial pentru comunicarea profesională și

personală.
Acces la informație și Importanța paginilor web în viața cotidiană...

Motoare de căutare: Google, Bing și altele ne permit să găsim rapid

informații despre orice subiect.
educație

Enciclopedii online: Wikipedia și alte resurse similare oferă acces la o

vastă colecție de cunoștințe.

Cursuri online: Platforme precum Coursera, Udemy și edX oferă

posibilitatea de a învăța noi abilități și de a obține diplome de la
universități de prestigiu.
 Importanța paginilor web în viața cotidiană...
Comerț electronic:
• Magazine online: Amazon,
eBay, Alibaba și alte platforme
de comerț electronic ne permit
să cumpărăm o gamă largă de
produse și servicii din confortul
propriei case.
• Plăți online: Sisteme precum
PayPal și Stripe facilitează
tranzacțiile online sigure și
rapide.
• Servicii bancare
online: Majoritatea băncilor
oferă servicii bancare online,
permițându-ne să gestionăm
conturile noastre, să efectuăm
plăți și să accesăm alte servicii
financiare.
Divertisment:
• Streaming video: Netflix,
YouTube, HBO Max și alte
platforme de streaming video
ne oferă acces la o gamă largă
de filme, seriale și alte
conținuturi video.
• Streaming muzică: Spotify,
Apple Music și alte servicii de
streaming muzical ne permit să
ascultăm muzică la cerere.
• Jocuri online: O varietate de
jocuri online, de la jocuri casual
la jocuri competitive, ne oferă
ore întregi de divertisment.
Altele:
• Știri: Site-urile web de știri ne
țin la curent cu evenimentele
din întreaga lume.
• Călătorii: Site-urile web de
călătorii ne ajută să planificăm
și să rezervăm vacanțe.
• Sănătate: Site-urile web de
sănătate oferă informații
despre o varietate de afecțiuni
medicale și tratamente.
 Sarcina în perechi...

Deschideți
brawserul internet Căutăm pagini web conform
importanței discutate anterior:
și introduceți pagina * Comunicare și conectare;
web • Acces la informație și educație;
• Comerț electronic;
• Divertisment;
• Altele.
 Termenii cheie (HTML, CSS, design web, dezvoltare web)
HTML (HyperText Markup Language):
Definiție
• Este limbajul standard de
marcare folosit pentru a crea
structura și conținutul unei
pagini web.
Rolul
• HTML stabilește elementele de
bază ale paginii, cum ar fi
titluri, paragrafe, imagini, link-
uri și tabele. Oferă o structură
semantică conținutului, indicând
ce este fiecare element (de
exemplu, un titlu, un paragraf
sau o listă).
 Termenii cheie (HTML, CSS, design web, dezvoltare web)
CSS (Cascading Style Sheets):
Definiție
• Este limbajul folosit pentru a
descrie prezentarea vizuală a
unei pagini web.
Rolul
• CSS controlează modul în care
elementele HTML sunt afișate
pe ecran, inclusiv culori,
fonturi, dimensiuni, margini,
spațiere și layout. Permite
personalizarea aspectului site-
ului și crearea unui design
atractiv și ușor de utilizat.
 Termenii cheie (HTML, CSS, design web, dezvoltare web)
Design web:
Definiție
• Procesul de planificare și
creare a aspectului vizual și a
experienței utilizatorului (UX)
pentru un website.
Rolul
• Designul web se concentrează
pe estetica site-ului, pe modul
în care informația este
organizată și prezentată, și pe
cât de ușor este pentru
utilizatori să navigheze și să
interacționeze cu site-ul.
 Termenii cheie (HTML, CSS, design web, dezvoltare web)
Dezvoltare web:
Definiție
• Procesul de construire și
întreținere a unui website,
inclusiv crearea structurii
HTML, aplicarea stilurilor
CSS și adăugarea de
funcționalități interactive cu
JavaScript.
Rolul
• Dezvoltarea web transformă
designul într-un website
funcțional. Include scrierea
codului, optimizarea pentru
performanță și asigurarea
compatibilității cu diferite
browsere și dispozitive.
 CONCLUZIE...
• HTML este scheletul unui website, definind structura și
conținutul.
• CSS este pielea și îmbrăcămintea, oferind aspectul vizual și
stilul.
• Designul web este planul arhitectural, care stabilește aspectul
și experiența utilizatorului.
• Dezvoltarea web este procesul de construcție, care transformă
designul într-un website funcțional.
Toate aceste elemente sunt interconectate și esențiale pentru
crearea unui website de succes.
 Determinarea elementelor unui browser
1. Interfața utilizatorului (GUI - Graphical User Interface):
• Bara de adrese: Aici introduci adresa URL a site-ului pe care vrei să-l accesezi.
• Bara de instrumente: Conține butoane și opțiuni pentru navigare (înapoi, înainte,
reîmprospătare), marcaje, descărcări și setări.
• File: Permit deschiderea mai multor pagini web în același timp.
• Bara de stare: Afișează informații despre starea de încărcare a paginii, nivelul de zoom
și alte detalii.
2. Motorul de randare (Rendering Engine):
• Este responsabil pentru interpretarea codului HTML, CSS și JavaScript al paginilor
web și afișarea lor pe ecran într-un mod vizual structurat și formatat.
• Asigură că elementele paginii (text, imagini, videoclipuri) sunt aranjate și afișate corect
conform instrucțiunilor din cod.
 Bara de adrese
Bara de instrumente

File
 Determinarea elementelor unui browser
3. Motorul JavaScript:
• Execută codul JavaScript, care este un limbaj de programare folosit pentru a
adăuga interactivitate și dinamism paginilor web (ex: animații, formulare,
actualizări de conținut în timp real).
4. Motorul de rețea (Networking Engine):
• Gestionează comunicarea dintre browser și serverele web.
• Trimite cereri pentru a descărca resursele necesare afișării paginii (HTML, CSS,
JavaScript, imagini, etc.) și primește răspunsurile de la server.
5. Interfața utilizatorului pentru conținut (UI Backend):
• Asigură legătura dintre motorul de randare și interfața grafică a utilizatorului.
• Permite browserului să afișeze conținutul paginii web în fereastra browserului.
 Determinarea elementelor unui browser
6. Stocare de date:
• Browserele utilizează diverse mecanisme de stocare pentru a salva informații precum:
• Cache: Copii temporare ale paginilor web vizitate pentru a le încărca mai rapid la următoarea vizită.
• Cookie-uri: Fișiere mici stocate pe computerul tău, utilizate pentru a urmări preferințele și setările tale pe
diferite site-uri web.
• Web Storage: O modalitate mai modernă de stocare a datelor în browser, oferind mai mult spațiu decât
cookie-urile.
• IndexedDB: O bază de date încorporată în browser pentru stocarea datelor structurate.
7. Securitate:
• Browserele moderne includ funcții de securitate pentru a proteja utilizatorii de site-uri web periculoase și atacuri
cibernetice.
• Acestea pot include blocarea de conținut nesigur, avertizări despre site-uri web potențial periculoase și protecție
împotriva phishing-ului.
Exemple de browsere web:
• Google Chrome
• Mozilla Firefox
• Safari (Apple)
• Microsoft Edge
• Opera
Care credeți că sunt funcțiile brawserului?

1. Afișarea paginilor
web: Browserul interpretează
codul HTML, CSS și JavaScript
al paginilor web și le prezintă
într-un format vizual, inclusiv
text, imagini, videoclipuri și alte
elemente multimedia.
Care credeți că sunt funcțiile brawserului?

2. Navigarea între
pagini: Oferă instrumente
precum butoane (înapoi,
înainte), bara de adrese și
linkuri pentru a naviga ușor
între diferite pagini web.
Care credeți că sunt funcțiile brawserului?

3.Gestionarea istoricului
de navigare: Înregistrează
istoricul paginilor vizitate,
permițând utilizatorilor să
revină ușor la conținutul
anterior.
Care credeți că sunt funcțiile brawserului?

4.Marcaje (bookmarks)
și favorite: Permite
salvarea adreselor URL
ale paginilor web
preferate pentru acces
rapid în viitor.
Care credeți că sunt funcțiile brawserului?

5. Gestionarea
filelor: Oferă posibilitatea
de a deschide mai multe
pagini web în file separate,
facilitând multitaskingul și
comutarea între sarcini.
Care credeți că sunt funcțiile brawserului?

6. Descărcarea
fișierelor: Permite
descărcarea de fișiere de
pe internet, cum ar fi
documente, imagini,
videoclipuri sau software.
Care credeți că sunt funcțiile brawserului?

7.Gestionarea cookie-
urilor: Stochează cookie-uri,
fișiere mici text care conțin
informații despre preferințele
utilizatorului și istoricul de
navigare pe anumite site-uri
web.
Care credeți că sunt funcțiile brawserului?

8.Securitate: Include funcții de

securitate pentru a proteja
utilizatorii de site-uri web
periculoase și atacuri cibernetice,
cum ar fi blocarea conținutului
nesigur, avertizări despre site-uri
web potențial periculoase și
protecție împotriva phishing-ului.
Care credeți că sunt funcțiile brawserului?

9.Extensibilitate: Permite
adăugarea de funcționalități
suplimentare prin intermediul
extensiilor sau pluginurilor, cum ar
fi blocarea reclamelor, gestionarea
parolelor sau traducere automată.
Care credeți că sunt funcțiile brawserului?

10.Redarea conținutului
multimedia: Include
suport pentru redarea de
conținut multimedia, cum
ar fi videoclipuri, audio și
animații.
 Determinarea numărului de pagini într-un site...
Determinarea numărului exact de pagini ale unui site web poate fi o sarcină
dificilă, deoarece site-urile web pot fi mari și complexe, cu pagini dinamice
generate în timp real. Cu toate acestea, există câteva metode pe care le puteți
utiliza pentru a obține o estimare a numărului de pagini:
1. Utilizarea sitemap-ului:
• Multe site-uri web au un sitemap XML, care este o listă a tuturor paginilor de
pe site.
• Puteți găsi sitemap-ul căutând "sitemap.xml" la sfârșitul adresei URL a site-
ului (de exemplu, www.exemplu.com/sitemap.xml).
• Dacă găsiți sitemap-ul, puteți număra manual numărul de intrări din acesta.
• Limitare: Nu toate site-urile web au un sitemap, iar unele sitemap-uri pot fi
incomplete.
SE VA SCRIE DUPĂ
ADRESA PAGINII WEB
Stabilim numarul de pagini in site.
Exersează și cu alte pagini web.
Exemplu pagina MEC
 Principalele componente ale unei pagini web sunt:

1. Structura:
• HTML (HyperText Markup Language): Limbajul de
marcare standard folosit pentru a defini structura și conținutul
paginii web.
• Head (<head>): Secțiunea care conține metadate despre
pagină (titlu, descriere, cuvinte cheie, link-uri către fișiere CSS
și JavaScript).
• Body (<body>): Secțiunea care conține conținutul vizibil al
paginii (text, imagini, videoclipuri etc.).
 Principalele componente ale paginii web
2. Conținut:
• Text: Informația principală prezentată pe pagină, structurată în titluri (<h1> -
<h6>), paragrafe (<p>), liste (<ul>, <ol>, <dl>) etc.
• Imagini: Fișiere grafice (.jpg, .png, .gif, .svg) care ilustrează sau completează
conținutul textual.
• Videoclipuri: Conținut video încorporat sau legat de pe alte platforme
(YouTube, Vimeo).
• Audio: Fișiere audio încorporate sau legături către platforme de streaming
audio.
• Formulare: Elemente interactive care permit utilizatorilor să introducă date
(nume, email, comentarii) și să le trimită către server.
• Link-uri: Conexiuni către alte pagini web sau resurse online, interne sau
externe.
 Principalele componente ale paginii web
3.Navigabilitate:
• Meniu de navigare: Permite utilizatorilor să acceseze
diferite secțiuni ale site-ului.
• Antet (header): Conține de obicei logo-ul site-ului,
meniul de navigare și alte elemente de identificare.
• Subsol (footer): Include informații de contact, link-uri
către pagini importante, copyright etc.
 Principalele componente ale paginii web
4.Elemente opționale:
• Sidebar: O bară laterală care poate conține widget-uri,
reclame sau alte informații suplimentare.
• Butoane de apel la acțiune (CTA): Butoane care
încurajează utilizatorii să efectueze o anumită acțiune (de
exemplu, "Abonează-te", "Cumpără acum").
• Elemente de social media: Butoane sau widget-uri care
permit utilizatorilor să partajeze conținutul paginii pe
rețelele sociale.
 Studiul de caz:
Analiza și determinarea, în baza conținuturilor
paginilor unui site, care este destinația site-ului…
 Analiza și determinarea destinației unui site pe baza
conținutului paginilor

1.Conținutul textual:
• Subiecte abordate: Ce teme sunt discutate în mod
predominant pe site? Sunt acestea legate de tehnologie, știri,
sănătate, modă, educație, divertisment sau alt domeniu?
• Tonul și stilul: Este limbajul formal sau informal? Se adresează
unui public larg sau unei nișe specifice?
• Cuvinte cheie: Ce cuvinte și fraze sunt utilizate frecvent în
conținut? Acestea pot oferi indicii despre subiectul principal al
site-ului.
 Analiza și determinarea destinației unui site pe baza
conținutului paginilor

2.Structura și designul:
• Organizarea informației: Cum este structurat conținutul? Există
categorii clare, meniuri de navigare sau alte elemente care ghidează
utilizatorul?
• Aspectul vizual: Ce culori, fonturi și imagini sunt folosite? Acestea pot
transmite anumite emoții sau pot fi asociate cu anumite industrii sau
subiecte.
• Funcționalități: Ce funcționalități interactive sunt disponibile pe site
(formulare de contact, căutare, comentarii, butoane de partajare socială)?
Acestea pot indica scopul site-ului (informare, vânzare, comunitate).
 Analiza și determinarea destinației unui site pe baza
conținutului paginilor

3.Metadate și informații tehnice:

• Titlul paginii și meta descrierea: Acestea oferă o scurtă
descriere a conținutului paginii și pot fi vizibile în rezultatele
motoarelor de căutare.
• Cuvintele cheie meta: Cuvintele cheie incluse în codul HTML
al paginii pot oferi indicii despre subiectul principal al site-ului.
• Numele de domeniu: Extensia numelui de domeniu
(.com, .org, .edu, .gov, .md) poate sugera tipul de organizație
sau scopul site-ului.
 Sarcini de realizat
Exemplu de sarcină 2: Analizați 2-3 site-uri
Exemplu de sarcină 1:
Analizați fereastra
browserului și...
• Găsiți în fereastră, bara de
adrese a browserului;
• Observați, ce alte funcții
mai are un browser web.
din Internet și...
• Depistați care este URL-ul și numele de
domeniu al site-ului;
• Specificați din câte pagini este format site-
ul?
• Evidențiați principalele părți componente
ale fiecărei pagini a site-ului;
• Descoperiți, în baza conținutului paginilor
site-ului, care este destinația site-ului (pentru
ce a fost el dezvoltat – pentru a vinde, pentru
a oferi servicii, pentru a promova, pentru a
comunica etc.).