Arkusz E.14-01-16.08 ,

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.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. 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 rysunkiem 1.
Rysunek 1. Grafika

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 rysunkiem 2.
Rysunek 2. Szablon witryny internetowej. 

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 (np. znacznika div);
  • 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: 1 – haslo.html, 2 – 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

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:

  • 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 rysunek 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.

Styl CSSwitryny

Styl CSS jest zapisany w osobnym pliku o nazwie styl.css oraz prawidłowo dołączony do pliku z kodem strony. Zawiera:
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 zapisango 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.
 Rysunek 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 rysunek 3 jest tylko fragmentem wyświetlanej strony.
Rysunek 3. Fragment strony hasło.html z efektem działania 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.
Kryteria oceny:
http://egzamin-e14.blogspot.com/2016/12/kryteria-oceny-e14-01-1608.html
Przykładowe rozwiązanie
http://egzamin-e14.blogspot.com/2016/12/rozwiazanie-arkusza-e14-01-1608.html