Projektowanie, grafika i publikacja stron

Część A, lekcja 1

Grafika rastrowa i wektorowa

Parametry obrazu

rozmiar [bajty] = szerokość × wysokość × (głębia koloru w bitach / 8)

Przykład: obraz 1920 × 1080, 24 bity
1920 × 1080 × 3 B = 6 220 800 B ≈ 5,93 MiB

Część A, lekcja 2

Modele barw i palety

#AA41FF  →  AA = 170, 41 = 65, FF = 255   →  rgb(170, 65, 255)
rgb(152, 251, 152)  →  98 FB 98  →  #98FB98    (Pale Green)
#fff = #ffffff (biały),  #000 = czarny,  #f00 = czerwony

• Kolor w CSS: nazwa (navy), HEX (#1d4ed8), rgb(), rgba() z przezroczystością, hsl().
• Paleta barw: kolor główny, 1–2 uzupełniające, kolory neutralne i kolory komunikatów (błąd, sukces).
• Koło barw: kolory komplementarne (naprzeciw siebie) dają kontrast, analogiczne (obok siebie) harmonię.
• Kontrast tekstu z tłem sprawdzaj w narzędziach (WebAIM Contrast Checker): min. 4,5:1 dla zwykłego tekstu (WCAG AA).
• Nie przekazuj informacji wyłącznie kolorem (np. czerwone pole błędu bez komunikatu tekstowego).

Część A, lekcja 3

Obróbka grafiki na potrzeby strony

• Kadrowanie i skalowanie do rozmiaru wyświetlania na stronie (nie wstawiaj zdjęcia 5000 px jako miniatury).
• Kompresja (jakość JPEG ok. 70–85%) i usuwanie metadanych – mniejszy plik skraca czas ładowania.
• Warstwy – niezależne poziomy obrazu (tło, tekst, efekty) umożliwiają edycję bez niszczenia całości; pliki projektowe (.xcf, .psd) zachowuj, a na stronę eksportuj JPEG/PNG/WebP.
• Zaznaczanie i maski – wycinanie obiektów i przezroczystość (PNG, WebP).
• Tekst na grafice: dobierz krój (bezszeryfowy do ekranu), rozmiar, kolor i kontrast z tłem, odpowiedni odstęp między wierszami; tekst ważny trzymaj w HTML, nie w obrazie.
• Favicon – ikona karty (np. 32×32 lub 48×48, <link rel="icon">), sprite – wiele ikon w jednym pliku, SVG dla ikon skalowalnych.

Część A, lekcja 4

Wideo, dźwięk i animacje na stronie

• Na stronie stosuj MP4 (H.264 + AAC) z uzupełnieniem WebM; do krótkich efektów – animowany WebP lub wideo bez dźwięku.
• Animacje: CSS (@keyframes, transition), SVG/SMIL, JavaScript, GIF (stary i ciężki) lub Lottie.
• Edycja wideo i dźwięku: DaVinci Resolve, Shotcut, Kdenlive, Adobe Premiere (wideo); Audacity (dźwięk).
• Osadzanie: element <video>/<audio> z atrybutami controls, poster, preload albo <iframe> z serwisu wideo.
• Dostępność: napisy, transkrypcje, brak automatycznego odtwarzania z dźwiękiem.

Część B, lekcja 5

Projekt strony: układ, wireframe i typografia

Zasady układu i typografii

• Hierarchia wizualna: ważniejsze elementy większe, bardziej kontrastowe i wyżej; jeden wyraźny cel na ekran (call to action).
• Siatka (np. 12 kolumn) i wyrównanie porządkują układ; biała przestrzeń poprawia czytelność.
• Typografia: 1–2 kroje (np. jeden do nagłówków, drugi do tekstu), rozmiar tekstu podstawowego min. 16 px, line-height 1,4–1,6, długość wiersza ok. 50–80 znaków.
• Spójność: te same style przycisków, odstępów, ikon w całym serwisie.
• Układ F i Z – schematy, wzdłuż których użytkownik skanuje stronę wzrokiem.
• Czytelna nawigacja: menu główne w stałym miejscu, maks. kilka pozycji, bieżąca pozycja wyróżniona, nawigacja okruszkowa w większych serwisach.

Część B, lekcja 6

Dostępność stron internetowych (WCAG)

Dostępność cyfrowa oznacza, że z serwisu mogą korzystać także osoby z niepełnosprawnościami: niewidome i niedowidzące, głuche, z ograniczeniami ruchowymi, z dysleksją czy trudnościami poznawczymi. Wytyczne opisuje międzynarodowy standard WCAG (Web Content Accessibility Guidelines). W Polsce serwisy podmiotów publicznych muszą być zgodne z WCAG 2.1 na poziomie AA.

Praktyka

• Każdy obraz niosący treść ma alt; ozdobny – alt="".
• Struktura nagłówków h1–h6 bez przeskoków; lang w html.
• Formularze: <label for> przy każdym polu, czytelne komunikaty błędów.
• Pełna obsługa klawiaturą (Tab, Enter, Esc) i widoczny :focus; odnośnik „Przejdź do treści”.
• Kontrast i możliwość powiększenia tekstu do 200% bez utraty treści; nie polegaj tylko na kolorze.
• Film: napisy i audiodeskrypcja; audio: transkrypcja.
• ARIA (role, aria-label, aria-expanded) uzupełnia semantykę, gdy HTML nie wystarcza – najpierw używaj elementów natywnych.
• Narzędzia: czytniki ekranu (NVDA, JAWS, VoiceOver), WAVE, axe, Lighthouse.

Część B, lekcja 7

Użyteczność i doświadczenie użytkownika (UX)

UX (User Experience) to całość wrażeń użytkownika z korzystania z serwisu, a UI (User Interface) to sam interfejs. Użyteczność (usability) mierzy, jak łatwo i skutecznie użytkownik osiąga cel.

• Formularze: tylko niezbędne pola, etykiety nad polami, odpowiedni typ pola (type="email"), komunikaty obok błędnego pola.
• Wydajność: strona powinna ładować się w ok. 2–3 sekundy; użytkownicy szybko rezygnują.
• Testy z użytkownikami, mapy ciepła, analityka pokazują, gdzie użytkownicy mają trudności.
• Ciemne wzorce (dark patterns) – manipulujące interfejsy (ukryte opcje rezygnacji) są nieetyczne, a niekiedy nielegalne.

Część C, lekcja 8

Testowanie i walidacja strony

Typowe błędy do wykrycia

• niezamknięte lub źle zagnieżdżone znaczniki, powtórzone id,
• martwe odnośniki (błąd 404), brakujące obrazy,
• brak alt, brak lang, brak viewport,
• błędy JavaScript widoczne w konsoli,
• zbyt duże obrazy i brak kompresji, zbędne skrypty.

Optymalizacja

• minifikacja CSS i JS, łączenie plików, kompresja GZIP/Brotli,
• optymalizacja i leniwe ładowanie obrazów (loading="lazy"), format WebP,
• pamięć podręczna przeglądarki (cache), CDN dla zasobów statycznych,
• ładowanie skryptów z defer, ograniczenie zewnętrznych wtyczek.

Część C, lekcja 9

Pozycjonowanie (SEO)

SEO (Search Engine Optimization) to działania poprawiające widoczność strony w naturalnych wynikach wyszukiwarek. Odróżnia je od płatnych reklam (SEM, np. Google Ads). Pozycjonowanie jest procesem długotrwałym.

<title>Rowery miejskie i górskie – Sklep RowerPlus</title>
<meta name="description" content="Szeroki wybór rowerów miejskich i górskich. Dostawa 24 h, 2 lata gwarancji.">
<link rel="canonical" href="https://rowerplus.pl/rowery/">
<meta property="og:title" content="Rowery miejskie i górskie – RowerPlus">
<meta name="robots" content="index, follow">

Część C, lekcja 10

Hosting i domeny

• Dobór hostingu: wymagania (PHP, wersja MySQL, liczba baz), miejsce i transfer, certyfikat SSL, kopie zapasowe, dostępność (SLA, np. 99,9%), lokalizacja serwerów, wsparcie techniczne, cena.
• Typowe serwery WWW: Apache, Nginx, IIS; pakiety: LAMP, WAMP, XAMPP.

Domeny i DNS

Domena to czytelny adres strony (np. mti.edu.pl) zamieniany przez system DNS na adres IP serwera. Domenę rejestruje się u rejestratora na określony czas (np. rok) i trzeba ją odnawiać.

• Struktura nazwy: www.sklep.mti.edu.pl – subdomena www.sklep, domena mti, domena najwyższego poziomu (TLD) edu.pl / .pl. Domeny krajowe (.pl), funkcjonalne (.com, .org, .edu).
• Propagacja DNS: zmiana rekordów rozchodzi się po internecie od kilku minut do 24–48 godzin (zależy od TTL).
• Przekierowanie domeny i poddomeny konfiguruje się w panelu rejestratora lub hostingu.

Część C, lekcja 11

Publikacja witryny i aplikacji

Host:      ftp.twojadomena.pl
Port:      21 (FTP) lub 22 (SFTP)
Użytkownik: konto_ftp
Hasło:     ********
Katalog:   public_html/   (lub www/, htdocs/ – główny katalog serwisu)

• Plik startowy: index.html lub index.php w katalogu głównym.
• Wielkość liter w nazwach plików ma znaczenie na serwerach Linux (Logo.png ≠ logo.png).
• Aplikacje z bazą: zmień dane dostępowe (localhost często zostaje, ale baza, użytkownik i hasło są inne niż lokalnie).
• Certyfikat SSL/TLS (np. darmowy Let’s Encrypt) włącza HTTPS; ustaw przekierowanie z HTTP na HTTPS.
• Sprawdź plik .htaccess, uprawnienia plików (np. 644) i katalogów (755), brak plików testowych i kopii na serwerze.