Lectia 6: Proiect integrator | Clasa a XII-a Tehnologic (TIC)

1

Planificarea proiectului: WBS si obiective

Orice proiect — inclusiv realizarea unui site web — trebuie planificat inainte de executie. Managementul proiectului defineste: ce se face (WBS), cand se face (grafic de activitati) si cine raspunde (echipa de proiect).

Notiunea de proiect (conform programei cls. XII)

Un proiect este un efort temporar (cu inceput si sfarsit definite) intreprins pentru a crea un produs, serviciu sau rezultat unic. Are: obiective clare, resurse alocate, un plan si un manager de proiect responsabil.

WBS — Work Breakdown Structure (Structura de descompunere a muncii)

WBS-ul descompune ierarhic proiectul:

Nivel 1 — Proiectul: Site web firma instalatii sanitare
Nivel 2 — Faze principale: 1. Initiere • 2. Planificare • 3. Proiectare • 4. Implementare • 5. Testare si lansare
Nivel 3 — Activitati: ex. 4.1 Cod HTML pagini • 4.2 Inserare imagini • 4.3 Harti imagini • 4.4 Animatii
Nivel 4 — Sarcini executabile: ex. 4.1.1 Pagina Acasa • 4.1.2 Pagina Produse • 4.1.3 Pagina Galerie • 4.1.4 Pagina Contact

WBS vizual — proiect site web (4 pagini)

Site web instalatii sanitare 1. Initiere 1.1 Definire obiective si public-tinta 1.2 Analiza site-uri concurente 2. Planificare 2.1 WBS si grafic de activitati 2.2 Plan de proiect (resurse, termene) 3. Proiectare 3.1 Ierarhia paginilor si harta site 3.2 Wireframe pagini principale 4. Implementare 4.1 Cod HTML (4 pagini) 4.2 Imagini si harta imagini (Galerie) 4.3 Animatii si butoane 5. Testare si lansare 5.1 Testare functionala (link-uri, formulare) 5.2 Raport de sfarsit de proiect

De ce WBS-ul conteaza pentru proba D? Subiectele cer adesea sa construiesti WBS-ul unui proiect (la nivel de faze si activitati) si sa explici ce contine fiecare nivel. Practica cu proiecte concrete pana cand structura devine intuitiva.

2

Graficul de activitati si traseul critic

Dupa ce ai definit activitatile prin WBS, le organizezi in timp cu un grafic de activitati (diagrama Gantt) si identifici traseul critic — lantul care determina durata totala a proiectului.

Diagrama Gantt

Un grafic de bare orizontale in care: fiecare bara = o activitate; lungimea barei = durata; pozitia pe axa timpului = intervalul de executie. Dependentele dintre activitati apar ca sageti.

Exemplu: proiect site web — 3 saptamani

Nr.	Activitate	Durata (zile)	Depinde de	Pe traseu critic?
A	Definire obiective si analiza	2	—	Da
B	WBS si plan de proiect	1	A	Da
C	Ierarhie pagini si wireframe	2	B	Da
D	Colectare si pregatire imagini	2	B	Nu (float 1 zi)
E	Cod HTML toate paginile	5	C, D	Da
F	Animatii, harti imagini, butoane	2	E	Da
G	Testare functionala si corectii	2	F	Da
H	Raport de sfarsit de proiect	1	G	Da

Traseul critic: A → B → C → E → F → G → H = 2+1+2+5+2+2+1 = 15 zile lucratoare. Activitatea D are o rezerva de 1 zi.

Ce intrebari poti primi la proba D despre traseul critic:

Calculeaza durata totala a proiectului (suma duratelor pe traseul critic)
Identifica activitatile cu rezerva de timp (cele care NU sunt pe traseul critic)
Daca activitatea E intarzie cu 2 zile, cu cat se intarzie proiectul?

Atentie: WBS = CE se face (structura ierarhica). Graficul de activitati = CAND se face (ordine si durata). Traseul critic = lantul activitatilor care determina durata totala.

3

Structura HTML — elementele de continut

Programa cls. XII prevede cunoasterea tuturor elementelor de continut ale unui site web. Fiecare categorie are sintaxa HTML esentiala si o utilizare practica clara.

1. Text si formatare de baza

<p>...</p> — paragraf de text
<h1>...</h6> — titluri ierarhice (h1 = cel mai important)
<strong> / <em> — text important / accentuat semantic
<br> — salt de linie in interiorul unui paragraf

2. Liste

<ul><li>...</li></ul> — lista neordonata (puncte)
<ol><li>...</li></ol> — lista ordonata (numere)
Listele se pot imbrica: <ul> in interiorul unui <li>

3. Tabele

<table> — containerul tabelului
<thead> / <tbody> / <tfoot> — sectiuni semantice
<tr> — rand; <th> — celula antet; <td> — celula de date
Atribute: colspan (uneste coloane), rowspan (uneste randuri)

4. Imagini si harti de imagini

<img src="cale.jpg" alt="descriere" width="300" height="200"> — imagine simpla
Harta de imagini: o imagine cu zone clicabile definite de coordonate (<map> + <area>)

<img src="produse.jpg" alt="Produse sanitare" usemap="#harta-produse">
<map name="harta-produse">
  <area shape="rect" coords="10,20,150,180" href="robinete.html" alt="Robinete">
  <area shape="circle" coords="250,100,80" href="dus.html" alt="Seturi dus">
  <area shape="poly" coords="320,10,420,10,420,190,320,190" href="cazi.html" alt="Cazi">
</map>

5. Animatie

GIF animat: fisier GIF cu mai multe cadre; inserat cu <img>; ruleaza automat in browser
CSS animations / transitions: miscare realizata prin proprietati CSS fara JavaScript
JavaScript: animatii programatice (pozitie, opacitate, culoare in timp)

6. Cadre (Frames si iframe)

<frameset cols="200,*"> + <frame src="meniu.html"> — cadre clasice HTML4
iframe (inline frame): <iframe src="harta.html" width="600" height="400"></iframe> — cadru inglobat, mult mai utilizat astazi

7. Filme (video)

<video src="prezentare.mp4" controls width="640"></video> — video HTML5
Atribute: controls, autoplay, loop, muted, poster
Alternativ: inglobare YouTube cu <iframe>

8. Butoane si formulare

<button>Text buton</button> — buton interactiv
<input type="submit" value="Trimite"> — buton de trimitere formular
<a href="contact.html" class="btn">Contacteaza-ne</a> — link stilizat ca buton
Formulare: <form> + <input> + <textarea> + <select>

Regula de memorat pentru proba D: Stii tag-ul HTML si utilizarea tipica pentru fiecare din cele 8 categorii: text/titluri, liste, tabele, imagini, harti imagini, animatie, cadre, filme, butoane.

4

Ierarhia paginilor si sistemul de link-uri

Un site web nu este o colectie de pagini izolate — este o ierarhie de pagini conectate printr-un sistem de link-uri coerent. Ierarhia determina navigatia si influenteaza SEO.

Ierarhia paginilor unui site

Paginile se organizeaza in niveluri: Nivel 0 = pagina principala (index.html), Nivel 1 = categorii principale (Produse, Galerie, Contact), Nivel 2 = subcategorii (Robinete, Seturi dus). Adancimea recomandata: maxim 3 niveluri pentru site-uri mici.

Ierarhia paginilor — site instalatii sanitare

index.html (Acasa) — Nivel 0 produse/ — Nivel 1 index.html (Toate produsele) robinete.html dus.html cazi.html galerie/ — Nivel 1 index.html (Galerie foto) contact/ — Nivel 1 index.html (Contact si harta)

Tipuri de link-uri in HTML:

Tip link	Sintaxa	Utilizare
Intern (relativ)	`<a href="produse/robinete.html">`	Navigare intre paginile aceluiasi site
Extern (absolut)	`<a href="https://site.ro" target="_blank">`	Link catre alt site; se deschide in tab nou
Ancora (anchor)	`<a href="#sectiunea2">`	Salt la elementul cu id="sectiunea2" pe aceeasi pagina
E-mail	`<a href="mailto:contact@firma.ro">`	Deschide clientul de e-mail al utilizatorului
Telefon	`<a href="tel:+40721000000">`	Apel direct de pe dispozitive mobile

Navigatia coerenta a site-ului:

Fiecare pagina contine un meniu de navigare cu link-uri catre toate paginile de nivel 1
Pagina curenta este marcata vizual (activ) in meniu
Link-ul Acasa (sau logoul) duce intotdeauna la index.html
Link-urile rupte (broken links) sunt un defect major — se testeaza inainte de lansare

SEO si ierarhia: Paginile mai aproape de radacina (nivel 0) au autoritate mai mare in motoarele de cautare. Un produs important trebuie accesibil in maxim 2 click-uri de la pagina principala.

5

Criterii de realizare a unui site de calitate

Programa prevede explicit criteriile de realizare ale unui site web de calitate. Acestea se evalueaza la testare si apar ca subiecte de proba.

✅

Viteza buna

Imagini comprimate (JPEG 80%, WebP), fisiere CSS/JS minificate, numar redus de fonturi externe. Pagina se incarca in sub 3 secunde pe conexiune medie.

❌

Viteza slaba

Imagini de 5 MB neoptimizate, 15 scripturi externe, fonturi multiple — pagina se incarca in 10+ secunde; utilizatorul pleaca.

Cele 5 criterii principale (conform programei cls. XII):

Viteza de incarcare: imagini optimizate, cod curat, hosting adecvat
Raportul text / imagine: echilibru intre continut text (indexat de motoare de cautare) si imagini (atractie vizuala); textul trebuie sa domine pe pagini de continut
Acuratete: informatiile sunt corecte si actuale; link-urile functioneaza; formularul livreaza mesajele
Lizibilitate: font lizibil (minim 16px), contrast text/fundal, spatiere intre randuri, paragrafe scurte; site-ul functioneaza pe mobil
Design: aspect profesional, paleta de culori coerenta, ierarhie vizuala clara; branding consistent pe toate paginile

Lista de verificare a calitatii inainte de lansare:

Toate link-urile interne si externe functioneaza (testare manuala sau link-checker)
Imaginile au atribut alt completat (accesibilitate + SEO)
Textul este lizibil pe fundal (contrast minim 4.5:1 conform WCAG AA)
Site-ul se afiseaza corect pe ecrane diferite (desktop, tableta, telefon)
Formularul de contact trimite un e-mail si afiseaza mesaj de confirmare
Pagina se incarca in sub 3 secunde pe o conexiune de 10 Mbps
Nu exista erori HTML la validatorul W3C (validator.w3.org)

Greseala frecventa la proba D: Elevii descriu criteriile corect dar nu le aplica in tema practica. Daca subiectul cere un site cu raport text/imagine adecvat, nu adauga 20 imagini fara text explicativ. Fiecare criteriu trebuie sa fie vizibil in produsul livrat.

6

Monitorizare, evaluare si raportul final de proiect

Ultimele faze ale ciclului de viata al proiectului — monitorizarea si evaluarea — asigura ca produsul livrat corespunde obiectivelor initiale. Raportul de sfarsit de proiect documenteaza tot parcursul.

Monitorizarea proiectului

Pe durata executiei, managerul de proiect urmareste: avansul real vs. planificat (grafic Gantt actualizat), consumul de resurse, riscurile aparute si cererile de schimbare. Instrumente: rapoarte de progres saptamanale, rapoarte de exceptie (la deviatii semnificative), jurnalul de riscuri.

Managementul riscului in proiectul de site web:

Risc: Clientul intarzie cu furnizarea textelor si imaginilor
Impact: Intarziere activitate E (cod HTML) cu 3 zile → proiectul intarzie 3 zile
Masura de control: Solicita continutul cu 5 zile inainte de termenul de incepere a implementarii

Evaluarea proiectului

La finalul proiectului se compara: obiectivele planificate vs. rezultatele reale, bugetul planificat vs. cheltuit, termenul planificat vs. data reala. Calitatea se evalueaza cu lista de criterii prestabilita (cele 5 criterii din Atomul 5).

Structura raportului de sfarsit de proiect (conform programei):

Rezumat executiv: proiectul, obiectivele, echipa, perioada de executie
Performanta fata de plan: tabel cu activitatile planificate vs. realizate (durata, cost)
Produsele livrate: site-ul web cu toate paginile si functionalitatea verificata
Probleme intampinate si solutii: ex. clientul a furnizat imagini cu 2 zile intarziere → activitatile paralele au absorbit intarzierea
Lectii invatate: ce ar fi de facut diferit la un proiect similar
Recomandari: mentenanta site-ului, actualizare periodica a continutului

Tabel evaluare proiect:

Criteriu	Planificat	Realizat	Abatere
Durata totala	15 zile	16 zile	+1 zi (imagini intarziate de client)
Numar pagini	4 pagini	4 pagini	0 (conform plan)
Link-uri verificate	100% functionale	100% functionale	0 (conform cerinta)
Validare W3C	0 erori	0 erori	0 (conform cerinta)
Viteza incarcare	sub 3 secunde	2.1 secunde	0 (sub limita)

Concluzie — structura proiectului integrator (proba D cls. XII):

Definesti obiectivele si public-tinta site-ului
Elaborezi WBS-ul (faze → activitati → sarcini)
Construiesti graficul de activitati si identifici traseul critic
Proiectezi ierarhia paginilor si sistemul de link-uri
Implementezi HTML cu toate elementele de continut cerute
Verifici conform celor 5 criterii de calitate
Redactezi raportul de sfarsit de proiect

Proiect integrator: site web si managementul proiectului

Obiectivul lectiei

Dupa aceasta lectie vei putea:

💡 Incearca singur!