Arkusz E.14-07-17.06

Zadanie egzaminacyjne 

Wykonaj aplikację internetową dla agencji nieruchomości zawierającą elementy HTML, CSS i JavaScript oraz zaprojektuj logo agencji. 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 stworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL.

Grafika 

Rysunek 1a. Obiekty grafiki wektorowej 
Rysunek 1b. Kształt domu
Przy pomocy programu do obróbki grafiki wektorowej wykonaj projekt logo firmy. Swoją pracę udokumentuj zrzutami ekranowymi. Wykonaj następujące czynności:
- stwórz trzy obiekty: duży prostokąt, trójkąt oraz mały prostokąt zgodnie z rysunkiem 1a
- wypełnij wszystkie obiekty kolorem jasnobrązowym
- krawędziom każdego obiektu nadaj kolor ciemnobrązowy (ciemniejszy od wypełnienia), ustaw grubość krawędzi na cztery piksele. Udokumentuj tę czynność za pomocą zrzutu ekranu. Na zrzucie powinny być widoczne: całe okno programu wraz z jego nazwą, wszystkie trzy obiekty, okno lub kontrolka z ustawioną szerokością obramowania dla wybranego obiektu. Zrzut powinien być czytelny, zapisany w formacie JPEG jako zrzut1 
- ustaw obiekty tak, aby stykały się krawędziami i przypominały obraz domu zgodnie z rysunkiem 1b, następnie za pomocą funkcji programu graficznego przekształć trzy obiekty w jeden obiekt stanowiący kształt domu z rysunku 1b. Udokumentuj tę czynność za pomocą zrzutu ekranu. Na zrzucie powinien być widoczny obiekt domu oraz wskazana funkcja, która została użyta do przekształcenia. Zrzut powinien być czytelny, zapisany w formacie JPEG jako zrzut2.
- wyeksportuj grafikę do pliku o formacie PNG i nazwij projekt.png Grafika powinna mieć przezroczyste tło.
- w edytorze grafiki rastrowej przytnij obraz z pliku projekt.png tak, aby ramy okna wyznaczał kontur kształtu domu, a następnie przeskaluj obraz z zachowaniem proporcji tak, aby szerokość wynosiła 100 px. Przycięty i przeskalowany obraz zapisz w formacie PNG w pliku logo.png

Witryna internetowa 

Rysunek 2. Witryna internetowa
Cechy witryny:
- nazwa pliku: agencja.html 
- zastosowany standard kodowania polskich znaków
- tytuł strony widoczny na karcie przeglądarki: „Kup mieszkanie”
- arkusz stylów w pliku o nazwie agencja.css prawidłowo połączony z kodem strony
- podział strony na bloki: panel lewy, panel prawy, stopka zrealizowany za pomocą znaczników sekcji, zgodnie z rysunkiem 2
- zawartość panelu lewego:
 - nagłówek pierwszego stopnia o treści: „AGENCJA NIERUCHOMOŚCI”
 - nagłówek trzeciego stopnia o treści: „OFERUJEMY”
 - lista numerowana z elementami: Nowe mieszkania, Domy w naszym mieście, Domy w okolicy
 - nagłówek trzeciego stopnia o treści: „NASI PRACOWNICY”
 - tabela zgodna z rysunkiem 2, o wymiarach 3 wiersze na 2 kolumny, z czego w pierwszej kolumnie wszystkie wiersze są scalone w jedną komórkę. Treść komórki scalonej: Jan Nowak Prezes, przed słowem Prezes występuje łamanie linii. Treść kolumny 2 kolejno: Anna Kowalska, Katarzyna Nowakowska, Krzysztof Kowalewski.
- zawartość panelu prawego:
 - nagłówek pierwszego stopnia: „KALKULATOR CENY MIESZKANIA”,
 - pole do wprowadzania danych poprzedzone napisem: „Podaj metraż mieszkania w m2Uwaga: 2 w indeksie górnym 
 - pole do wprowadzania danych poprzedzone napisem: „Liczba pokoi z zamontowanym okablowaniem sieciowym”
 - pole typu checkbox z tekstem: „Kafelki w łazience?”
 - przycisk „OBLICZ”
- cechy stopki:
 - treść paragrafu (akapitu): „Autor strony: ”, dalej wstawiony Twój numer PESEL
 - obraz logo.png z alternatywnym tekstem „nieruchomości”

Styl CSS witryny internetowej 

Plik agencja.css zawiera formatowanie dla:
- panelu lewego: szerokość 40%, wysokość 600 px, kolor tła #FF8989
- panelu prawego: szerokość 60%, wysokość 600 px, kolor tła #7872D9
- stopki: czarny kolor tła, biały kolor czcionki, wysokość czcionki 150%, wyrównanie tekstu do prawej strony
- tabeli i komórki: marginesy zewnętrzne na 20 px, wewnętrzne na 30 px, obramowanie na 2 px linia ciągła brązowego koloru, obramowanie jest połączone, patrz rysunek 2
- przycisku: marginesy wewnętrzne i zewnętrzne 10 px, obramowanie na 2 px w kolorze niebieskim, kolor tła cyan, rozmiar czcionki 20 px
- znacznika h1: wyrównanie tekstu do środka
Niewymienione właściwości obiektów przybierają wartości domyślne.

Skrypt 

Skrypt napisany w języku JavaScript uruchamia się po wciśnięciu przycisku „OBLICZ”. Jego zadaniem jest obliczenie ceny mieszkania na podstawie danych wpisanych w pola tekstowe, uwzględniając wytyczne:
- 1 m2 powierzchni mieszkania kosztuje 4000 zł
- założenie sieci w jednym pokoju kosztuje 1000 zł
- wykafelkowanie łazienki kosztuje 2000 zł
Wyliczony całkowity koszt mieszkania jest wypisany na stronie pod przyciskiem „OBLICZ” w postaci: „Koszt mieszkania:  <koszt> zł”, gdzie <koszt> oznacza obliczoną skryptem wartość.
UWAGA: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować pliki: agencja.css, agencja.html, logo.png, projekt.png, zrzut1.jpg, zrzut2.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