Arkusz E.14-04-19.01

Zadania egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML,CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki4.zip zabezpieczone hasłem: @K4wA!
Archiwum należy rozpakować
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

Grafika

Obraz logo.png przeskaluj z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 100px
Z grafiki ksztalty.png wytnij kształt filiżanki i imbryka (obraz 1a i 1b) z zachowaniem przezroczystości oraz tak, aby kształty były w całości i żadne fragmenty innych kształtów nie były widoczne. Za pomocą edytora grafiki wektorowej przygotuj nowy obraz zgodny z obrazem 1c. Uwzględnij wymagania:
  • Obraz jest przezroczysty
  • Widoczne są na nim kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest obrócony tak jakby jego zawartość wlewała się do filiżanki
  • Widoczny jest napisz koloru brązowego o treści "Poczęstuj się kawą"
  • Tekst zapisany jest dowolną czcionką typu Serif. Na obrazie 1c jest to Georgia dopuszczalne również inne czcionki Serif, np.: Times New Roman
  • Tekst jest opisany na okręgu, okrąg jest niewidoczny
Utworzony obraz należny zapisać jako kawa w formacie przechowujący informacje o przezroczystości.
Obraz kawa powinien mieć wysokość nie większą niż 400px

Obraz 1a. Filiżanka


Obraz 1b. Imbryk


Obraz 1c. Obraz kawa

Witryna internetowa


Obraz 2. Witryna internetowa, strona główna
Cechy witryny:
  • Strona główna o nazwie index.html oraz podstrony zamowienia.html i blog.html
    1. W pliku blog.html należy umieścić jedynie tekst "Strona w trakcie budowy"
    2. Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu prawego

Cechy wspólne dla stron index.html i zamówienia.html:
  • Zastosowany właściwy standard kodowanie polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki "Hurtownia"
  • Arkusz stylów w pliku o nazwie styl4.css prawidłowo podłączony z kodem strony
  • Podział strony na bloki: na górze dwa bloki: logo i menu, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczków sekcji, zgodnie z obrazem 2
  • Zawartość bloku logo:
    1. obraz logo.png z tekstem alternatywnym "hurtownia"
  • Zawartość bloku menu:
    1. Odnośnik "Strona główna", prowadzący do pliku index.html
    2. Odnośnik "Zamówienia", prowadzący do pliku zamowienia.html
    3. Odnośnik "Blog o kawie", prowadzący do pliku blog.html
    4. Odnośnik "Odwiedź także", prowadzący do strony htttp://gatunki-kawy.pl, odnośnik otwiera się w osobnej karcie przeglądarki
  • Zawartość banera:
    1. nagłówek pierwszego stopnia o treści "Hurtownia kawy"
  • Zawartość bloku lewego:
    1. Nagłówek drugiego stopnia o treści: "Oferta"
    2. Lista numerowana (uporządkowana) o elementach: "Kawa palona Arabica", "Kawa palona Robusta", "Kawa bezkofeinowa", "Kawa zielona"
  • Zawartość stopki w postaci tekstu "Stronę przygotował:", dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pogrubioną.
Cechy bloku prawego dla strony index.html:
  • Obraz kawa z tekstem alternatywnym: "Poczęstuj się"
Cechy bloku prawego dla strony zamowienia.html:
  • Napis "Podaj numer kawy:"
  • Poniżej pole edycyjne typu numerycznego
  • Poniżej napis "Podaj wagę w dekagramach"
  • Poniżej pole edycyjne typu numerycznego
  • Poniżej przycisk o treści "Zamów", kliknięcie przycisku powoduje wywołanie skryptu

Styl CSS witryny internetowej

Plik styl4.css zawiera formatowanie:
  • Wspólne dla całej strony: krój czcionki Arial
  • Dla bloku logo: kolor tła RGB 162,117,87; szerokość 20%, wysokość 100px
  • Dla bloku menu: kolor tła RGB 162,117,87;, szerokość 40%, wysokość 100px, wyrównanie tekstu do prawej strony
  • Wspólne dla banera i stopki: kolor tła RGB 74, 45, 32; biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30px
  • Wspólne dla bloku lewego i prawego: kolor tła RGB 162,117,87; biały kolor czcionki, szerokość 50%, wysokość 500px
  • Dla selektora nagłówkowego pierwszego stopnia: odległość między literami 10px
  • Dla selektora odnośnika: kolor czcionki RGB 65, 98, 85; marginesy wewnętrzne 20px, marginesy zewnętrzne 10px, rozmiar czcionki 150%, wysokość linii 100px, obramowanie 1px, linią ciągłą o kolorze RGB 65, 98, 85;
  • Dla elementu nr 4 ("Kawa zielona") listy umieszczonej w bloku lewym: tekst przekreślony

Skrypt

Wymagania dotyczące skryptu:
  • Wykonany po stronie przeglądarki
  • Wywołany na stronie zamownienia.html po kliknięciu przycisku "Zamów"
  • Skrypt pobiera wartości wpisane w oba pola edycyjne i oblicza kosz kawy uwzględniając jej numer i wagę
  • Ceny kawy ze względu na jej numer przedstawia tabela 1, w przypadku wpisania innej wartości niż 1-3 cena wynosi 0 zł
  • Po obliczeniu całkowitego kosztu kawy jest wyświetlany wynik pod przyciskiem w formacie: "Koszt zamówienia wynosi [koszt] zł", gdzie [koszt] oznacza obliczony koszt.

Tabela 1. Ceny kawy
Numer kawy Nazwa Cena za 1 dekagram
1 Kawa palona Arabica 5 zł
2 Kawa palona Robusta 7 zł
3 Kawa bezkofeinowa 6 zł
UWAGA: po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny, zapisz go w folderze z numerem PESEL, jako przegladarka.txt. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny znajdować się pliki: blog, index, kawa, logo, przegladarka, styl4, zamowienia, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:
  • grafika,
  • wygląd witryny internetowej,
  • działanie witryny internetowej,
  • styl CSS witryny internetowej,
  • skrypt.