Invatare Atomica

Publicarea site-ului

Progres lectie:
0%
🎯

Obiectivul lectiei

Site-ul tau e gata! Afli ce inseamna hosting, cum pregatesti fisierele si urmezi pasii concreți pentru a-l publica online — prin Netlify Drop (fara cont) sau GitHub Pages (cu cont, varsta minima 13 ani).

Dupa aceasta lectie vei putea:

  • Sa explici ce inseamna "hosting"
  • Sa utilizezi 💡 sfaturi importante pentru pregatirea fisierelor
  • Sa aplici ✅ checklist inainte de publicare
  • Sa urmezi pasii concreți de publicare (Netlify Drop sau GitHub Pages)

Incearca singur!

🎯 INCEARCA

Exploreaza GitHub Pages!

Provocarea ta (10 minute):

1. Du-te la pages.github.com si citeste ce ofera GitHub Pages

2. Observa ca URL-ul unui site publicat arata asa: username.github.io

3. Discuta cu profesorul sau un parinte daca vrei sa creezi un cont

4. Alternativ: Netlify Drop (app.netlify.com/drop) permite publicare fara cont — simplu drag & drop!

⚠️ Important despre conturi online — citeste!

Inainte de a-ti crea un cont pe orice platforma:

  • GitHub impune varsta minima de 13 ani conform Termenilor de Utilizare
  • Daca ai sub 13 ani, ai nevoie de acordul unui parinte sau tutore
  • Intreaba intotdeauna un parinte sau profesorul inainte de a-ti crea un cont nou
  • Nu folosi parole simple si nu impartasi datele contului cu altii
💡 De ce GitHub Pages? Click aici

GitHub Pages este o platforma gratuita de hosting pentru site-uri statice. Ofera:

  • Gazduire GRATUITA pentru site-uri statice (HTML, CSS, imagini)
  • URL personalizat (username.github.io)
  • Folosita de milioane de developeri din toata lumea
  • Alternativa simpla: Netlify Drop — fara cont, doar tragi folderul!
1

Ce inseamna "hosting"?

Ce inseamna "hosting"?
Hosting (gazduire) inseamna sa pui fisierele site-ului pe un server conectat la internet, 24/7, astfel incat oricine sa poata accesa site-ul tau.
Analogie: Hosting = un apartament pentru site-ul tau pe internet
2

💡 Sfaturi importante

💡 Sfaturi importante
  • index.html OBLIGATORIU - Pagina principala trebuie sa se numeasca exact "index.html"
  • Litere mici - Foloseste doar litere mici in numele fisierelor
  • Fara spatii - Inlocuieste spatiile cu "-" (despre-mine.html)
  • Testeaza local inainte - Verifica ca totul functioneaza pe calculator
3

✅ Checklist inainte de publicare

✅ Checklist inainte de publicare
  • ☐ Toate link-urile functioneaza
  • ☐ Imaginile se incarca corect
  • ☐ Textul e verificat (fara greseli)
  • ☐ Site-ul arata bine pe mobil
  • ☐ index.html exista in folder
4

🚀 Cum publici efectiv — pasi concreți

🚀 Doua modalitati de publicare pas cu pas

Varianta A — Netlify Drop (recomandata, fara cont):

  1. Deschide app.netlify.com/drop in browser
  2. Trage folderul cu site-ul tau (cel care contine index.html) in zona indicata
  3. Asteapta cateva secunde — Netlify genereaza un URL public (ex: random-name.netlify.app)
  4. Trimite URL-ul profesorului!

Varianta B — GitHub Pages (cu cont, varsta minima 13 ani):

  1. Creeaza un cont pe github.com (cu acordul parintelui daca ai sub 18 ani)
  2. Apasa + New repository si numeste-l username.github.io (inlocuieste username cu numele tau de cont)
  3. In repository, apasa Add file > Upload files si incarca TOATE fisierele site-ului (index.html, style.css, imagini)
  4. Apasa Commit changes
  5. Mergi la Settings > Pages, selecteaza Branch: main si apasa Save
  6. Dupa 1-2 minute, site-ul tau este accesibil la https://username.github.io
Nota: Ambele variante sunt gratuite. Netlify Drop e mai rapid pentru incepatori; GitHub Pages e util daca vrei sa inveti si gestiunea fisierelor online pe viitor.

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect web: Publicarea site-ului

Creeaza o pagina web pentru Publicarea site-ului

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Adauga interactivitate JavaScript simpla
Vezi rezolvarea

Structura minima, valida si responsive pentru o pagina despre Publicarea site-ului:

  1. Fisier index.html cu <!DOCTYPE html>, <html lang="ro">, <head> (cu <meta charset="utf-8"> si <meta name="viewport" content="width=device-width, initial-scale=1.0"> pentru responsive) si <body>.
  2. In <body> foloseste taguri semantice: <header> cu titlul, <main> cu textul (ce e hosting, pasii de publicare), <footer>.
  3. Leaga un fisier extern: <link rel="stylesheet" href="style.css"> in <head>, NU stiluri inline.
  4. In style.css adauga cel putin o regula cu @media (max-width: 600px) pentru responsive de baza.
  5. Bonus: un fisier script.js legat la finalul <body>, cu un buton care schimba un text la click.

Exercitiul 2 (Nivel standard) - Publica site-ul tau online

Foloseste checklist-ul de dinainte de publicare, apoi urmeaza pasii pentru a pune site-ul online:

  1. Parcurge checklist-ul de publicare (din atom-3): bifeaza fiecare punct si noteaza daca ai corectat ceva.
  2. Publica site-ul folosind Netlify Drop (app.netlify.com/drop): trage folderul cu fisierele si noteaza URL-ul generat.
  3. Deschide URL-ul in browser si verifica: se incarca index.html? Functioneaza toate link-urile din meniu?

Raspunde numerotat: 1. (ce ai corectat) ... 2. (URL-ul site-ului) ... 3. (ce ai verificat) ...

Vezi rezolvarea

Model de raspuns (numerele si textul concret difera de la elev la elev, dar formatul e acesta):

  1. Ce ai corectat: am bifat cele 5 puncte din checklist (atom-3); am gasit un link stricat catre despre.html (fisierul se numea Despre.html cu litera mare) si l-am redenumit cu litere mici; am inlocuit un spatiu din numele unui fisier cu "-".
  2. URL-ul site-ului: am deschis app.netlify.com/drop, am tras folderul cu fisierele (cel care contine index.html) in zona indicata si am primit adresa nume-generat-de-netlify.netlify.app — aceasta e adresa de trimis profesorului.
  3. Ce ai verificat: am deschis URL-ul primit, s-a incarcat direct index.html, am dat click pe fiecare link din meniu si toate au dus la pagina corecta; am verificat si pe telefon ca site-ul arata bine.

Exercitiul 3 (Nivel performanta) - Analiza procesului de publicare

Cerinta: Explica in scris diferenta dintre a deschide un site pe calculatorul tau (local) si a-l publica pe internet (hosting), si descrie procesul parcurs.

Indicii:

  • Ce inseamna "hosting" si de ce e nevoie de el?
  • De ce nu e suficient sa trimiti fisierul .html altcuiva prin email?
  • Ce ai facut inainte de a incarca fisierele (checklist)? Ce ar fi putut merge prost?
  • Ce avantaj are GitHub Pages fata de Netlify Drop pentru proiecte pe termen lung?

Cuvinte cheie de folosit: hosting, server, URL, Netlify, GitHub Pages, fisiere, local vs online, deploy

Vezi rezolvarea

Schita de raspuns (nu textul de-a gata — completeaza fiecare idee cu propriile cuvinte):

  1. Local vs. hosting: local = fisierele stau doar pe calculatorul tau, doar tu le vezi; hosting = fisierele stau pe un server conectat 24/7 la internet, oricine cu URL-ul poate accesa site-ul.
  2. De ce nu ajunge email-ul: destinatarul primeste un fisier, nu o adresa web — trebuie sa il descarce si sa il deschida manual; nu exista un URL de distribuit mai departe si legaturile relative catre alte pagini/imagini se pot rupe.
  3. Ce ai facut inainte (checklist): mentioneaza atom-3 — link-uri, imagini, text, responsive, index.html prezent; ce ar fi putut merge prost: un link stricat, un fisier cu litere mari sau spatiu in nume, imagini care nu se incarca.
  4. GitHub Pages vs Netlify Drop pe termen lung: GitHub Pages tine istoricul modificarilor (poti reveni la o versiune veche) si actualizezi site-ul refacand un commit; Netlify Drop e mai rapid dar fiecare actualizare inseamna sa tragi din nou tot folderul.

Se evalueaza: folosirea corecta a cuvintelor cheie cerute, claritatea explicatiei local vs. online, si daca ai raspuns punctual la toate cele 4 indicii.

Ce ai invatat astazi

  • Ai invatat ce inseamna "hosting" (gazduire web)
  • Acum stii 💡 sfaturile importante pentru pregatirea fisierelor
  • Ai aplicat ✅ checklist inainte de publicare
  • Ai invatat pasii concreți de publicare prin Netlify Drop si GitHub Pages

Vrei mai mult?

Provocare: Dupa ce publici site-ul, deschide link-ul public direct PE TELEFON (nu doar micsorezi fereastra browserului pe calculator) si verifica: se citeste textul fara zoom? Sunt butoanele si linkurile destul de mari pentru un deget?

De ce? Daca acum modifici un fisier pe calculatorul tau (ex: schimbi o culoare in style.css), de ce site-ul deja PUBLICAT prin Netlify Drop nu se schimba automat? Ce legatura (sau lipsa de legatura) exista intre folderul de pe disc si adresa publica?

In lumea reala: Site-urile profesionale folosesc "deploy automat" (Netlify legat direct de un cont GitHub): de fiecare data cand programatorul salveaza o schimbare, site-ul public se actualizeaza singur in cateva secunde, fara sa mai tragi manual folderul in browser.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →