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:

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. ...

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

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

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →