Arkusz E.14-04-19.01 zJS, zSVG

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

Plik logo.png

Obraz logo.png przeskaluj z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 100px

Plik kształty.png

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.