Testowanie strony, cross-browser testing, publikacja online, domeny
ð Podstawa programowa: II.3f+IV.1Zanim opublikujesz strone w internecie, musisz ja dokladnie przetestowac. Testowanie to kluczowy etap tworzenia kazdego oprogramowania - pozwala wykryc bledy, problemy z wydajnoscia i nieprawidlowe wyswietlanie. W przypadku stron internetowych testujemy kilka aspektow: poprawnosc kodu HTML, wyglad na roznych urzadzeniach, dzialanie linkow i formularzy oraz szybkosc ladowania.
Profesjonalni testerzy uzywaja roznych technik: testow manualnych (reczne klikanie po stronie), testow automatycznych (skrypty testujace), testow wydajnosciowych (pomiar szybkosci) i testow dostepnosci (sprawdzanie czy strona jest uzywalna przez osoby z niepelnosprawnosciami).
Cross-browser testing to sprawdzanie, czy strona wyglada i dziala poprawnie w roznych przegladarkach internetowych. Kazda przegladarka (Chrome, Firefox, Safari, Edge) ma wlasny silnik renderowania HTML i CSS, co moze powodowac drobne roznice w wyswietlaniu. Wazne jest, zeby strona byla czytelna i funkcjonalna we wszystkich popularnych przegladarkach.
Do testowania na roznych urzadzeniach mozna uzyc narzedzi deweloperskich przegladarki (F12 > Toggle Device Toolbar w Chrome). Pozwala to symulowac wyswietlanie na roznych rozdzielczosciach ekranu bez potrzeby posiadania fizycznych urzadzen.
Walidator W3C sprawdza, czy kod HTML jest zgodny ze standardami. Poprawny kod HTML jest wazny, poniewaz: lepiej wyswietla sie w roznych przegladarkach, jest bardziej dostepny dla technologii asystujacych, lepiej indeksuje sie w wyszukiwarkach (SEO) i jest latwiejszy do utrzymania.
Jak zwalidowac kod HTML:
1. Wejdz na: https://validator.w3.org/
2. Wybierz "Validate by Direct Input"
3. Wklej kod HTML swojej strony
4. Kliknij "Check"
5. Popraw ewentualne bledy (errors) i ostrzezenia (warnings)
Najczestsze bledy:
- Brak atrybutu alt w <img>
- Niezamkniete tagi
- Zduplikowane atrybuty id
- Brak <!DOCTYPE html>GitHub Pages to darmowy hosting stron statycznych od platformy GitHub. Kazdy uzytkownik moze opublikowac strone pod adresem nazwa-uzytkownika.github.io/nazwa-repozytorium. Jest to najprostszy sposob na opublikowanie projektu szkolnego w internecie.
Krok po kroku - publikacja na GitHub Pages:
1. ZALOZENIE KONTA NA GITHUB:
- Wejdz na github.com i zarejestruj sie (darmowe konto)
2. UTWORZENIE REPOZYTORIUM:
- Kliknij "New repository"
- Nazwa: np. "byteclub-website"
- Zaznacz "Public" (publiczne)
- Kliknij "Create repository"
3. WGRANIE PLIKOW (przez przegladarke):
- W repozytorium kliknij "Add file" > "Upload files"
- Przeciagnij wszystkie pliki projektu
- WAZNE: index.html musi byc w glownym folderze!
- Kliknij "Commit changes"
4. WLACZENIE GITHUB PAGES:
- Settings > Pages
- Source: "Deploy from a branch"
- Branch: "main" / folder: "/ (root)"
- Kliknij "Save"
5. POCZEKAJ 1-2 MINUTY:
- Strona bedzie dostepna pod:
- https://twoj-login.github.io/nazwa-repo/Domena to przyjazna nazwa adresu internetowego, np. www.mojastrona.pl. Domeny mozna kupic u rejestratora domen (np. OVH, home.pl, nazwa.pl). Ceny zaczynaja sie od kilkunastu zlotych rocznie. Dla projektow szkolnych GitHub Pages jest wystarczajacy - nie trzeba kupowac domeny.
Warto wiedziec, ze istnieja rozne rozszerzenia domen: .pl (polskie), .com (komercyjne), .org (organizacje), .edu (edukacyjne), .io (popularne w IT). Wybor domeny powinien byc zwiazany z charakterem strony i latwym do zapamiemtania.
Przejdzcie przez checkliste jakosciowa z teorii i zaznaczcie kazdy punkt. Zwalidujcie kod HTML na validator.w3.org. Przetestujcie strone na co najmniej 3 roznych rozdzielczosciach ekranu (telefon, tablet, desktop) uzywajac narzedzi deweloperskich (F12).
Opublikujcie strone na GitHub Pages zgodnie z instrukcja z teorii. Upewnijcie sie, ze strona dziala poprawnie pod publicznym adresem URL. Zapiscie adres strony - bedzie potrzebny do prezentacji.
Przetestujcie strone w co najmniej dwoch roznych przegladarkach (np. Chrome i Firefox). Sprawdzcie czy nawigacja dziala, zdjecia sie wyswietlaja, uklady sa poprawne. Zapiszcie znalezione roznice i je naprawcie.
Przygotujcie krotka prezentacje projektu na nastepna lekcje (3-5 minut). Kazdy czlonek zespolu mowi swoja czesc: temat strony, technologie, podzial pracy, trudnosci, czego sie nauczyliscie. Przygotujcie plan B (zrzuty ekranu) na wypadek problemow technicznych.