Viteza de incarcare — cea mai mare vina o poarta greutatea imaginilor
Un client care cauta pe telefon, din masina sau de pe santier, un atelier de tamplarie, o pepiniera silvica sau un service auto, foloseste adesea o conexiune mobila mai slaba decat internetul de acasa. Daca situl sta 8-10 secunde sa se incarce, o parte dintre vizitatori inchid pagina inainte sa apuce sa citeasca oferta.
JPG (.jpg / .jpeg) — potrivit pentru fotografii (produse, echipe, santiere); comprima bine, fisier mic la o calitate vizuala buna.
PNG (.png) — potrivit pentru logo-uri, desene sau grafica cu putine culori si fundal transparent; la fotografii rezulta fisiere mult mai mari decat JPG.
WEBP (.webp) — format mai nou, comprima mai bine decat JPG la aceeasi calitate vizuala; suportat de browserele moderne.
1. Stabileste la ce latime se afiseaza imaginea pe pagina (ex. 600 px).
2. Redimensioneaza fotografia la acea latime, intr-un editor de imagini (ex. in Paint: fila Pornire, grupul Imagine → Redimensionare si inclinare, scurtatura Ctrl+W, sau in GIMP: Image → Scale Image).
3. Salveaz-o in format JPG, cu o calitate de aproximativ 70-85% (suficient de buna vizual, mult mai mica ca fisier).
4. Verifica marimea fisierului rezultat in File Explorer, in coloana Dimensiune.
Inainte de optimizare: 8 fotografii × 3 MB fiecare = 24 MB de descarcat.
La o conexiune de 16 Mbps (16 megabiti pe secunda = 16 ÷ 8 = 2 MB pe secunda), timpul de incarcare este 24 MB ÷ 2 MB/s = 12 secunde.
Dupa redimensionare si compresie la 300 KB per fotografie: 8 × 300 KB = 2400 KB ≈ 2,34 MB.
Timpul devine 2,34 MB ÷ 2 MB/s ≈ 1,2 secunde — de 10 ori mai rapid, cu aceleasi 8 fotografii vizibile pe ecran la fel de clar.
Fotografiile urcate direct de pe telefon, fara redimensionare, au de obicei intre 3 si 10 MB fiecare si dimensiuni de mii de pixeli. O recunosti usor: in File Explorer, selecteaza fisierul si vezi proprietatile (clic dreapta → Proprietati → Detalii) — daca latimea trece de 2000 pixeli si greutatea trece de 1 MB pentru o imagine care pe pagina ocupa jumatate de ecran, e semn ca trebuie redimensionata inainte de publicare.
Raportul text-imagine — nici numai poze, nici numai text
O galerie de 20 de fotografii cu mobila din lemn masiv, fara niciun cuvant despre esenta lemnului, dimensiuni sau pret, obliga vizitatorul sa suna sau sa scrie ca sa afle informatii de baza — si se incarca greu, pentru ca fiecare imagine adauga la greutatea totala din Atomul 1.
Un perete de text fara nicio imagine, la o pagina de prezentare a unei pepiniere silvice, nu lasa vizitatorul sa vada rapid puietii sau plantatia; pagina pare neterminata sau nesigura.
Pagina unui produs de tamplarie ar putea avea: un titlu (Usa de interior din lemn masiv de stejar), 2-3 propozitii de descriere (esenta lemnului, dimensiuni standard, finisaj), o lista scurta cu optiuni (culori, dimensiuni disponibile) si 2-3 fotografii relevante (produsul finit, un detaliu de finisaj). Textul explica ce nu se vede in poza (pretul, dimensiunile exacte, garantia); pozele arata ce e greu de descris in cuvinte.
Chiar si atunci cand o imagine e prezenta, un motor de cautare "vede" doar textul din atributul alt al acelei imagini, nu si continutul vizual propriu-zis. Atributul alt se scrie direct in tagul <img>, ca o descriere scurta si concreta a ceea ce se vede in poza — nu "poza1" sau lasat gol, ci de exemplu:
O pagina cu imagini fara text de insotire si fara atribute alt completate corect este aproape invizibila pentru o cautare relevanta.
Lizibilitate — contrast si dimensiune de font
Cu cat textul si fundalul sunt mai apropiate ca luminozitate, cu atat contrastul e mai slab si textul mai greu de citit. Un text negru sau gri foarte inchis (ex. #222222) pe fundal alb se citeste bine. Un text gri deschis (ex. #cccccc) pe fundal alb aproape dispare, mai ales pe un ecran de telefon la lumina puternica — exact situatia unui client care se uita pe sit intr-un depozit sau pe un santier, nu intr-o camera intunecata.
Pentru corpul textului (paragrafele obisnuite), o dimensiune uzual recomandata este de cel putin 16 pixeli. Sub 13-14 pixeli, textul devine greu de citit pe telefon fara zoom, iar vizitatorii renunta rapid sa mai citeasca.
Titluri decorative scrise cu un font foarte subtire si o culoare pastel pe fundal deschis (ex. text galben pal pe fundal alb) arata "elegant" pe monitorul de proiectare, dar devin practic invizibile pentru multi vizitatori, inclusiv pentru cei cu deficiente usoare de vedere. Regula simpla de verificare: mijeste ochii sau muta ecranul mai departe — daca textul dispare, contrastul e prea slab.
Greseala: un titlu de sectiune scris cu text gri deschis pe fundal gri si mai deschis, pentru ca "arata modern". Reparatia: pastreaza contrastul puternic (text inchis pe fundal deschis, sau invers) mai ales pentru textul important — pretul, numarul de telefon, butonul de comanda — si rezerva combinatiile subtile doar pentru elemente decorative, nu pentru informatie esentiala.
Design consecvent — acelasi sit pe orice pagina
Daca pagina principala are meniul sus si culorile albastru-alb, iar pagina de Contact are meniul jos si culorile verde-gri cu alt font pentru titluri, vizitatorul are impresia ca a parasit site-ul sau ca acesta e nefinalizat, chiar daca fiecare pagina, luata separat, e corecta din punct de vedere tehnic.
Asa cum ai vazut in lectia 2, fiecare pagina HTML leaga in <head> catre un fisier de stiluri extern, cu o linie de forma <link rel="stylesheet" href="stiluri.css">. Daca toate paginile sitului leaga la acelasi fisier stiluri.css, orice culoare, font sau spatiere definita acolo se aplica automat pe toate paginile deodata. Daca in schimb copiezi stiluri diferite in fiecare pagina in parte (sau folosesti atribute style direct pe elemente), riscul de a uita sa actualizezi o pagina si de a ramane cu design inconsecvent creste mult.
Acelasi logo si nume de firma in acelasi loc (de obicei sus).
Acelasi meniu de navigare, cu aceleasi legaturi, in aceeasi ordine.
Aceleasi culori pentru titluri, text si butoane.
Acelasi font pe tot situl (sau cel mult doua fonturi folosite consecvent — unul pentru titluri, unul pentru text).
Acelasi subsol (footer) cu datele de contact, pe toate paginile.
Conformitatea cu proiectul — verificarea inainte de publicare
1. Toate paginile planificate exista — daca planul avea Acasa, Despre noi, Servicii, Contact, verifici ca toate cele 4 fisiere sunt prezente.
2. Toate legaturile de navigare functioneaza — dai clic pe fiecare buton din meniu, pe fiecare pagina, si confirmi ca ajungi unde trebuie, fara pagina "Fisierul nu a fost gasit".
3. Toate imaginile au atributul alt completat — nu lasat gol sau uitat.
4. Continutul corespunde temei — textele si imaginile raspund la cerintele stabilite (ex. daca proiectul cerea o pagina de servicii cu preturi, preturile chiar sunt acolo).
5. Textul nu are greseli evidente — o recitire atenta inainte de publicare.
Se intampla frecvent ca, in timpul lucrului, un fisier sa fie redenumit (ex. din galerie.html in galerie-produse.html), dar legatura din meniu sa ramana neschimbata catre numele vechi. Rezultatul: la clic, browserul afiseaza o pagina de eroare ("404 — pagina nu a fost gasita"). Singura metoda sigura de a o depista este testarea manuala a fiecarei legaturi, nu doar o privire rapida pe cod.
Dupa ce situl e publicat (Atomul 6), o legatura stricata sau o pagina lipsa devine vizibila publicului si clientilor, nu doar tie. Verificarea de conformitate este ultimul control de calitate facut "acasa", inainte ca situl sa ajunga pe internet.
Publicarea sitului si aparitia in motoarele de cautare
1. Un nume de domeniu — adresa sitului (ex. atelier-tamplarie.ro), inregistrata la un furnizor de domenii.
2. Un serviciu de gazduire (hosting) — spatiul de pe server unde stau fisierele sitului, pastrat pornit permanent de furnizorul de gazduire.
3. Transferul fisierelor — fisierele HTML, CSS si imaginile sunt copiate de pe calculatorul tau pe server, fie cu un program de transfer de fisiere (client FTP), fie prin panoul de control oferit de furnizorul de gazduire, fie printr-o platforma de publicare care preia direct folderul sitului.
Un sit nou, abia publicat, nu are inca nicio legatura din exterior catre el, asa ca nu se "descopera" singur imediat. Trebuie anuntat activ: te inregistrezi gratuit in Google Search Console (un instrument oficial Google pentru proprietarii de site-uri) si trimiti acolo adresa sitului, eventual insotita de un fisier sitemap.xml — o lista cu toate paginile sitului, care ajuta motorul de cautare sa le gaseasca pe toate, nu doar pe cea principala. Chiar si asa, indexarea (aparitia efectiva in rezultatele de cautare) nu e instantanee — poate dura de la cateva zile pana la cateva saptamani. Dupa ce situl e cunoscut de motorul de cautare, un meniu clar si legaturi corecte intre pagini (lectia 4) il ajuta sa "citeasca" complet toate paginile, nu doar pe cea de la care a pornit.
<title>:Fiecare pagina are un element <title> unic in <head>, care apare in fila (tab-ul) browserului si ca titlu clickabil in rezultatele de cautare. Un titlu vag ("Pagina 1") nu spune nimic vizitatorului; un titlu clar ("Ateliere de tamplarie Ionescu — mobila din lemn masiv") il ajuta sa decida daca da clic.
In <head>, elementul <meta name="description" content="..."> contine un rezumat scurt (1-2 propozitii) al paginii. Nu se vede pe pagina propriu-zisa, dar apare de obicei sub titlu, in rezultatele motorului de cautare, si influenteaza daca vizitatorul alege sa dea clic pe situl tau sau pe altul din lista.
Fiecare pagina foloseste un singur <h1> — titlul principal al paginii. Sectiunile din interiorul paginii folosesc <h2>, iar subsectiunile din interiorul unei sectiuni folosesc <h3>, si asa mai departe pana la <h6>. Aceasta ierarhie (nu sarita, ex. de la h1 direct la h3) ajuta atat motorul de cautare, cat si cititoarele de ecran pentru nevazatori, sa "vada" scheletul logic al continutului. De exemplu, pagina de Servicii a unui atelier de tamplarie ar putea arata asa:
Copierea aceluiasi <title> si a aceleiasi descrieri pe toate paginile sitului (ex. toate cu titlul "Acasa") face imposibila diferentierea lor in rezultatele de cautare — Google nu poate arata clar care rezultat e pagina de Contact si care e pagina de Servicii. Fiecare pagina are nevoie de titlul si descrierea ei proprii, specifice continutului acelei pagini.
Recapitulare si conexiuni
Viteza de incarcare — imaginile redimensionate si comprimate la dimensiunea reala de afisare.
Raportul text-imagine — text care explica, imagini care arata, niciodata doar unul dintre ele.
Lizibilitate — contrast puternic text/fundal, font de cel putin 16px pentru corpul textului.
Design consecvent — aceleasi culori, font, meniu si footer pe toate paginile, printr-un singur CSS comun.
Conformitate cu proiectul — toate paginile planificate exista, toate legaturile functioneaza, continutul respecta tema.
Domeniu + gazduire + transfer de fisiere = situl devine accesibil oricui, oriunde. Titlul, descrierea si structura de titluri (h1-h6) ale fiecarei pagini sunt ceea ce citesc motoarele de cautare ca sa decida cand si pentru ce cautari sa arate situl tau.
Lectia 1 te-a invatat cu ce instrumente lucrezi; lectia 2, cum se structureaza o pagina; lectia 3, ce elemente de continut poti adauga; lectia 4, cum leg pagina una de alta; lectia 5, de azi, iti arata cand acel sit e cu adevarat gata sa iasa in lume — competentele acumulate in acest modul fac parte din cerintele curriculumului de T.I.C. pentru clasa a XII-a.