Arkusz E.14-03-20.01-SG

Zadanie egzaminacyjne 

Wykonaj aplikację internetową fabryki cukierków. Wykorzystaj do tego celu edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i/lub wektorowej.
 Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy3.zip zabezpieczone hasłem: Wyp@kujMni3
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.Wyniki swojej pracy zapisz w tym folderze.

Grafika 

Zdjęcie cukierki1.jpg należy zapisać w odcieniach szarości. Logotyp należy przygotować przy pomocy programu do obróbki grafiki rastrowej i/lub wektorowej, na podstawie zdjęcia cukierki2.png:
 – zdjęcie cukierki2.png powinno być tak skadrowane, aby był widoczny jedynie czerwony żelek
 – nad żelkiem powinien znaleźć się napis o treści „Cukierki”
 – cechy tekstu: tekst powinien być opisany na okręgu zgodnie z obrazem 1, czcionka Georgia lub Times New Roman, pogrubiona, wypełnienie koloru fioletowe
 – cechy obrazu: tło przezroczyste, wysokość dokładnie 170 px
 – obraz zapisany jako logotyp w formacie umożliwiającym zapis przezroczystości Zdjęcie cukierki3.jpg należy skalować do rozmiaru 600 px na 450 px
Obraz 1. Logotyp

Witryna internetowa 
Obraz 2. Witryna, podstrona Zamówienie

Cechy witryny:
 – strona główna o nazwie index.html oraz podstrona zamowienie.html
Cechy wspólne dla obu stron:
 – zastosowany właściwy standard kodowania polskich znaków
 – tytuł strony widoczny na karcie przeglądarki: „Fabryka cukierków”
 – arkusz stylów w pliku o nazwie styl10.css prawidłowo połączony z kodem strony
 – podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
 – zawartość pierwszego górnego bloku: odnośnik o treści „Zamów cukierki”, którego wybranie prowadzi do strony zamowienie.html
 – Zawartość drugiego górnego bloku: odnośnik, którego wybranie prowadzi do strony index.html. Odnośnik jest w formie obrazu logotyp z tekstem alternatywnym „Nasze logo”
 – zawartość bloku głównego prawego:
   – nagłówek drugiego stopnia o treści: „Nasza oferta”
   – tabela o rozmiarze 2x2 (wiersze drugiej kolumny są scalone):
     – w pierwszym wierszu znajdują się napisy „Kształty” oraz „Możesz zamówić dowolny kolor cukierka”, łamanie tekstu po słowie „zamówić”
     – w drugim wierszu znajduje się lista numerowana (uporządkowana) oelementach: „cytryna”, „liść”, „banan”
 – zawartość stopki: tekst „Autor strony: PESEL”, gdzie PESEL to Twój numer PESEL. PESEL jest pogrubiony
Cechy odrębne dla pliku index.html:
 – zawartość banera: nagłówek pierwszego stopnia o treści: „Słodka kraina”
 – zawartość bloku głównego lewego: obraz cukierki3.jpg z tekstem alternatywnym o treści „Nasze cukierki”Cechy odrębne dla pliku zamowienie.html:
   – zawartość banera: nagłówek pierwszego stopnia o treści: „Strefa zamówień”
   – zawartość bloku głównego lewego:
   – tekst: „Numer kształtu: ”
   – poniżej pole edycyjne typu numerycznego
   – poniżej tekst: „skomponuj swój kolor, podaj RGB:”
   – poniżej trzy pola edycyjne typu numerycznego, każde poprzedzone tekstem: „R:”, „G:”, „B:”
   – przycisk o treści „Zamówienie”, którego wciśnięcie powoduje wywołanie skrypt
   – poniżej paragraf, w którym pierwotnie znajduje się tekst: „Twoje zamówienie”, tekst jest modyfikowany przez skrypt
   – przycisk o treści „Kolor”

Styl CSS witryny internetowej 

Cechy formatowania CSS działające na stronie:
 – wspólne dla całej strony: krój czcionki Helvetica
 – wspólne dla dwóch bloków górnych: kolor tła RGB: 146, 184, 112; wyrównanie tekstu do środka, szerokość 50%, wysokość 170 px
 – wspólne dla banera i stopki: kolor tła RGB: 100, 61, 49; biały kolor czcionki,wyrównanie tekstu do środka, wysokość 80 px, marginesy wewnętrzne 5 px
 – wspólne dla bloków głównych: kolor tła RGB: 146, 184, 112; szerokość 50%, wysokość 450 px
 – odnośnika „Zamówienie” z drugiego bloku górnego: tło w postaci obrazu cukierki1.jpg, margines wewnętrzny prawy 30 px, dolny 120 px, rozmiar czcionki 150%, bez podkreślenia
 – tabeli i komórki tabeli: obramowanie 2 px, linią kreskowaną zieloną; marginesy zewnętrzne 30 px, wewnętrzne 20 px
 – nagłówka pierwszego stopnia: odległość między literami 20 px, rozmiar czcionki 250%

Skrypt 

Wymagania dotyczące skryptu:
 – wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamówienie”
 – skrypt sprawdza wprowadzony numer kształtu i wypisuje w akapicie poniżej przycisku „Zamówienie” tekst „Twoje zamówienie to cukierek”, a dalej w zależności od wprowadzonej wartości: 1 –„cytryna”, 2 –„liść”, 3 –„banan”, inny –„inny”,np. „Twoje zamówienie to cukierek liść”
 – następnie skrypt sprawdza wartości RGB, a następnie zmienia kolor tła przycisku „Kolor” na kolor odpowiadający podanej wartości RGB

Wybrane pola i metody modelu DOM języka JavaScript


UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki 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: cukierki1, cukierki3, index, logotyp, przeglądarka, styl10, zamowienie, 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 stanowisku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:
 – grafika, –zawartość witryny internetowej,
 – działanie witryny internetowej,
 – styl CSS witryny internetowej,
 – skrypt.


Arkusz E.14-02-20.01-SG

Zadanie egzaminacyjne 

Wykonaj aplikację internetową Fabryki żelków. Wykorzystaj do tego celu edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i/lub wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy2.zip zabezpieczone hasłem: Wyp@kujMni3
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ęcie cukierki1.jpg
Zdjęcie cukierki1.jpg należy przygotować przy pomocy programu do obróbki grafiki rastrowej:
– zdjęcie powinno być przezroczyste w miejscu białego tła nad cukierkami. Przykład przedstawiono na obrazie 1a, na którym w miejscu przezroczystości znajduje się krata
– zdjęcie powinno być zapisane pod nazwą cukierki1 w formacie umożliwiającym zapis przezroczystości Logo należy przygotować przy pomocy programu do obróbki grafiki rastrowej i/lub wektorowej, na podstawie zdjęcia cukierki2.png:
Zdjęcie cukierki2.png
– zdjęcie cukierki2.png powinno być tak skadrowane, aby był widoczny jedynie zielony żelek
– nad żelkiem powinien znaleźć się napis o treści „Fabryka”, pod żelkiem napis o treści „żelków”
– cechy tekstu: Orientacja pochyła zgodnie z obrazem 1b, czcionka Arial, pogrubiona, wypełnienie koloru jasno zielonego, kontur czarny
– cechy obrazu: tło przezroczyste, wysokość dokładnie 180 px
– obraz zapisany jako logo w formacie umożliwiającym zapis przezroczystości
Zdjęcie cukierki3.jpg
Zdjęcie cukierki3.jpg należy przeskalować do rozmiaru 533 px na 400 px
Obraz 1a. Przezroczystość zdjęcia cukierki1

Obraz 1b. Logo 

Witryna internetowa 

Obraz 2. Witryna, podstrona Zamówienie

Cechy witryny:
– strona główna o nazwie index.html oraz podstrona zamowienie.html
Cechy wspólne dla obu stron:
– zastosowany właściwy standard kodowania polskich znaków
– tytuł strony widoczny na karcie przeglądarki: „Fabryka żelków”
– arkusz stylów w pliku o nazwie styl9.css prawidłowo połączony z kodem strony
– podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
– zawartość pierwszego górnego bloku: odnośnik, którego wybranie prowadzi do strony index.html. Odnośnik jest w formie obrazu logo z tekstem alternatywnym „logo fabryki”
– zawartość drugiego górnego bloku: odnośnik o treści „Zamówienie”, którego wybranie prowadzi do strony zamowienie.html
– zawartość bloku głównego lewego:
 – nagłówek pierwszego stopnia o treści: „Oferta”
  – tabela o rozmiarze 2x2:
  – w pierwszym wierszu znajdują się napisy „Kształty” oraz „Kolory”
  – w drugim wierszu w pierwszej kolumnie znajduje się lista numerowana (uporządkowana) o elementach: „miś”, „żabka”, „serce”
  – w drugim wierszu w drugiej kolumnie znajduje się lista numerowana (uporządkowana) o elementach: „czerwony”, „niebieski”, „żółty”, „inny”
– zawartość stopki: tekst „Autor strony: PESEL”, gdzie PESEL to Twój numer PESEL. PESEL jest zapisany kursywą
Cechy odrębne dla pliku index.html:
– zawartość banera: nagłówek drugiego stopnia o treści: „Nasza oferta”
– zawartość bloku głównego prawego: obraz cukierki3.jpg z tekstem alternatywnym o treści „Nasze wyroby”
Cechy odrębne dla pliku zamowienie.html:
– zawartość banera: nagłówek drugiego stopnia o treści: „Zamów nasz produkt”  zawartość bloku głównego prawego:
 – tekst: „Podaj numer kształtu: ”
 – poniżej pole edycyjne typu numerycznego
 – poniżej tekst: „skomponuj swój kolor, podaj RGB: ”
 – poniżej trzy pola edycyjne typu numerycznego, każde poprzedzone tekstem: „R:”, „G:”, „B:”
 – przycisk o treści „Zamów”, którego wciśnięcie powoduje wywołanie skryptu
 – poniżej paragraf, w którym pierwotnie znajduje się tekst: „Wybrany kształt”, tekst jest modyfikowany przez skrypt
 – przycisk o treści „Wybrany kolor”

Styl CSS witryny internetowej 

Cechy formatowania CSS działające na stronie:
– wspólne dla całej strony: krój czcionki Georgia
– wspólne dla dwóch bloków górnych: kolor tła RGB: 197, 85, 160; wyrównanie tekstu do środka, szerokość 50%, wysokość 180 px
– wspólne dla banera i stopki: kolor tła RGB: 246, 226, 222; wyrównanie tekstu do środka, wysokość 100 px, marginesy wewnętrzne 10 px
– wspólne dla bloków głównych: kolor tła RGB: 197, 85, 160; biały kolor czcionki, szerokość 50%, wysokość 400 px
– odnośnika „Zamówienie” z drugiego bloku górnego: tło w postaci obrazu cukierki1, margines wewnętrzny prawy 70 px, dolny 120 px, rozmiar czcionki 150%, bez podkreślenia
– tabeli i komórki tabeli: obramowanie 2 px, linią ciągłą niebieską; marginesy zewnętrzne 20 px, wewnętrzne 10 px
– nagłówka drugiego stopnia: odległość między literami 10 px, rozmiar czcionki 200%

Skrypt 

Wymagania dotyczące skryptu:
– wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamów”
– skrypt sprawdza wprowadzony numer kształtu i wypisuje w akapicie poniżej przycisku „Zamów” tekst „Zamówiłeś żelka: ”, a dalej w zależności od wprowadzonej wartości: 1 – „miś”, 2 – „żabka”, 3 – „serce”, inny – „inny kształt”, np. „Zamówiłeś żelka: miś”
– następnie skrypt sprawdza wartości RGB, a następnie zmienia kolor tła przycisku „Wybrany kolor” na kolor odpowiadający podanej wartości RGB

Wybrane pola i metody modelu DOM języka JavaScript 



UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki 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: cukierki1, cukierki3, index, logo, przeglądarka, styl9, zamowienie, 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 stanowisku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Ocenie będzie podlegać 5 rezultatów: 

– grafika,
– zawartość witryny internetowej,
– działanie witryny internetowej,
– styl CSS witryny internetowej,
– skrypt.


Rozwiązanie egzaminu E.14-02-19.01

Playlista (4 filmy z napisami):
  1. Grafika
  2. Witryna internetowa
  3. Styl CSS witryny internetowej
  4. Skrypt

Egzamin pisemny E.14-SG-20.01

Aktualizacja bazy zadań z egzaminu pisemnego o pytania z testu E.14-SG-20.01 (obecnie to 600 pytań z Tworzenia stron internetowych, baz danych i aplikacji internetowych). Przypisanie etykiet i zdefiniowanie linku do oficjalnego klucza odpowiedzi CKE Styczeń 2020.

Zadanie 1.

W języku HTML, aby nadać dokumentowi tytuł „Moja strona”, który będzie wyświetlany na zakładce przeglądarki internetowej, należy posłużyć się zapisem
  1. <title>Moja strona</title>
  2. <head>Moja strona</head>
  3. <meta title="Moja strona">
  4. <meta name="title" content="Moja strona">