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 skadnię oraz program do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egazamin 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 nzawy 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 nalezy zapisać jako kawa w formacie przechowujący inforamcje o przezroczystości.
Obraz kawa powinien mieć wysokość nie większą niż 400px Brak obrazu proszę zgłosić do supportu
Obraz 1a. Filiżanka
Brak obrazu proszę zgłosić do supportu
Obraz 1b. Imbryk
Brak obrazu proszę zgłosić do supportu
Obraz 1c. Obraz kawa
Witryna internetowa
Brak obrazu proszę głosić do supportu
Obraz 2. Witryna internetowa, strona główna
Cechy witryny:
  • Strona głowna 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łowna oraz podstrona zamówienia są identyczne, za wyjąkiem panelu prawego
Cechy wspólne dla stron index.html i zamówienia.html:
  • Zastosowany właściwy standard kodowanie polskich znaków
  • Tyyuł 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, zgodznie 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 kwanie", 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. Ngłowek drugiego stopnia o treści: "Oferta"
    2. Losta 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, numker 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śc 20%, wysokość 100px
  • Dla bloku menu: kolor tła RGB 162,117,87;, szerokość 40%, wysokość 100px, wyrównanie tekstu do prawej strony
  • Wpólne dla banera i stopki: kolor tła RGB 74, 45, 32; ciały kolor czcionki, wyrownanie 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 selekotra nagłowkowego 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ść lini 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 foramcie: "Koszt zamówienia wynosi [koszt] zł", gdzie [koszt] oznacza obliczony koszt.
Brak obrazu proszę zgłosić do supportu
Tabela 1. Ceny kawy
UWAGA: po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w któej weryfikowaleś 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.
Obraz zostanie dodany wkrótce
Wybrane pola i metody modelu DOM języka JavaScript
Obraz zostanie dodany wkrótce
Wybrane zdarzenia HTML
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.