Zadanie egzaminacyjne
Wykonaj aplikację internetową Fabryki żelków. Wykorzystaj do tego celu edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i/lub wektorowej.Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy2.zip zabezpieczone hasłem: Wyp@kujMni3
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. Po skończonej pracy wyniki zapisz w tym folderze.
Grafika
 |
| Zdjęcie cukierki1.jpg |
– zdjęcie powinno być przezroczyste w miejscu białego tła nad cukierkami. Przykład przedstawiono na obrazie 1a, na którym w miejscu przezroczystości znajduje się krata
– zdjęcie powinno być zapisane pod nazwą cukierki1 w formacie umożliwiającym zapis przezroczystości Logo należy przygotować przy pomocy programu do obróbki grafiki rastrowej i/lub wektorowej, na podstawie zdjęcia cukierki2.png:
 |
| Zdjęcie cukierki2.png |
– nad żelkiem powinien znaleźć się napis o treści „Fabryka”, pod żelkiem napis o treści „żelków”
– cechy tekstu: Orientacja pochyła zgodnie z obrazem 1b, czcionka Arial, pogrubiona, wypełnienie koloru jasno zielonego, kontur czarny
– cechy obrazu: tło przezroczyste, wysokość dokładnie 180 px
– obraz zapisany jako logo w formacie umożliwiającym zapis przezroczystości
 |
| Zdjęcie cukierki3.jpg |
 |
| Obraz 1a. Przezroczystość zdjęcia cukierki1 |
 |
| Obraz 1b. Logo |
Witryna internetowa
|
| Obraz 2. Witryna, podstrona Zamówienie |
Cechy witryny:
– strona główna o nazwie index.html oraz podstrona zamowienie.html
Cechy wspólne dla obu stron:
– zastosowany właściwy standard kodowania polskich znaków
– tytuł strony widoczny na karcie przeglądarki: „Fabryka żelków”
– arkusz stylów w pliku o nazwie styl9.css prawidłowo połączony z kodem strony
– podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
– zawartość pierwszego górnego bloku: odnośnik, którego wybranie prowadzi do strony index.html. Odnośnik jest w formie obrazu logo z tekstem alternatywnym „logo fabryki”
– zawartość drugiego górnego bloku: odnośnik o treści „Zamówienie”, którego wybranie prowadzi do strony zamowienie.html
– zawartość bloku głównego lewego:
– nagłówek pierwszego stopnia o treści: „Oferta”
– tabela o rozmiarze 2x2:
– w pierwszym wierszu znajdują się napisy „Kształty” oraz „Kolory”
– w drugim wierszu w pierwszej kolumnie znajduje się lista numerowana (uporządkowana) o elementach: „miś”, „żabka”, „serce”
– w drugim wierszu w drugiej kolumnie znajduje się lista numerowana (uporządkowana) o elementach: „czerwony”, „niebieski”, „żółty”, „inny”
– zawartość stopki: tekst „Autor strony: PESEL”, gdzie PESEL to Twój numer PESEL. PESEL jest zapisany kursywą
Cechy odrębne dla pliku index.html:
– zawartość banera: nagłówek drugiego stopnia o treści: „Nasza oferta”
– zawartość bloku głównego prawego: obraz cukierki3.jpg z tekstem alternatywnym o treści „Nasze wyroby”
Cechy odrębne dla pliku zamowienie.html:
– zawartość banera: nagłówek drugiego stopnia o treści: „Zamów nasz produkt” zawartość bloku głównego prawego:
– tekst: „Podaj numer kształtu: ”
– poniżej pole edycyjne typu numerycznego
– poniżej tekst: „skomponuj swój kolor, podaj RGB: ”
– poniżej trzy pola edycyjne typu numerycznego, każde poprzedzone tekstem: „R:”, „G:”, „B:”
– przycisk o treści „Zamów”, którego wciśnięcie powoduje wywołanie skryptu
– poniżej paragraf, w którym pierwotnie znajduje się tekst: „Wybrany kształt”, tekst jest modyfikowany przez skrypt
– przycisk o treści „Wybrany kolor”
Styl CSS witryny internetowej
Cechy formatowania CSS działające na stronie:– wspólne dla całej strony: krój czcionki Georgia
– wspólne dla dwóch bloków górnych: kolor tła RGB: 197, 85, 160; wyrównanie tekstu do środka, szerokość 50%, wysokość 180 px
– wspólne dla banera i stopki: kolor tła RGB: 246, 226, 222; wyrównanie tekstu do środka, wysokość 100 px, marginesy wewnętrzne 10 px
– wspólne dla bloków głównych: kolor tła RGB: 197, 85, 160; biały kolor czcionki, szerokość 50%, wysokość 400 px
– odnośnika „Zamówienie” z drugiego bloku górnego: tło w postaci obrazu cukierki1, margines wewnętrzny prawy 70 px, dolny 120 px, rozmiar czcionki 150%, bez podkreślenia
– tabeli i komórki tabeli: obramowanie 2 px, linią ciągłą niebieską; marginesy zewnętrzne 20 px, wewnętrzne 10 px
– nagłówka drugiego stopnia: odległość między literami 10 px, rozmiar czcionki 200%
Skrypt
Wymagania dotyczące skryptu:– wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamów”
– skrypt sprawdza wprowadzony numer kształtu i wypisuje w akapicie poniżej przycisku „Zamów” tekst „Zamówiłeś żelka: ”, a dalej w zależności od wprowadzonej wartości: 1 – „miś”, 2 – „żabka”, 3 – „serce”, inny – „inny kształt”, np. „Zamówiłeś żelka: miś”
– następnie skrypt sprawdza wartości RGB, a następnie zmienia kolor tła przycisku „Wybrany kolor” na kolor odpowiadający podanej wartości RGB
Wybrane pola i metody modelu DOM języka JavaScript
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: cukierki1, cukierki3, index, logo, przeglądarka, styl9, zamowienie, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku wraz z arkuszem egzaminacyjnym.
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów:
– grafika,– zawartość witryny internetowej,
– działanie witryny internetowej,
– styl CSS witryny internetowej,
– skrypt.
