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



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.


Kryteria oceny E.14-09-18.01

Arkusz E.14-09-18.01

Zadanie egzaminacyjne

Zaprojektuj zapytania SQL do bazy szkola, wykonaj zrzuty ekranu przedstawiające efekty działania zapytań, przygotuj grafiki przeznaczone do umieszczenia na stronie internetowej oraz witrynę internetową. Wykorzystaj środowisko XAMPP, edytor zaznaczający składnię HTML oraz edytor grafiki rastrowej.
Na stanowisku egzaminacyjnym znajduje się komputer z zainstalowanym systemem operacyjnym i oprogramowaniem, a także dokumentacja w postaci spisu zainstalowanego oprogramowania. Zaloguj się na konto Egzamin bez hasła. Wyniki swojej pracy zapisz w folderze. Jako nazwy folderu użyj swojego numeru PESEL. Folder umieść na pulpicie konta Egzamin. Wewnątrz folderu utwórz dwa podfoldery o nazwach: baza oraz www.

Baza danych

Na pulpicie konta Egzamin znajduje się archiwum ZIP o nazwie zad3.zip. Archiwum jest zabezpieczone hasłem szko!a_3


Kod pliku szkola.sql

Jego zawartość to plik szkola.sql zawierający przygotowane do importu tabele bazy danych szkola.
Baza danych szkola składa się z trzech tabel: uczen, klasa, wychowawca. Wszystkie tabele posiadają klucz podstawowy o nazwie id. Opis tabel jest następujący:
1. Tabela uczen
 a. przechowuje: informacje o wybranych uczniach klas 1a, 1b, 2a i 2b szkoły ponadgimnazjalnej,
 b. pola: imie i nazwisko typu tekstowego oraz id, id_klasy i srednia_ocen typu liczbowego (pole
srednia_ocen przechowuje liczby rzeczywiste),
 c. pole id_klasy jest kluczem obcym powiązanym z kluczem podstawowym tabeli klasa.
2. Tabela wychowawca
 a. przechowuje: informacje o wychowawcach klas 1a, 1b, 2a i 2b,
 b. pola: imie i nazwisko typu tekstowego oraz id i id_klasy typu liczbowego,
 c. pole id_klasy jest kluczem obcym powiązanym z kluczem podstawowym tabeli klasa.
3. Tabela klasa
 a. przechowuje: informacje o klasach 1a, 1b, 2a i 2b,
 b. pola: nazwa typu tekstowego oraz id typu liczbowego.

Zapytania do bazy 

Za pomocą narzędzia XAMPP Control Panel uruchom usługi Apache oraz MySQL, przejdź do narzędzia phpMyAdmin. Wykonaj następujące czynności:
1. Utwórz bazę danych o nazwie szkola,
2. Do bazy szkola zaimportuj tabele z pliku szkola.sql z wcześniej rozpakowanego archiwum,
3. W podfolderze baza utwórz plik zapytania.txt,
4. Zapisz i wykonaj zapytania SQL działające na bazie szkola. Zapytania zapisz w pliku kwerendy.txt, w podfolderze baza. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG, w podfolderze baza jako: kwerenda1.png, kwerenda2.png, nowy_uzytkownik.png i uprawnienia.png. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań.
Zapytanie 1: zapisujące w tabeli klasa nowy rekord danych: id=5, nazwa=3a
Zapytanie 2: wyświetlające jedynie wszystkie klasy oraz średnią obliczoną ze wszystkich średnich
ocen uczniów zgrupowanych w danej klasie
Zapytanie 3: tworzące użytkownika Dyrektor na localhost z hasłem dyr_123
Zapytanie 4: nadające prawa dla użytkownika Dyrektor pełne uprawnienia do wszystkich tabel
w bazie szkola,
5. Wyeksportuj bazę danych do pliku o nazwie szkola_nowa.sql, plik eksportu umieść w podfolderze baza.

Witryna internetowa 

Stwórz prostą witrynę składającą się z jednej strony internetowej o nazwie index.html. Plik zapisz w podfolderze www (który znajduje się w folderze nazwanym Twoim numerem PESEL). Wygląd witryny jest zgodny z Obrazem 1.
Obraz 1. Witryna internetowa 
Przygotowanie grafik: 
Wykorzystując zrzuty ekranowe kwerend przygotuj grafiki dla witryny internetowej:
1. zrzuty ekranowe wykadruj tak, aby były widoczne tylko efekty działania zapytań, nie powinny być widoczne inne elementy okna przeglądarki oraz panelu phpMyAdmin,
2. przeskaluj obrazy tak, aby ich szerokość wynosiła 400 px, a wysokość 200 px,
3. obrazy zapisz w formacie JPG, w podfolderze www, jako kwerenda1.jpg, kwerenda2.jpg, nowy_uzytkownik.jpg i uprawnienia.jpg
UWAGA: pliki z podfolderu baza pozostaw niezmienione, nie nadpisuj ich. 
Cechy witryny: 
1. zastosowano właściwy standard kodowania polskich znaków,
2. tytuł strony: „Szkoła ponadgimnazjalna”,
3. strona podzielona za pomocą znaczników sekcji na baner, panele lewy i prawy oraz stopkę, tak aby po uruchomieniu strony w przeglądarce wygląd był zgodny z obrazem 1,
4. zawartość banera: nagłówek pierwszego stopnia o treści: „Projekt strony internetowej szkoły ponadgimnazjalnej”,
5. zawartość panelu lewego:
 a. tabela o rozmiarach 5 wierszy i 2 kolumny,
 b. szerokość prawej kolumny tabeli: 405 px,
 c. komórki wiersza nagłówkowego zawierają kolejno wpisy: „Treść zapytania” i „Zrzut ekranu”,
 d. w komórkach tabeli w kolejnych wierszach: treści zapytań z pliku zapytania.txt i obok –
odpowiadające im zrzuty ekranu w formacie JPG zgodnie z obrazem 1,
 e. obrazy powinny posiadać tekst alternatywny zawierający nazwę pliku,
6. zawartość panelu prawego:
 a. nagłówek drugiego stopnia o treści: „Do pobrania”,
 b. poniżej w postaci listy punktowanej dwa odnośniki:
  - „zapytania SQL”,
  - „baza danych”,
 c. kliknięcie odnośnika o treści: „zapytania SQL”, powoduje pobranie/wyświetlenie pliku
zapytania.txt z podfolderu baza,
 d. kliknięcie odnośnika o treści: „baza danych”, powoduje pobranie/wyświetlenie pliku
szkola_nowa.sql z podfolderu baza,
 e. poniżej linia pozioma przez całą szerokość panelu prawego,
 f. poniżej napis w nagłówku trzeciego stopnia: „Wyznaczanie najniższej średniej”,
 g. poniżej lista punktowana z nazwiskami: Polak, Nowak, Rysik, obok każdego nazwiska pole
edycyjne typu tekstowego przeznaczone na wpisanie średniej ocen ucznia,
 h. poniżej przycisk z etykietą „wyznacz”,
 i. poniżej napis w nagłówku trzeciego stopnia „Najniższa średnia:”,
7. zawartość stopki: nagłówek trzeciego stopnia o treści: „stronę wykonał: ………….”, w miejsce
kropek wpisany Twój numer PESEL.

Styl CSS witryny internetowej 

Styl elementów witryny zdefiniuj przy pomocy języka CSS, w osobnym pliku o nazwie styl.css, plik ten zapisz w podfolderze www oraz prawidłowo dołącz do pliku z kodem strony.
Wymagania odnośnie stylu CSS:
1. kolor czcionki odnośników: żółty,
2. kolor tła banera, stopki oraz panelu prawego: #5957a1,
3. kolor tła panelu lewego: #bbadcd,
4. wyrównanie tekstu banera i stopki: do środka,
5. wyrównanie tekstu panelu prawego: do środka,
6. krój czcionki dla całej strony: Arial,
7. kolor czcionki dla całej strony: biały,
8. marginesy wewnętrzne banera: 10 px,
9. szerokość panelu lewego: 65%,
10. szerokość panelu prawego: 35%,
11. wysokość paneli lewego i prawego: 450 px,
12. wysokość banera: 70 px,
13. wysokość stopki: 50 px,
14. kolor poziomej linii w prawym panelu: żółty,
15. punktor list w panelu prawym: kwadrat,
16. wszystkie komórki tabeli obramowane ramką czarną kreskowaną szerokości 1 px,
17. włączone paski przewijania dla panelu lewego.

Skrypt wyznaczający najwyższą średnią ocen 

1. wykonywany po stronie klienta,
2. powinien wykonywać działania na liczbach rzeczywistych,
3. po kliknięciu przycisku „wyznacz” skrypt pobiera dane z trzech pól edycyjnych typu tekstowego,
4. jeżeli przynajmniej jedno z pól jest puste lub do któregoś pola wpisano ciąg znaków, który nie jest
poprawną liczbą rzeczywistą skrypt powinien wyświetlić w osobnym oknie komunikat „wpisz
poprawne dane”,
5. w przeciwnym przypadku skrypt powinien przekonwertować ciągi znaków na liczby rzeczywiste,
6. następnie skrypt powinien poprawnie wyznaczyć najniższą spośród trzech średnich ocen,
7. na koniec skrypt powinien wyświetlić wyznaczoną najniższą średnią poniżej napisu „Najniższa
średnia” w prawym panelu.

Uwaga: po zakończeniu pracy nagraj płytę z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować podfoldery: baza oraz www. W podfolderze baza powinny znajdować się pliki: szkola_nowa.sql, zapytania.txt, kwerenda1.png, kwerenda2.png, nowy_uzytkownik.png i uprawnienia.png. W podfolderze www powinny znajdować się pliki: kwerenda1.jpg, kwerenda2.jpg, nowy_uzytkownik.jpg i uprawnienia.jpg oraz index.html, styl.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:
- operacje na bazie danych,
- utworzona strona internetowa,
- zdefiniowany styl CSS strony internetowej,
- skrypt.