Albumul digital de absolvire

Fotografiile — momente reprezentative din cei patru ani: prima zi de liceu, excursii, spectacole, examene, banchet. Nu toate pozele facute vreodata, ci o selectie.
Mesajele — cateva randuri scrise de fiecare coleg (sau de o parte dintre ei), un gand, o amintire, o gluma din clasa. Dau albumului o voce, nu doar o imagine.
Cronologia (timeline) — o lista ordonata in timp a evenimentelor importante ale clasei, cu anul sau luna fiecaruia, ca fisierul sa aiba un fir narativ, nu doar poze imprastiate.

O clasa de arte plastice a structurat albumul pe cei patru ani de liceu: cate o sectiune pentru fiecare an, cu 6-8 poze reprezentative, un citat scurt ales de clasa pentru anul respectiv si 2-3 mesaje. Rezultatul a fost o pagina de marime rezonabila, usor de parcurs, nu un derulaj nesfarsit de sute de poze la fel.

Continutul difera intre sectii. La arte plastice, albumul contine adesea si fotografii ale lucrarilor realizate in cei patru ani (picturi, desene, lucrari de sculptura sau design), nu doar poze cu elevii — acestea se pregatesc pentru web exact ca orice alta fotografie (Atomul 3). La muzica, cele mai valoroase amintiri sunt de obicei inregistrari audio sau video de la concerte si recitaluri ale clasei: acestea nu se incarca ca fisiere mari direct in pagina, ci se pun pe YouTube (video) sau SoundCloud (audio) si se leaga in album printr-un link — la fel cum ati procedat si la portofoliul individual (proiectul P1).

Album_Absolvire\
  01_Poze_Brute\ — tot ce primesti de la colegi, exact cum a fost trimis
  02_Poze_Gata_Web\ — pozele deja redimensionate si comprimate, gata de urcat pe pagina (vezi Atomul 3)
  03_Mesaje\ — un fisier text sau document cu mesajele colegilor
  04_Site\ — fisierul HTML al paginii si folderul cu pozele finale, gata de publicat

Foloseste un tipar constant, de exemplu eveniment_an_numar.jpg: excursie-delta_2024_01.jpg, excursie-delta_2024_02.jpg, banchet_2026_03.jpg. Un nume clar iti spune, doar din titlu, ce e in poza si cand a fost facuta — nu mai trebuie sa deschizi fiecare fisier ca sa afli.

In editoare platite (de exemplu Photoshop), pasii sunt echivalenti: Image → Image Size pentru redimensionare (cu optiunea "Constrain Proportions" bifata pentru pastrarea proportiilor) si File → Export As pentru salvare in format JPEG cu un cursor de calitate.

Pornesti de la o poza de 4000 x 3000 pixeli, cantarind 8 MB pe disc. O redimensionezi la latimea 1600 px: factorul de scalare este 1600 ÷ 4000 = 0,4, deci noua inaltime este 3000 x 0,4 = 1200 px — poza finala are 1600 x 1200 pixeli. Dupa export ca JPEG cu calitatea 85, in acest exemplu fisierul a scazut la aproximativ 450 KB — de peste 15 ori mai mic decat originalul, dar suficient de clar pentru ecran. (Cifra de 450 KB este din exemplul nostru; marimea reala dupa export depinde de continutul fiecarei poze.)

JPEG este formatul potrivit pentru fotografii: compresia lui reduce mult dimensiunea fisierului tocmai pe tipul de imagine cu multe culori si tranzitii line (o poza normala), fara ca ochiul sa observe diferenta la calitate 80-85. PNG e potrivit pentru grafica: logo-uri, texte sau imagini cu zone de culoare uniforma si transparenta — de exemplu o reproducere scanata a unei lucrari plastice cu fundal alb curat, sau un element grafic al paginii; PNG nu pierde calitate la compresie, dar rezulta un fisier mai mare decat JPEG pentru o fotografie obisnuita. Mai exista si WebP, un format mai nou, care obtine fisiere si mai mici decat JPEG la aceeasi calitate si e acceptat de toate browserele moderne; in aceasta lectie folosim JPEG pentru ca e cel mai simplu de exportat si cel mai raspandit, dar GIMP poate exporta si WebP (Fisier → Exporta ca, extensia .webp), daca vrei sa mergi mai departe. Pentru albumul vostru: fotografiile de la evenimente merg pe JPEG; reproducerile de lucrari plastice cu fundal uniform sau elementele grafice (ex. logo-ul clasei) merg mai bine pe PNG.

Cel mai simplu mod: intr-un mesaj de grup al clasei (sau intr-un tabel comun), scrii pe scurt ce urmeaza sa fie publicat si pana cand — de exemplu "Facem albumul digital de absolvire, cu poze din cei 4 ani si mesaje. Cine nu vrea sa apara in poze sau sa nu ii apara numele langa mesaj, sa raspunda pana [data]." Notezi raspunsurile intr-un tabel simplu, cu doua coloane: nume elev si DA/NU. Acest tabel ramane la responsabilul albumului, ca reper clar — nu se tine minte "din auzite".

1. Alegi alte poze — daca ai suficient material, pur si simplu nu folosesti pozele in care persoana respectiva este vizibila si recunoscuta.
2. Decupezi (crop) — daca persoana este la marginea cadrului, poti taia poza astfel incat sa ramana in afara ei, fara sa strici restul compozitiei.
3. Estompezi fata (blur/pixelate) — daca persoana e in mijlocul unei poze de grup importante, o pastrezi, dar ii faci fata neclara: in GIMP, selectezi zona fetei cu instrumentul Selectie libera (Free Select, din bara de unelte sau tasta F), apoi din meniul Filtre → Estompare → Pixelare (Filters → Blur → Pixelize) alegi un bloc mare (ex. 20 px) si aplici. Fata devine un mozaic neclar, restul pozei ramane la fel.
4. O tii doar in albumul offline — pastrezi poza in versiunea fizica sau in arhiva privata a clasei, dar nu o urci pe pagina publica.

Acelasi principiu se aplica si mesajelor scrise: daca un coleg iti trimite un mesaj personal dar nu vrea sa apara numele lui langa el, il publici fara nume (sau doar cu initiala), nu ignori cererea "ca sa arate mai complet".

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Clasa a XII-a A — Album de absolvire</title>
</head>
<body>

<h1>Clasa a XII-a A — Album de absolvire</h1>

<section id="cronologie">
<h2>Cronologia clasei</h2>
<ul>
<li><strong>2022</strong> — Prima zi de liceu</li>
<li><strong>2024</strong> — Excursia la Delta Dunarii</li>
<li><strong>2026</strong> — Bacalaureat si balul de absolvire</li>
</ul>
</section>

<section id="galerie">
<h2>Galerie foto</h2>
<figure>
<img src="poze/excursie-delta_2024_01.jpg" alt="Excursia clasei la Delta Dunarii, 2024" width="400">
<figcaption>Excursia la Delta Dunarii, mai 2024</figcaption>
</figure>
</section>

<section id="mesaje">
<h2>Mesaje pentru colegi</h2>
<blockquote>
<p>Va multumesc pentru patru ani frumosi!</p>
<footer>— Maria</footer>
</blockquote>
</section>

</body>
</html>

Fiecare <section> are un id propriu (cronologie, galerie, mesaje), util daca vrei mai tarziu sa adaugi legaturi interne care sar direct la o sectiune. Eticheta <figure> impreuna cu <figcaption> leaga o poza de textul ei explicativ, iar <blockquote> cu <footer> este modul corect de a marca un citat si autorul lui.

<!DOCTYPE html> — prima linie a oricarei pagini HTML; ii spune browserului "acesta e un document HTML5", ca sa il afiseze corect, dupa regulile actuale, si nu dupa reguli vechi.
<head> vs <body> — <head> contine informatii despre pagina care NU se vad direct pe ecran (titlul din fila browserului, setari precum charset-ul de mai jos); <body> contine tot ce vede vizitatorul: titluri, poze, text, sectiuni.
<meta charset="UTF-8"> — cea mai usor de uitat, dar esentiala pentru un album romanesc: le spune browserului ce sistem de codare a caracterelor sa foloseasca. Fara ea, diacriticele (ă, î, ș, ț, â) risca sa apara ca semne ciudate in loc de litere — exact caracterele pe care le au majoritatea mesajelor colegilor.

In exemplu, src="poze/excursie-delta_2024_01.jpg" spune browserului sa caute un folder numit poze in acelasi loc cu fisierul HTML, si inauntrul lui fisierul cu acel nume exact. Daca folderul sau numele fisierului de pe disc nu se potrivesc caracter cu caracter cu ce ai scris in src, poza nu se afiseaza.

Nu e o contradictie cu Atomul 3 — sunt doua lucruri diferite. Redimensionarea din GIMP (Atomul 3) schimba fisierul real: cati pixeli sunt efectiv salvati pe disc si cate date trebuie sa descarce browserul. Atributul width="400" din HTML schimba doar marimea de afisare pe pagina: browserul stie dinainte cat spatiu sa rezerve pentru poza, ca sa nu "sara" pagina in timp ce imaginea se incarca. Fisierul ramane cel pregatit la 1600 px (usor de descarcat, clar la orice marime de afisare); width doar il arata mai mic in acest exemplu de galerie. Daca vrei ca poza sa se vada mai mare, cresti valoarea din width — nu trebuie sa refaci exportul din GIMP.

O alternativa tot gratuita, putin mai tehnica (necesita un cont GitHub si putina lucru suplimentar de configurare), este GitHub Pages — utila daca proiectul creste si vrei sa tii istoricul modificarilor paginii.

1. Organizare — foldere clare, denumire consecventa a pozelor (eveniment_an_numar)
  ↓
2. Pregatire imagini — redimensionare (ex. la 1600 px latime) + export JPEG calitate 80-85, in GIMP sau echivalent
  ↓
3. Acord — intrebi fiecare coleg, notezi raspunsurile, aplici solutia potrivita pentru cei care refuza (alte poze, decupare, blur, doar offline)
  ↓
4. Structura — pagina HTML cu sectiunile cronologie, galerie, mesaje
  ↓
5. Publicare — folder complet incarcat pe un serviciu gratuit (Netlify Drop), site revendicat IMEDIAT (cont gratuit) ca linkul sa ramana permanent

Redimensionare: latime noua ÷ latime originala = factor de scalare; se inmulteste si inaltimea cu el.
Acordul se cere INAINTE de publicare, in scris, cu raspuns notat per persoana.
alt pe imagini, id pe sectiuni — detalii mici care conteaza pentru accesibilitate si navigare.
Caile din src trebuie sa se potriveasca exact (inclusiv litere mari/mici) cu fisierele reale de pe disc.