Arkusz E.14-02-20.01-SG

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 cukierki1.jpg należy przygotować przy pomocy programu do obróbki grafiki rastrowej:
– 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
– zdjęcie cukierki2.png powinno być tak skadrowane, aby był widoczny jedynie zielony żelek
– 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
Zdjęcie cukierki3.jpg należy przeskalować do rozmiaru 533 px na 400 px
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.