L.T.

“Mihai Stratulat” Clasa a IX-a

MINISTERUL EDUCAŢIEI ȘI CERCETĂRII AL REPUBLICII MOLDOVA

DIRECŢIA EDUCAȚIE CRIULENI
LICEUL TEORETIC “MIHAI STRATULAT”, S. BOȘCANA

APROBAT: ________________ COORDONAT: ___________________

Director, Stavila Viorica Director adj. instr., Tricolici Valentina
___ septembrie 2023 ___ septembrie 2023

PROIECT DIDACTIC DE LUNGĂ DURATĂ

Disciplina opțională: PROIECTAREA ȘI DEZVOLTAREA WEB
clasa a IX-a
Profesor: FRUNZA ELENA, GRAD DIDACTIC I
Anul de studii 2023 – 2024

Proiectul este elaborat conform Curriculumului Național, Chişinău, 2020

Discutat şi aprobat la şedinţa Comisiei Metodice Știinţe Exacte
Proces - verbal nr.__din ___ septembrie 2023
Șeful Comisiei Metodice ___________/ __________ /
 II. Administrarea disciplinei

Statutul disciplinei Aria curriculară Clase Nr. de module Nr. de ore

VII−IX şi X-XII
Opțională Tehnologii (profilurile real şi 4 34
umanist)

ORARUL LECŢIILOR

Ziua
Luni Marţi Miercuri Joi Vineri
[Link]ţ.

II

III

IV

VI
L.T. “Mihai Stratulat” Clasa a IX-a

Repartizarea modulelor

Nr. Total
d/o Teme și module
ore
1. Introducere în web 2
2. Limbajul de marcare HTML 8
3. Limbajul de stilizare CSS 11
4. Limbajul de programare JavaScript 13
Total 34

III. Competențe specifice disciplinei opționale

Disciplina opțională „Proiectarea și Dezvoltarea Web” urmărește formarea următoarelor competențe specifice:
● Utilizarea editoarelor de cod pentru crearea fișierelor de tip HTML, CSS și Java Script sau editarea celor existente, pentru elaborarea site-urilor
simple sau de complexitate medie;
● Scrierea codului HTML, CSS, Java Script corect lexical, sintactic, semantic;
● Proiectarea, machetarea și stilizarea site-urilor simple sau de complexitate medie, utilizând limbajele de marcare și stilizare pentru necesitățile și
interesele specifice ale clienți- lor (persoanelor fizice sau juridice), compatibile cu mai multe browsere web, accesibil pe diferite dispozitive;
● Dezvoltarea site-urilor web, prin adăugarea codului Java Script, pentru animarea, dinamizarea, validarea și implementarea altor elemente
interactive în paginile site-ului;
● Modernizarea progresivă a site-urilor web existente, prin implementarea posibilităților noi apărute în HTML5 și CSS3

Profesor: Frunza Elena 3

 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data
Modulul 1. INT1RODUCERE ÎN WEB- 2 ore
- Recunoașterea unui site web, a unei pagini web, a 1. Lecțiile video, pe platforma online.
unui URL, a unui nume de domeniu, a unui
navigator web și a unui editor de cod; 2. Evaluare formativă, după parcurgerea Lecțiilor
- Evidențierea diferențelor dintre procesul de design 1 Introducere în designul și pe platforma online.
1 07.09.23 3.
web și dezvoltare web; dezvoltarea web exerciții de:
- Exemplificarea tehnologiilor, sub formă de limbaje  Determinare a elementelor de bază ale unui
formale, utiliza- te pentru procesul de proiectare, broweser;
machetare web, dar și cel de programare web;
- Identificarea caracteristicilor scripturilor  Enumerare a funcțiilor unui browser;
client-side;  Depistare a URL-ului și numelui de domeniu
- Argumentarea necesității instalării unui al site-ului;
editor de cod și a unui browser pe
calculator sau laptop.  Determinare a numărului de pagini într-un
Definirea noțiunii de „responsive web design”, de site;
„hamburger menu”, de „slider”, de „pagină de
start” a unui site;  Enumerare a principalelor componente ale
Identificarea componentelor principale ale unei fiecărei pagini a si- te-ului;
pagini web: antet, conținut, subsol; Prezentarea unui prototip de 4. Studii de caz:
- Argumentarea necesității structurării paginii 2 site, care va putea fi realizat în 1 14.09.23
web din componente integrabile
cadrul disciplinei  Analiza și determinarea, în baza
- Determinarea structurii corecte de mape cu conținuturilor paginilor unui site, care este
fișiere, după tipul lor, necesare dezvoltării
destinația site-ului;
unui site web.
5. 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.
Modulul 2. LIMBAJUL DE MARCARE HTML- 9 ore
- Definirea noțiunii de limbaj de marcare; 3 Limbajul de marcare HTML. 1 21.09.23 Sunt propuse exerciții de:
Determinarea structurii corecte a unui document Elemente HTML Elementele
web;  Determinare a unei structuri corecte a
HTML utilizate în antetul documentului web;
Profesor: Frunza Elena 4
 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data
documentului web Elemente
- Identificarea elementelor HTML responsabile de
HTML utilizate în conținutul  Identificare a elementelor web
definirea structurii de bază a documentului web;
paginii web pentru editarea și responsabile de definirea documentului
- Recunoașterea atributelor elementelor HTML și web, a antetului și a conținutului acestuia;
diferențierea acestora de tag-urile HTML; formatarea textului
Construirea unui document web simplu, respectând  Utilizare a unui editor de cod pentru
cerințele de structurare corectă a acestuia. crearea unui document web;
- Enumerarea și descrierea elemen telor HTML, ce
 Lansare în browser a documentului web creat.
pot fi utilizate în antetul documentului web; Elemente HTML utilizate în
Exemple de sarcini:
- Specificarea sintaxei elementelor HTML, corpul paginii web pentru
utilizate la definirea antetului unui document web; 4 1 28.09.23  Creați un document web cu conținutul
aranjarea textului cu ajutorul
- Estimarea rolului fiecărui element HTML, utilizat menționat în lecția vi- deo, utilizând un
în antetul docu mentului web; listelor de date
editor de cod.
- Scrierea și integrarea elementelor HTML în
 Salvați codul, creând documentul web
antetul documentului web.
[Link].
-Descrierea elementului și a sintaxei elementului Elemente HTML utilizate în
BODY, utilizat pentru definirea „corpului” pagi nii 5  Deschideți documentul web în browserul
corpul paginii web pentru 05.10.23
web; 2 web și observați cum interpretează acesta
- Recunoașterea și specificarea elementelor, a 6 implementarea imaginilor și 12.10.23 elementele HTML, definite în document.
sintaxei elemente- lor HTML, ce pot fi utilizate tabelelor  Încercați să ștergeți unele elemente HTML
pentru formatarea textului în paginile web;
- Implementarea într-un document web a din document. Sal vați și vedeți rezultatul în
elementelor ce definesc un text sau elemente ce fereastra browserului.
formatează porțiuni de text. Elementul HTML utilizat în  Adăugați unele elemente HTML noi în
- Localizarea listelor în texte; 7 corpul paginii web pentru 1 19.10.23 document. Salvați și vedeți rezultatul
- Enumerarea și descrierea elementelor HTML, ce implementarea referințelor interpretării în fereastra browserului.
pot fi utilizate pentru inserarea listelor cu date
într-o pagină web;
 Creați un alt document web, în mod
independent, respectând structura
- Specificarea sintaxei elementelor, responsabile de
inserarea listelor cu date în HTML; Elemente HTML utilizate în recomandată. Salvați-l, iar apoi lansați-l în
8 browser.
- Scrierea codului pentru crearea listelor HTML; corpul paginii web pentru 1 26.10.23
- Implementarea listelor, de diferite tipuri, inclusiv implementarea formularelor  Scrieți linia de cod HTML, care va adăuga
cele mixte, în documente web; iconița site-ului și care va fi afișată, în tab,
alături de titlul site-ului.
- Emiterea ipotezelor referitor la utilizarea unui tip
de listă într-un anumit context. 9 Elemente HTML utilizate în 2 09.11.23  Scrieți în antetul documentului web linia de

Profesor: Frunza Elena 5

 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data
corpul paginii web pentru
10 implementarea iframe, audio și 16.11.23
video în HTML

- Recunoașterea și descrierea ele mentelor HTML, cod, care va specifica numele autorului site-
ului, cuvintele-cheie utilizate în site și care
ce pot fi utiliza- te pentru inserarea imaginilor și a 11 Evaluare sumativă 1 23.11.23 va defini corect viewport-ul.
tabelelor într-o pagină web;
- Specificarea sintaxei elementelor responsabile de
 Implementați liniile de cod scrise într-un
document web (de exemplu în [Link],
inserarea imagini- lor și a tabelelor în HTML;
definit la lecția 3). Salvați-l și analizați
Identificarea și utilizarea corectă a atributelor,
Modulul 3. LIMBAJUL DE STILIZARE CSS – 12 ore
- Definirea noțiunii de „stil”; Metode de implementare ale Sunt propuse exerciții de:

- Emiterea ipotezelor referitor la necesitatea stilurilor în documentele web.  Definire a noțiunii de „stil”;
stilizării elementelor HTML;
12 Sintaxa de bază a definirii  Enumerare a metodelor de implementare a
- 1 30.11.23
Recomandarea separării definirii stilurilor, de proprietăților de stil pentru stilurilor într-un do- cument web;
definirea conținuturi- lor web;
elementele HTML  Numire a elementelor HTML, utilizate
- Specificarea modalităților de implementare ale
pentru implementarea stilurilor în
stilurilor în documentele web;
documentele web și descriere a sintaxei lor;
- Localizarea selectorului, ale proprietăților și Tipuri de selectori CSS.
 Recunoaștere a selectorilor, declarațiilor,
valorilor acestora în declarațiile CSS;
13 Proprietăți CSS utilizate pentru
- 1 07.12.23 proprietăților CSS într-un stil simplu, deja
Interpretarea stilurilor simple. stilizarea textului definit;
- Descrierea destinației proprietăți- lor și
 Deosebire ale stilurilor interne de cele externe
selectorilor CSS;
- Recunoașterea selectorilor de tip
Moștenirea stilurilor. și de cele inline;
Proprietăți CSS pentru fundal și  Emitere a ipotezelor referitoare la domeniul
„id”, „class” și ale proprietăților CSS; 14 1 14.12.23 de aplicare al stilurilor, în funcție de locul
- Utilizarea proprietăților și selectorilor CSS stilizarea listelor
definirii lor – interiorul sau exteriorul
corect, la stilizarea di- feritor elemente HTML,
utilizate la formatarea textului; documentului web.
15 Proprietăți CSS pentru 1 21.12.23
- Scrierea și interpretarea stilurilor, utilizând 2. Studii de caz:
stilizarea câmpurilor interioare,
selectori de tip „id” și  Cercetarea a 1-2 site-uri din mediul web, și
„class”; exterioare. Înălțimi, lățimi ale

Profesor: Frunza Elena 6

 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data
elementelor – box-model. expunerea referitor la combinația de culori
- Interpretarea secvențelor de stil pentru text, cu
utilizată în site, modului de prezentare și
scopul înțelegerii destinației lor; Definirea stilurilor bordurilor.
accesare a elementelor în fereastra browser-
- Scrierea stilurilor pentru secvențele textuale Stilizarea tabelelor și a ului. Evidențierea comodității utilizării site-
dintr-un document
imaginilor ului și ale elementelor lui.
- Specificarea principiilor de moș- tenire a stilurilor
în CSS; 3. Exemple de sarcini:
- Enumerarea proprietăților de stil, ce pot fi
Pseudoclase – stilizarea  Descrieți ce este un stil și cum poate el
moștenite de elementele- urmași de la elementele- 16 referințelor, pseudoelemente. 1 11.01.24 schimba prezentarea unui element HTML
părinte; Elementele DIV, SPAN într-o pagină web;
- Utilizarea corectă a proprietăților și selectorilor  Comparați cei doi selectori – de tip „id” și
CSS pentru stiliza- rea fundalurilor și a listelor Proprietăți de stil pentru „class”; Evidențiați sintaxa și contextul lor de
HTML; utilizare;
elemente flotante și pentru
- Scrierea stilurilor pentru elemen tele HTML, 17 1 18.01.24  Numiți de la 3 la 5 proprietăți CSS ce pot fi
utilizând selectori simpli;
poziționarea elementelor utilizate pentru stilizarea textului;
- Interpretarea proprietăților de stil, cu scopul  Scrieți stiluri pentru 2-4 elemente HTML
înțelegerii destinației lor la stilizarea fundalurilor Transparența elementelor dintr-un document web, utilizând selectorii de
și a listelor cu date. HTML, filtre, transformări, tip „tag”, „id”, „class”, dar și utilizând
18 1 25.01.24 proprietăți CSS pentru stilizarea textului;
- Enumerarea proprietăților CSS, utilizate la gradiente
stilizarea câmpurilor, bordurilor și pentru  Implementați stilurile definite într-un fișier
definirea înălțimilor, lățimilor elementelor extern de stiluri, creați legătura cu el într-un
HTML;
19 Tranziții, animații în CSS document web, apoi lansați documentul în
- Recunoașterea și numirea pro- prietăților de stil,
1 01.02.24 browser. Analizați rezultatele obținute.
utilizate pentru stilizarea imaginilor și a tabelelor Încercați aplicarea altor valori pentru
HTML; Noțiunea de „responsive design”. proprietățile de stil utilizate. Observați
- Utilizarea proprietăților CSS, pentru definirea 20 MediaQueries 1 08.02.24 diferența în fereastra browser-ului.
stilurilor imagini- lor, tabelelor, dar și a  Specificați care sunt principiile moștenirii
bordurilor, câmpurilor, lățimilor și înălțimilor valorilor proprietăți- lor de stil în CSS;
altor elemente. Flexbox în CSS. „Responsive web
- 21 1 15.02.24  Numiți 2-4 proprietăți de stil, valorile cărora
Recunoașterea pseudoclaselor și ale design” și flexbox pot fi moștenite de elementele-urmași;
pseudoelementelor din CSS;
- Utilizarea corectă a pseudoclaselor și  Numiți și descrieți proprietățile de stil ce pot
pseudoelementelor la defini rea stilurilor 22 Exemplu de creare și stilizare a 1 22.02.24 fi utilizate pentru stilizarea fundalurilor
elementelor sau a părților elementelor HTML; unui site web elementelor HTML, dar și pentru stiliza- rea

Profesor: Frunza Elena 7

 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data

23 1
Prezentarea produsului final 29.02.24 listelor;
- Distingerea pseudoclaselor de pseudoelemente și
a sintaxei lor;  Scrieți stiluri pentru definirea fundalurilor
- Scrierea și interpretarea proprietă țile de stil diferitor elemente HTML. Analizați
pentru pseudoelemente și pseudoclase; rezultatele interpretării în fereastra browser-
- Recunoașterea, interpretarea și încorporarea ului. Specificați, prin modificare alte valori

Modulul 4. LIMBAJUL DE PROGRAMARE JAVASCRIPT – 11 ore

- Definirea noțiunii de script „cli- ent-side”;
Scripturi client-side. Sunt propuse exerciții de:
- 24 Introducere în limbajul de  Definire a noțiunii de „script client-side”;
Argumentarea necesității utilizării 1 07.03.24
limbajului de programare JavaScript în programare JavaScript
documentele web;
 Argumentare a necesității adăugării
scripturilor client-side în cadrul
- Descrierea modalităților de implementare a Obiecte predefinite JavaScript. documentelor web;
JavaScript-urilor în documentele web;
25 Proprietăți și metode. Consola  Enumerare și descriere a metodelor de
- Recomandarea adăugării elementelor 1 14.03.24
interactive și ale scripturilor pentru
JS implementare a Ja- vaScript-urilor în
documente web;
generarea dinamică a noi- lor conținuturi pe
partea client, în paginile web. Variabile, tipuri de date și  Explicarea necesității separării scripturilor
- Recunoașterea și descrierea obiectelor de 26 operatori în JavaScript 1 21.03.24 client-side de codul HTML, în fișiere externe
bază, predefinite din Ja-vaScript; de scripturi.
- Specificarea sintaxei proprietăților și ale Studii de caz:
metodelor obiectelor prede- finite din DOM HTML. Accesarea și  Cercetarea diferențelor dintre scripturile
JavaScript; modificarea conținutului client-side și cele server-side.
- Scrierea JavaScript-urilor în con- sola web 27 documentului web prin DOM 1 28.03.24 2. Exemple de sarcini:
și analizarea rezultatelor interpretării lor de
browser.
HTML  Definiți noțiunea de „script client-side”;

- Recunoașterea variabilelor din JavaScript și  Numiți un limbaj de programare, ce poate

descrierea modalității de definire a Funcții predefinite în JavaScript fi utilizat pentru a scrie scripturi client-side;
variabilelor în Ja vaScript;
28 1 04.04.24  Descrieți două exemple de acțiuni posibile
Funcții definite de programator
Profesor: Frunza Elena 8
 L.T. “Mihai Stratulat” Clasa a IX-a
Eșalonare în
Nr. Module / Conținuturi / Noțiuni- Activități de învățare și produse școlare Observați
Unități de competență timp
crt. cheie recomandate i
Ore Data
în JavaScript. Sintaxa. Domenii
de vizibilitate ale variabilelor

29 Exemplu de creare și stilizare a

1 11.04.24
unui site web
Instrucțiunile ciclice în
JavaScript
30 Evenimente gestionate cu 1 18.04.24
JavaScript

Obiectul RegExp din JavaScript

- Distingerea tipurilor de date și ale tipurilor 31 Tablouri în JavaScript 1 25.04.24 sau conținuturi încadrul unui site, ce ar fi
de operatori accesibili în JavaScript; realizabile doar cu adăugarea scripturi
- Folosirea principalilor operatori în lucrul  Numiți minimum două obiecte predefinite din
cu datele în JavaScript; Definire obiecte în JavaScript. JavaScript și des- crieți pentru ce ar putea fi
- Argumentarea utilizării anumitor operatori
32 Proprietăți, metode 1 02.05.24 ele utilizate;
în funcție de context;  Realizați o descriere comparativă a
- Scrierea expresiilor aritmetice și a textelor proprietăților și obiectelor unui obiect
33 Exemplu creare slider cu 1 16.05.24 JavaScript, creând paralele cu obiectele din
în care să fie utilizate variabile și operatori;
JavaScript. Adăugare în site lumea reală;
- Prezentarea diferitor conținuturi
informaționale la ecran;
 Analizați consola JavaScript. Scrieți câteva
34 Evaluare sumativă 1 23.05.24 operații matematice în consolă și urmăriți unde
- Implementarea datelor, expresii- lor, sunt prezentate rezultatele.
valorilor, textelor și operatori- lor în
35.  Numiți 2-4 funcții predefinite, de nivel
scripturi Recapitulare 1 30.05.24 superior, din JavaScript;
- Definirea noțiunii de DOM HTML și
 Descrieți sintaxa a 2-4 funcții predefinite,

Profesor: Frunza Elena 9