Test INF.03 — zestaw 11

Dlaczego tak

Pionowe marginesy sąsiadujących elementów blokowych w zwykłym przepływie dokumentu nie sumują się, lecz zachodzą na siebie (margin collapsing) — odstęp jest równy większemu z nich, czyli 30 px. Wynik 50 px otrzymuje się, dodając marginesy, co dotyczy np. marginesów poziomych lub elementów w kontenerze flex czy grid. Wartości 20 px i 10 px nie wynikają z żadnej reguły łączenia marginesów.

Dlaczego tak

Funkcja clamp(min, wartość, max) zwraca wartość środkową, ograniczoną od dołu i od góry. Jednostka vw to 1% szerokości okna, więc 3vw = 0,03 · 1200 px = 36 px, a granice wynoszą 1,5 · 16 = 24 px i 3 · 16 = 48 px. Ponieważ 36 px mieści się w przedziale, czcionka ma 36 px i będzie się płynnie zmieniać razem z oknem. Wartości 24 px i 48 px to granice, osiągane dopiero przy oknie węższym niż 800 px lub szerszym niż 1600 px.

Dlaczego tak

System zarządzania treścią przechowuje artykuły w bazie danych oddzielnie od szablonu, który określa jedynie sposób ich prezentacji. Po zmianie szablonu CMS generuje strony z tych samych danych, ale w nowym układzie i stylu, więc wszystkie artykuły od razu wyglądają inaczej. Ręczne kopiowanie treści byłoby konieczne w witrynie z ręcznie pisanymi plikami HTML, w których treść i wygląd są ze sobą połączone.

Dlaczego tak

W sekcji Ustawienia → Dyskusja znajdują się opcje dotyczące komentarzy, m.in. wymaganie, aby autor miał wcześniej zatwierdzony komentarz, ręczne zatwierdzanie wszystkich komentarzy, lista słów kierujących komentarz do moderacji oraz powiadomienia e-mail. Ustawienia → Ogólne obejmują tytuł witryny, adres, strefę czasową i język. Wygląd → Dostosuj zmienia wygląd motywu, a Użytkownicy → Profil — ustawienia konta zalogowanej osoby.

Dlaczego tak

Kreator instalacji WordPressa pyta o nazwę bazy danych, jej użytkownika i hasło, więc bazę trzeba utworzyć wcześniej w panelu hostingu. Następnie wgrywa się pliki WordPressa na serwer, uruchamia kreator, otwierając adres witryny w przeglądarce, podaje dane bazy, a na końcu ustala tytuł witryny i konto administratora. Uruchomienie kreatora bez istniejącej bazy kończy się błędem połączenia z bazą danych, a konto administratora powstaje dopiero w kreatorze.

Dlaczego tak

W sekcji Ustawienia → Czytanie wybiera się, czy strona główna wyświetla najnowsze wpisy, czy wskazaną stronę statyczną, i można też określić osobną stronę dla listy wpisów. Ustawienia → Ogólne zawierają m.in. tytuł i adres witryny, ale nie zawartość strony głównej. Bezpośrednie odnośniki zmieniają format adresów URL, a Dyskusja dotyczy komentarzy.

Dlaczego tak

WordPress ładuje wtyczki z katalogu wp-content/plugins — gdy katalog wadliwej wtyczki zmieni się nazwę przez FTP lub menedżer plików, system nie znajdzie jej plików i automatycznie ją dezaktywuje, a witryna i panel znów zadziałają. Usunięcie wp-config.php odcina witrynę od bazy danych i uruchamia instalator, a usunięcie bazy niszczy całą treść. Czyszczenie pamięci przeglądarki nie pomoże, bo błąd występuje po stronie serwera.

Dlaczego tak

Szablony Joomla! definiują pozycje — nazwane miejsca w układzie strony, np. nagłówek czy kolumny boczne — a każdy moduł przypisuje się do jednej z nich w jego ustawieniach. Zmiana pozycji na boczną, np. sidebar-right w szablonie Cassiopeia, przenosi moduł bez ingerencji w kod szablonu. Poziom dostępu decyduje, kto widzi moduł, a nie gdzie się wyświetla, kolejność pozycji menu zmienia jego zawartość, a ustawienie języka dotyczy witryn wielojęzycznych.

Dlaczego tak

Nowa główna wersja wtyczki może być niezgodna z motywem lub innymi wtyczkami, dlatego bezpieczna procedura obejmuje kopię zapasową, aktualizację w środowisku testowym (staging), sprawdzenie najważniejszych funkcji, np. koszyka i płatności, a dopiero potem aktualizację sklepu, najlepiej przy małym ruchu. Rezygnacja z aktualizacji zostawia znane luki bezpieczeństwa. Ręczne edytowanie plików wtyczki jest zawodne i zostanie nadpisane przy kolejnej aktualizacji.

Dlaczego tak

Menu WordPressa ma strukturę drzewa: element umieszczony pod innym i przesunięty w prawo staje się jego elementem podrzędnym, a motyw wyświetla takie elementy jako rozwijaną listę. Do jednej lokalizacji motywu przypisuje się tylko jedno menu, więc trzy osobne menu nie utworzą listy rozwijanej. Kategorie w stopce nie znajdą się w menu głównym, a odnośniki w treści strony nie tworzą menu, tylko zwykłe linki.

Dlaczego tak

Obraz rastrowy składa się ze skończonej liczby pikseli — przy powiększeniu program musi wyliczyć nowe piksele przez interpolację na podstawie istniejących, więc obraz ma 4 · 400 = 1600 i 4 · 300 = 1200 px, ale nie zawiera więcej informacji niż oryginał i wygląda na rozmyty lub poszarpany. Bezstratne skalowanie jest cechą grafiki wektorowej, opisanej wzorami. Liczba pikseli wzrasta szesnastokrotnie, więc rośnie też rozmiar pliku.

Dlaczego tak

Liczbę pikseli otrzymuje się, mnożąc wymiar w calach przez rozdzielczość: 10 cm / 2,54 ≈ 3,94 cala · 300 dpi ≈ 1181 px oraz 15 cm / 2,54 ≈ 5,91 cala · 300 dpi ≈ 1772 px. Wynik 3000×4500 px powstaje po pomnożeniu centymetrów przez 300 bez zamiany na cale. Wymiary około 283×425 px odpowiadają ekranowej rozdzielczości 72 dpi, a 394×591 px — rozdzielczości 100 dpi, która jest zbyt niska do druku fotograficznego.

Dlaczego tak

Inkscape jest bezpłatnym edytorem grafiki wektorowej, którego natywnym formatem jest SVG — ikony rysuje się w nim z krzywych i kształtów, dzięki czemu pozostają ostre w każdym rozmiarze. GIMP, Krita i Paint.NET są edytorami grafiki rastrowej: GIMP służy głównie do obróbki zdjęć, Krita do malowania cyfrowego, a Paint.NET do prostej edycji obrazów. Ikona przygotowana w nich składałaby się z pikseli i traciłaby jakość przy powiększaniu.

Dlaczego tak

Kompresja stratna JPEG jest przeznaczona do zdjęć o płynnych przejściach tonalnych — na ostrych krawędziach liter i jednolitych płaszczyznach tworzy widoczne artefakty. PNG kompresuje bezstratnie i bardzo skutecznie zapisuje duże obszary jednego koloru, więc jest właściwy dla zrzutów ekranu. JPEG z jakością 100% nadal jest stratny, GIF obsługuje najwyżej 256 kolorów, a BMP zwykle zapisuje obraz bez kompresji, więc pliki są największe.

Dlaczego tak

Model RGB jest addytywny — kolory powstają przez sumowanie światła czerwonego, zielonego i niebieskiego. Pełna składowa czerwona i zielona przy zerowej niebieskiej dają na ekranie żółty, odpowiadający zapisowi #FFFF00. Brązowy wynika z intuicji mieszania farb, która dotyczy modelu subtraktywnego. Cyjan to rgb(0, 255, 255), czyli zielony z niebieskim, a magenta to rgb(255, 0, 255), czyli czerwony z niebieskim.

Dlaczego tak

Na małym banerze odbiorca ma ułamek sekundy na przeczytanie hasła, dlatego najlepiej sprawdza się prosty krój bezszeryfowy o grubych liniach w kolorze silnie kontrastującym z tłem. Cienkie kroje odręczne zlewają się z tłem i są trudne do odczytania w małych rozmiarach. Tekst 8 px pisany kursywą jest na ekranie praktycznie nieczytelny, a mieszanie wielu krojów w jednym haśle wprowadza chaos wizualny.

Dlaczego tak

Operacja Różnica (Ścieżka → Różnica) odejmuje obiekt leżący na wierzchu od obiektu pod spodem, więc z dużego koła zostaje wycięty obszar małego koła i powstaje pierścień. Suma połączyłaby oba kształty w jeden — tu po prostu duże koło. Część wspólna pozostawia tylko obszar należący do obu obiektów, czyli małe koło. Odsunięcie dynamiczne powiększa lub zmniejsza kontur jednego obiektu, ale niczego nie wycina.

Dlaczego tak

Polecenie Skaluj obraz przelicza wszystkie piksele do nowych wymiarów, a połączony łańcuch zachowuje proporcje: 800 / 4000 = 0,2, więc wysokość wynosi 0,2 · 3000 = 600 px. Rozmiar płótna zmienia tylko obszar roboczy, czyli w praktyce przycina obraz zamiast go pomniejszać, co jest częstą pomyłką. Rozłączony łańcuch przy wysokości 3000 px spłaszczyłby zdjęcie w poziomie, a kadrowanie wycina fragment zamiast zmniejszać całość.

Dlaczego tak

Szerokość zmniejszono 10-krotnie (3000 / 300), więc dla zachowania proporcji 3:2 wysokość też trzeba zmniejszyć 10-krotnie: 2000 / 10 = 200 px. Liczba pikseli zależy od obu wymiarów: 3000 · 2000 = 6 000 000, a 300 · 200 = 60 000, czyli 100 razy mniej. Odpowiedź „10 razy” uwzględnia tylko jeden wymiar, a miniatury 300×300 i 300×150 px zniekształciłyby obraz.

Dlaczego tak

Grafika SVG jest wektorowa, więc przeglądarka rysuje ją ostro w każdym rozmiarze i przy każdej gęstości pikseli, a ikona SVG wstawiona w kod strony może mieć kolor wypełnienia ustawiany właściwością fill, także w pseudoklasie :hover. Pliki PNG i GIF są rastrowe — po powiększeniu na ekranach o wysokiej gęstości stają się rozmyte, a ich kolorów nie zmieni się regułą CSS. JPEG nie obsługuje przezroczystości.

Dlaczego tak

Każda sekunda nagrania to 44 100 próbek w każdym z 2 kanałów, po 16 bitów, czyli 2 bajty: 44 100 · 2 · 2 = 176 400 B/s. Przez 180 sekund daje to 176 400 · 180 = 31 752 000 B, czyli około 31,8 MB. Wynik 15,9 MB odpowiada nagraniu mono, 254 MB powstaje po pomyleniu bitów z bajtami, a 10,6 MB to rozmiar tylko jednej minuty nagrania.

Dlaczego tak

FFmpeg to bezpłatny zestaw narzędzi wiersza poleceń do konwersji, kodowania i przetwarzania plików audio i wideo — jedno polecenie w pętli skryptu przekonwertuje wszystkie pliki, np. ffmpeg -i film.mov -c:v libx264 film.mp4. Audacity edytuje tylko dźwięk, a GIMP — obrazy rastrowe. OBS Studio służy do nagrywania i transmisji obrazu z ekranu lub kamery na żywo, a nie do wsadowej konwersji gotowych plików.

Dlaczego tak

W skróconym zapisie właściwości transition pierwsza wartość czasu to czas trwania przejścia, a druga — opóźnienie jego rozpoczęcia. Przejście rusza więc 0,2 s po najechaniu kursorem i trwa 0,3 s, a kolor końcowy pojawia się po 0,2 + 0,3 = 0,5 s. Odpowiedź 0,3 s pomija opóźnienie, a 0,2 s myli opóźnienie z całkowitym czasem. Natychmiastowa zmiana nastąpiłaby bez reguły transition.

Dlaczego tak

Do okienka o szerokości około 1000 px wystarczy rozdzielczość Full HD, która zachowuje ostrość także na ekranach o podwyższonej gęstości pikseli, a dla filmu instruktażowego 30 kl./s jest w pełni płynne. H.264 w kontenerze MP4 odtwarza każda przeglądarka, a przepływność około 5 Mb/s daje dobrą jakość przy rozsądnym rozmiarze pliku. Wersje 4K przy 80 lub 400 Mb/s byłyby wielokrotnie większe i zacinałyby się na wolniejszych łączach, a GIF ma słabą jakość i bardzo duże pliki.

Dlaczego tak

Efekt redukcji szumu działa dwuetapowo: najpierw analizuje fragment zawierający wyłącznie szum, np. pauzę przed pierwszym zdaniem, aby ustalić jego profil częstotliwościowy, a następnie odejmuje ten profil od zaznaczonego całego nagrania. Odwrócenie kolejności sprawia, że efekt nie zna jeszcze profilu szumu. Profil pobrany z fragmentu z głosem spowodowałby usuwanie samego głosu, a wzmocnienie podnosi jednakowo głos i szum.

Dlaczego tak

Przeglądarka sprawdza elementy source po kolei i wybiera pierwszy, którego typ potrafi odtworzyć — plik Ogg pominie na podstawie atrybutu type, a użyje spot.mp3. Atrybut controls wyświetla odtwarzacz, a brak atrybutu autoplay oznacza, że dźwięk zacznie się po kliknięciu. Tekst wewnątrz elementu audio pokazują tylko przeglądarki, które w ogóle nie obsługują tego elementu, a nie te, które nie znają jednego z formatów.

Dlaczego tak

WordPress obsługuje mechanizm oEmbed: rozpoznaje adresy obsługiwanych serwisów, takich jak YouTube czy Vimeo, i zamienia wklejony adres w blok osadzania z odtwarzaczem. Film nadal jest przechowywany i przesyłany przez serwis zewnętrzny, więc nie obciąża hostingu ani limitu wielkości plików. WordPress nie pobiera filmu do biblioteki mediów, a zwykły link pozostałby tylko wtedy, gdyby adres wklejono w środku zdania.

Dlaczego tak

Właściwość grid-template-areas opisuje układ wierszami: pierwszy wiersz w całości zajmuje nagłówek, w drugim obszar menu leży w pierwszej kolumnie, a tresc w drugiej, trzeci wiersz zajmuje stopka. Pierwsza kolumna ma według grid-template-columns szerokość 200 px, a druga zajmuje resztę miejsca (1fr). Na całą szerokość rozciągają się tylko nagłówek i stopka, których nazwy powtórzono w obu kolumnach.

Dlaczego tak

Od całkowitej szerokości trzeba odjąć odstępy, których przy 12 kolumnach jest 11: 11 · 20 px = 220 px. Pozostałe 1180 − 220 = 960 px dzieli się na 12 kolumn, co daje 80 px. Wynik około 98,3 px powstaje po podzieleniu 1180 przez 12 bez uwzględnienia odstępów, a 78,3 px — po odjęciu 12 zamiast 11 odstępów. Wartość 100 px odpowiadałaby siatce o szerokości 1200 px bez odstępów.

Dlaczego tak

Element c ma flex: none, więc nie rośnie ani nie maleje i zajmuje stałe 300 px. Pozostałe 900 − 300 = 600 px elementy a i b dzielą w stosunku wartości flex-grow 1 : 2, bo skrót flex: 1 ustawia podstawę równą 0. Element a otrzymuje 200 px, a b — 400 px. Wynik 600 px to dwie trzecie całego kontenera, z pominięciem stałej szerokości elementu c.

Dlaczego tak

W modelu HSL pierwsza wartość to odcień, czyli kąt na kole barw. Paleta triadyczna składa się z trzech barw oddalonych od siebie o 120°: 30°, 30° + 120° = 150° i 150° + 120° = 270°. Odcienie 30°, 60° i 90° leżą obok siebie i tworzą paletę analogiczną, zestaw z 210° to barwa dopełniająca z rozjaśnieniem, a zmiana samej jasności przy stałym odcieniu daje paletę monochromatyczną.

Dlaczego tak

Własną czcionkę definiuje się regułą @font-face: deskryptor font-family nadaje jej nazwę, a src wskazuje plik i jego format. Potem można jej używać w zwykłej właściwości, np. body { font-family: "Inter", sans-serif; }. Reguła @font-family nie istnieje w CSS, @import dołącza arkusze stylów, a nie pliki czcionek, a właściwość font-family przyjmuje nazwy krojów, a nie adresy plików.

Dlaczego tak

Informacja przekazywana wyłącznie kolorem jest niedostępna dla osób z daltonizmem, dla których szara i czerwona ramka mogą wyglądać podobnie, oraz dla użytkowników czytników ekranu. Przy polu trzeba umieścić komunikat tekstowy opisujący błąd, np. „Podaj adres e-mail w formacie nazwa@domena.pl”, ewentualnie wraz z ikoną. Zamiana na zielony nie usuwa problemu, czytniki nie odczytują koloru ramek, a grubsza ramka nadal opiera się tylko na kolorze.

Dlaczego tak

Zasada funkcjonalności (ang. operable) dotyczy możliwości obsługi interfejsu: dostępności z klawiatury, wystarczającego czasu na wykonanie czynności, unikania treści wywołujących napady oraz ułatwień nawigacji. Tekst alternatywny dla obrazów realizuje zasadę postrzegalności, czytelne komunikaty o błędach — zasadę zrozumiałości, a poprawny kod interpretowany przez technologie wspomagające — zasadę solidności.

Dlaczego tak

Nazwę dostępną przycisku czytnik ekranu wylicza z jego zawartości — jeśli jedyną zawartością jest obraz, nazwą staje się tekst alternatywny tego obrazu, więc alt="Szukaj" sprawi, że usłyszymy „Szukaj, przycisk”. Pusty alt oznacza grafikę dekoracyjną i przycisk nadal nie miałby nazwy. Atrybut tabindex dotyczy kolejności fokusu, a przycisk już go otrzymuje, natomiast type="button" zmienia tylko działanie, a nie nazwę.

Dlaczego tak

Serwisy z tabelami zgodności, takie jak Can I use czy dokumentacja MDN, podają, od której wersji poszczególne przeglądarki obsługują daną funkcję i jaki odsetek użytkowników z niej korzysta. Dla starszych przeglądarek dodaje się styl zastępczy, np. z regułą @supports, a całość sprawdza w kilku przeglądarkach. Walidator W3C sprawdza zgodność ze specyfikacją, a nie obsługę w przeglądarkach. Pominięta reguła może rozbić układ strony.

Dlaczego tak

Tryb urządzenia w narzędziach deweloperskich (Ctrl+Shift+M po otwarciu panelu F12) ustawia szerokość obszaru roboczego na wybraną wartość lub profil konkretnego telefonu, emuluje gęstość pikseli i ekran dotykowy, dzięki czemu zadziałają reguły @media dla małych ekranów. Zmniejszanie powiększenia działa odwrotnie, niż się wydaje — powiększa szerokość obszaru wyrażoną w pikselach CSS. Widok źródła i walidator nie pokazują wyglądu strony.

Dlaczego tak

Walidator analizuje dokument po kolei, więc niezamknięty element sprawia, że dalsze znaczniki są interpretowane jako zagnieżdżone w niewłaściwym miejscu i generują kolejne, pozorne błędy. Dlatego błędy poprawia się od początku listy i po każdej poprawce ponownie uruchamia walidację, aż komunikatów nie będzie. Wyniki walidatora są powtarzalne, a każdy zgłoszony błąd — także wtórny — trzeba usunąć, dopóki występuje.

Dlaczego tak

PageSpeed Insights analizuje wydajność strony na urządzeniach mobilnych i komputerach, podaje wartości wskaźników Core Web Vitals, takich jak LCP, INP i CLS, oraz wskazuje, co spowalnia wczytywanie, np. zbyt duże obrazy czy skrypty blokujące renderowanie. Nu Html Checker i walidator CSS sprawdzają poprawność kodu względem specyfikacji, a WAVE ocenia dostępność strony dla osób z niepełnosprawnościami, nie jej szybkość.

Dlaczego tak

Wartość atrybutu id musi być unikalna w obrębie całego dokumentu, a tu obraz i drugi odnośnik mają ten sam identyfikator logo, co walidator zgłasza jako błąd (Duplicate ID). Atrybut title nie jest wymagany, a obraz ma wymagany tekst alternatywny. Element nav może zawierać odnośniki bezpośrednio, bez listy ul, a id jest atrybutem globalnym dostępnym dla każdego elementu, także img.