Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 13 kwietnia 2026 15:23
Data zakończenia: 13 kwietnia 2026 15:32

Egzamin zdany!

Wynik: 26/40 punktów (65,0%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Podczas obróbki dźwięku, aby eliminować niepożądane dźwięki wynikające z niskiej jakości mikrofonu, należy użyć narzędzia

A. usuwania szumów

B. wyciszenia

C. obwiedni

D. echa

Usuwanie szumów to kluczowa technika w przetwarzaniu dźwięku, pozwalająca na eliminację niepożądanych dźwięków, które mogą zakłócać jakość nagrania. Techniki te opierają się na analizie sygnału i identyfikacji częstotliwości, które nie są związane z pożądanym dźwiękiem. Narzędzia do usuwania szumów często wykorzystują algorytmy takie jak filtrowanie adaptacyjne, które dostosowują się do zmieniającego się środowiska akustycznego. Przykładem zastosowania usuwania szumów jest nagrywanie podcastów, gdzie tło dźwiękowe, takie jak hałas uliczny, jest usuwane, co pozwala na uzyskanie czystego i profesjonalnego brzmienia. Przy użyciu oprogramowania takiego jak Audacity czy Adobe Audition, użytkownicy mogą przeprowadzić analizę spektralną, aby zidentyfikować i usunąć niepożądane częstotliwości. Standardy dotyczące przetwarzania dźwięku, takie jak ITU-R BS.1387, podkreślają znaczenie eliminacji szumów dla poprawy jakości słyszalności i wrażeń akustycznych. W ten sposób usuwanie szumów nie tylko poprawia jakość dźwięku, ale także zwiększa zrozumiałość mowy i klarowność nagrań.

Pytanie 2

Jaką rozdzielczość przyjmuje standard HDTV?

A. 1280x1024 px

B. 704x576 px

C. 720x480 px

D. 1920x1080 px

Standard HDTV (High Definition Television) definiuje różne rozdzielczości, z których 1920x1080 px, znana również jako Full HD (FHD), jest jedną z najpopularniejszych. Ta rozdzielczość oznacza 1920 pikseli w poziomie oraz 1080 pikseli w pionie, co zapewnia proporcje obrazu 16:9. Dzięki tak wysokiej liczbie pikseli, Full HD oferuje znacznie większą szczegółowość i ostrość obrazu w porównaniu do standardów SD (Standard Definition). Rozdzielczość 1920x1080 px jest powszechnie stosowana w telewizorach, monitorach komputerowych, projektorach oraz w streamingu treści wideo, co czyni ją uniwersalnym standardem w branży. Przykłady zastosowań obejmują transmisje telewizyjne, filmy Blu-ray, gry wideo oraz platformy streamingowe, które często oferują treści w tej rozdzielczości. Ponadto, standard HDTV obejmuje również inne rozdzielczości, takie jak 1280x720 px (HD Ready), jednak 1920x1080 px pozostaje złotym standardem dla jakości obrazu.

Pytanie 3

Który z poniższych formatów nie umożliwia zapisu plików animowanych?

A. SVG

B. SWF

C. GIF

D. ACE

GIF, SWF i SVG to popularne formaty, które umożliwiają przechowywanie animacji. GIF, czyli Graphics Interchange Format, od lat jest standardem w sieci do tworzenia prostych animacji. Dzięki możliwości zapisywania sekwencji obrazów w jednym pliku, GIF umożliwia tworzenie krótkich klipów animowanych, które są powszechnie wykorzystywane w mediach społecznościowych, takich jak Twitter czy Facebook. Format ten obsługuje do 256 kolorów z palety, co sprawia, że jest idealny do prostych animacji, ale mniej skuteczny w przypadku bardziej złożonych obrazów kolorowych. SWF, lub Shockwave Flash, jest innym formatem, który został zaprojektowany przez firmę Adobe do tworzenia interaktywnych aplikacji i animacji w sieci. Umożliwia on osadzanie dźwięku, wideo oraz zaawansowane animacje, co czyni go bardzo wszechstronnym narzędziem dla twórców treści internetowych. SVG, z angielskiego Scalable Vector Graphics, to format oparty na XML, który obsługuje grafikę wektorową oraz animacje. Dzięki zastosowaniu technologii HTML5, SVG pozwala na dynamiczne animacje i interaktywność, co znacząco zwiększa jego zastosowanie w nowoczesnych aplikacjach internetowych. W związku z tym, te trzy formaty są niewątpliwie przystosowane do tworzenia i zapisywania plików animowanych, co czyni je nieodpowiednimi odpowiedziami w kontekście pytania.

Pytanie 4

Jak powinna wyglądać odpowiednia sekwencja procesów przetwarzania dźwięku z analogowego na cyfrowy?

A. próbkowanie, kodowanie, kwantyzacja

B. kwantyzacja, kodowanie, próbkowanie

C. próbkowanie, kwantyzacja, kodowanie

D. kwantyzacja, próbkowanie, kodowanie

Wybór niepoprawnych odpowiedzi pokazuje, że pewnie nie do końca zrozumiałeś, jak te procesy przetwarzania dźwięku powinny przebiegać. Pierwszy błąd to pominięcie jednego z kluczowych kroków, co może mylić, bo nie jest jasne, jak właściwie przekształcamy sygnał analogowy w cyfrowy. Jeśli byś kodował dane przed kwantyzacją, to mogłoby to zniekształcić informacje przez brak zaokrągleń, co sprawiłoby, że dane nie oddają oryginału. Z kolei, jeśli nie rozumiesz, że kwantyzacja ma być po próbkowaniu, to może się wydawać, że dźwięk przechodzi w formę cyfrową w dziwny sposób. W efekcie, może się zdarzyć, że nie oddasz właściwego zakresu dynamiki, co znacznie pogorszy jakość dźwięku. Może być tak, że dźwięk będzie zniekształcony albo straci ważne szczegóły, przez co będzie trudny do słuchania. Fajnie by było, żebyś lepiej zrozumiał te procesy, bo są mega ważne dla każdego, kto działa w inżynierii dźwięku lub produkcji muzycznej.

Pytanie 5

W kodzie HTML atrybut alt w tagu img służy do określenia

A. opisu, który pojawi się pod obrazem

B. atrybutów obrazu, takich jak rozmiar, ramka, wyrównanie

C. tekstu, który będzie prezentowany, gdy obraz nie może być załadowany

D. ścieżki oraz nazwy pliku źródłowego

Atrybut alt w znaczniku img w HTML to naprawdę ważny element, jeśli chodzi o dostępność stron www. Jego głównym zadaniem jest pomóc osobom z problemami ze wzrokiem zrozumieć, co widnieje na obrazku. Jeśli nie da się wyświetlić grafiki – na przykład przez zły internet czy błąd w ścieżce do pliku – tekst w atrybucie alt pokazuje się jako alternatywa. Na przykład <img src='example.jpg' alt='Zachód słońca nad morzem'>, co by ułatwiło osobom korzystającym z czytników ekranu zrozumienie treści. Warto też pamiętać, że ten atrybut ma znaczenie dla SEO, bo wyszukiwarki mogą go wykorzystać do lepszego zrozumienia zawartości strony, co wpływa na jej indeksowanie. Ogólnie rzecz biorąc, używanie odpowiednich atrybutów alt to dobra praktyka w budowaniu stron www.

Pytanie 6

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. przekształcić obraz w odcienie szarości

B. obniżyć rozdzielczość obrazu

C. zaimportować obraz do edytora grafiki wektorowej

D. dodać kanał alfa

Dodanie kanału alfa do obrazu jest kluczowym krokiem, aby przekształcić JPEG w PNG z zachowaniem przezroczystości. Format PNG obsługuje kanał alfa, który może przechowywać informacje o przezroczystości każdego piksela, co oznacza, że można zdefiniować, które części obrazu są w pełni widoczne, a które są całkowicie przezroczyste. W praktyce, po dodaniu kanału alfa, można użyć narzędzi edycyjnych, aby ustawić białe obszary na przezroczyste. Na przykład w programie GIMP lub Adobe Photoshop, można użyć narzędzia 'Magiczne różdżka' do zaznaczenia białego tła, a następnie usunąć je, co zamieni białe piksele na przezroczystość. Istotne jest, aby pamiętać, że JPEG nie wspiera przezroczystości, dlatego przekształcenie do formatu PNG jest niezbędne. Dobrą praktyką jest zawsze pracować na kopii oryginalnego obrazu, aby móc wrócić do źródłowego pliku, jeśli zajdzie taka potrzeba.

Pytanie 7

Jaką operację należy przeprowadzić podczas edycji zdjęcia w programie graficznym, żeby białe tło zamienić na przezroczystość?

A. Skadrować obraz

B. Dodać kanał alfa

C. Zmienić saturację obrazu

D. Maksymalnie zmniejszyć jasność

Dodanie kanału alfa to naprawdę ważna rzecz, jeśli chodzi o robienie przezroczystego tła w grafice rastrowej. Kanał alfa działa jak dodatkowa warstwa, która mówi komputerowi, które piksele mają być przezroczyste. Dzięki temu możemy ładnie wycinać tło, które nam nie pasuje, nie niszcząc całego obrazu. Na przykład, kiedy edytujesz zdjęcie w Photoshopie, żeby zmienić białe tło na przezroczystość, trzeba najpierw dodać ten kanał alfa. Potem można użyć narzędzia do zaznaczania, jak choćby Magic Wand, żeby wybrać to białe tło i je usunąć. W efekcie zostaje tylko obiekt na przezroczystym tle. W branży graficznej dodawanie kanału alfa i zabawa z przezroczystością to już standard. To pozwala na tworzenie naprawdę ładnych obrazów, które można potem wykorzystać w różnych miejscach, jak strony internetowe czy ulotki. Znajomość tego, jak działa kanał alfa, jest super ważna dla każdego grafika, który chce dobrze radzić sobie z obrazami w różnych formatach.

Pytanie 8

Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?

A. łączanie warstw.

B. kadrowanie.

C. odwracanie obrazu.

D. zmiana rozmiaru.

Kadrowanie to taka technika, która pomaga nam lepiej uchwycić to, co najważniejsze w obrazie. Wycinając niektóre fragmenty grafiki, skupiamy uwagę na tym, co naprawdę się liczy. Dobrze jest to mieć na uwadze, zwłaszcza przy zdjęciach portretowych, gdzie chcemy, żeby wzrok przyciągała twarz modela, a nie jakieś niepotrzebne tło. Kiedy kadrujemy, warto pamiętać o takich zasadach jak zasada trzecich, bo to pomaga zrobić fajną kompozycję. Można to robić w wielu programach graficznych, jak na przykład Adobe Photoshop czy GIMP. Tak w ogóle, dobrze jest dbać o proporcje i rozdzielczość, żeby obraz nie stracił na jakości. Gadżetem kadrowania można się też posługiwać w projektowaniu stron www, bo odpowiednie wybory graficzne poprawiają estetykę i funkcjonalność strony.

Pytanie 9

W jakim typie pliku powinno się zapisać zdjęcie, aby mogło być wyświetlane na stronie WWW z zachowaniem efektu przezroczystości?

A. BMP

B. PNG

C. CDR

D. JPG

Format PNG (Portable Network Graphics) jest idealnym wyborem do przechowywania obrazów z przezroczystością, ponieważ obsługuje kanał alfa, który pozwala na reprezentację przezroczystości w obrazach. Ta cecha jest szczególnie cenna w projektowaniu stron internetowych, gdzie grafiki muszą być dopasowane do różnych tła bez widocznych krawędzi. Przykładowo, logo firmy zapisane w formacie PNG może być umieszczone na stronie o różnych kolorach tła, zachowując estetyczny wygląd i nie zaburzając kompozycji. Ponadto, PNG jest formatem bezstratnym, co oznacza, że zachowuje jakość oryginalnego obrazu podczas kompresji, co jest ważne, gdy zależy nam na zachowaniu szczegółów i kolorów. W praktyce, wiele przeglądarek internetowych i edytorów graficznych obsługuje ten format, co czyni go standardem w branży. Dlatego dla grafik z przezroczystością PNG jest najczęściej zalecanym formatem, zgodnym z aktualnymi standardami i najlepszymi praktykami w dziedzinie projektowania stron internetowych.

Pytanie 10

Jaką cechę posiada format PNG?

A. wsparcie dla animacji

B. brak wsparcia dla kanału alfa

C. bezstratna kompresja

D. zapis grafiki wektorowej

Format PNG (Portable Network Graphics) jest popularnym formatem graficznym, który charakteryzuje się bezstratną kompresją. Oznacza to, że obraz zapisywany w tym formacie nie traci żadnych informacji ani jakości w procesie kompresji, co jest kluczowe w zastosowaniach wymagających wysokiej precyzji, takich jak grafika komputerowa, projektowanie stron internetowych oraz obróbka zdjęć. Bezstratna kompresja w formacie PNG opiera się na algorytmie DEFLATE, co sprawia, że pliki PNG zachowują maksymalną jakość wizualną. Przykładem praktycznego zastosowania PNG jest używanie go do przechowywania ikon, logo oraz innych grafik, które wymagają przezroczystości oraz wysokiej jakości. Dodatkowo format ten obsługuje kanały alfa, co pozwala na uzyskanie efektów przezroczystości w obrazach, czyniąc go niezwykle wszechstronnym narzędziem w projektowaniu graficznym. W branży internetowej stosowanie formatu PNG zyskuje na popularności z uwagi na jego wszechstronność i jakość, co jest zgodne z najlepszymi praktykami w tworzeniu zasobów wizualnych.

Pytanie 11

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }

A. każdy punkt listy zyska osobne tło z grafiki rys.gif

B. rys.gif stanie się ramką dla listy nienumerowanej

C. punkt listy nienumerowanej będzie rys.gif

D. rys.gif wyświetli się jako tło dla listy nienumerowanej

Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 12

Grafika powinna być zapisana w formacie GIF, jeśli

A. jest to grafika wektorowa

B. istnieje potrzeba zapisu obrazu w formie bez kompresji

C. jest to obraz w technologii stereoskopowej

D. konieczne jest zapisanie obrazu lub animacji

Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.

Pytanie 13

Kolor zaprezentowany na ilustracji, zapisany w modelu RGB, w formacie szesnastkowym będzie określony w następujący sposób

A. 71A0B2

B. 77A1C1

C. 76A3C1

D. 77A0C1

Błędne odpowiedzi wynikają z niepoprawnej konwersji wartości RGB na zapis szesnastkowy. Przy konwersji kolorów z modelu RGB na system szesnastkowy kluczowe jest poprawne przeliczenie każdej z trzech składowych: czerwonego zielonego i niebieskiego. Wartości te w modelu RGB wahają się od 0 do 255 co w systemie szesnastkowym odpowiada wartościom od 00 do FF. Niewłaściwe zrozumienie tego procesu prowadzi do błędnych wyników. W przykładzie wartość 119 dla czerwonego należy przeliczyć na 77 w systemie szesnastkowym. Podobnie 160 dla zielonego konwertuje się na A0 a 193 dla niebieskiego na C1. Powszechny błąd polega na pomyleniu wartości dziesiętnych z ich odpowiednikami szesnastkowymi bądź na niepoprawnym zaokrąglaniu podczas konwersji. Innym częstym błędem jest niepoprawne zrozumienie znaczenia kolejności zapisu gdzie każda para znaków odpowiada jednej składowej RGB. Aby uniknąć takich błędów warto korzystać z kalkulatorów konwersji lub narzędzi graficznych które automatycznie dokonują prawidłowej zamiany co jest zgodne z dobrymi praktykami projektowymi. Znajomość tych zasad jest kluczowa w pracy z grafiką komputerową i web designem gdzie precyzja w odwzorowaniu kolorów ma ogromne znaczenie dla ostatecznego wyglądu projektu.

Pytanie 14

W systemie kolorów RGB kolor żółty uzyskuje się przez zmieszanie dwóch barw: zielonej i czerwonej. Jaki kod szesnastkowy reprezentuje kolor żółty?

A. #F0F0F0

B. #FF00FF

C. #FFFF00

D. #00FFFF

Kolor żółty w palecie RGB jest uzyskiwany przez połączenie maksymalnej wartości czerwonego (FF) oraz maksymalnej wartości zielonego (FF), przy zerowej wartości niebieskiego (00). Kod szesnastkowy #FFFF00 oznacza, że czerwony ma wartość 255 (FF), zielony również ma wartość 255 (FF), a niebieski ma wartość 0 (00). Przykładowe zastosowanie koloru żółtego znajduje się w projektowaniu graficznym, gdzie jest on często wykorzystywany do wyróżniania istotnych elementów, takich jak przyciski lub informacje, które mają przyciągnąć uwagę użytkownika. W kontekście aplikacji internetowych, stosowanie barw RGB zgodnie z ich reprezentacją szesnastkową jest zgodne z dobrymi praktykami w zakresie UX/UI, zapewniając spójność i czytelność interfejsów. Standardy dotyczące kolorów, takie jak WCAG, również zalecają odpowiednie kontrasty, które można osiągnąć przy użyciu kolorów takich jak żółty. Poznanie różnych kodów kolorów oraz ich zastosowań jest kluczowe dla skutecznego projektowania wizualnego, co przyczynia się do lepszej interakcji użytkownika z aplikacjami i stronami internetowymi.

Pytanie 15

Jakie czynniki wpływają na wysokość dźwięku?

A. częstotliwość drgań fali akustycznej

B. intensywność wzbudzenia drgań

C. czas oscylacji źródła dźwięku

D. metoda wzbudzania drgań

Częstotliwość drgań fali akustycznej to taki kluczowy element, który wpływa na to, jak wysoko brzmi dźwięk. Mówiąc prosto, to ilość drgań, które źródło dźwięku wykonuje w danym czasie, zwykle mierzona w Hertzach (Hz). Im wyższa ta częstotliwość, tym wyższy dźwięk wydobywają instrumenty muzyczne. Na przykład na gitarze, jak skrócisz strunę, to dźwięk staje się wyższy, co jest zgodne z tym, co mówi fizyka akustyczna. W inżynierii dźwięku często korzysta się z filtrów i equalizerów, żeby odpowiednio dostosować dźwięki w nagraniach. Rozumienie tego jest ważne nie tylko w muzyce, ale i w technologiach audio. Projektanci dźwięku muszą dobrze znać te zasady, aby móc stworzyć odpowiednie efekty dźwiękowe. Więc, ogólnie mówiąc, znajomość tego, jak częstotliwość wiąże się z wysokością dźwięku, jest istotna dla każdej osoby związanej z dźwiękiem, zarówno w teorii, jak i w praktyce.

Pytanie 16

Który z poniższych typów plików NIE JEST używany do publikacji grafiki lub animacji na stronach www?

A. AIFF

B. SWF

C. PNG

D. SVG

AIFF (Audio Interchange File Format) to format plików dźwiękowych, który nie jest wykorzystywany do publikacji grafiki ani animacji na stronach internetowych. Jego głównym zastosowaniem jest przechowywanie wysokiej jakości dźwięku, dlatego znajdujemy go często w produkcjach audio i nagraniach muzycznych. W przeciwieństwie do formatów jak SVG (Scalable Vector Graphics), SWF (Shockwave Flash) czy PNG (Portable Network Graphics), które są przeznaczone do grafiki i animacji, AIFF nie jest odpowiedni do wizualizacji treści w sieci. Przykładowo, SVG jest często wykorzystywany do tworzenia skalowalnych grafik wektorowych, które są popularne w projektowaniu stron internetowych, a PNG jest formatem rastrowym, który świetnie sprawdza się w przypadku obrazów z przezroczystością. W kontekście publikacji internetowych, kluczowe jest stosowanie odpowiednich formatów, które zapewniają optymalizację i zgodność z różnymi przeglądarkami, a AIFF nie spełnia tych wymagań.

Pytanie 17

Funkcje takie jak rozmycie Gaussa, wygładzanie oraz szum RGB są elementami oprogramowania do przetwarzania

A. Grafiki rastrowej

B. Ścieżki audio

C. Grafiki wektorowej

D. Dźwięku w standardzie MIDI

Wybór odpowiedzi związanej z dźwiękiem, zarówno w formacie MIDI, jak i ścieżką dźwiękową, jest błędny, ponieważ techniki takie jak rozmycie Gaussa, wygładzanie i szum RGB odnoszą się bezpośrednio do przetwarzania obrazów, a nie dźwięku. Format MIDI jest standardem do komunikacji muzycznej pomiędzy instrumentami, w którym wykorzystuje się dane dotyczące nut, ich intensywności oraz czasu trwania, a nie techniki graficzne. Ścieżka dźwiękowa, podobnie, koncentruje się na audio i nie ma zastosowania dla funkcji typowych dla grafiki. W kontekście grafiki wektorowej, która opiera się na matematycznych modelach kształtów i nie opiera się na siatce pikseli, techniki rozmycia i wygładzania nie są używane w sposób, w jaki są stosowane w grafice rastrowej. Zasadniczo, grafika wektorowa wykorzystuje inne narzędzia i techniki do obróbki, które są bardziej związane z kształtami i konturami projektów. Typowym błędem myślowym w tym przypadku jest pomylenie mediów cyfrowych i zasadniczych różnic w ich obróbce. Wiedza na temat tych różnic jest kluczowa dla skutecznego przetwarzania danych wizualnych oraz audio, a sukces w tych dziedzinach wymaga znajomości odpowiednich technik i narzędzi.

Pytanie 18

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}

A. pokazany obok każdego akapitu

B. tłem całej witryny

C. widoczny, jeśli zastosowany zostanie znacznik img w kodzie

D. tłem dla każdego akapitu

Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 19

Który z poniższych typów plików jest plikiem rastrowym?

A. SVG

B. CDR

C. SWF

D. TIFF

Wybór innych formatów plików, takich jak SVG, SWF czy CDR, wskazuje na nieporozumienia dotyczące klasyfikacji formatów graficznych. SVG (Scalable Vector Graphics) to wektorowy format graficzny, który umożliwia tworzenie grafiki opartej na matematycznych kształtach, co czyni go idealnym do tworzenia logo i ikon. Jego elastyczność i skalowalność są kluczowe w projektach, gdzie jakość obrazu musi być zachowana niezależnie od rozmiaru. Natomiast SWF (Shockwave Flash) był używany do animacji i interaktywnych aplikacji w internecie, ale nie jest formatem graficznym w tradycyjnym sensie, a jego użyteczność spadła wraz z deprecjacją technologii Flash. CDR to natomiast format pliku stworzony przez CorelDRAW, który jest narzędziem do tworzenia grafiki wektorowej. Wybierając te formaty jako odpowiedzi, można mylnie zinterpretować, że są one związane z grafiką rastrową, podczas gdy każdy z nich ma inną specyfikę i zastosowanie. Zrozumienie różnicy między formatami rastrowymi a wektorowymi jest kluczowe dla każdego, kto pracuje z grafiką komputerową. Typowe błędy w myśleniu obejmują mylenie grafiki wektorowej z rastrową lub błędne przypisanie funkcji do formatów, co prowadzi do nieoptymalnych wyborów w kontekście projektowania graficznego.

Pytanie 20

Jakie jest znaczenie powtarzania w zdefiniowanym stylu CSS?

body {
   background-image: url("rysunek.gif");
   background-repeat: repeat-y;
 }

A. obrazu umieszczonego w tle strony w pionie

B. tła każdego z paragrafów

C. obrazu umieszczonego przy użyciu znacznika img

D. obrazu umieszczonego w tle strony w poziomie

Odpowiedź dotycząca powtarzania rysunku umieszczonego w tle strony w pionie jest prawidłowa ponieważ w załączonej definicji stylu CSS użyto właściwości background-repeat z wartością repeat-y Wartość ta oznacza że obrazek tła będzie powtarzał się tylko w kierunku pionowym natomiast w kierunku poziomym pozostaje pojedynczym obrazem Funkcja ta jest szczególnie przydatna gdy chcemy stworzyć efekt kontynuacji wzoru lub tekstury na całej wysokości strony ale nie potrzebujemy powtarzania w poziomie Dzięki takim właściwościom CSS jak background-image i background-repeat projektanci stron internetowych mają dużą elastyczność w rozmieszczaniu i stylizacji tła Co więcej pozwala to na optymalizację zasobów w przypadku gdy używane są małe pliki graficzne które zajmują mniej miejsca na serwerze niż duże obrazy Zrozumienie tych mechanizmów jest kluczowe dla tworzenia efektywnych i estetycznych projektów zgodnych z dobrymi praktykami branżowymi takimi jak unikanie zbędnych powtórzeń w wyglądzie strony i dostosowywanie się do różnorodnych rozdzielczości ekranów

Pytanie 21

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?

A. <img href="kotek.jpg" alt="obrazek kotka">

B. <img src="kotek.jpg" title="obrazek kotka">

C. <img href="kotek.jpg" title="obrazek kotka">

D. <img src="kotek.jpg" alt="obrazek kotka">

Odpowiedź <img src="kotek.jpg" alt="obrazek kotka"> jest poprawna, ponieważ zawiera element <img>, który jest standardowym rozwiązaniem do wyświetlania obrazów w dokumentach HTML. Atrybut src określa ścieżkę do pliku obrazu, co jest kluczowe dla poprawnego załadowania grafiki na stronie. Atrybut alt z kolei pełni istotną rolę w zapewnieniu dostępności treści; tekst alternatywny wyświetla się w przypadku, gdy obraz nie może zostać załadowany lub jest odczytywany przez programy dla osób niewidomych. Zastosowanie odpowiednich atrybutów jest zgodne z wytycznymi W3C dotyczącymi dostępności, co pozwala na tworzenie bardziej przyjaznych dla użytkowników stron internetowych. W praktyce, prawidłowe wykorzystanie atrybutu alt jest również korzystne dla SEO, ponieważ wyszukiwarki analizują te opisy przy ocenie kontekstu strony. Ważne jest, aby zawsze stosować zarówno src, jak i alt, aby zapewnić pełnię funkcji obrazu na stronie.

Pytanie 22

Który z wymienionych formatów umożliwia zapisanie materiału wideo z towarzyszącą ścieżką dźwiękową?

A. WMA

B. WAV

C. MP4

D. AAC

Odpowiedź MP4 jest poprawna, ponieważ jest to jeden z najpopularniejszych formatów kontenerowych używanych do przechowywania wideo wraz z dźwiękiem. Format MP4 (MPEG-4 Part 14) pozwala na efektywne kodowanie wideo, przy jednoczesnym zachowaniu wysokiej jakości obrazu i dźwięku. Umożliwia on przechowywanie różnorodnych strumieni danych, w tym wideo, audio, a także tekstu, co czyni go bardzo wszechstronnym rozwiązaniem dla twórców multimediów. Przykładowo, format MP4 jest często używany w aplikacjach do strumieniowania wideo, takich jak YouTube, oraz w systemach zarządzania treścią (CMS) do publikacji materiałów wideo w Internecie. Dzięki kompresji zgodnej z kodekiem H.264 dla wideo i AAC dla audio, pliki MP4 są względnie małe, co ułatwia ich przesyłanie i przechowywanie. To czyni format MP4 standardem branżowym w produkcji filmowej, telewizyjnej oraz w aplikacjach mobilnych i webowych.

Pytanie 23

Grafik pragnie zmienić obraz JPG na format PNG bez utraty jakości, tak aby w obszarach, gdzie pierwotnie był kolor biały, w finalnym obrazie występowała przezroczystość. W tym celu powinien

A. zmniejszyć rozdzielczość obrazu

B. zaimportować obraz do edytora grafiki wektorowej

C. przekształcić obraz w odcienie szarości

D. dodać kanał alfa

Zarówno zmniejszenie rozdzielczości obrazu, jak i przekształcenie go w odcienie szarości są podejściami, które nie spełniają wymagań postawionych w pytaniu. Zmniejszenie rozdzielczości oznacza, że zmniejszamy liczbę pikseli w obrazie, co skutkuje utratą detali i jakości, co jest zupełnie niezgodne z celem przekształcenia bez utraty jakości. Takie działanie nie ma również związku z dodawaniem przezroczystości, a może wręcz pogorszyć wizualną jakość końcowego obrazu. Ponadto, konwersja obrazu do odcieni szarości eliminuje wszystkie kolory, co sprawia, że problem z białym kolorem, który ma zostać przekształcony w przezroczystość, staje się bezprzedmiotowy. Importowanie obrazu do edytora grafiki wektorowej, chociaż może być użyteczne w niektórych przypadkach, nie jest odpowiednim narzędziem do przekształcania bitmapy z JPG na PNG z przezroczystością. Grafika wektorowa jest oparta na matematycznych formułach, a nie na pikselach, więc nie można w prosty sposób przenieść bitmapowych właściwości obrazu. Podejścia te mogą prowadzić do błędnych wniosków, w których użytkownicy mogą sadzić, że redukcja jakości i przekształcanie kolorów są wystarczającymi krokami do osiągnięcia zamierzonych efektów graficznych.

Pytanie 24

Jakiej opcji w edytorze grafiki rastrowej należy użyć, aby przygotować obraz do wyświetlenia na stronie w taki sposób, aby widoczna była tylko część znajdująca się w obrębie ramki?

A. Kadrowanie

B. Perspektywa

C. Odbicie

D. Skalowanie

Odbicie polega na symetrycznym odwróceniu obrazu i choć jest użyteczne w niektórych kontekstach artystycznych, nie ma związku z wyborem fragmentu obrazu do wyświetlania. Perspektywa to technika zmieniająca głębię i kąt widzenia, co może być użyteczne w tworzeniu wrażenia trójwymiarowości, ale nie rozwiązuje problemu selekcji widocznych elementów. Skalowanie dotyczy zmiany rozmiaru obrazu, co jest przydatne przy dostosowywaniu grafiki do różnych rozdzielczości, ale nie zapewnia wycięcia określonego fragmentu. Często błędem jest myślenie, że skalowanie zastępuje kadrowanie, jednak zmniejsza ono cały obraz, nie pozwalając na skupienie się na wybranej części. Te nieporozumienia mogą wynikać z braku zrozumienia różnych narzędzi edycji, które mają swoje specyficzne zastosowania. Kadrowanie jest jedyną metodą, która pozwala na selektywne wycięcie i prezentację obszaru obrazu, co jest niezbędne przy projektowaniu elementów stron internetowych. Właściwe opanowanie różnych funkcji edytora grafiki jest kluczowe dla osiągnięcia profesjonalnych efektów wizualnych i optymalizacji projektu. Każda technika ma swoje unikalne zastosowania, a umiejętność ich odpowiedniego użycia wpływa na jakość końcowego produktu multimedialnego. Dlatego zrozumienie różnic między tymi funkcjami jest istotne dla skutecznej pracy z grafiką cyfrową.

Pytanie 25

Najprostszy sposób zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2 polega na

A. animowaniu obiektu.

B. zmianie warstwy obiektu.

C. geometrycznym transformowaniu obiektu.

D. narysowaniu docelowego obiektu.

Wybrałeś poprawną odpowiedź, która jest 'geometrycznym transformowaniem obiektu'. Kiedy mówimy o transformacji geometrycznej, mamy na myśli różne operacje, które można wykonać na obiektach, takie jak skalowanie, obracanie i przesuwanie. W przypadku obiektu oznaczonego numerem 1 i numerem 2 na obrazku, najprostszym sposobem na przekształcenie jednego w drugi jest używanie transformacji geometrycznej. Obiekt numer 2 jest większy i obrócony w stosunku do obiektu numer 1. Dzięki transformacjom geometrycznym mogliśmy osiągnąć ten efekt, skalując i obracając obiekt numer 1. Transformacje geometryczne są podstawą wielu operacji w dziedzinach takich jak grafika komputerowa, projektowanie CAD, animacja, a także w wielu innych dziedzinach technologii i nauki.

Pytanie 26

Kolor określony kodem RGB, mający wartość rgb(255, 128, 16) w przedstawieniu szesnastkowym, przyjmie jaką wartość?

A. #ff8010

B. #ff0fl0

C. #008010

D. #ff8011

Odpowiedź #ff8010 jest trafna. Konwersja wartości RGB na szesnastkowy to w sumie przekształcanie kolorów: czerwony, zielony i niebieski. W przypadku rgb(255, 128, 16), czerwony (255) zmienia się w 'ff', zielony (128) w '80', a niebieski (16) w '10'. Gdy to wszystko połączymy, dostajemy kod #ff8010. To wiedza, która naprawdę się przydaje, gdy pracujesz z kolorami w stronach www, aplikacjach graficznych czy przy projektowaniu interfejsów. W branży IT używanie standardu RGB i konwersji do HEX to normalka, bo to pozwala na dokładne określenie kolorów w kodzie. Na przykład, w CSS łatwo będzie używać kolorów w tym formacie, a to pomaga w lepszej czytelności kodu.

Pytanie 27

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. tłem każdego akapitu

B. tłem całej witryny

C. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

D. widoczny obok każdego akapitu

Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 28

W edytorze grafiki wektorowej stworzono przedstawiony kształt, który powstał z dwóch figur: trójkąta i koła. W celu stworzenia tego kształtu, po narysowaniu figur i odpowiednim ich ustawieniu, należy skorzystać z funkcji

A. rozdzielenia.

B. różnicy.

C. wykluczenia.

D. sumy.

Dobrze, że wybrałeś odpowiedź 'Sumy'. W rzeczywistości, aby uzyskać efekt przedstawiony na zdjęciu w edytorze grafiki wektorowej, trzeba skorzystać z opcji 'Sumy'. Ta funkcja łączy dwie różne figury w jedną, co pozwala na tworzenie złożonych kształtów. W praktyce, po rysowaniu i odpowiednim ustawieniu figurek, funkcja 'Sumy' jest używana do ich połączenia, tworząc unikalny obiekt. Taka metoda jest często stosowana w przemyśle graficznym, zwłaszcza w projektowaniu logo, gdzie unikalne kształty są istotne. Jest to zgodne ze standardami i dobrymi praktykami w branży graficznej, które zalecają efektywne wykorzystanie narzędzi edytora grafiki wektorowej do tworzenia złożonych kształtów.

Pytanie 29

W ramce przedstawiono właściwości pliku graficznego:

Wymiary:	4272 x 2848px
Rozdzielczość:	72 dpi
Format:	JPG

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

A. zwiększyć rozdzielczość.

B. zmniejszyć wymiary rysunku.

C. zmienić format grafiki na CDR.

D. zmienić proporcje szerokości do wysokości.

Odpowiedź jest poprawna. Czas ładowania obrazu na stronę WWW jest w dużej mierze zależny od jego rozmiaru. Zasada jest prosta: im mniejszy rozmiar pliku, tym szybciej zostanie załadowany. Zmniejszenie wymiarów rysunku prowadzi do zmniejszenia rozmiaru pliku, co optymalizuje czas ładowania. W praktyce, oznacza to, że jeżeli masz obraz o wymiarach 2000x2000 pikseli, a na stronie prezentowany jest w wymiarach 500x500 pikseli, to wartość ta jest zdecydowanie za duża i może spowalniać ładowanie strony. Dobrą praktyką jest dostosowanie rozmiaru obrazu do rozmiaru, w jakim ma być wyświetlany na stronie. Warto jednak pamiętać, że zmniejszanie rozmiaru obrazu może wpływać na jego jakość, dlatego ważne jest znalezienie odpowiedniego balansu pomiędzy czasem ładowania a jakością prezentowanego rysunku.

Pytanie 30

Jednostka ppi (pixels per inch) odnosi się do rozdzielczości?

A. określa rozdzielczości obrazów wytwarzanych przez drukarki oraz plotery

B. jest wskaźnikiem definiującym rozdzielczość cyfrowych urządzeń dokonujących pomiarów

C. jest miarą rozdzielczości skanerów, definiującą częstotliwość próbkowania obrazu

D. określa rozdzielczość obrazów rastrowych

Zrozumienie pojęcia PPI (pixels per inch) jest kluczowe dla efektywnego zarządzania grafiką cyfrową, a podawanie PPI jako parametru odniesienia do rozdzielczości innych urządzeń, takich jak skanery lub drukarki, jest mylne. PPI odnosi się ściśle do rozdzielczości obrazów rastrowych, które są tworzone z pikseli. Pojęcia, takie jak rozdzielczość skanerów, odnoszą się do innej jednostki miary, zazwyczaj określanej w DPI (dots per inch), która określa liczbę kropli tuszu lub punktów, jakie maszyna może nałożyć na cal. To prowadzi do nieporozumień w interpretacji, ponieważ DPI i PPI, mimo że są używane w kontekście jakości obrazu, służą różnym celom. W przypadku rozdzielczości generowanej przez drukarki i plotery, ich wydajność nie jest bezpośrednio związana z PPI, lecz raczej z DPI, co ma kluczowe znaczenie w kontekście technik druku oraz jakości uzyskiwanych wydruków. W praktyce, błędne zrozumienie tych jednostek może prowadzić do zaprojektowania grafiki, która nie spełnia oczekiwań jakościowych, co jest szczególnie istotne w sytuacjach, gdy precyzja i szczegółowość są kluczowe, takich jak w projektach reklamowych czy publikacjach. Dlatego istotne jest, aby zawsze odnosić się do właściwych jednostek miary w zależności od kontekstu zastosowania, co umożliwia optymalne wykorzystanie zasobów i osiągnięcie zamierzonych rezultatów w projektowaniu graficznym.

Pytanie 31

Podczas definiowania koloru w formacie RGBA, na przykład rgba(100, 40, 50, 0.2), ostatnia liczba odnosi się do

A. saturacji barw RGB

B. przezroczystości, gdzie 0 oznacza pełną przezroczystość, a 1 jej brak

C. nasycenia koloru czarnego

D. przezroczystości, gdzie 1 oznacza pełną przezroczystość, a 0 jej brak

Wybór wartości, które nie odnoszą się do przezroczystości, może prowadzić do nieporozumień w zakresie interpretacji koloru w grafice komputerowej. Nasycenie koloru czarnego lub saturacja barw RGB są terminami, które odnoszą się do intensywności koloru lub jego czystości, ale nie mają nic wspólnego z przezroczystością. Saturacja określa, jak bardzo dany kolor jest odległy od szarości; im wyższa saturacja, tym kolor jest bardziej intensywny. Wartości takie jak nasycenie i jasność są kluczowe w kontekście modelu HSL (Hue, Saturation, Lightness), który jest alternatywną metodą reprezentacji kolorów, ale nie mają zastosowania w notacji RGBA. Często występującym błędem w myśleniu jest mylenie przezroczystości z intensywnością koloru; należy pamiętać, że stopień przezroczystości dotyczy widoczności koloru na tle innych elementów, a nie jego czystości czy głębokości. Użycie niewłaściwych terminów w kontekście grafiki komputerowej może prowadzić do błędnych rozwiązań w procesie projektowania, dlatego tak ważne jest zrozumienie podstawowych pojęć związanych z kolorami oraz znajomość standardów i dobrych praktyk w branży.

Pytanie 32

Przedstawiona transformacja obrazu, w edytorze grafiki rastrowej, została wykonana przy pomocy filtru

A. redukcja szumu.

B. rozmycia Gaussa.

C. błysk gradientowy.

D. szum HSV.

Gratulacje, twoja odpowiedź jest prawidłowa. Wybrałeś 'rozmycie Gaussa', które jest odpowiednią odpowiedzią. Na przedstawionym obrazie widzimy, że obraz po prawej stronie jest rozmyty w sposób ciągły i jednolity - to jest charakterystyczne dla rozmycia Gaussa. Filtr rozmycia Gaussa jest powszechnie stosowany w edytorach grafiki rastrowej do uzyskania efektu miękkiego rozmycia, który symuluje efekt obserwacji obiektu przez nieostre medium lub z dużą głębią ostrości. Jest to praktyczne narzędzie, które ma szerokie zastosowanie zarówno w fotografii, jak i w grafice komputerowej. Filtr ten jest często używany do poprawy estetyki obrazów, redukcji szumu i artefaktów, a także w szeroko pojętym przetwarzaniu obrazów, takim jak detekcja krawędzi. Jego nazwa pochodzi od matematyka Karla Gaussa, który opracował koncepcję rozkładu normalnego, na którym opiera się ten filtr.

Pytanie 33

Przedstawiona ikona funkcji edytora grafiki rastrowej o nazwie "różdżka" umożliwia

A. wybiórcze rozsmarowywanie koloru za pomocą pędzla.

B. odręczne zaznaczanie obszarów przez przeciąganie po nich kursora.

C. pobranie wskazanego koloru i ustawienie go jako aktywny.

D. zaznaczenie obszaru na podstawie koloru.

Niestety, wybrane odpowiedzi nie są prawidłowe. Narzędzie 'różdżka' w edytorze grafiki rastrowej, nie służy do pobierania wskazanego koloru i ustawienia go jako aktywny. Ta funkcja jest zazwyczaj realizowana przez narzędzie 'pipeta'. Różdżka również nie służy do wybiórczego rozsmarowywania koloru za pomocą pędzla - tę funkcję pełni narzędzie 'pędzel' lub 'rozmycie'. Odręczne zaznaczanie obszarów przez przeciąganie po nich kursora jest możliwe, ale nie jest to główne zadanie narzędzia 'różdżka', które służy do automatycznego zaznaczania obszarów na podstawie koloru. Niepoprawne odpowiedzi mogły wynikać z niezrozumienia specyfiki pracy z edytorem grafiki rastrowej, oraz z niewłaściwego zrozumienia funkcji poszczególnych narzędzi. Kluczowe dla poprawnej odpowiedzi było zrozumienie, że różdżka jest narzędziem do automatycznego zaznaczania obszarów o podobnym kolorze, co znacznie ułatwia pracę, szczególnie przy edycji skomplikowanych kształtów czy dużych obszarów o podobnej barwie.

Pytanie 34

Wskaż prawidłowe twierdzenie odnoszące się do zaprezentowanego kodu HTML.

<video width="640" height="480" controls>
    <source src="animacja.mp4" type="video/mp4">
</video>

A. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.

B. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.

C. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

D. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.

Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć rozdzielczość 640x480 pikseli, co jest nieprawdziwe, ponieważ atrybuty width i height w znaczniku <video> nie narzucają wymagań rozdzielczości dla samego pliku wideo, lecz jedynie definiują rozmiar ramki odtwarzacza w przeglądarce. Jeśli plik ma inną rozdzielczość, przeglądarka odpowiednio go przeskaluje. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem animacji, jest błędne, ponieważ atrybut controls w znaczniku <video> dokładnie to umożliwia, dostarczając przyciski do odtwarzania, pauzowania oraz regulacji głośności. Ostatnie stwierdzenie dotyczące lokalizacji pliku jest również mylne, ponieważ kod nie wymaga ścieżki bezwzględnej dla pliku animacja.mp4. W przypadku gdy plik znajduje się w tym samym katalogu co strona HTML, wystarczy podać jego nazwę. W przeciwnym razie można zastosować ścieżkę względną, co jest zgodne z dobrymi praktykami w zakresie organizacji plików na serwerze. Te nieporozumienia mogą prowadzić do mylnych wniosków, dlatego ważne jest zrozumienie zasad działania znaczników HTML oraz podstawowych koncepcji związanych z odtwarzaniem multimediów w sieci.

Pytanie 35

<source src="plik.mp4" type="video/mp4">

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <section> </section>

B. <video> </video>

C. <embed> </embed>

D. <div> </div>

Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 36

Na ilustracji przedstawiono ustawienia programu służącego do montażu filmów. Nowy projekt ma ustawienia

A. 48 minut czasu trwania filmu.

B. 25 klatek na każdą sekundę filmu.

C. 25 klatek na cały film.

D. wysokość 1920 px i szerokość 1080 px.

Na zrzucie ekranu z ustawieniami nowego projektu w programie do montażu wideo widać kilka różnych parametrów: rozdzielczość (Width, Height), liczbę klatek na sekundę (Frame Rate), czas trwania szablonu i inne. Bardzo łatwo jest pomylić te pojęcia, szczególnie gdy ktoś dopiero zaczyna przygodę z montażem. Najczęstszy błąd polega na myleniu liczby klatek na sekundę z całkowitą liczbą klatek w filmie. Informacja „25 fps” nie oznacza „25 klatek na cały film”, tylko „25 klatek na każdą sekundę filmu”. Gdyby film miał np. 5 minut, to przy 25 fps będzie miał 5 × 60 × 25 = 7500 klatek. Widać więc, że całkowita liczba klatek jest dużo większa i zależy bezpośrednio od czasu trwania. Kolejna pułapka to interpretowanie pojedynczej liczby jako długości filmu. Samo „25” w polu Frame Rate nie ma nic wspólnego z minutami czy sekundami trwania projektu. Czas trwania określa się osobno, zwykle w formacie godzin: minut: sekund: klatek (HH:MM:SS:FF). Na ilustracji widać pole Duration, które odpowiada właśnie za długość, ale nie jest ono równe wartości 25. Trzecie nieporozumienie dotyczy rozdzielczości. W ustawieniach jest wyraźnie napisane Width: 1920 pixels, Height: 1080 pixels. To oznacza szerokość 1920 px i wysokość 1080 px, a nie odwrotnie. W praktyce jest to klasyczne Full HD w proporcjach 16:9. Odwrócenie tych wartości sugerowałoby projekt w orientacji pionowej (1080×1920), typowy np. dla wideo na smartfony, ale tutaj tak nie jest. Z mojego doświadczenia wynika, że warto na spokojnie odróżniać trzy rzeczy: rozdzielczość (ile pikseli w poziomie i pionie), klatkaż (ile klatek na sekundę – fps) oraz czas trwania (ile czasu zajmuje cały film). Pomylenie któregokolwiek z tych parametrów może skutkować np. nieprawidłowym formatem eksportu, złą jakością odtwarzania albo dziwnie wyglądającym ruchem. Dlatego dobrze jest, jeszcze przed montażem, świadomie przeczytać i zrozumieć wszystkie ustawienia w oknie „New Project Settings”.

Pytanie 37

W przedstawionym filmie, aby połączyć tekst i wielokąt w jeden obiekt tak, aby operacja ta była odwracalna zastosowano funkcję

A. sumy.

B. części wspólnej.

C. wykluczenia.

D. grupowania.

W tym zadaniu łatwo się pomylić, bo w grafice wektorowej mamy kilka różnych funkcji, które na pierwszy rzut oka wyglądają podobnie: łączą obiekty w coś, co zachowuje się jak jeden element. Jednak ich działanie „pod maską” jest zupełnie inne. Funkcje typu suma, wykluczenie czy część wspólna to klasyczne operacje boolowskie na kształtach. One zmieniają geometrię obiektów, czyli tworzą nową ścieżkę wynikową na podstawie przecięcia lub połączenia istniejących. W praktyce oznacza to, że jeśli zastosujesz sumę na tekście i wielokącie, program najczęściej zamieni tekst na krzywe i połączy wszystko w jedną ścieżkę. Efekt wizualny może być fajny, ale edytowalność tekstu przepada. Nie możesz już po prostu zmienić czcionki czy liter, bo to nie jest tekst, tylko zestaw węzłów. Podobnie z wykluczeniem: ta operacja tworzy „dziurę” jednego obiektu w drugim. Używa się jej np. do wycinania napisu z tła lub tworzenia maski. To jest typowy trik przy projektach logotypów albo efektach dekoracyjnych. Ale z punktu widzenia pytania – to działanie jest destrukcyjne dla tekstu, bo znowu zamienia go na kształt i łączy z wielokątem w sposób nieodwracalny (poza cofnięciem operacji). Część wspólna działa jeszcze ostrzej: zostawia tylko obszar, w którym obiekty się nakładają. Reszta jest tracona. To też jest operacja geometryczna, a nie organizacyjna. Typowy błąd myślowy polega na założeniu, że „skoro po operacji mam jeden obiekt, to znaczy, że to jest to samo co grupowanie”. Niestety nie. Grupowanie nie modyfikuje kształtów, tylko tworzy kontener logiczny – tak jakbyś w folderze trzymał kilka plików. Możesz je potem rozgrupować i wszystko wraca do stanu sprzed grupowania. Operacje suma, wykluczenie, część wspólna są destrukcyjne względem oryginalnych obiektów, bo generują nową ścieżkę zamiast starych. W kontekście dobrych praktyk w grafice komputerowej i multimediach przyjmuje się, że dopóki chcesz zachować pełną edytowalność (szczególnie tekstów), używasz grupowania, warstw i wyrównywania, a dopiero na późnym etapie projektu stosujesz operacje boolowskie, i to świadomie, wiedząc, że cofasz się już tylko historią edycji. Dlatego w pytaniu, gdzie mowa jest wprost o połączeniu tekstu i wielokąta w jeden obiekt w sposób odwracalny, jedyną sensowną odpowiedzią jest funkcja grupowania, a nie suma, wykluczenie czy część wspólna.

Pytanie 38

Aby na stronie internetowej wyświetlić logo, którego tło jest przezroczyste, należy zastosować format

A. BMP

B. PNG

C. CDR

D. JPG

Poprawnie – w przypadku logo z przezroczystym tłem na stronach WWW standardem jest format PNG. Ten format obsługuje tzw. kanał alfa, czyli dodatkową informację o przezroczystości każdego piksela. Dzięki temu możesz mieć np. białe logo, które „leży” na kolorowym lub zdjęciowym tle strony i nie ma wokół niego brzydkiego kwadratowego prostokąta. W praktyce wygląda to tak: projektant zapisuje logo z wyciętym tłem (bez tła lub z częściową przezroczystością), eksportuje je do PNG i potem w HTML wstawiasz `<img src="logo.png" alt="Logo">`. Przeglądarka sama poprawnie wyrenderuje przezroczystość. Moim zdaniem PNG to taki złoty środek dla elementów interfejsu: logo, ikony, przyciski. Format ten stosuje bezstratną kompresję, więc ostre krawędzie, tekst i cienkie linie wyglądają dużo lepiej niż w JPG. Przy logo ma to ogromne znaczenie, bo rozmazane logo firmy wygląda po prostu nieprofesjonalnie. Dodatkowo PNG jest wspierany przez wszystkie współczesne przeglądarki i systemy, więc nie trzeba kombinować z żadnymi dodatkowymi wtyczkami. W odróżnieniu od JPG, PNG nie generuje artefaktów kompresji wokół krawędzi, co jest kluczowe przy płaskiej grafice, typografii i ikonografii. Z mojego doświadczenia w projektach webowych przyjmuje się prostą zasadę: zdjęcia – JPG (lub nowoczesne formaty typu WebP/AVIF), grafika z przezroczystością i ostre elementy UI – PNG lub SVG. Dla logo rastrowego PNG z przezroczystym tłem to po prostu dobra praktyka branżowa i bezpieczny wybór, jeśli nie korzystasz z wektorowego SVG.

Pytanie 39

Który program służy do obróbki dźwięku?

A. Audacity

B. CorelDRAW

C. GIMP

D. Inkscape

Prawidłowo wskazany został Audacity, bo jest to specjalistyczny program przeznaczony właśnie do obróbki dźwięku. W praktyce oznacza to, że pozwala nagrywać, edytować, montować i eksportować ścieżki audio w różnych formatach, np. WAV, MP3, OGG. W typowym workflow technika czy realizatora dźwięku w małym studiu używa się Audacity do wycinania fragmentów nagrania, usuwania szumów tła, normalizacji głośności, stosowania efektów takich jak kompresor, korektor (EQ), pogłos, a także do miksowania kilku ścieżek w jeden gotowy plik. Moim zdaniem to jeden z najwygodniejszych programów na start, bo jest darmowy, wieloplatformowy i ma dość czytelny interfejs, a jednocześnie obsługuje dość zaawansowane operacje na sygnale audio. W środowisku webowym i multimedialnym Audacity bardzo często wykorzystuje się do przygotowania materiałów dźwiękowych na strony WWW, kursy e‑learningowe, podcasty czy krótkie reklamy internetowe. Dobre praktyki mówią, żeby przed publikacją dźwięk oczyścić z trzasków, wyrównać poziomy głośności (np. normalizacja do ok. −1 dB lub do standardu głośności LUFS) i dopiero potem eksportować do skompresowanego formatu, który łatwo osadzić w HTML5 audio. Audacity idealnie się do tego nadaje, bo pozwala precyzyjnie przybliżać przebieg fali, pracować na zaznaczeniach, a także cofać wiele kroków edycji, co jest bardzo wygodne przy nauce. W technikum czy w pracy przy prostych projektach multimedialnych ten program spokojnie wystarcza do większości typowych zadań związanych z obróbką dźwięku, od prostego przycięcia pliku MP3 aż po przygotowanie lektora do filmu instruktażowego.

Pytanie 40

Oznaczenie barwy w postaci #FF00E0 jest równoważne zapisowi

A. rgb(F, 0, E0)

B. rgb(255, 0, 224)

C. rgb(FF, 0, E0)

D. rgb(255, 0, 128)

Zapis #FF00E0 to klasyczny przykład koloru w notacji szesnastkowej, używanej w CSS i ogólnie w webdesignie. Cały haczyk polega na tym, że te literki i cyfry nie są traktowane jako tekst, tylko jako liczby w systemie o podstawie 16. Każde dwa znaki odpowiadają jednej składowej koloru: czerwonej, zielonej i niebieskiej. Czyli mamy strukturę: #RRGGBB. W tym konkretnym przypadku RR = FF, GG = 00, BB = E0. Częsty błąd polega na traktowaniu tych liter dosłownie, jak w odpowiedziach typu rgb(F, 0, E0) czy rgb(FF, 0, E0). W zapisie rgb() wartości muszą być liczbami dziesiętnymi z zakresu 0–255, a nie ciągami znaków. Przeglądarka oczekuje tam konkretnych wartości natężenia składowych, a nie kodu szesnastkowego. FF to nie symbol, tylko liczba w systemie hex. Żeby ją poprawnie zinterpretować, trzeba przeliczyć ją na system dziesiętny: F to 15, więc FF = 15×16 + 15 = 255. Podobnie z E0: E to 14, więc E0 = 14×16 + 0 = 224. Z mojego doświadczenia to przeliczanie jest źródłem wielu pomyłek, szczególnie na początku nauki. Inny typowy błąd myślowy to zgadywanie wartości na oko, jak w odpowiedzi rgb(255, 0, 128). Ktoś widzi intensywny kolor, więc daje maksymalny czerwony i jakąś średnią wartość niebieskiego. Problem w tym, że hex E0 to wcale nie jest 128, tylko 224, czyli dużo bliżej maksimum 255 niż środka skali. Takie „strzelanie” bez przeliczenia łamie spójność pomiędzy zapisem hex a rgb i prowadzi do zupełnie innego koloru niż zamierzony. Dobra praktyka w branży jest taka, żeby zawsze pamiętać: zapis hex to trzy liczby 0–255 zapisane w bazie 16, a rgb() to te same liczby zapisane normalnie, po ludzku, w systemie dziesiętnym. Jeżeli pojawiają się litery A–F, to znaczy, że mamy do czynienia z systemem szesnastkowym i trzeba je potraktować jak cyfry 10–15, a nie jako jakiś tekst. To niby drobiazg, ale w pracy front-endowca albo grafika webowego ma ogromne znaczenie, bo precyzja kolorów jest kluczowa dla spójności całego projektu graficznego.

Rozpocznij nowy egzamin

Powrót do strony głównej