Arkusz E.14-06-18.01

Zadanie egzaminacyjne

Wykonaj aplikację internetową portalu ogłoszeniowego oraz zaprojektuj grafikę. 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 1. Grafika wektorowa
Przy pomocy programu do obróbki grafiki wektorowej wykonaj grafikę zgodną z przedstawionym Obrazem 1. Stwórz 7 obiektów w kształcie prostokąta, zgodnie z obrazem 1. Dopuszcza się drobne różnice pomiędzy obrazem 1, a utworzoną grafiką, lecz ogólna koncepcja powinna być zachowana. Uwzględnij następujące warunki:
- Poziomy prostokąt, przedstawiający półkę, jest koloru brązowego
- Prostokąty przedstawiające książki są różnych rozmiarów, należy zachować różnice pomiędzy
wysokością, np. pierwsza książka jest wyższa niż druga itp.
- Kolory prostokątów od lewej: zielony, czerwony, jasnoniebieski, czerwony, ciemnoniebieski,
ciemnoniebieski
- Podpisy na książkach zapisane są czcionką Arial, ich orientacja jest zgodna z orientacją prostokąta, na którym się znajdują. Napis nie może wystawać poza prostokąt. Kolejno są to podpisy:
 - Carrie S.King, koloru czarnego
 - Obiecaj mi H.Coben, koloru czarnego
 - Fantazy J.Słowacki, koloru białego
- Tło grafiki jest przezroczyste
Wyeksportuj grafikę do pliku o formacie PNG i nazwij grafika.png. Przeskaluj grafikę z zachowaniem proporcji tak, aby jej szerokość nie była większa niż 400 px oraz aby wysokość nie była większa niż 430 px. Utwórz kopię pliku grafika.png i nazwij ją logo.png (powinny być dwie grafiki). Wykadruj grafikę logo.png tak, aby było na niej widać wszystkie książki oraz proporcje szerokości i wysokości były 1:1. Następnie przeskaluj do rozmiarów 80 px na 80 px.

Witryna internetowa

Cechy witryny 

- Nazwa pliku: portal.html
- Zastosowany właściwy standard kodowania polskich znaków
- Tytuł strony widoczny na karcie przeglądarki: „Ogłoszenia”
- Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony
- Podział strony na bloki: baner, poniżej cztery panele informacyjne: pierwszy, drugi, trzeci, czwarty,
poniżej trzy panele: lewy, środkowy, prawy, na dole stopka. Podział zrealizowany za pomocą
znaczników sekcji, tak aby po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 2
- Zawartość banera: nagłówek pierwszego stopnia o treści: „Ogłoszenia drobne”
- Zawartość panelów informacyjnych:
 - Pierwszy: nagłówek trzeciego stopnia o treści: „telefon”, następnie akapit: „601601601”
 - Drugi: nagłówek trzeciego stopnia o treści: „e-mail”, następnie akapit: „ogloszenia@poczta.pl”
 - Trzeci: nagłówek trzeciego stopnia o treści: „Adres”, następnie akapit: „ul. Morska 45 Gdynia”
 - Czwarty: obraz logo.png
- Zawartość panelu lewego:
 - Nagłówek drugiego stopnia o treści: „Ceny”
 - Tabela o wymiarach 3x3. Ostatnia kolumna zawiera scalone dwa wiersze. Zawartość tabeli zgodnie
z Tabelą 1
Tabela 1. Wygląd tabeli z panelu lewego
- Zawartość panelu środkowego:
 - Nagłówek drugiego stopnia o treści: „Policz koszt ogłoszenia”
 - Pole numeryczne poprzedzone napisem: „Liczba ogłoszeń:”
 - Pole typu checkbox z tekstem: „Jestem stałym klientem”
 - Przycisk o treści „Kalkulacja”
- Zawartość panelu prawego:
 - Nagłówek drugiego stopnia o treści: „Znajdujesz się na stronie portalu ogłoszeniowego”
 - Obraz grafika.png z tekstem alternatywnym o treści: „Oblicz koszt ogłoszenia”
- Zawartość stopki: napis o treści: „Portal ogłoszeniowy opracował:”, dalej wstawiony Twój numer PESEL.

Styl CSS witryny internetowej 

Plik styl6.css zawiera formatowanie:
- Banera: kolor tła #993333, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 80 px
- Paneli informacyjnych (wspólny): krój czcionki Tahoma, kolor tła #CC6666, biały kolor czcionki,
wyrównanie tekstu do środka, szerokość 25%, wysokość 150 px
- Panelu lewego i prawego (wspólny): kolor tła #CC9999, szerokość 40%, wysokość 550 px,
wyrównanie tekstu do środka
- Panelu środkowego: kolor tła #FFCCCC, szerokość 20%, wysokość 550 px
- Stopki: kolor tła #993333, biały kolor czcionki, wyrównanie tekstu do prawej strony
- Tabeli: obramowanie na 1 px linią kropkowaną czerwoną, szerokość tabeli 100%
- Komórki tabeli: wyrównanie tekstu do środka
- Przycisku: bez obramowania, marginesy wewnętrzne 20 px, czerwony kolor tła, biały kolor czcionki
Niewymienione właściwości selektorów przybierają wartości domyślne.

Skrypt 

Wymagania dotyczące skryptu:
- Wykonywany po stronie przeglądarki, po wciśnięciu przycisku „Kalkulacja”
- Pobiera dane z obu pól z panelu środkowego (liczbę oraz stan checkboxa)
- Oblicza na podstawie pobranych wartości koszt ogłoszenia. Wytyczne dotyczące sposobu obliczenia kosztu znajdują się w tabeli 1
- Wyświetla pod przyciskiem tekst: „Twoje ogłoszenia będą kosztować: … PLN”, gdzie w miejscu
kropek wstawiony jest obliczony koszt ogłoszeń
UWAGA: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: grafika.png, logo.png, portal.html, styl6.css,, ewentualnie inne przygotowane pliki. 
Utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Zapisz go na płycie jako przegladarka.txt. 
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowisku. 

Czas przeznaczony na wykonanie zadania wynosi 150 minut. 

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