În lucru: lecțiile se refac de la capăt. Lecțiile noi ale clasei: lecțiile noi ale clasei a VII-a →
Invatare Atomica

Planificarea site-ului

Progres lectie:
0%
🎯

Obiectivul lectiei

Inainte sa scriem cod, trebuie sa stim CE vrem sa construim. Un plan bun = un proiect de succes!

Dupa aceasta lectie vei putea:

  • Sa explici de ce planificam inainte sa scriem cod
  • Sa enumeri ce continut se poate pune pe fiecare pagina a unui site personal
  • Sa completezi un checklist de planificare pentru propriul tau site

Incearca singur!

🎯 INCEARCA

Gandeste-te la site-ul tau!

Provocarea ta (5 minute):

1. Ia o foaie de hartie sau deschide Notepad

2. Scrie raspunsul la aceste intrebari:

  • Despre ce va fi site-ul tau?
  • Cate pagini va avea?
  • Ce vei pune pe fiecare pagina?
  • Ce culori iti plac?
💡 Ai nevoie de inspiratie? Click aici

Idei pentru site personal:

  • Prezentare personala (hobby-uri, interese)
  • Portfolio cu proiecte de scoala
  • Blog despre un subiect care te pasioneaza
  • Pagina de prezentare a echipei tale de gaming
1

De ce planificam inainte?

De ce planificam inainte?
Construiesti o casa fara un plan? Evident ca nu! La fel si cu site-ul - daca stim exact ce vrem, scriem codul mult mai usor si nu ne trezim la final ca am uitat ceva important.
Regula de aur: 1 ora de planificare poate economisi 10 ore de munca!
2

Ce continut punem pe fiecare pagina?

Ce continut punem pe fiecare pagina?

🏠 Pagina principala (index.html):

  • Titlu mare de intampinare (Hero section)
  • Scurta descriere - cine esti
  • Link-uri catre celelalte pagini

👤 Despre mine:

  • Hobby-uri si interese
  • Ce-ti place la informatica
  • O imagine reprezentativa (avatar, desen, logo personal — NU o fotografie personala reala pe un site public)
🔒 Siguranta online: Nu publica fotografia ta reala pe un site accesibil oricui pe Internet fara acordul parintilor/tutorilor. Un avatar sau o ilustratie este la fel de expresiva si este 100% sigura.

💻 Proiecte:

  • Lista cu ce ai facut la TIC
  • Capturi de ecran
  • Descrieri scurte

📧 Contact:

  • Un mesaj de tip "trimite-mi feedback prin formularul de la scoala"
  • Numele proiectului sau echipei (fara date personale identificabile)
🔒 Siguranta online: Nu publica adrese de email personale sau ale scolii, si nici link-uri catre profiluri de retele sociale pe un site public. Oricine poate gasi aceste date si le poate folosi in mod nedorit. Discuta cu parintii si profesorul inainte de a publica orice date de contact.
3

✅ Checklist pentru planificare

✅ Checklist pentru planificare
  • Am decis tema site-ului
  • Stiu cate pagini voi avea
  • Am notat ce continut pun pe fiecare
  • Mi-am ales culorile preferate
  • Am desenat o schita simpla (optional)

Exercitii practice

Exercitiul 1 (Nivel minim) - Schita pe hartie

Ia o foaie de hartie (sau deschide Notepad) si completeaza urmatorul plan simplu pentru site-ul tau:

Bifeza fiecare pas dupa ce l-ai completat:

Vezi rezolvarea

Exemplu complet de plan, dupa modelul din lectie (poti alege alta tema, dar raspunde in acelasi fel):

  1. Tema site-ului: hobby-uri si proiecte TIC (alte variante posibile: echipa de gaming, pasiune pentru muzica, sport).
  2. Cel putin 3 pagini: Acasa (index.html), Despre mine, Proiecte.
  3. 2-3 idei de continut pentru pagina principala: un titlu de intampinare cu un pseudonim, o scurta descriere despre cine esti, linkuri catre Despre mine si Proiecte.

Bifeaza fiecare pas dupa ce l-ai completat cu datele tale reale.

Exercitiul 2 (Nivel standard) - Planul complet al site-ului

Completeaza un plan detaliat pentru site-ul tau raspunzand la fiecare intrebare:

  1. Care este scopul site-ului tau? (Ce vrei sa comunice vizitatorilor?)
  2. Ce pagini va contine site-ul? Noteaza titlul fiecarei pagini.
  3. Ce continut specific vei pune pe fiecare pagina? (text, imagini, liste, linkuri)
  4. Ce culori si fonturi ti se potrivesc temei alese? Justifica alegerea (exemplu: albastru = calm, profesional).

Raspunde numerotat: 1. ... 2. ... 3. ... 4. ...

Vezi rezolvarea

Raspuns model, numerotat ca in cerinta:

  1. Scopul site-ului: sa prezinte cine sunt, hobby-urile mele si proiectele facute la TIC, pentru colegi si profesor.
  2. Paginile site-ului: Acasa (index.html), Despre mine, Proiecte, Contact.
  3. Continutul fiecarei pagini (vezi Atomul 2): Acasa = titlu de intampinare, scurta descriere, linkuri; Despre mine = hobby-uri, ce-mi place la informatica, un avatar (nu poza reala); Proiecte = lista cu ce am facut la TIC, capturi de ecran, descrieri scurte; Contact = mesaj tip "trimite-mi feedback prin formularul de la scoala", fara date personale.
  4. Culori si fonturi: albastru = calm, profesional, potrivit pentru o pagina de TIC; font simplu, usor de citit.

Exercitiul 3 (Nivel performanta) - Plan profesionist cu wireframe

Cerinta: Creeaza un plan complet de proiect pentru site-ul tau, ca si cum l-ai prezenta unui client.

Planul tau trebuie sa contina:

  • Scopul si publicul tinta al site-ului (pentru cine este?)
  • Lista tuturor paginilor si cum sunt legate intre ele (structura de navigare)
  • Un wireframe (schita grafica) pentru cel putin o pagina — deseneaza pe hartie dreptunghiuri care reprezinta: antet, meniu, continut principal, subsol
  • Justificarea alegerilor de culori si tipografice (de ce aceste culori se potrivesc temei?)
  • O lista cu resurse necesare: ce imagini, texte, informatii trebuie sa colectezi inainte de a scrie cod

Cuvinte cheie de folosit in descriere: scop, audienta, pagina, navigare, wireframe, continut, structura

Vezi rezolvarea

Nu primesti site-ul gata facut - urmeaza schita si construieste-l singur:

  1. Scop si public: 1-2 propozitii - pentru cine e site-ul (colegi, profesor) si ce vrea sa transmita.
  2. Lista paginilor + navigare: schema cu sageti: Acasa catre Despre mine, Acasa catre Proiecte, Acasa catre Contact, fiecare pagina cu link inapoi la Acasa.
  3. Wireframe pe hartie: 4 dreptunghiuri suprapuse: antet (sus), meniu, continut principal (cel mai mare), subsol (jos).
  4. Justificarea culorilor/fontului: pentru fiecare culoare, spune CE transmite, nu doar ca "iti place".
  5. Resurse necesare: lista cu avatar, texte, capturi de ecran de adunat inainte de a scrie cod.

Atentie: lectia nu a predat wireframe digital (Figma etc.) - schita pe hartie e suficienta.

Criterii de evaluare: claritate, completitudine (toate cele 5 puncte), coerenta intre culori/continut si scopul ales.

Ce ai invatat astazi

  • Ai inteles de ce planificam inainte sa scriem cod
  • Stii ce continut poate fi pus pe fiecare pagina a unui site personal
  • Ai completat un checklist de planificare pentru site-ul tau

Vrei mai mult?

Provocare: Deseneaza pe hartie un "sitemap": o casuta pentru fiecare pagina din planul tau si o sageata pentru fiecare link din meniu, aratand catre ce pagina duce. Daca doua casute nu au nicio sageata intre ele, vizitatorul nu poate ajunge acolo direct - noteaza pe plan ce trebuie corectat.

De ce? De ce costa mai putin sa muti o pagina pe hartie decat sa muti codul deja scris? Gandeste-te cate fisiere si linkuri ar trebui sa schimbi in HTML fata de cat de repede stergi o sageata si desenezi alta pe schita.

In lumea reala: Agentiile web nu scriu cod din prima zi. Fac intai un "wireframe" (schita fara culori, doar cutii si text) in unelte precum Figma, pe care clientul il aproba INAINTE de programare. O schita gresita costa o guma; un site gresit costa ore de recodare.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →