🌐 CERC DE INFORMATICĂ – DEZVOLTARE WEB Plan anual de activități Nivel: gimnaziu / liceu (începători) Durata: 1 oră 30 min / săptămână Perioada: septembrie – iunie Scop general: formarea competențelor de creare a paginilor web și înțelegerea principiilor de funcționare a Internetului.

🗓️ STRUCTURA PE LUNI Septembrie – Introducere în Web 1. Ce este web-ul? Cum funcționează Internetul. ◦ Activitate: discuție + prezentare interactivă (client–server). 2. Structura unei pagini web (HTML, CSS, JS). ◦ Mini-proiect: prima pagină „Despre mine”.

Octombrie – Limbajul HTML – bazele 3. Taguri de bază (html, head, body, h1–h6, p, a, img). ◦ Exerciții: redactarea unei pagini personale. 4. Liste, tabele și formulare. ◦ Mini-proiect: pagină de contact cu formular. 5. Structurarea site-ului: pagini multiple, linkuri interne. ◦ Mini-proiect: mini-site cu 3 pagini.

Noiembrie – CSS – stilizarea paginilor 6. Introducere în CSS: selectori, proprietăți, culori, fonturi. 7. Modelul de box și poziționarea elementelor. 8. Layout modern: flexbox și grid. ◦ Mini-proiect: pagină tip revistă / galerie foto.

Decembrie – CSS avansat și design 9. Pseudoclase, tranziții și animații CSS. 10. Design responsiv (media queries, layout adaptiv). ◦ Mini-proiect: site care arată bine pe telefon și PC.

Ianuarie – Introducere în JavaScript 11. Ce este JavaScript și unde se folosește. 12. Variabile, tipuri de date, funcția console.log(). 13. Instrucțiuni condiționale și bucle. ◦ Mini-proiect: cronometru sau numărător de clicuri.

Februarie – Manipularea DOM 14. Selectarea elementelor HTML în JS (getElementById, querySelector). 15. Evenimente (onclick, onchange) și funcții. ◦ Mini-proiect: schimbă culoarea fundalului prin butoane.

Martie – Proiecte interactive 16. Formulare cu validare JavaScript. 17. Galerii de imagini interactive / slider. 18. Mini-proiect: joc simplu în browser („Ghicește numărul”).

Aprilie – Introducere în lucrul cu fișiere și API-uri 19. Date în format JSON. 20. Preluarea datelor de pe un API public (fetch). ◦ Mini-proiect: afișarea informațiilor meteo pentru un oraș.

Mai – Proiect final integrat 21. Planificarea proiectului (alegerea temei, schiță site). 22. Crearea site-ului complet (HTML + CSS + JS). 23. Prezentare intermediară – feedback și corecții.

Iunie – Prezentare și evaluare 24. Prezentarea proiectelor finale. 25. Evaluare și reflecție („Ce am învățat din Web”). 26. Diplome simbolice pentru participare.

🧠 COMPETENȚE VIZATE • Înțelegerea principiilor de funcționare a paginilor web. • Utilizarea HTML, CSS și JavaScript pentru crearea site-urilor. • Dezvoltarea gândirii logice și a creativității. • Respectarea principiilor de design și accesibilitate. • Lucrul colaborativ și comunicarea tehnică.

📚 RESURSE • Editor: VS Code, Replit sau CodePen. • Browser modern (Chrome, Edge, Firefox). • Biblioteci opționale: Bootstrap, Font Awesome. • Platforme de învățare: W3Schools, MDN Web Docs, FreeCodeCamp. • Fișe de lucru, exerciții și proiecte practice. 🌐 PROIECTE RECOMANDATE

🟢 NIVEL ÎNCEPĂTOR (HTML + CSS + JS de bază) Scop: familiarizarea cu structura unui site, tag-uri HTML, design CSS și interactivitate simplă în JavaScript. 1. Pagina „Despre mine” – prezentare personală cu text, imagini și linkuri. 2. Pagina „Școala mea” – cu secțiuni despre profesori, elevi și activități. 3. Portofoliu elev – pagină cu proiecte, pasiuni și rezultate școlare. 4. Afiș digital pentru un eveniment (cu fonturi Google și culori CSS). 5. Orar școlar interactiv – tabel colorat cu efecte hover.

6. Quiz educativ simplu – întrebări și răspunsuri în JavaScript.
7. Cronometru sau ceas digital (cu JavaScript).
8. Galerie foto – cu efect de tranziție CSS.
9. Site turistic despre localitatea mea – cu hărți, imagini, descrieri.
10. Pagina „Reguli de siguranță online” – proiect interdisciplinar (informatică + civică).

🟡 NIVEL MEDIU (HTML + CSS avansat + JS + Bootstrap) Scop: învățarea structurilor complexe, responsive design și interactivitate mai bogată. 1. Site de știri / revistă școlară – cu articole și imagini. 2. Mini-magazin online (static) – produse, prețuri, pagină de contact. 3. Site „Campanie ecologică” – proiect interdisciplinar (informatică + biologie). 4. Formular de înscriere / feedback – cu validare în JavaScript. 5. Aplicație „Note și medii” – calculează media pe baza notelor introduse. 6. Carusel de imagini – controlat de JavaScript. 7. Pagini responsive – adaptate pentru telefon / tabletă. 8. Mini-joc în browser – „Ghiceste numărul” sau „X și 0”. 9. CV online interactiv – cu timeline animat. 10. Pagini tematice de sărbătoare (Crăciun, Ziua Școlii, etc).

🔵 NIVEL AVANSAT (HTML + CSS + JS + Framework / API) Scop: învățarea lucrului cu date dinamice, API-uri și framework-uri moderne (React, Vue, Svelte sau Vanilla JS avansat). 1. Aplicație „Vremea orașului meu” – date din API OpenWeather. 2. Site „Conversie valutară” – consumă API de schimb valutar. 3. Mini-blog dinamic – articole stocate local sau într-un fișier JSON. 4. Dashboard educațional – afișează date despre elevi / activități. 5. Aplicație „To-Do List” – adaugă, editează și șterge sarcini. 6. Generator de citate / proverbe – API random quote. 7. Aplicație pentru orar digital personalizabil. 8. Simulare catalog online – afișează elevi, note, medii. 9. Aplicație quiz educativ – întrebări random + scor. 10. Mini-platformă de învățare (cu JavaScript local).

🧠 PROIECTE INTERDISCIPLINARE (Informatică + alte domenii) Scop: stimularea gândirii creative prin integrarea altor arii (artă, fizică, civică, AI). 1. Galerie digitală de artă – informatică + arte plastice. 2. Simulare a mișcării unui pendul – informatică + fizică (JS + animații). 3. Site „Experimente simple de fizică” – cu video și descriere. 4. Aplicație „Verifică-ți amprenta digitală” – informatică + siguranță cibernetică. 5. Joc educativ despre reciclare – informatică + ecologie. 6. Pagina „Istoria informaticii” – informatică + istorie. 7. Aplicație de desen digital (canvas + JavaScript). 8. Platformă de colaborare artistică (informatică + artă).

🏆 PROIECTE FINALE (de prezentare / competiții) Scop: integrarea competențelor web într-un proiect complet, original și util. 1. Site oficial al cercului de informatică. 2. Portal educativ pentru elevi / profesori. 3. Aplicație de gestiune a activităților extracurriculare. 4. Revistă digitală / blog colectiv. 5. Aplicație de feedback pentru elevi. 6. Platformă „Descoperă Moldova / Europa” – prezentare interactivă cu hărți. 7. Site de evenimente școlare – afișează calendar, invitații, galerie. 8. Bibliotecă online de materiale educaționale. 9. „Cine sunt eu?” – joc interactiv cu întrebări și indicii. 10. Aplicație „Tur virtual al școlii” – cu imagini panoramice / 3D simple.

💻 TEHNOLOGII RECOMANDATE • Frontend: HTML5, CSS3, JavaScript ES6, Bootstrap, Tailwind, jQuery. • Backend (opțional): Node.js / Flask (pentru proiecte avansate). • API-uri gratuite: ◦ OpenWeatherMap ◦ REST Countries ◦ ExchangeRate.host ◦ JSONPlaceholder

• Instrumente utile:
    ◦ VS Code, GitHub Pages, CodePen, Figma (pentru design), Netlify.

🎯 COMPETENȚE VIZATE • Înțelegerea structurii unui site web modern. • Aplicarea principiilor de design și interactivitate. • Crearea de interfețe responsive și atractive. • Manipularea datelor și consumul de API-uri. • Lucrul colaborativ la proiecte web.