Arkusz INF.03 : 2024 - czerwiec - zad. 12 (js)

Oznaczenie: INF.03-12-24.06-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

UWAGA!

Folder z rezultatami pracy oraz płytę należy opisać numerem zdającego, którym został podpisany arkusz, czyli numerem PESEL lub w przypadku jego braku numerem paszportu. Dalej w zadaniu numer ten jest nazwany numerem zdającego.

Wykonaj aplikację nakładającą filtry na obrazki, wykorzystując pakiet XAMPP, edytor grafiki rastrowej oraz edytor zaznaczający składnię.

Aby wykonać zadanie, należy zalogować się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie PlikiCz202412 zabezpieczone hasłem: #TransfoRm@cje

Pobierz PlikiCz202412.zip

Archiwum należy rozpakować.

Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.

Operacje na bazie danych

Baza danych jest zgodna ze strukturą przedstawioną na Obrazie 1. Pole staz oznacza liczbę lat stażu pracy.

Za pomocą narzędzia phpMyAdmin wykonaj operacje na bazie danych:

• Utwórz bazę danych o nazwie baza, z zestawem polskich znaków (np. utf8_unicode_ci)
• Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
• Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
• Wykonaj zapytania SQL działające na bazie baza. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie JPEG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
  • Zapytanie 1: wybierające jedynie imię i pensję pracowników ze stażem mniejszym niż 5 lat
  • Zapytanie 2: liczące średnią pensję pracowników ze względu na rodzaj stanowiska. Zapytanie pokazuje średnią pensję na danym stanowisku i nazwę stanowiska. Należy posłużyć się relacją
  • Zapytanie 3: wybierające jedynie imię, nazwisko i pensję pracownika, którego pensja jest najwyższa. Zapytanie musi mieć charakter uniwersalny, a najwyższa pensja powinna zostać wyliczona np. przez zagnieżdżone zapytanie (podzapytanie)
  • Zapytanie 4: aktualizujące staż wszystkich pracowników, nowa wartość stażu jest wyższa o jeden rok

Witryna internetowa

Cechy grafiki:

• Grafikę pszczola.jpg należy przeskalować z zachowaniem proporcji do szerokości 500 px.

Cechy witryny:

• Składa się ze strony o nazwie obrazki.html zapisanej w języku HTML5
• Ustawiony język zawartości strony na polski
• Jawnie zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Efekty obrazu”
• Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
• Podział strony na baner, poniżej cztery bloki, na dole stopka. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
• Zawartość banera: nagłówek drugiego stopnia o treści „Efekty na obrazach”
• Zawartość pierwszego bloku:
  • Obraz pszczola.jpg z tekstem alternatywnym o treści „pszczoła na fioletowym kwiatku”
  • Poniżej trzy pola opcji: „Blur”, „Sepia” i „Negatyw”, zgrupowane tak, że jednocześnie może być wybrane tylko jedno pole
  • Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformacje obrazu 1
• Zawartość drugiego bloku:
  • Obraz pomarancza.jpg z tekstem alternatywnym o treści „drzewo pomarańczy”
  • Poniżej przycisk „Kolorowy” oraz przycisk „Czarno-biały”, ich kliknięcie powoduje transformację obrazu 2
• Zawartość trzeciego bloku:
  • Obraz owoce.jpg z tekstem alternatywnym o treści „Kosz pełen owoców”
  • Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 100, wartość ustawiona w stanie początkowym to 100
  • Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 3
• Zawartość czwartego bloku:
  • Obraz zolw.jpg z tekstem alternatywnym o treści „Żółw w wodzie”
  • Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 250
  • Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 4
• Zawartość stopki:
  • Paragraf (akapit) z odnośnikiem do adresu http://www.css.com/, o treści „Zobacz inne efekty obrazu”. Odnośnik otwiera się w nowej karcie przeglądarki
  • Paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego

Styl CSS witryny internetowej

Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css. Cechy formatowania CSS, działające na stronie:

• Domyślne formatowanie wszystkich selektorów: krój czcionki Century, w przypadku jego braku Serif, wyrównanie tekstu do środka
• Wspólne dla banera i stopki: kolor tła Indigo, biały kolor czcionki, tekst pochylony, marginesy wewnętrzne 2 px
• Wspólny dla czterech bloków: szerokość 50%, wysokość 470 px
• Dla selektora obrazu: marginesy wewnętrzne 3 px, zewnętrzne 10 px, obramowanie linią kreskową o grubości 2 px koloru SlateBlue
• Dla odnośnika: biały kolor czcionki
• Dla przycisków: kolor tła SlateBlue, biały kolor czcionki, brak obramowania, marginesy wewnętrzne górny i dolny 10 px, lewy i prawy 20 px, margines zewnętrzny górny 10 px
• W momencie, gdy kursor myszy znajdzie się na przycisku, jego kolor tła zmienia się na Indigo
• Jedynie dla pól edycyjnych w postaci suwaka: szerokość 80%

UWAGA!

Styl CSS obrazu należy zdefiniować wyłącznie przy pomocy selektora znacznika obrazu. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.

Skrypt

Wymagania dotyczące skryptu:

• Napisany w języku JavaScript
• Należy stosować znaczące nazewnictwo wszystkich zmiennych i funkcji
• Realizuje transformacje obrazów. Przykładowe wyniki transformacji są umieszczone w Tabeli 1. Tabela 3 specyfikuje wartości właściwości filter, którą należy zastosować w skryptach
• Transformacje obrazu 1:
  • Gdy zaznaczono pole Blur na obraz jest nakładany filtr rozmycia o dowolnej wartości z przedziału 4 px ÷ 8 px
  • Gdy zaznaczono pole Sepia na obraz nakładany jest filtr kolorów sepii (efekt starej fotografii) o wartości 100%
  • Gdy zaznaczono pole Negatyw na obraz nakładany jest filtr odwrócenia kolorów (negatyw) w 100%
• Transformacje obrazu 2:
  • Po wciśnięciu przycisku „Kolory” obraz ma zdjęty filtr odcieni szarości
  • Po wciśnięciu przycisku „Czarno-biały” na obraz jest nakładany filtr odcieni szarości o wartości 100%
• Transformacje obrazu 3: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr przezroczystości o wartości, która została wskazana suwakiem
• Transformacje obrazu 4: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr zmiany jasności o wartości, która została wskazana suwakiem

UWAGA!

Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego.

UWAGA!

Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg kwerendy.txt, obrazki.html, owoce.jpg, pomarancza.jpg, pszczola.jpg, przeglądarka.txt, styl.css, zolw.jpg, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę numerem zdającego i pozostaw zapakowaną w pudełku na stanowisku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

• operacje na bazie danych
• zawartość witryny internetowej
• działanie witryny internetowej
• styl CSS witryny internetowej
• skrypt.

Examples

Apply a blur effect to the image: img { filter: blur(5px); }

Adjust the brightness of the image: img { filter: brightness(200%); }