Test INF.03 — zestaw 3

Dlaczego tak

Metoda GET dołącza dane formularza do adresu jako łańcuch zapytania po znaku ?, w postaci nazwa=wartość, gdzie nazwą jest atrybut name pola — tu q. Przycisk submit bez atrybutu name nie jest wysyłany. Dane w treści żądania przesyła metoda POST, z którą GET jest najczęściej mylona, „text” to typ pola, a nie jego nazwa, a znak # oznacza fragment strony, który nie trafia do serwera.

Dlaczego tak

Zewnętrzny arkusz stylów to osobny plik .css dołączany znacznikiem <link rel="stylesheet">; wszystkie podstrony korzystają z tych samych reguł, więc zmiana w jednym pliku działa w całym serwisie, a przeglądarka może plik zapamiętać. Styl wewnętrzny w <style> trzeba by poprawiać na każdej z 20 stron osobno, a style lokalne w atrybucie style — przy każdym elemencie. Znacznik <script> wczytuje JavaScript, a nie CSS.

Dlaczego tak

Deklaracja oznaczona !important wygrywa z każdą zwykłą deklaracją tej samej właściwości, niezależnie od specyficzności selektorów, więc akapit będzie czerwony. Bez !important zwyciężyłby selektor identyfikatora #nota (kolor niebieski), bo ma największą specyficzność — to najczęstsza odpowiedź błędna. Selektor p.info jest silniejszy od .info, ale też przegrywa z !important.

Dlaczego tak

Pseudoelement wskazuje fragment elementu, który nie istnieje w kodzie HTML jako osobny znacznik — ::first-line obejmuje pierwszy wiersz akapitu, a w CSS3 zapisuje się go podwójnym dwukropkiem. a:hover to pseudoklasa, która opisuje stan całego elementu (kursor nad odnośnikiem), dlatego łatwo ją pomylić. input[type="text"] to selektor atrybutu, a .menu > li — selektor dziecka.

Dlaczego tak

Kombinator > oznacza bezpośrednie dziecko: wybiera elementy p, których rodzicem jest div, czyli akapity A i C. Akapit B jest potomkiem div, ale jego bezpośrednim rodzicem jest section, więc nie spełnia warunku. Wszystkie trzy akapity wybrałby selektor potomka div p (ze spacją), co jest najczęstszą pomyłką.

Dlaczego tak

Selektor potomka nav a wskazuje odnośniki zagnieżdżone w nav, a właściwość text-decoration z wartością none usuwa podkreślenie. Zapis nav, a to grupowanie: reguła dotyczyłaby samego nav oraz wszystkich odnośników na stronie, także poza menu. nav.a wybiera element nav z klasą „a”, a właściwość underline w CSS nie istnieje.

Dlaczego tak

Przy box-sizing: border-box szerokość width obejmuje treść, dopełnienie i obramowanie, więc na treść zostaje 300 − 2 · 20 − 2 · 5 = 250 px. Wynik 260 px pomija obramowanie, a 300 px traktuje width tak, jakby dotyczyła samej treści. 350 px to całkowita szerokość przy domyślnym content-box (300 + 40 + 10); margines nie wchodzi w żaden z tych wymiarów, bo leży poza ramką.

Dlaczego tak

Przy szerokości 1024 px spełniony jest warunek min-width: 768px, ale nie min-width: 1200px, więc obowiązuje reguła z pierwszego zapytania o media: 50%. Reguła z width: 25% zadziała dopiero od 1200 px, a 100% to wartość bazowa dla ekranów węższych niż 768 px. To typowy układ mobile first: style podstawowe dla telefonów i nadpisania dla coraz szerszych ekranów.

Dlaczego tak

System CMS przechowuje treść, zwykle w bazie danych, oddzielnie od szablonu określającego wygląd; redaktor dodaje i zmienia artykuły w panelu administracyjnym, a strony są generowane automatycznie. Popularne CMS-y, jak WordPress czy Joomla!, wymagają serwera WWW z PHP i bazy danych, więc pierwsza odpowiedź jest odwrotnością prawdy. Sklep to tylko jedno z wielu zastosowań CMS.

Dlaczego tak

Rola Autor pozwala tworzyć, publikować i edytować własne wpisy oraz wgrywać pliki, bez dostępu do cudzych treści i ustawień. Redaktor może edytować i publikować wpisy wszystkich użytkowników, więc dostałby za szerokie uprawnienia. Współpracownik pisze wpisy, ale nie może ich sam opublikować — wymagają zatwierdzenia, a Subskrybent może jedynie zarządzać swoim profilem.

Dlaczego tak

Plik wp-config.php w głównym katalogu WordPressa przechowuje parametry połączenia z bazą danych (stałe DB_NAME, DB_USER, DB_PASSWORD, DB_HOST), prefiks tabel i klucze bezpieczeństwa; jeśli kreator nie może go utworzyć, prosi o ręczne zapisanie. Plik .htaccess konfiguruje serwer Apache, np. przepisywanie adresów. index.php uruchamia WordPressa, a functions.php należy do motywu i rozszerza jego funkcje.

Dlaczego tak

Sekcja Ustawienia → Bezpośrednie odnośniki (permalinks) określa strukturę adresów wpisów, np. „Nazwa wpisu”, co daje czytelne i przyjazne wyszukiwarkom adresy; na serwerze Apache wymaga to obsługi przepisywania adresów przez .htaccess. Adres witryny w ustawieniach ogólnych to domena całej strony, a nie wzór adresów wpisów. Ustawienia czytania decydują, co wyświetla strona główna, a Menu — jakie pozycje ma nawigacja.

Dlaczego tak

Poziom dostępu (Access) decyduje, które grupy użytkowników widzą element witryny — ustawienie „Zarejestrowani” (Registered) pokazuje artykuł tylko zalogowanym. Status „Nieopublikowany” ukrywa artykuł przed wszystkimi, także zalogowanymi, dlatego to błędny wybór, choć też „ukrywa” treść. Wyróżnienie dotyczy pokazywania artykułu na stronie głównej, a kategoria — porządkowania treści.

Dlaczego tak

Motyw potomny (child theme) dziedziczy wszystkie pliki motywu nadrzędnego, a zawiera tylko własne zmiany — aktualizacja nadpisuje pliki rodzica, ale nie dotyka motywu potomnego. Bezpośrednia edycja style.css motywu zostanie utracona przy najbliższej aktualizacji. Wyłączenie aktualizacji lub zmiana nazwy katalogu odcina witrynę od poprawek bezpieczeństwa.

Dlaczego tak

Aktualizacja może się nie powieść albo ujawnić niezgodność wtyczki z nową wersją, dlatego najpierw wykonuje się pełną kopię zapasową — plików i bazy danych — a najlepiej sprawdza aktualizację na kopii testowej witryny. Usuwanie wtyczek grozi utratą ich ustawień i danych. Wyłączanie SSL czy zmiana hasła bazy nie mają związku z bezpieczeństwem aktualizacji.

Dlaczego tak

W WordPressie strony służą do treści stałych, niezależnych od daty publikacji, np. „O nas” czy „Kontakt”; mogą być hierarchiczne i łatwo dodaje się je do menu. Wpisy są przeznaczone dla treści chronologicznych — aktualności i bloga — więc kontakt jako wpis trafiłby na listę aktualności i z czasem przesuwałby się w dół. Widżet i komentarz nie tworzą osobnej podstrony.

Dlaczego tak

Grafika wektorowa opisuje obraz figurami i krzywymi zapisanymi matematycznie, więc można ją skalować do dowolnego rozmiaru bez utraty ostrości — SVG przeglądarki wyświetlają bezpośrednio. Grafika rastrowa składa się ze stałej liczby pikseli: obraz 200 px po powiększeniu do 3 m stanie się rozmyty lub „schodkowy”, niezależnie od formatu JPEG, GIF czy PNG.

Dlaczego tak

Obraz ma 1920 · 1080 = 2 073 600 pikseli, a każdy zajmuje 24 bity, czyli 3 bajty: 2 073 600 · 3 = 6 220 800 B, co po podzieleniu przez 1 048 576 daje ok. 5,9 MiB. Wynik 47,5 MiB powstaje, gdy 24 bity potraktuje się jak 24 bajty. Ok. 2,0 MiB to 1 bajt na piksel, a 0,7 MiB to 6 220 800 podzielone dodatkowo przez 8.

Dlaczego tak

GIMP jest edytorem grafiki rastrowej z obsługą warstw, masek, kanału alfa i narzędzi do retuszu, więc nadaje się do obróbki zdjęć. Inkscape to edytor grafiki wektorowej — świetny do logo i ikon, ale nie do retuszu fotografii, dlatego bywa mylnie wybierany jako „program graficzny”. Audacity służy do edycji dźwięku, a FileZilla to klient FTP.

Dlaczego tak

PNG stosuje kompresję bezstratną, obsługuje pełną paletę 24-bitową i kanał alfa, czyli płynną, półprzezroczystą przezroczystość. GIF ma przezroczystość, ale tylko zero-jedynkową i maksymalnie 256 kolorów, więc półprzezroczysty cień będzie miał poszarpane krawędzie. JPEG nie obsługuje przezroczystości i kompresuje stratnie, a BMP w praktyce nie nadaje się na strony WWW.

Dlaczego tak

#00FF00 to w modelu RGB czysta zieleń o pełnej intensywności. W modelu HSL zieleń ma odcień 120° na kole barw, nasycenie 100%, a czysta, najintensywniejsza barwa występuje przy jasności 50%. Przy jasności 100% każdy odcień daje biel, więc hsl(120, 100%, 100%) to biały. Odcień 240° oraz rgb(0, 0, 255) to niebieski.

Dlaczego tak

Półprzezroczysta ciemna nakładka wyrównuje jasność tła pod tekstem, a jasny, pogrubiony krój bezszeryfowy ma wyraźne, grube kreski — razem dają wysoki kontrast niezależnie od fragmentu zdjęcia. Cienki krój pisany traci czytelność na niespokojnym tle, a kilka ozdobnych krojów naraz rozbija kompozycję. Kolor tekstu zbliżony do zdjęcia zmniejsza kontrast, zamiast go zwiększać.

Dlaczego tak

Zamiana tekstu na ścieżki (w Inkscape: Ścieżka → Obiekt w ścieżkę) zapisuje kształty liter jako krzywe, więc wyświetlenie logo nie zależy już od zainstalowanych czcionek; tekstu nie da się potem edytować jak napisu. Zgrupowanie tylko łączy obiekty do wspólnego przesuwania, a tekst nadal wymaga kroju pisma. Przyciąganie do siatki i przezroczystość nie zmieniają sposobu zapisu tekstu.

Dlaczego tak

Warstwa bez kanału alfa nie może mieć przezroczystych pikseli, więc usunięty obszar GIMP wypełnia kolorem tła; po dodaniu kanału alfa (Warstwa → Przezroczystość → Dodaj kanał alfa) usunięte tło staje się przezroczyste. Spłaszczenie obrazu działa odwrotnie — usuwa przezroczystość. JPEG nie obsługuje przezroczystości, a tryb indeksowany ogranicza paletę.

Dlaczego tak

Na ekranach o podwójnej gęstości kontener 1200 px wymaga obrazu o szerokości 2400 px; przy zachowaniu proporcji 3:2 daje to 2400×1600 px, a kompresja JPEG lub WebP zmniejszy plik do kilkuset kilobajtów. Atrybut width tylko pomniejsza wyświetlanie — przeglądarka i tak pobierze 9 MB. Zmiana dpi nie zmienia liczby pikseli ani rozmiaru pliku, a BMP jest jeszcze większy.

Dlaczego tak

Favicon wyświetla się w bardzo małym rozmiarze, np. 16×16 lub 32×32 px na karcie, i większym, np. 180×180 px na ekranie telefonu — dlatego musi to być prosty, kwadratowy, czytelny znak, przygotowany w kilku rozmiarach albo jako skalowalny SVG. Drobny tekst sloganu i zdjęcie budynku stają się w takim rozmiarze nieczytelną plamą. Animacje rozpraszają i nie wszędzie są obsługiwane.

Dlaczego tak

Łączna przepływność to 4000 + 128 = 4128 kb/s, czyli ok. 4,13 Mb/s; w ciągu 120 s daje to ok. 495 Mb, a po podzieleniu przez 8 — ok. 62 MB. Wynik 495 MB powstaje, gdy pominie się zamianę bitów na bajty. 31 MB to rozmiar filmu jednominutowego, a ok. 8 MB wychodzi, gdy przepływność pomnoży się przez 2 (minuty zamiast 120 s) i pominie zamianę bitów na bajty.

Dlaczego tak

Shotcut (podobnie jak DaVinci Resolve czy Kdenlive) jest edytorem wideo z osią czasu, na której układa się ujęcia, przejścia i ścieżkę muzyczną. Audacity to edytor dźwięku z funkcją redukcji szumów na podstawie próbki samego szumu. Odwrócenie ról jest najczęstszym błędem — Audacity nie montuje obrazu. Inkscape i GIMP to edytory grafiki, a FileZilla to klient FTP.

Dlaczego tak

Animacja ma 3 iteracje po 2 s, a wartość alternate odwraca kierunek co drugą iterację: pierwsza przebiega od opacity 1 do 0, druga od 0 do 1, trzecia znów od 1 do 0. Element zanika więc dwukrotnie, a cała animacja trwa 6 s. Odpowiedź „3 razy” pomija działanie alternate, a „6 razy” myli liczbę zaników z czasem trwania w sekundach.

Dlaczego tak

Film tła odtwarza się automatycznie i w pętli, więc powinien być krótki, bez dźwięku (przeglądarki blokują autoodtwarzanie z dźwiękiem) i silnie skompresowany w formacie obsługiwanym przez przeglądarki, np. MP4 z kodekiem H.264 lub WebM. Nieskompresowany film 4K ważyłby gigabajty. Animowany GIF ma bardzo nieefektywną kompresję, więc przy tej samej długości jest wielokrotnie większy niż wideo.

Dlaczego tak

Kompresor dynamiki zmniejsza różnicę między cichymi i głośnymi fragmentami, a normalizacja ustawia poziom całego nagrania na zadaną wartość szczytową lub głośność — razem dają równą, wyraźną ścieżkę lektora. Zmiana częstotliwości próbkowania dopasowuje plik do standardu wideo, ale nie wyrównuje głośności. Odwrócenie i zmiana tempa zmieniają przebieg nagrania, a nie jego poziom.

Dlaczego tak

Współczesne przeglądarki blokują automatyczne odtwarzanie filmów z dźwiękiem, a pozwalają na nie, gdy film jest wyciszony — dlatego obok autoplay dodaje się atrybut muted. Atrybut controls tylko wyświetla przyciski sterowania, a użytkownik musiałby sam kliknąć „odtwórz”. preload="none" wstrzymuje wstępne pobieranie, a poster ustawia obraz wyświetlany przed startem filmu.

Dlaczego tak

Maksymalny rozmiar wgrywanego pliku wynika z ustawień PHP na serwerze (upload_max_filesize i post_max_size), które WordPress wyświetla w bibliotece mediów. Można je zwiększyć w panelu hostingu lub pliku konfiguracyjnym albo — lepiej dla wydajności — umieścić film w serwisie wideo lub usłudze strumieniowania i osadzić go na stronie. Rozdzielczość czy nazwa pliku nie zmieniają limitu, a WordPress odtwarza MP4 bez wtyczek.

Dlaczego tak

Element <header> oznacza nagłówek strony z logo i hasłem, <main> — główną, unikalną treść dokumentu, a <aside> — treści poboczne, powiązane luźno z główną, np. panel z linkami partnerów. Znacznik <head> nie jest widocznym paskiem, lecz sekcją metadanych dokumentu, co jest częstą pomyłką. <footer> to stopka, a <nav> — blok nawigacji.

Dlaczego tak

Szerokość względną liczy się jako stosunek wymiaru elementu do wymiaru kontenera: 960 : 1440 ≈ 0,6667, czyli ok. 66,67%. Wynik 150% powstaje po odwróceniu dzielenia (1440 : 960). Ok. 33,33% to szerokość pozostałej części układu, a 96% wynika z błędnego przeniesienia liczby 960 bez dzielenia przez szerokość projektu.

Dlaczego tak

Od szerokości kontenera odejmuje się kolumnę o stałej szerokości i dwa odstępy między trzema kolumnami: 1190 − 250 − 2 · 20 = 900 px. Te 900 px dzieli się na 3 jednostki fr (1 + 2), więc 1fr = 300 px, a trzecia kolumna (2fr) ma 600 px. Wynik ok. 627 px pomija odstępy gap, a 300 px to szerokość drugiej kolumny.

Dlaczego tak

Barwa dopełniająca leży na kole barw o 180° dalej: 210° + 180° = 390°, czyli po odjęciu pełnego obrotu 30° — to odcień pomarańczowy, mocno kontrastujący z niebieskim. hsl(240, …) jest barwą analogiczną, sąsiednią, a hsl(210, 70%, 85%) to jaśniejsza wersja tego samego odcienia, przydatna w palecie monochromatycznej. 120° to zieleń, odległa tylko o 90°.

Dlaczego tak

Przeglądarka sprawdza kroje z listy font-family po kolei i używa pierwszego dostępnego; gdy brakuje Lato i Georgii, sięga po rodzinę ogólną sans-serif, czyli domyślny krój bezszeryfowy systemu. Krój szeryfowy byłby użyty tylko wtedy, gdyby na końcu listy stała rodzina serif. Przeglądarka nie pobiera sama krojów wymienionych z nazwy — robi to tylko reguła @font-face.

Dlaczego tak

Jednostki względne skalują się razem z ustawieniami przeglądarki użytkownika, a kontenery bez sztywnej wysokości rosną wraz z tekstem, więc treść się nie nakłada ani nie jest obcinana — wymaga tego m.in. kryterium WCAG o zmianie rozmiaru tekstu. Stała wysokość bloków powoduje ucinanie powiększonego tekstu. Blokada powiększania odbiera osobom słabowidzącym podstawowe narzędzie, a tekst w obrazkach rozmywa się po powiększeniu.

Dlaczego tak

Poziomy zgodności WCAG są kumulatywne: zgodność na poziomie AA oznacza spełnienie wszystkich kryteriów sukcesu poziomu A i wszystkich poziomu AA. Poziom AA jest zwykle wymagany od serwisów publicznych, bo obejmuje m.in. minimalny kontrast tekstu 4,5:1. Nie da się „przeskoczyć” poziomu A, a poziom AAA jest najwyższy i nie wynika automatycznie ze zgodności z AA.