© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”

Competențele specifice
cercului „Proiectarea și dezvoltarea Web”:
1. Utilizarea editoarelor de cod pentru crearea fișierelor de tip HTML, CSS și JavaScript sau editarea celor existente, pentru elaborarea site-urilor simple sau
de complexitate medie;
2. Scrierea codului HTML, CSS, JavaScript corect lexical, sintactic, semantic;
3. 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;
4. Dezvoltarea site-urilor web, prin adăugarea codului JavaScript, pentru animarea, dinamizarea, validarea și implementarea altor elemente interactive în
paginile site-ului;
5. Modernizarea progresivă a site-urilor web existente, prin implementarea posibilităților noi apărute în HTML5 și CSS3.

Unități de competențe:
1.1. Recunoașterea unui site web, a unei pagini web, a unui URL, a unui nume de domeniu, a unui navigator web și a unui editor de cod;
1.2. Evidențierea diferențelor dintre procesul de design web și dezvoltare web;
1.3. Exemplificarea tehnologiilor, sub formă de limbaje formale, utiliza-te pentru procesul de proiectare, machetare web, dar și cel de programare web;
1.4. Identificarea caracteristicilor scripturilor client-side;
1.5. Argumentarea necesității instalării unui editor de cod și a unui browser pe calculator sau laptop.
1.6. Definirea noțiunii de „responsive web design”, de „hamburger menu”, de „slider”, de „pagină de start” a unui site;
1.7. Identificarea componentelor principale ale unei pagini web: antet, conținut, subsol;
1.8. Argumentarea necesității structurării paginii web din componente integrabile;
1.9. Determinarea structurii corecte de mape cu fișiere, după tipul lor, necesare dezvoltării unui site web.

2.1. Definirea noțiunii de limbaj de marcare;

2.2. Determinarea structurii corecte a unui document web;
2.3. Identificarea elementelor HTML responsabile de definirea structurii de bază a documentului web;
2.4. Recunoașterea atributelor elementelor HTML și diferențierea acestora de tag-urile HTML;
2.5. Construirea unui document web simplu, respectând cerințele de structurare corectă a acestuia.
2.6. Enumerarea și descrierea elementelor HTML, ce pot fi utilizate în antetul documentului web;
2.7. Specificarea sintaxei elementelor HTML, utilizate la definirea antetului unui document web;
2.8. Estimarea rolului fiecărui element HTML, utilizat în antetul documentului web;
2.9. Scrierea și integrarea elementelor HTML în antetul documentului web.
2.10. Descrierea elementului și a sintaxei elementului BODY, utilizat pentru definirea „corpului” paginii web;
2.11. Recunoașterea și specificarea elementelor, a sintaxei elemente-lor HTML, ce pot fi utilizate pentru formatarea textului în paginile web;
2.12. Implementarea într-un document web a elementelor ce definesc un text sau elemente ce formatează porțiuni de text.
2.13. Localizarea listelor în texte;
2.14. Enumerarea și descrierea elementelor HTML, ce pot fi utilizate pentru inserarea listelor cu date într-o pagină web;
2.15. Specificarea sintaxei elementelor, responsabile de inserarea listelor cu date în HTML;
2.16. Scrierea codului pentru crearea listelor HTML;
2.17. Implementarea listelor, de diferite tipuri, inclusiv cele mixte, în documente web;
2.18. Emiterea ipotezelor referitor la utilizarea unui tip de listă într-un anumit context.
1
© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”
2.19. Recunoașterea și descrierea elementelor HTML, ce pot fi utiliza-te pentru inserarea imaginilor și a tabelelor într-o pagină web;
2.20. Specificarea sintaxei elementelor responsabile de inserarea imaginilor și a tabelelor în HTML;
2.21. Identificarea și utilizarea corectă a atributelor, necesare implementării imaginilor și ale tabelelor în paginile web.
2.22. Numirea și descrierea elementului HTML, ce poate fi utilizat pentru inserarea referințelor într-o pagină web;
2.23. Prezentarea sintaxei elementului responsabil de inserarea referințelor în HTML;
2.24. Crearea și implementarea referințelor într-un document web;
2.25. Analizarea diferitor tipuri de referințe, implementate într-un document web și emiterea ipotezelor referitoare la rolul lor.
2.26. Descrierea modalităților de utili-zare a formularelor, în calitate de instrument interactiv, pentru colectarea datelor de la utilizator;
2.27. Prezentarea sintaxei elementelor HTML, utilizate pentru definirea formularelor HTML, dar și ale elementelor de control;
2.28. Crearea și implementarea formularelor în site-urile web.
2.29. Numirea și descrierea sintaxei elementelor HTML, utilizate pentru implementarea cadrelor in-line;
2.30. Prezentarea sintaxei elementelor utilizate pentru implementarea secvențelor audio, video;
2.31. Implementarea iframe-urilor, secvențelor audio și video în paginile web.

3.1. Definirea noțiunii de „stil”;

3.2. Emiterea ipotezelor referitor la necesitatea stilizării elementelor HTML;
3.3. Recomandarea separării definirii stilurilor, de definirea conținuturi-lor web;
3.4. Specificarea modalităților de implementare ale stilurilor în documentele web;
3.5. Localizarea selectorului, ale proprietăților și valorilor acestora în declarațiile CSS;
3.6. Interpretarea stilurilor simple.
3.7. Descrierea destinației proprietăților și selectorilor CSS;
3.8. Recunoașterea selectorilor de tip „id”, „class” și ale proprietăților CSS;
3.9. Utilizarea proprietăților și selectorilor CSS corect, la stilizarea di-feritor elemente HTML, utilizate la formatarea textului;
3.10. Scrierea și interpretarea stilurilor, utilizând selectori de tip „id” și „class”;
3.11. Interpretarea secvențelor de stil pentru text, cu scopul înțelegerii destinației lor;
3.12. Scrierea stilurilor pentru secvențele textuale dintr-un document web.
3.13. Specificarea principiilor de moștenire a stilurilor în CSS;
3.14. Enumerarea proprietăților de stil, ce pot fi moștenite de elementele-urmași de la elementele-părinte;
3.15. Utilizarea corectă a proprietăților și selectorilor CSS pentru stilizarea fundalurilor și a listelor HTML;
3.16. Scrierea stilurilor pentru elementele HTML, utilizând selectori simpli;
3.17. Interpretarea proprietăților de stil, cu scopul înțelegerii destinației lor la stilizarea fundalurilor și a listelor cu date.
3.18. Enumerarea proprietăților CSS, utilizate la stilizarea câmpurilor, bordurilor și pentru definirea înălțimilor, lățimilor elementelor HTML;
3.19. Recunoașterea și numirea proprietăților de stil, utilizate pentru stilizarea imaginilor și a tabelelor HTML;
3.20. Utilizarea proprietăților CSS, pentru definirea stilurilor imagini-lor, tabelelor, dar și a bordurilor, câmpurilor, lățimilor și înălțimilor altor elemente.
3.21. Recunoașterea pseudoclaselor și ale pseudoelementelor din CSS;
3.22. Utilizarea corectă a pseudoclaselor și pseudoelementelor la definirea stilurilor elementelor sau a părților elementelor HTML;
3.23. Distingerea pseudoclaselor de pseudoelemente și a sintaxei lor;
3.24. Scrierea și interpretarea proprietățile de stil pentru pseudoelemente și pseudoclase;
3.25. Recunoașterea, interpretarea și încorporarea elementelor HTML, ce pot fi utilizate la definirea componentelor de tip bloc în paginile web.
3.26. Explicarea noțiunii de „flux normal” de prezentare al elementelor HTML în pagina web;
3.27. Recunoașterea proprietăților CSS, utilizate în poziționarea în pagină a elementelor HTML și specificarea valorilor admisibile pentru ele;
3.28. Scrierea și interpretarea stilurilor pentru poziționare corectă al elementelor în pagina web;
2
© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”
3.29. Recunoașterea și interpretarea proprietăților CSS și ale valorilor acestora, ce pot fi utilizate pentru a schimba fluxul normal de poziționare al elementelor.
3.30. Recunoașterea proprietăților de stil și scrierea stilurilor responsabile de realizarea transparenței elementelor HTML;
3.31. Identificarea proprietăților de stil și scrierea stilurilor, responsabile de aplicarea filtrelor asupra elementelor HTML;
3.32. Definirea noțiunii de gradient și scrierea stilurilor pentru gradiente de culoare;
3.33. Descrierea transformărilor 2D asupra elementelor HTML și scrierea stilurilor pentru transforma-rea elementelor într-un document web.
3.34. Definirea noțiunilor de tranziție și animație;
3.35. Recunoașterea proprietăților de stil ce pot fi utilizate pentru definirea tranzițiilor și ale animațiilor;
3.36. Scrierea stilurilor pentru crearea tranzițiilor și animațiilor simple a elementelor HTML;
3.37. Interpretarea și estimarea valorii semantice a stilurilor, ce conțin definiri de tranziții și animații;
3.38. Implementarea tranzițiilor și animațiilor în paginile web.
3.39. Definirea noțiunilor de „responsive web design”, „punct de control”, „viewport”;
3.40. Recunoașterea și interpretarea corectă a interogărilor de tip media;
3.41. Scrierea media query și integrarea lor în documentele web, pentru a obține conținuturi „responsive”.
3.42. Definirea noțiunii de „flexbox”;
3.43. Identificarea proprietăților CSS din grupul „flex”;
3.44. Scrierea și integrarea proprietăților CSS din grupul „flex” în media queries, pentru definirea conținuturilor „responsive”.
3.45. Alegerea corectă a proprietăților de stil pentru stilizarea elementelor HTML dintr-un document web;
3.46. Scrierea stilurilor corect sintactic pentru elementele HTML dintr-un document web;
3.47. Integrarea stilurilor în documentul web.

4.1. Definirea noțiunii de script „client-side”;

4.2. Argumentarea necesității utilizării limbajului de programare JavaScript în documentele web;
4.3. Descrierea modalităților de implementare a JavaScript-urilor în documentele web;
4.4. Recomandarea adăugării elementelor interactive și ale scripturilor pentru generarea dinamică a noilor conținuturi pe partea client, în paginile web.
4.5. Recunoașterea și descrierea obiectelor de bază, predefinite din JavaScript;
4.6. Specificarea sintaxei proprietăților și ale metodelor obiectelor predefinite din JavaScript;
4.7. Scrierea JavaScript-urilor în consola web și analizarea rezultatelor interpretării lor de browser.
4.8. Recunoașterea variabilelor din JavaScript și descrierea modalității de definire a variabilelor în JavaScript;
4.9. Distingerea tipurilor de date și ale tipurilor de operatori accesibili în JavaScript;
4.10. Folosirea principalilor operatori în lucrul cu datele în JavaScript;
4.11. Argumentarea utilizării anumitor operatori în funcție de context;
4.12. Scrierea expresiilor aritmetice și a textelor în care să fie utilizate variabile și operatori;
4.13. Prezentarea diferitor conținuturi informaționale la ecran;
4.14. Implementarea datelor, expresiilor, valorilor, textelor și operatorilor în scripturi.
4.15. Definirea noțiunii de DOM HTML și descrierea utilității acestuia;
4.16. Recunoașterea celor mai uzuale obiecte DOM HTML, a proprietăților și a metodelor acestor obiecte;
4.17. Determinarea necesității accesării conținuturilor elementelor HTML dintr-un document web și gestionării lor prin proprietățile și metodele obiectelor DOM HTML;
4.18. Scrierea scripturilor cu utilizarea proprietăților și a metodelor obiectului Document și Element.
4.19. Recunoașterea funcțiilor predefinite din JavaScript și descrierea domeniului lor de utilizare;
4.20. Enumerarea metodelor specifice obiectelor predefinite din JavaScript;
4.21. Folosirea funcțiilor standard, de nivel superior, în scripturi, cu respectarea sintaxei acestora;
4.22. Integrarea funcțiilor și ale metodelor standard din JavaScript, în scripturi elementare, cu scopul soluționării unor probleme.
3
© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”
4.23. Definirea noțiunii de „domeniu de vizibilitate”;
4.24. Formularea ideilor referitoare la necesitatea definirii funcțiilor proprii în scripturi;
4.25. Descrierea sintaxei de definire a funcțiilor proprii;
4.26. Scrierea propriilor funcții, ce implementează diverși algoritmi logici și implementarea acestora în JavaScript.
4.27. Identificarea utilității obiectului Date și ale metodelor acestuia;
4.28. Generarea unui prototip în baza obiectului Date pentru a-l utiliza în script;
4.29. Aplicarea metodelor obiectului Date pentru preluarea și gestionarea detaliilor referitoare la oră și dată;
4.30. Specificarea instrucțiunilor condiționale și utilizarea lor în scrierea scripturilor;
4.31. Inspectarea codului de program cu scopul evidențierii instrucțiunilor condiționale și evaluării utilității lor.
4.32. Recunoașterea instrucțiunilor ciclice din JavaScript și descrierea sintaxei acestora;
4.33. Scrierea scripturilor ce conțin instrucțiuni ciclice, respectând sin-taxa acestora;
4.34. Folosirea și implementarea în logica scripturilor a instrucțiunilor ciclice.
4.35. Definirea noțiunii de „eveniment” HTML;
4.36. Distingerea și explicarea metodelor de prelucrare a evenimentelor HTML cu JavaScript;
4.37. Scrierea și implementarea de JavaScript-uri, ce pot prelucra cele mai uzuale evenimente.
4.38. Definirea noțiunii de „expresie regulată” și înțelegerea pentru ce pot fi ele utilizate;
4.39. Recunoașterea expresiilor regulate în cod;
4.40. Scrierea corectă a expresiilor regulate, folosind metasimboluri și cuantificatorii;
4.41. Emiterea ipotezelor referitoare la necesitatea implementării obiectului RegExp pentru validarea datelor;
4.42. Integrarea expresiilor regulate în scripturi client-side, pentru validarea corectitudinii introducerii datelor în elementele de control ale formularului.
4.43. Definirea noțiunii de „tablou”;
4.44. Detectarea tablourilor în JavaScript;
4.45. Scrierea scripturilor pentru definirea unui tablou cu elemente în JavaScript;
4.46. Accesarea unuia sau a mai multor elemente ale unui tablou;
4.47. Utilizarea corectă în script a metodelor și ale proprietăților obiectului Array.
4.48. Definirea noțiunii de „obiect”, „proprietate”, „metodă”;
4.49. Proiectarea și crearea obiectelor proprii în JavaScript;
4.50. Detectarea și implementarea proprietăților și metodelor pentru obiectele definite în JavaScript;
4.51. Accesarea, prin script, a membrilor obiectului.
4.52. Definirea noțiunii de „slider” și inspectarea paginii web, dar și a codului, pentru depistarea lui;
4.53. Argumentarea necesității implementării unui slider într-un site web;
4.54. Distingerea componentelor unui slider;
4.55. Crearea unui slider simplu cu ajutorul JavaScript.

4
© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”

Indicatorii competențelor Nr. Conținuturi Nr. Data Observații

specifice(CS) și a unităților crt. ore
de competențe (UC)
conform curriculumului
CS UC Total ore proiectate: 34
Modulul 1. Introducere în WEB 2
I–V 1.1 – 1.5 1 Introducere în designul și dezvoltarea web. 1 07.09
1.6. – 1.9 2 Prezentarea unui prototip de site, care va putea fi realizat în cadrul disciplinei. 1 14.09
Modulul 2. Limbajul de marcare HTML 8
2.1 – 2.5 3 Limbajul de marcare HTML. Elemente HTML. Elementele HTML utilizate în antetul 1 21.09
documentului web. Elemente HTML utilizate în conținutul paginii web pentru editarea
I 2.6 – 2.9 și formatarea textului.
II 4 Elemente HTML utilizate în corpul paginii web pentru aranjarea textului cu ajutorul 1 28.09
III 2.10 – 2.12 listelor de date.
IV 2.13 – 2.18 5-6 Elemente HTML utilizate în corpul paginii web pentru implementarea imaginilor și 2 05.10
V tabelelor. 12.10
2.19 – 2.21 7 Elementul HTML utilizat în corpul paginii web pentru implementarea referințelor. 1 19.10
2.22 – 2.25 8 Elemente HTML utilizate în corpul paginii web pentru implementarea formularelor. 1 02.11
2.26 – 2.28 9-10 Elemente HTML utilizate în corpul paginii web pentru implementarea iframe, audio și 2 09.11
2.29 – 2.31 video în HTML. 16.11
Modulul 3. Limbajul de stilizare CSS 11
3.1 – 3.6 11 Metode de implementare ale stilurilor în documentele web. Sintaxa de bază a definirii 1 23.11
proprietăților de stil pentru elementele HTML.
I 3.7 – 3.12 12 Tipuri de selectori CSS. Proprietăți CSS utilizate pentru stilizarea textului. 1 30.11
II 3.13 – 3.17 13 Moștenirea stilurilor. Proprietăți CSS pentru fundal și stilizarea listelor. 1 07.12
III 14 Proprietăți CSS pentru stilizarea câmpurilor interioare, exterioare. Înălțimi, lățimi ale 1 14.12
IV 3.18 – 3.20 elementelor – box-model. Definirea stilurilor bordurilor. Stilizarea tabelelor și a
V imaginilor.
3.21 – 3.25 15 Pseudoclase – stilizarea referințelor, pseudoelemente. Elementele DIV, SPAN. 1 21.12
3.26 – 3.29 16 Proprietăți de stil pentru elemente flotante și pentru poziționarea elementelor. 1 11.01 Sem. II
3.30 – 3.33 17 Transparența elementelor HTML, filtre, transformări, gradiente. 1 18.01
3.34 – 3.38 18 Tranziții, animații în CSS. 1 25.01
3.39 – 3.41 19 Noțiunea de „responsive design”. MediaQueries. 1 01.02
3.42 – 3.44 20 Flexbox în CSS. „Responsive web design” și flexbox. 1 08.02
3.45 – 3.47 21 Exemplu de creare și stilizare a unui site web. 1 15.02
Modulul 4. Limbajul de programare JavaScript 13
4.1 – 4.4 22 Scripturi client-side. Introducere în limbajul de programare JavaScript. 1 22.02
5
© Cobzac Diana Clasa a X-a Cercul „Proiectarea și Dezvoltarea WEB”
4.5 – 4.7 23 Obiecte predefinite JavaScript. Proprietăți și metode. Consola JS. 1 01.03
I 4.8 – 4.14 24 Variabile, tipuri de date și operatori în JavaScript. 1 15.03
II 4.15 – 4.18 25 DOM HTML. Accesarea și modificarea conținutului documentului web prin DOM 1 22.03
III HTML.
IV 4.19 – 4.22 26 Funcții predefinite în JavaScript. 1 29.03
V 4.23 – 4.26 27 Funcții definite de programator în JavaScript. Sintaxa. Domenii de vizibilitate ale 1 05.04
variabilelor.
4.27 – 4.31 28 Manipulări asupra datei și orei în JavaScript. Instrucțiunile condiționale din JavaScript. 1 12.04
4.32 – 4.34 29 Instrucțiunile ciclice în JavaScript. 1 19.04
4.35 – 4.37 30 Evenimente gestionate cu JavaScript. 1 26.04
4.38 – 4.42 31 Obiectul RegExp din JavaScript. 1 12.05
4.43 – 4.47 32 Tablouri în JavaScript. 1 17.05
4.48 – 4.51 33 Definire obiecte în JavaScript. Proprietăți, metode. 1 24.05
4.52 – 4.55 34 Exemplu creare slider cu JavaScript. Adăugare în site. 1 31.05

Bibliografie:
1. Curriculum național la disciplina opțională Proiectarea și Dezvoltarea Web, clasele VII – XII, Chișinău, 2020.
2. https://www.youtube.com/watch?v=jIFxLSWTQqQ&list=PLVBrvnka4XI25H_btU5NQlcjMZrCjFT3K
3. www.w3schools.com

Resurse online:
1. 25 Years of Apple.com Website Design History (1994-2019) [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.youtube.com/watch?
v=ch23l4vX5yg&fbclid=IwAR0aG8WF_l-2WxIogov0lI6ig1nqv3mqqKuluQxuwFLYKvBkexusQ8S5y70 ;
2. Get Started with the Google Fonts API [online] [accesat 13 iunie 2020]. Disponibil la adre-sa: https://developers.google.com/fonts/docs/getting_started ;
3. SVG Tutorial [online] [accesat 13 iunie 2020]. Disponibil: https://www.w3schools.com/graphics/svg_intro.asp ;
4. HTML Tutorial [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/html/default.asp ;
5. CSS Tutorial [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/css/default.asp ;
6. CSS Units [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/cssref/css_units.asp ;
7. CSS hsla() Function [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/cssref/func_hsla.asp ;
8. CSS filter Property [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/cssref/css3_pr_filter.asp ;
9. JavaScript Tutorial [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/js/default.asp ;
10. JavaScript [online] [accesat 13 iunie 2020]. Disponibil: https://devdocs.io/javascript/ ;
11. JavaScript String Reference [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/jsref/jsref_obj_string.asp ;
12. JavaScript Global Reference [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/jsref/jsref_obj_global.asp ;
13. JavaScript Set Date Methods [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/js/js_date_methods_set.asp ;
14. HTML DOM Events [online] [accesat 13 iunie 2020]. Disponibil la adresa: https://www.w3schools.com/jsref/dom_obj_event.asp .