E.14 - 11 - 19.01




Zadania egzaminacyjne

Wykonaj aplikację internetową galerii zdjęć. Wykorzystaj pakiet XAMPP jako środowisko bazodanowo-aplikacyjne. Stronę internetową zbuduj przy wykorzystaniu edytora zaznaczającego składnię oraz programu do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy5-6.zip zabezpieczone hasłem: Zdj3ci@
Archiwum należy rozpakować.
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Po skończonej pracy wyniki zapisz w tym folderze.

Grafika
Zdjęcia pies1.jpg, pies2.jpg, pies3.jpg oraz kot1.jpg przygotuj przy pomocy programu do obróbki grafiki rastrowej:
  • Każde ze zdjęć powinno być przeskalowane z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 400 px
  • Zdjęcie pies1.jpg zapisz jako pies1-szary.jpg. Cechy zdjęcia pies1-szary.jpg:
    1. tryb odcieni szarości,
    2. filtr "pikselowanie"
  • Zdjęcie pies2.jpg zapisz jako pies2-szary.jpg. Cechy zdjęcia pies2-szary.jpg:
    1. tryb odcieni szarości,
    2. filtr "rozmycie"
  • Zdjęcie pies3.jpg zapisz jako pies3-szary.jpg. Cechy zdjęcia pies2-szary.jpg:
    1. tryb odcieni szarości,
    2. filtr "małe kafelki"
  • Zdjęcie kot1.jpg zapisz jako kot1-szary.jpg. Cechy zdjęcia kot1-szary.jpg:
    1. tryb odcieni szarości,
    2. dowolny filtr zniekształcający obraz (np. fale, szkło, degormacja, mozaika)
    3. Zdjęcie musi wyraźnie różnić się od oryginału
Obrazy 1a-1d przedstawiają przykłady przekształceń obrazów. Obrazy psów mają charakter orientacyjny, efekt przekształcenia może się nieznacznie różnić. W przypadku zdjęcia kota zastosowano filtr fale. Dowolne zniekształcenie obrazu kota będzie poprawne. Brak obrazu proszę zgłosić do supportu
Obraz 1a. pies1-szary.jpg
Brak obrazu proszę zgłosić do supportu
Obraz 1b. pies2-szary.jpg
Brak obrazu proszę zgłosić do supportu
Obraz 1c. pies3-szary.jpg
Brak obrazu proszę zgłosić do supportu
Obraz 1d. kot1-szary.jpg
Witryna internetowa
Brak obrazu proszę zgłosić do supportu
Obraz 2a. Strona głowna witryny
Brak obrazu proszę zgłosić do supportu
Obraz 2b. Podstrona psy, najechano kursorem na obraz pies3.jpg
Cechy witryny:
  • Strona główna o nazwie index.html oraz podstrony psy.html i koty.html
Cechy wspólne dla wszystkich stron:
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki "Galeria zdjęć"
  • Arkusz stylów w pliku o nazwie styl5.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, poniżej panel lewy, dwa panele prawe ułożone jedne pod drugim oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2a i 2b
  • Zawartość panelu lewego:
    1. nagłówek drugiego stopnia o treści "Kategorie"
    2. lista punktowana (nieuporządkowana) o elementach: "Psy", "Koty", "Gryzonie", "Jaszczurki", "Inne zdjęcia"
    3. Element listy "Psy" jest odnośnikiem, jego kliknięcie prowadzi do strony psy.html
    4. Element listy "Psy" jest odnośnikiem, jego kliknięcie prowadzi do strony koty.html
    5. Nagłówek czwartego stopnia o treści "Powrót do strony głownej", jest odnośnikiem, jego kliknięcie prowadzi do strony index.html
  • Zawartość stopki:
    1. napis o treści "Galerię zdjęć opracował ", dalej wstawiony numer PESEL, numer PESEL jest pochylony
Cechy odrębne dla strony index.html:
  • Zawartość banera:
    1. Nagłówek pierwszego stopnia o treści: "Zdjęcia naszych pupilów"
  • Zawartość panelu prawego, górnego:
    1. Nagłówek pierwszego stopnia o treści: "Zdjęcia tygodnia"
    2. Akapit o treści "Azor, 4 miesiące"
  • Zawartość panelu prawego, dolnego
    1. Zdjęcie pies2.jpg z tekstem alternatywnym "Azor" umieszczono w akapicie
Cechy odrębne dla strony psy.html:
  • Zawartość banera:
    1. Nagłówke pierwszego stopnia o treści "Zdjęcia psów"
  • Zawartość panelu prawego, górnego:
    1. Nagłówek pierwszego stopnia o treści "Wybierz zdjęcie"
    2. Poniżej zdjęcia pies1.jpg, pies2.jpg, pies3.jpg z tekstem alternatywnym odpowiednio "pies1", "pies2", "pies3". Zdjęcia mają przypisane zdarzenia kliknięcia, najechania kursorem na element i opuszczenia elementu przez kursor myszy. Zdarzenia są obsługiwane przez skrypt
  • Zawartość panelu prawego, dolnego:
    1. Zdjęcie pies1.jpg z tekstem alternatywnym "pies-duży" umieszczono w akapicie
Cechy odrębne dla strony koty.html (organizacja podstrony analogiczna jak w przypadku psy.html):
  • Zawartość banera:
    1. Nagłówek pierwszego stopnia o treści "Zdjęcia kotów"
  • Zawartość panelu prawego, górnego:
    1. Nagłówek pierwszego stopnia o treści "Wybierz zdjęcie"
    2. Poniżej zdjęcie kot1.jpg z tekstem alternatywnym "kot1". Zdjęcie ma przypisane zdarzenia kliknięcia, najechania kursorem na element i opuszczenia elementu przez kursor myszy. Zdarzenia są obsługiwane przez skrypt
  • Zawartość panelu prawego, dolnego:
    1. Zdjęcie kot1.jpg z tekstem alternatywnym: "kot-duzy" umieszczono w akapicie
Styl CSS witryny internetowej
Cechy formatowania CSS działające na stronie
  • Wspólne dla całej strony: krój czcionki Verdana
  • Banera: kolor tła #9692B1, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 80 px
  • Panelu lewego: kolor tła #9692B1, biały kolor czcionki, szerokość 20%, wysokość 750 px
  • Panelu prawego - górnego: kolor tła #FFF4CC, szerokość 80%, wysokość 300 px, wyrównanie tekstu do środka
  • Panelu prawego - dolnego: kolor tła #DBCC93, szerokość 80%, wysokość 450 px, wyrówanie tekstu do środka
  • Stopki: kolor tła #9692B1, biały kolor czcionki, wyrównanie tekstu do prawej strony
  • Odnośnika: biały kolor czcionki
  • Obrazów wyświetlonych w prawym górnym panelu: szerokość 15%, margines zewnętrzny 20 px
  • Obrazów wyświetlanych w prawym dolnym panelu: obramowanie na 4 px, linią ciągłą o kolorze #9692B1
  • W momencie najechania kursorem na obraz wyświetlany w prawym dolnym panelu kolor jego obramowanie zmienia się na szary
Skrypt
Wymagania dotyczące skryptu:
  • Wykonywany po stronie przeglądarki, wywoływany przez zdarzenia kliknięcia w miniaturę obrazu, najechanie kursorem i opuszczenie przez kursor myszy miniatury obrazu
  • Po najechaniu kursorem myszy na dowolną miniaturę podmieniane jest zdjęcie kolorowe na opowiadające mu zdjęcie z odcieniami szarości i filtrem, np. plik pies1.jpg zamieniany jest na pies1-szary.jpg
  • Po opuszczeniu miniatury przez kursor myszy jest wykonywana odwrotna transformacja - zdjęcie z odcienami szarości jest zamieniane na zdjęcie kolorowe, np. plik pies1-szary.jpg zamienany jest na pies1.jpg
  • Po kliknięciu na obraz-miniaturę wykonywane są dwie akcje:
    1. Ta sama, co przy opuszczaniu kursowa - podmiana obrazu z odcieniami szarości na kolorowy
    2. Kliknięty obraz jest wyświetlany w panelu prawym - dolnym. Np. jeżeli kliknięto na miniaturę pies3.jpg z panelu prawego górnego, to w panelu prawym dolnym jest ładowany obraz pies3.jpg
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przegladarka.txt. Zapisz w nim nazwe przegladarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: index.html, kot1.jpg, kot1-szary.jpg, koty.html, pies1.jpg, pies1-szary.jpg, pies2.jpg, pies2-szary.jpg, pies3.jpg, pies3-szary.jpg, przeglądarka.txt, psy.html, styl5.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność jej odczytu. Opisz płytę swoim numerem PESEL i pozostaw zapakowaną w pudełku na stanowiski wraz z arkuszem egzaminacyjnym

Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów:
  • grafika,
  • wygląd witryny internetowej,
  • działanie witryny internetowej,
  • styl CSS witryny internetowej,
  • skrypt.
Brak obrazu proszę głosić do supportu
Wybrane pola i metody modelu DOM języka JavaScript
Brak obrazu proszę głosić do supportu
Wybrane zdarzenia HTML
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.