Arkusz E.14 - 06 - 18.06

Zadanie egzaminacyjne 

Wykonaj aplikację internetową pizzerii oraz zaprojektuj jej logo. Wykorzystaj do tego celu edytor tekstowy zaznaczający składnię oraz program do obróbki grafiki wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Wyniki swojej pracy zapisz w folderze stworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakuj archiwum a jego zawartość skopiuj do folderu z numerem PESEL. Dane archiwum: nazwa zad6.zip , hasło: z@d@nie

Grafika
Obraz1a. Napis i elipsa

Obraz 1b. Napis dopasowany do ścieżki
Obraz 1c. Logo pizzerii
Przy pomocy programu do obróbki grafiki wektorowej wykonaj logo zgodne z przedstawionym Obrazem 1c. Kolejne kroki wykonania logo przedstawiają obrazy 1a – 1c.
Wymagania:
 - Tło logo jest przezroczyste
 - Napis „ pizzeria ” powinien być napisany dowolną czcionką typu Serif, np. Georgia, Times New Roman; kolor czerwony, wielkość czcionki 144
 - Na napisie zastosowano funkcję dopasowania (wstawienia) kształtu do ścieżki
 - Obraz pizza.png, wypakowany z archiwum, jest wkomponowany w kształt napisu zgodnie z obrazem 1c
 - Grafika powinna być wyeksportowana do formatu PNG i zapisana jako logo .

Witryna internetowa

Plik tekstowy:
 - Witryna internetowa wymaga pliku Oferta.txt z zawartością o treści: „ Pizza Margherita 20 zł ”. Plik powinien być umieszczony w folderze, w którym znajdą się pliki witryny.
Obraz 2. Witryna internetowa

Cechy witryny:
 - Nazwa pliku: pizzeria.html
 - Zastosowany właściwy standard kodowania polskich znaków
 - Tytuł strony widoczny na karcie przeglądarki: „ Pizzeria Margherita ”
 - Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony
 - Podział strony na bloki: baner, poniżej trzy panele: lewy, środkowy, prawy; poniżej dolny panel i pod nim stopka. Podział zrealizowany za pomocą znaczników sekcji, tak aby po uruchomieniu w przeglądarce wygląd był zgodny z obrazem 2
 - Zawartość banera to nagłówek drugiego stopnia zawierający:
   - Tekst: „ Najlepsza pizza w mieście ”
   - Obraz logo.png o wysokości 100 px
 - Zawartość panelu lewego:
   - Paragraf (akapit) o treści: „ U nas zamówisz pizzę z dowozem ”
   - Odsyłacz do pliku logo.png z treścią „ Nasze logo ”
 - Zawartość panelu środkowego:
   - Nagłówek trzeciego stopnia o treści „ Pizzeria Margherita ”
   - Paragraf o treści: „ ul. Botaniczna 4, Zielona Góra ”
 - Zawartość panelu prawego:
   - Nagłówek trzeciego stopnia o treści „ Oferta ”
   - Lista numerowana z trzema elementami: Pizza, Lasagne, Sałatki
   - Umieszczony w paragrafie odsyłacz do pliku Oferta.txt o treści: „ Pobierz pełną ofertę ”
 - Zawartość panelu dolnego:
   - Nagłówek trzeciego stopnia o treści: „ Oblicz koszt dostawy ”
   - Pole typu checkbox, po nim treść: „ Jestem z Zielonej Góry ”
   - Paragraf o treści: „ albo ”
   - Tekst: „ Podaj liczbę kilometrów od Zielonej Góry: ”, dalej pole numeryczne
   - Przycisk o treści „ Oblicz ”, którego wybranie uruchamia skrypt
   - Paragraf z miejscem na wyniki działania skryptu
 - Zawartość stopki: napis o treści: „ Stronę internetową opracował: ”, dalej wstawiony swój numer PESEL. Numer PESEL powinien być zapisany pogrubioną czcionką.

Styl CSS witryny internetowej 

Plik styl6.css zawiera formatowanie:
 - Banera: kolor tła #4E885C, pomarańczowy kolor czcionki, wyrównanie tekstu do środka, wysokość 110 px
 - Panelu lewego: kolor tła #72A37D, szerokość 30%, wysokość 300 px
 - Panelu środkowego: obraz w tle pizza.png, kolor tła #A2C3A9, szerokość 40%, wysokość 300 px
 - Panelu prawego: kolor tła #72A37D, wyrównanie tekstu do środka, szerokość 30%, wysokość 300 px
 - Panelu dolnego: kolor tła #A2C3A9, wyrównanie tekstu do środka, wysokość 250 px
 - Stopki: kolor tła #4E885C, pomarańczowy kolor czcionki
 - Odsyłacza z panelu prawego: tło pomarańczowe, kolor czcionki zielony, marginesy wewnętrzne 15 px (Uwaga: tym stylem powinien być formatowany tylko odsyłacz z panelu prawego, pozostałe odsyłacze są formatowane domyślnie)

Skrypt 

Wymagania dotyczące skryptu:
 - Wykonywany po stronie przeglądarki
 - Pobiera dane z obu pól z panelu dolnego (liczbę oraz stan pola typu checkbox)
 - Zależnie od stanu pola typu checkbox podejmowane są działania:
   - W przypadku zaznaczenia, wypisywany jest pod przyciskiem tekst: „ Dowieziemy Twoją pizzę za darmo ”
   - W przypadku odznaczenia, wyliczany jest koszt dowozu, równy 1 zł za 1 km liczony w obie strony (np. dla 5 km koszt jest równy 10 zł). Następnie wypisywany jest pod przyciskiem tekst: „ Dowóz będzie Cię kosztował ... złotych ”, gdzie kropki oznaczają koszt dowozu.

Wybrane pola i metody modelu DOM języka JavaScript Wybrane zdarzenia HTML 

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. Zrzut zapisz w folderze z Twoim numerem PESEL jako przeglądarka.txt. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: logo.png, pizza.png, Oferta.txt, pizzeria.html, przeglądarka.txt, styl6.css , 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ędą podlegać 4 rezultaty:
 - grafika,
 - witryna internetowa,
 - styl CSS witryny internetowej,
 - skrypt.