1. Instrumente pentru crearea site-urilor web
Un editor HTML permite scrierea si editarea codului sursa al paginilor web:
- Editoare text simple — Notepad (Windows), TextEdit (Mac): pot edita HTML dar fara asistenta; potrivite pentru incepatori
- Editoare de cod cu colorare sintaxa — Notepad++, Visual Studio Code: coloreaza tagurile HTML, atributele CSS, arata erorile; gratuite si profesionale
- Editoare vizuale (WYSIWYG) — Adobe Dreamweaver: afisezi pagina in modul Design (vizual) sau Code (sursa); genereaza HTML automat; comercial
Imaginile trebuie pregatite (redimensionate, comprimate) inainte de inserare in site:
- Adobe Photoshop (comercial), GIMP (gratuit): retusare, redimensionare, export optimizat JPG/PNG/WebP
- Paint (Windows, simplu): redimensionare de baza si salvare; suficient pentru imagini simple
- Formatele recomandate pentru web: JPG (fotografii), PNG (grafica cu transparenta), SVG (vectorial, scalabil), WebP (compresie superioara)
Site-uri statice: paginile sunt fisiere HTML fixe pe server; continutul nu se schimba fara interventia webmasterului; simple, rapide, ieftine de gazduit (ex.: site de prezentare firma, portofoliu personal).
Site-uri dinamice / interactive: continutul se genereaza la cerere din baze de date; utilizatorii pot interactiona (logare, formular de comanda, cos de cumparaturi); necesita server web cu suport PHP/Python/Java si baza de date (MySQL/PostgreSQL); ex.: magazine online, retele sociale, sisteme de rezervari.
Exemplu Tehnologic: site-ul de prezentare al unei firme de constructii (static) vs. platforma online de comanda a materialelor de constructii (dinamic).
2. Structura paginii web — HTML de baza
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Firma Tehno SRL</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Bine ati venit!</h1>
<p>Oferim servicii de instalatii electrice.</p>
<img src="echipa.jpg" alt="Echipa Tehno SRL">
</body>
</html>
- <!DOCTYPE html> — declara versiunea HTML5
- <head> — sectiunea de metadate (nevizibila): titlul, charset, legatura la CSS
- <body> — continutul vizibil al paginii
- <h1> ... <h6> — titluri de nivel 1 pana la 6
- <p> — paragraf de text
- <img src="..." alt="..."> — imagine; src = calea fisierului; alt = text alternativ
Tagul <a href="..."> creeaza o hiperlegatura:
<a href="servicii.html">Servicii</a>— link catre o pagina din acelasi site (cale relativa)<a href="https://www.exemplu.ro">Site partener</a>— link catre un site extern (URL absolut)<a href="mailto:contact@firma.ro">Scrie-ne</a>— link care deschide clientul de e-mail<a href="#sectiune">Sari la sectiune</a>— ancora interna (navigare in aceeasi pagina)
Ierarhia paginilor: site-ul are o pagina principala (index.html) si pagini secundare organizate in foldere. Navigatia principala (meniu) leaga pagina principala de toate paginile de nivel 2.
SEO (Search Engine Optimization) = ansamblul de tehnici prin care un site apare in pozitii cat mai sus in rezultatele Google/Bing. Elemente cheie:
- Titlul paginii (
<title>) — afisat in tab si in rezultatele Google; maxim 60 caractere, cu cuvintele cheie relevante - Meta description (
<meta name="description" content="...">) — textul rezumativ sub titlu in Google; maxim 155 caractere - Atributul alt al imaginilor — indexat de Google Images
- Titluri H1, H2, H3 — structura logica a continutului; H1 o singura data per pagina
- Viteza de incarcare — pagini rapide primesc pozitii mai bune in Google (Core Web Vitals)
3. Elemente de continut ale unui site web
Textul este elementul de baza. Formatari frecvente:
- <strong> — text bold (important semantic)
- <em> — text italic (subliniat semantic)
- <ul> / <ol> / <li> — liste neordonate (puncte) / ordonate (numere) / element de lista
- <table> <tr> <td> <th> — tabel: rand, celula date, celula antet
Exemplu Tehnologic: lista materialelor necesare pentru un proiect de instalatii (<ol>) sau tabel de preturi pentru servicii.
- Imagini —
<img src="poza.jpg" alt="..." width="300"> - Animatii CSS/GIF — imagini animate .gif sau tranzitii/animatii CSS3; se folosesc cu moderatie (distrag atentia)
- Harta de imagini (image map) — o imagine cu zone clikabile definite prin
<map>si<area>; util pentru: harti geografice, planuri de etaj, scheme tehnice
<img src="harta_fabrica.png" usemap="#harta"> <map name="harta"> <area shape="rect" coords="10,20,100,80" href="sectia1.html" alt="Sectia 1"> <area shape="circle" coords="200,150,40" href="depozit.html" alt="Depozit"> </map>
- Cadre (iframe) —
<iframe src="..." width="..." height="..."></iframe>: incorporeaza o alta pagina sau hartile Google Maps intr-o sectiune a paginii - Filme (video) —
<video src="demo.mp4" controls></video>: videoclip incorporat direct; atributul controls afiseaza butonul Play/Pauza/Volum - Butoane —
<button>Trimite</button>sau<input type="submit">: declanseaza actiuni (trimitere formular, navigare, confirmare); stilizate prin CSS
Exemplu Tehnologic: pagina de contact cu un formular (<form>) care contine campuri text (<input type="text">, <textarea>) si un buton de trimitere (<button type="submit">Trimite cererea</button>).
4. Criterii de realizare a unui site web de calitate
Un utilizator asteapta maxim 3 secunde; daca pagina dureaza mai mult, pleaca. Factori care incetinesc site-ul si solutii:
- Imagini mari → comprima la JPG 70-80% sau WebP; redimensioneaza la dimensiunea afisata (nu 4000px daca se afiseaza la 400px)
- Fisiere CSS/JS neoptimizate → minify (eliminare spatii albe si comentarii din cod)
- Prea multe cereri HTTP → combina fisierele CSS/JS; foloseste sprite-uri pentru icoane
- Lipsa cache-ului → seteaza cache-ul browserului pentru resursele statice (imagini, CSS, JS)
Raport text/imagine: textul trebuie sa predomine fata de imagini (minim 30-40% text din suprafata paginii) — motoarele de cautare indexeaza textul, nu imaginile. Prea multe imagini = timp mare de incarcare si dificultati SEO.
Acuratete: toate informatiile (preturi, adrese, orar, specificatii tehnice) trebuie sa fie corecte si actualizate. Un site cu date eronate pierde credibilitate si clienti. Stabileste o procedura de revizuire periodica a continutului.
Lizibilitate:
- Font minim 16px pentru textul de corp
- Contrast suficient: text inchis pe fundal deschis sau invers (raport contrast minim 4.5:1 conform standardului WCAG)
- Lungimea optima a randului: 50–75 caractere (nu margini la latimea intregii pagini)
- Spatiu alb (white space) intre sectiuni — permite ochiului sa se odihneasca
Design consistent: aceleasi culori, fonturi si stiluri pe toate paginile site-ului; meniu de navigatie identic pe fiecare pagina; logo mereu in acelasi loc (stanga-sus standard).
Exemplu Tehnologic: site-ul unui atelier de sudura cu text alb pe fundal inchis (bun contrast), imagini ale lucrarilor comprimate la WebP, meniu constant cu: Acasa | Servicii | Galerie | Contact.
5. Managementul proiectului — notiuni fundamentale si WBS
- Obiective SMART: Specifice, Masurabile, Atingibile, Relevante, incadrate in Timp
- Resurse limitate: buget, personal, echipamente, timp — managerul le aloca eficient
- Unicitate: fiecare proiect este diferit (un pod nou nu e identic cu altul)
- Temporalitate: are o data de inceput si o data de sfarsit
Exemplu Tehnologic: „Realizarea retelei electrice pentru hala de productie X, in 30 de zile, cu buget de 50.000 RON” — proiect cu obiectiv, termen si buget clare.
WBS este descompunerea ierarhica a proiectului in activitati mai mici si mai usor de gestionat:
- Nivelul 1: proiectul in ansamblu (ex.: „Site web firma”)
- Nivelul 2: fazele principale (Analiza, Design, Implementare, Testare, Lansare)
- Nivelul 3: activitatile fiecarei faze (ex.: Implementare = codare HTML + codare CSS + integrare baza de date)
- Nivelul 4 (optional): sub-activitati specifice (codare HTML = pagina Home + pagina Servicii + pagina Contact)
WBS clarifica ce anume trebuie facut, identifica dependentele dintre activitati si permite alocarea responsabilitatilor.
Graficul Gantt este reprezentarea vizuala a planificarii in timp a activitatilor unui proiect: fiecare activitate apare ca o bara orizontala pe o axa a timpului. Permite:
- Vizualizarea duratei fiecarei activitati
- Identificarea activitatilor paralele (care se pot desfasura simultan)
- Monitorizarea progresului (bara realizata vs. bara planificata)
Instrumente software pentru Gantt: Microsoft Project, ProjectLibre (gratuit), foi de calcul Excel cu formatare conditionata.
6. Etapele unui proiect: planificare, monitorizare, evaluare
Activitati: identificarea nevoii, definirea obiectivelor, analiza de fezabilitate, desemnarea managerului de proiect si a echipei initiale.
Document principal: Carta proiectului (Project Charter) — autorizeaza oficial proiectul, defineste obiectivele, bugetul initial si responsabilii.
Se definesc in detaliu:
- Organigrama echipei: rolurile si responsabilitatile membrilor
- WBS: lista completa a activitatilor
- Plan de proiect (Gantt): duratele, dependentele, termenele
- Alocare resurse: ce resurse (persoane, echipamente, bani) se atribuie fiecarei activitati
- Traseu critic: secventa de activitati care determina durata minima a proiectului; orice intarziere pe traseul critic intarzie intregul proiect
- Managementul riscului: identificarea riscurilor, probabilitati, planuri de atenuare
In aceasta faza:
- Echipa executa activitatile din plan
- Managerul compara periodic progresul real cu planul: rapoarte de progres (statusul regulat al activitatilor) si rapoarte de exceptie (semnalarea abaterilor semnificative)
- Daca apare o abatere (depasire buget, schimbare cerinta), se emite o cerere de schimbare; daca e aprobata, planul se actualizeaza
- Controlul riscului: monitorizarea riscurilor identificate si implementarea masurilor de atenuare
La finalizarea proiectului:
- Verificarea ca toate livrarile au fost realizate si acceptate de beneficiar
- Raportul de sfarsit de proiect: compara planul initial cu rezultatele reale (durata, buget, calitate); identifica lectiile invatate
- Evaluarea calitatii: produsul livrat respecta specificatiile si criteriile de acceptanta?
- Eliberarea resurselor si inchiderea contractelor
Exemplu Tehnologic: proiect de instalare retea electrica intr-o hala industriala — raportul de sfarsit constata ca lucrarile s-au finalizat in 28 de zile (vs. 30 planificate) si cu un buget de 48.000 RON (vs. 50.000 planificate): proiect incheiat cu succes.
7. Recapitulare — punctele esentiale pentru proba D (cls. XII)
- Instrumente: editoare HTML (Notepad++, VS Code, Dreamweaver), editoare grafice (Photoshop, GIMP), instrumente publicare (FTP, CMS)
- Tipuri site: static (fisiere HTML fixe, simplu, rapid) vs. dinamic (generat din BD, interactiv)
- Structura pagina: <!DOCTYPE>, <html>, <head> (metadate, title, CSS), <body> (continut vizibil)
- Elemente continut: text (h1-h6, p, strong, em), liste (ul/ol/li), tabele (table/tr/td/th), imagini (img + alt), link-uri (a href), harti imagini (map/area), cadre (iframe), video (<video>), butoane
- SEO: title, meta description, atribute alt, titluri H1-H3, viteza de incarcare
- Criterii calitate: viteza (comprima imagini, minify CSS/JS), raport text/imagine (minim 30% text), acuratete (date corecte si actualizate), lizibilitate (font 16px+, contrast, spatiu alb), design consistent
- Ierarhia paginilor: index.html + pagini secundare; meniu de navigatie pe toate paginile; sistem coerent de link-uri
- Proiect: obiectiv clar + termen + buget + echipa + unicitate
- Manager de proiect: planifica, organizeaza, monitorizeaza, controleaza
- WBS: descompunerea ierarhica a proiectului in activitati mici si gestionabile
- Grafic Gantt: bare orizontale pe axa timpului; arata durata, ordinea si paralelismul activitatilor
- Traseu critic: secventa cea mai lunga de activitati; determina durata minima; intarziere pe traseu critic = intarziere proiect
- Etape: Initiere (Carta proiect) → Planificare (WBS, Gantt, riscuri, resurse) → Executie+Monitorizare (rapoarte progres, cereri schimbare, rapoarte exceptie) → Evaluare (raport sfarsit proiect)
- Documente cheie: Carta proiectului, WBS, Plan Gantt, Raport de progres, Cerere de schimbare, Raport de exceptie, Raport de sfarsit de proiect