Arkusz E.14 : 2016 - październik - zad. 01 (js)

Oznaczenie: E.14-01-16.08   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj witrynę internetową. Do tego celu wykorzystaj edytor zaznaczający składnię HTML, program do obróbki grafiki rastrowej oraz program do obróbki grafiki wektorowej.

Wyniki swojej pracy zapisz w folderze umieszczonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL.

Grafika

Witryna internetowa wykorzystuje grafikę, którą należy przygotować i jest ona zgodna z obrazem 1.

Obraz 1. Grafika

Grafika do przygotowania

Cechy grafiki:

  • tło przezroczyste (obraz nie ma tła)
  • na obrazie znajduje się okrąg (nie ma wypełnienia) o średnicy 450px oraz krawędzi grubości 8px w kolorze czerwonym
  • w środku okręgu znajduje się znak zapytania zapisany czcionką Arial, rozmiar czcionki: 450, kolorem czerwonym
  • na znaku zapytania znajduje się tekst: "Jak silne jest Twoje hasło?", tekst jest złamany po słowie "jest", zapisany czcionką Arial rozmiar 56, kolorem niebieskim
  • rysunek należy zapisać w formacie PNG pod nazwą haslo.png. Okrąg wyznacza granice rysunku, zatem szerokość i wysokość rysunku powinna wynosić 450px.

Witryna internetowa

Witryna internetowa składa się z trzech podstron: index.html, haslo.html i zasady.html. Strony mają wspólny szablon zgodny z obrazem 2.

Obraz 2. Szablon witryny internetowej

Szablon witryny

Wspólne cechy witryny dla wszystkich podstron:

  • zastosowany właściwy standard kodowania polskich znaków
  • tytuł strony widoczny na karcie przeglądarki: "Miernik jakości hasła"
  • arkusz stylów umieszczony w osobnym pliku o nazwie: styl.css
  • podział strony na bloki: baner, panele lewy i prawy, stopka; zrealizowany za pomocą znaczników sekcji
  • zawartość banera: nagłówek pierwszego stopnia o treści: "Sprawdź swoje hasło"; tekst ten jest odsyłaczem i prowadzi do strony index.html
  • zawartość panelu lewego:
    • nagłówek drugiego stopnia o treści: "Wybierz"
    • poniżej lista numerowana z elementami: "Sprawdź hasło" oraz "Zasady tworzenia hasła". Każdy z elementów listy jest odsyłaczem i prowadzi kolejno do stron: pierwszy do haslo.html, drugi do zasady.html
  • zawartość stopki: nagłówek trzeciego stopnia o treści: "Miernik jakości hasła", poniżej paragraf (akapit) o treści: "Stronę opracował: ", dalej wpisany numer PESEL zdającego

Podstrony witryny różnią się jedynie zawartością panelu prawego.

Cechy panelu prawego dla pliku index.html:

  • wstawiony obraz haslo.png

Cechy panelu prawego dla pliku haslo.html:

  • wstawiony obraz haslo.png
  • tekst paragrafu: "Twoje hasło:", następnie pole tekstowe do wprowadzenia hasła, następnie przycisk z tekstem "Sprawdź". Wszystkie trzy elementy w jednej linii
  • cechy pola tekstowego: pole pozwala na sekretne wprowadzenie hasła; w czasie, gdy wpisywany jest tekst, pole pokazuje kropki
  • cechy przycisku "Sprawdź": po wciśnięciu jest wykonywany skrypt, jego opis znajduje się w dalszej części arkusza
  • wygląd panelu prawego przedstawia obraz 3

Cechy panelu prawego dla pliku zasady.html:

  • tabela z nagłówkami kolumn. Zawartość tekstu zgodna z tabelą 1.
  • Uwaga: poniższe zasady zostały uproszczone do wymogów tego zadania.

Tabela 1. Zasady tworzenia hasła

Jakość hasła Opis
dobre długość 7 znaków i wiecej, zawiera przynajmniej jedną cyfrę
średnie długość 4 do 6 znaków, zawiera przynajmniej jedną cyfrę
słabe inne przypadki

Styl CSS witryny

Styl CSS jest zapisany w osobnym pliku o nazwie styl.css oraz prawidłowo dołączony do pliku z kodem strony.

Formatowanie sekcji:

  • baner: kolor tła #829EB9, wysokość 50px, krój pisma Arial, wyrównanie tekstu do środka
  • panel lewy: kolor tła #B3C6D9, wysokość 600px, szerokość 25%
  • panel prawy: kolor tła #E0E9F1, wysokość 600px, szerokość 75%, wyrównanie tekstu do środka
  • stopka: kolor tła #829EB9, krój pisma Arial, wyrównanie tekstu do prawej strony

Formatowanie znaczników:

  • obraz: marginesy zewnętrzne 30px, marginesy wewnętrzne 10px, obramowanie o szerokości 2px linią przerywaną koloru #B3C6D9
  • tabela: marginesy zewnętrzne 30px, obramowanie o szerokości 2px linią ciągłą, szerokość tabeli zajmuje 70% szerokości prawego panelu
  • wiersze tabeli: w momencie, gdy mysz znajduje się na wierszu, powinien on przybrać niebieski kolor tła i biały kolor czcionki
  • nagłówki kolumn tabeli: kolor tła #B3C6D9, obramowanie o szerokości 2px linią ciągłą
  • komórki kolumn: obramowanie o szerokości 2px linią ciągłą
  • paragraf: marginesy zewnętrzne 30px

Skrypt

Skrypt powinien zostać napisany w języku uruchamianym po stronie przeglądarki. Skrypt jest uruchamiany po naciśnięciu przycisku "Sprawdź".

Działanie skryptu:

  • pobiera hasło z pola tekstowego
  • sprawdza warunki jakości hasła (przedstawione w tabeli 1)
  • wypisuje w panelu prawym pod polem tekstowym treść:
    • "WPISZ HASŁO!" czcionką w kolorze czerwonym, jeżeli nic nie jest wpisane w polu tekstowym
    • "SŁABE" czcionką koloru żółtego, jeśli hasło spełnia warunki hasła słabego
    • "ŚREDNIE" czcionką koloru niebieskiego, jeśli hasło spełnia warunki hasła średniego
    • "DOBRE" czcionką koloru zielonego, jeśli hasło spełnia warunki hasła dobrego

Obraz 3 przedstawia efekt działania skryptu. Wpisano hasło qwe12, zgodnie z tabelą 1 jest ono średnie. Tekst ŚREDNIE w kolorze niebieskim został wyświetlony przez skrypt. Należy zauważyć, że obraz 3 jest tylko fragmentem wyświetlanej strony.

Obraz 3. Fragment strony hasło.html z efektem działania skryptu

Przykładowe wykonanie skryptu

UWAGA!
Po zakończeniu pracy zgłoś przewodniczącemu ZN gotowość do nagrania płyty CD/DVD z rezultatami pracy. W folderze z Twoim numerem PESEL powinny się znajdować pliki: haslo.html, haslo.png, index.html, styl.css, zasady.html, ewentualnie inne przygotowane przez Ciebie pliki.
Po nagraniu płyty CD/DVD sprawdź liczbę oraz poprawność działania zapisanych plików.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

  • grafika
  • witryna internetowa
  • podstrony witryny
  • styl CSS witryny
  • skrypt.