Arkusz E.14-06-17.06

Zadanie egzaminacyjne 

Wykonaj aplikację internetową dla firmy remontującej mieszkania zawierającą elementy HTML, CSS i JavaScript oraz zaprojektuj logo firmy. Wykorzystaj do tego celu edytor 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 utworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL.

Grafika 

Obraz 1a. Obiekty grafiki wektorowej
Obraz 1b. Logotyp
Przy pomocy programu do obróbki grafiki wektorowej wykonaj projekt logo firmy. Swoją pracę udokumentuj zrzutem ekranowym. Wykonaj następujące czynności:
- Utwórz kształt spirali o wymiarach 400 x 400 px
- Utwórz napis „REMONTY MIESZKAŃ” o atrybutach: pogrubiona czcionka Arial, rozmiar 36, kolor wypełnienia: ciemny zielony (obraz 1a)
- Za pomocą odpowiedniej funkcji edytora umieść tekst na kształcie spirali. Czynność udokumentuj za pomocą zrzutu ekranowego tak, aby była widoczna nazwa funkcji, która została użyta do transformacji. Zrzut powinien być czytelny i wykonany bez skalowania i kadrowania, a także z widocznym paskiem zadań i godziną wykonania. Zapisz go pod nazwą zrzut1 w formacie JPEG. Na rysunku widoczny ma być tylko tekst.
- Wyeksportuj obraz do formatu PNG o nazwie logotyp. Jego wysokość powinna być nie większa niż 200 px. Obraz powinien posiadać tło przezroczyste. Przykład pliku logotyp przedstawia rysunek 1b.

Witryna internetowa 

Obraz 2. Witryna internetowa
Cechy witryny wspólne dla wszystkich stron: 
- Witryna składa się z trzech podstron: index.html, adres.html i policz.html
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony, widoczny na karcie przeglądarki: „Remonty mieszkań”
- Arkusz stylów w pliku o nazwie remont.css, prawidłowo połączony z kodem strony
- Podział strony na bloki: pięć bloków menu, blok główny i stopka zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
- Zawartość Menu: pięć bloków, z których każdy zrealizowany za pomocą znaczników sekcji (nie tabeli), zawierające:
 - Obraz logotyp 
 - Odnośnik O FIRMIE prowadzący do strony index.html 
 - Odnośnik ADRES prowadzący do strony adres.html
 - Odnośnik POLICZ prowadzący do strony policz.html 
 - Odnośnik LINKI wskazujący na stronę http://www.jakremontowac.pl/ Strona powinna otworzyć się w osobnej karcie przeglądarki
- Zawartość bloku głównego: różna dla każdej z podstron, patrz niżej
- Zawartość stopki: tekst paragrafu „Autor strony:”, dalej wstawiony Twój numer PESEL
Cechy charakterystyczne dla każdej z podstron: 
- Zawartość bloku głównego strony index.html:
 - Nagłówek pierwszego stopnia o treści „Zakres prac”
 - Listę zagnieżdżoną przedstawia obraz 3.
Obraz 3.
- Zawartość bloku głównego strony adres.html:
 - Nagłówek pierwszego stopnia o treści „Adres firmy”
 - Paragraf (akapit) o treści „Remonty Mieszkań Krzysztof Kowalski”, paragraf o treści „ul. Korfantego 60”, paragraf o treści „Katowice”
 - Przycisk o treści „Skontaktuj się z nami”, który jest odnośnikiem do adresu mailowego „remonty@gmail.com”
- Zawartość bloku głównego strony policz.html (Rysunek 2):
 - Nagłówek pierwszego stopnia o treści „Kafelkowanie łazienki”
 - Paragraf o treści „powierzchnia w m2:”, pole edycyjne typu numerycznego
 - Pola typu radio o treści: „Płytki 20 x 20 cm” oraz „Płytki 25 x 12 cm”
 - Poniżej przycisk o treści „PRZELICZ”. Jego wciśnięcie powoduje uruchomienie skryptu

Styl CSS witryny internetowej 

Plik remont.css zawiera formatowanie dla:
- Pojedynczego bloku menu: kolor RGB tła (57, 180, 107), biały kolor czcionki, wyrównanie tekstu do środka, rozmiar tekstu 150%, szerokość 20%, wysokość 220 px
- Bloku głównego: wysokość 300 px  Stopki: kolor RGB tła (57, 180, 107), biały kolor czcionki, wyrównanie tekstu do środka, rozmiar tekstu 150%
- Odnośnika: biały kolor czcionki
- Przycisku: zielony kolor tła, zielone obramowanie o szerokości 1 px, biały kolor czcionki, tekst pogrubiony, marginesy wewnętrzne 15 px
- Nagłówka pierwszego stopnia: kolor RGB czcionki (27, 163, 82)
Niewymienione właściwości obiektów przybierają wartości domyślne.

Skrypt 

Przykład działania skryptu przedstawiony jest na obrazie 2. Skrypt powinien działać po stronie przeglądarki. Jego zadaniem jest obliczenie ceny kafelkowania, uwzględniając wytyczne:
- Cena usługi dla 1 m2 kafelków 20 x 20 cm wynosi 70 zł
- Cena usługi dla 1 m2 kafelków 25 x 12 cm wynosi 80 zł
Działanie skryptu: 
- Skrypt pobiera dane z pola edycyjnego oraz sprawdza, które pole typu radio zostało wybrane
- Na podstawie danych oblicza koszt kafelkowania i wypisuje poniżej według wzoru „Koszt kafelkowania: ” <obliczony koszt> zł 
UWAGA: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować pliki: adres.html, index.html, logotyp.png, policz.html, remont.css, zrzut1.jpg, ewentualnie inne przygotowane przez Ciebie pliki. Po nagraniu płyty sprawdź poprawność nagrania i opisz płytę swoim numerem PESEL. 

Czas przeznaczony na wykonanie zadania wynosi 150 minut. 

Ocenie będą podlegać 4 rezultaty: 
- grafika, 
- witryna internetowa, 
- styl CSS witryny internetowej, 
- skrypt.