Arkusz E.14 - 05 - 18.06

Zadanie egzaminacyjne Wykonaj aplikację internetową domu weselnego oraz zaprojektuj 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 zad5.zip, hasło: Z@d@niE

Grafika

Obraz 1a. Dwie litery

Obraz 1b. Wykluczenie części wspólnej
Obraz 1c. Logo Domu Weselnego

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
 - Wielkie litery D i W powinny być napisane dowolną czcionką typu Sans Serif, np. Arial, Tahoma; kolor niebieski, wielkość czcionki 144
 - Wzajemne położenie liter przedstawia obraz 1a. Wymagane jest, aby D było wyżej niż W i aby obie litery na siebie nachodziły
 - Na obu kształtach liter zastosowano funkcję wykluczającą część wspólną obiektów
 - Obraz obraczki.png wypakowany z archiwum znajduje się za literami
 - Grafika powinna być wyeksportowana do formatu PNG i zapisana jako logo.

Witryna internetowa

Plik tekstowy:
 - Witryna internetowa wymaga pliku Regulamin.txt z zawartością o treści: „Regulamin Domu Weselnego”. Plik powinien być umieszczony w folderze, w którym znajdą się pliki witryny.
Obraz 2. Witryna internetowa
Cechy witryny:
 - Nazwa pliku: wesela.html
 - Zastosowany właściwy standard kodowania polskich znaków
 - Tytuł strony widoczny na karcie przeglądarki: „Dom Weselny”
 - Arkusz stylów w pliku o nazwie styl5.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, zgodnie z obrazem 2
 - Zawartość banera to nagłówek pierwszego stopnia zawierający:
   - Obraz logo.png o wysokości 70 px
   - Tekst: „Dom Weselny zorganizuje wesele za Ciebie”
   - Obraz logo.png o wysokości 70 px
 - Zawartość panelu lewego:
   - Nagłówek drugiego stopnia o treści: „Dom Weselny”
   - Trzy paragrafy (akapity) z treścią, kolejno: „ul. Przemysłowa 5”, „Kalisz”, odsyłacz do pliku logo.png z treścią „Pobierz logo”
 - Zawartość panelu środkowego:
   - Nagłówek drugiego stopnia o treści „Oferujemy”
   - Lista punktowa z trzema elementami: Wesela, Bankiety, Konferencje
 - Zawartość panelu prawego:
   - Umieszczony w paragrafie odsyłacz do pliku Regulamin.txt o treści: „czytaj regulamin”
 - Zawartość panelu dolnego:
   - Nagłówek drugiego stopnia o treści: „Ile będzie kosztowało moje wesele?”
   - Tekst: „Podaj liczbę gości: ”, dalej pole numeryczne
   - Pole typu checkbox, po nim treść: „Wesele z poprawinami?”
   - Przycisk o treści „Oblicz koszt”, 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 pochyloną czcionką.

Styl CSS witryny internetowej 

Plik styl5.css zawiera formatowanie:
 - Banera: kolor tła #1C59A7, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 80 px
 - Panelu lewego: kolor tła #3A70B5, szerokość 33%, wysokość 200 px
 - Panelu środkowego: kolor tła #5A8AC8, szerokość 33%, wysokość 200 px
 - Panelu prawego: kolor tła #86ACDD, wyrównanie tekstu do środka, szerokość 34%, wysokość 200 px
 - Panelu dolnego: kolor tła #86ACDD, wyrównanie tekstu do środka, wysokość 300 px
 - Stopki: kolor tła #1C59A7, biały kolor czcionki
 - Odsyłacza z panelu prawego: tło żółte, kolor czcionki niebieski, marginesy wewnętrzne 10 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)
 - Oblicza na podstawie pobranych wartości koszt wesela, według wytycznych
   - Koszt dla jednej osoby to 100 złotych
   - W przypadku wyprawiania poprawin, całkowity koszt należy powiększyć o 30%
 - Wyświetla pod przyciskiem tekst: „Koszt Twojego wesela to ... złotych”, gdzie w miejscu kropek wstawiony jest obliczony koszt wesela.

Wybrane pola i metody modelu DOM języka JavaScript

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, przeglądarka.txt, Regulamin.txt, styl5.css, wesela.html, 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.