Arkusz, w którym bazę danych zastąpiła grafika

Styczeń 2024 to nietypowa sesja INF.03 — nie ma tu ani jednego zapytania SQL. Zamiast operacji na bazie oceniana jest grafika i animacja GIF, a skrypt działa wyłącznie po stronie przeglądarki. Kto ćwiczył tylko PHP i SQL, ten wchodził na ten arkusz bez punktów w dwóch z pięciu kategorii.

Jak korzystać z tego rozbioru

Każdy etap zaczyna się od wymagań arkusza — te są widoczne od razu. Rozwiązanie jest schowane pod przyciskiem. Zanim je odsłonisz, spróbuj napisać kod samodzielnie: samo przeczytanie cudzego rozwiązania nie przygotowuje do egzaminu, na którym trzeba wyprodukować je z głowy w 150 minut.

📋 Spis treści

Przygotowanie

1 Metryka arkusza i klucz oceniania
2 Plan czasowy na 150 minut
3 Grafika i animacja GIF

Kodowanie i oddanie

4 Witryna: trzy podstrony HTML
5 Arkusz styl.css
6 Skrypt JavaScript
7 Checklista przed oddaniem

Metryka arkusza i klucz oceniania

Dane arkusza

Kwalifikacja: INF.03 — tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Sesja: styczeń 2024, zadanie 01
Czas: 150 minut, plus 10 minut na zapoznanie się z zadaniem (niewliczane)
Próg zdania: 75% punktów
Temat: aplikacja internetowa firmy usług informatycznych

Oceniane rezultaty

Arkusz wymienia pięć rezultatów. To dosłownie lista, po której idzie egzaminator:

grafika i animacja
wygląd witryny internetowej
działanie witryny internetowej
styl CSS witryny internetowej
skrypt

Co musi znaleźć się w folderze

Folder na pulpicie nazwany numerem zdającego, a w nim:

logo.png            logo z przezroczystym tlem, 100 x 100 px
baner1.png          baner "Uslugi informatyczne", 1000 x 200 px
baner2.png          baner "doswiadczenie, niezawodnosc, konkurencyjne ceny"
animacja.gif        animacja z baner1 i baner2, opoznienie 3000 ms
klatki.jpg          zrzut ekranu dokumentujacy ustawienie opoznienia
index.html          strona glowna
uslugi.html         podstrona z oferta
kontakt.html        podstrona z formularzem
styl.css            arkusz stylow
przegladarka.txt    nazwa przegladarki, w ktorej testowano witryne

Brak przegladarka.txt albo klatki.jpg to strata punktów za coś, co zajmuje trzydzieści sekund.

Wniosek na przyszłość: do INF.03 trzeba umieć oba warianty skryptu — kliencki w JavaScripcie i serwerowy w PHP z bazą. Sesja styczniowa 2024 sprawdzała pierwszy, styczniowa 2026 drugi. Z arkusza nie da się tego przewidzieć.

Plan czasowy na 150 minut

Ten egzamin oblewa się przez zegar, nie przez brak wiedzy. Pięć rezultatów waży podobnie, więc porzucony skrypt kosztuje mniej więcej tyle, co porzucona grafika. Rozkład, który się sprawdza:

Etap	Czas	Uwagi
Rozpakowanie, folder, przegladarka.txt	5 min	darmowe punkty, zrób od razu
Grafika: logo i dwa banery	25 min	pilnuj wymiarów co do piksela
Animacja GIF i zrzut klatki.jpg	15 min	zrzut równocześnie z ustawianiem opóźnienia
Trzy pliki HTML	35 min	napisz index, resztę kopiuj i podmieniaj blok główny
styl.css	30 min	idź po kolei po liście z arkusza
Skrypt JavaScript	25 min	osobny rezultat, nie zostawiaj na ostatnie 5 minut
Sprawdzenie i nagranie płyty	15 min	rezerwa, nigdy jej nie tnij

Zasada, która ratuje egzamin: kiedy etap przekroczy swój limit o więcej niż 5 minut, zostaw go w stanie „działa częściowo" i przejdź dalej. Trzy rezultaty zrobione w 90% dają więcej punktów niż jeden dopieszczony i dwa puste. Do niedokończonego wracasz z rezerwy na końcu.

Grafika i animacja GIF

Czego wymaga arkusz

Logo: 100 × 100 px, tło przezroczyste, napis „IT" wypełniający całą przestrzeń, czcionka niebieska, format zapisujący przezroczystość.
Dwa banery: 1000 × 200 px, tło przezroczyste. Plik grafika.jpg przeskalowany z zachowaniem proporcji do wysokości 200 px, wyrównany do lewej. Po prawej napis: baner1 „Usługi informatyczne", baner2 „doświadczenie, niezawodność, konkurencyjne ceny". Czcionka szeryfowa, pochylona, niebieska.
Animacja: baner1 i baner2 wyświetlane na zmianę, opóźnienie 3000 ms, plik animacja.gif.
Zrzut ekranu klatki.jpg dokumentujący ustawienie opóźnienia — cały ekran, niekadrowany, z widocznym paskiem zadań.

Spróbuj wykonać to samodzielnie w GIMP-ie, zanim odsłonisz procedurę poniżej.

Pokaż rozwiązanieLogo, banery i animacja krok po kroku

Logo

Nowy obraz 100 × 100 px, wypełnienie przezroczyste — nie białe.
Narzędzie tekstowe, napis „IT", kolor niebieski, rozmiar powiększany aż wypełni kadr.
Plik → Wyeksportuj jako → logo.png. PNG to jedyny popularny format w tym zadaniu, który zapisze przezroczystość — JPG jej nie obsługuje.

Banery

Nowy obraz 1000 × 200 px, tło przezroczyste.
Otwórz grafika.jpg i przeskaluj do wysokości 200 px z włączoną kłódką proporcji. Bez niej obraz się rozciągnie i punkt przepada.
Wklej jako warstwę, dosuń do lewej krawędzi.
Napis po prawej: czcionka szeryfowa (np. DejaVu Serif), wariant Italic, kolor niebieski. Trzy cechy, każda sprawdzana osobno.
Eksport do baner1.png, potem podmiana tekstu i eksport do baner2.png.

Animacja i zrzut

Otwórz baner1, następnie Plik → Otwórz jako warstwy i wskaż baner2. Dwie warstwy to dwie klatki.
Plik → Wyeksportuj jako → animacja.gif, w oknie eksportu zaznacz Jako animację i wpisz opóźnienie 3000 ms.
Zanim zamkniesz to okno zrób zrzut całego ekranu i zapisz jako klatki.jpg. Po zamknięciu okna musiałbyś odtwarzać całą operację od nowa.

Gdzie się traci punkty: zapis przez „Zapisz" zamiast „Wyeksportuj jako" daje plik .xcf, którego egzaminator nie zaliczy. Drugi klasyk to kadrowany zrzut ekranu — arkusz wprost żąda całego obszaru monitora z paskiem zadań.

Witryna: trzy podstrony HTML

Czego wymaga arkusz

Pliki index.html, uslugi.html, kontakt.html w HTML 5, z ustawionym językiem polskim i jawnym kodowaniem polskich znaków.
Tytuł na karcie przeglądarki „Firma IT", ikona witryny z pliku logo, dołączony styl.css.
Podział na bloki znacznikami sekcji: kontener, w nim obok siebie logo i menu, poniżej baner, blok główny i stopka.
Menu z odnośnikami „Strona Główna", „Usługi", „Kontakt". Baner zawiera animacja.gif z tekstem alternatywnym „Usługi informatyczne".
Stopka: tekst „Autor strony:" i numer zdającego pogrubiony znacznikiem semantycznym oznaczającym tekst ważny.
Blok główny: index — nagłówek h2 i akapit; uslugi — nagłówek h2 i lista numerowana z czterema pozycjami; kontakt — nagłówek h2 i tabela 2 × 6 z kontrolkami formularza.

Napisz index.html sam, a dopiero potem sprawdź się z rozwiązaniem.

Pokaż rozwiązanieindex.html — szkielet wspólny dla wszystkich stron

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Firma IT</title>
  <link rel="stylesheet" href="styl.css">
  <link rel="icon" href="logo.png">
</head>
<body>
  <div id="kontener">
      <div id="logo">
          <img src="logo.png" alt="firma it">
      </div>
      <div id="menu">
          <a href="index.html">Strona Główna</a>
          <a href="uslugi.html">Usługi</a>
          <a href="kontakt.html">Kontakt</a>
      </div>
      <div id="baner">
          <img src="animacja.gif" alt="Usługi informatyczne">
      </div>
      <div id="glowny">
          <h2>Firma IT</h2>
          <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
          <hr>
      </div>
      <div id="stopka">
          Autor strony: <strong>PESEL</strong>
      </div>
  </div>
</body>
</html>

Dlaczego akurat tak

lang="pl" realizuje wymóg „ustawiony język zawartości strony". Osobny punkt.
meta charset to „jawnie zastosowany właściwy standard kodowania". Bez tego polskie znaki się rozsypią i tracisz też punkt za wygląd.
rel="icon" — łatwe do przeoczenia przy czytaniu arkusza w biegu.
Teksty alternatywne są w arkuszu podane dosłownie: firma it i Usługi informatyczne. Przepisz je znak w znak, z zachowaniem wielkości liter.
„Znacznik semantyczny oznaczający tekst ważny" to <strong>, nie <b>. Ten drugi pogrubia wizualnie, ale nie niesie znaczenia — punktu nie zaliczą.

Pokaż rozwiązanieBloki główne podstron uslugi.html i kontakt.html

Pozostałe strony różnią się wyłącznie zawartością bloku głównego — resztę kopiujesz.

<!-- uslugi.html -->
<div id="glowny">
  <h2>Oferta</h2>
  <ol>
      <li>Outsourcing IT</li>
      <li>Konfiguracja komputerów</li>
      <li>Sprzęt komputerowy</li>
      <li>Strony internetowe</li>
  </ol>
  <hr>
</div>

<!-- kontakt.html -->
<div id="glowny">
  <h2>Kontakt</h2>
  <table>
      <tr>
          <td>Imię:</td>
          <td><input type="text" id="imie"></td>
      </tr>
      <tr>
          <td>Nazwisko:</td>
          <td><input type="text" id="nazwisko"></td>
      </tr>
      <tr>
          <td>E-mail:</td>
          <td><input type="email" id="email"></td>
      </tr>
      <tr>
          <td>Zgłoszenie</td>
          <td><textarea rows="10" cols="40" id="zgloszenie"></textarea></td>
      </tr>
      <tr>
          <td></td>
          <td>
              <input type="checkbox" id="regulamin">
              Zapoznałam/em się z regulaminem
          </td>
      </tr>
      <tr>
          <td></td>
          <td>
              <input type="reset" value="Resetuj">
              <input type="button" value="Prześlij" onclick="wyslij()">
          </td>
      </tr>
  </table>
  <hr>
  <p id="komunikat"></p>
</div>

Gdzie się traci punkty: arkusz mówi „lista numerowana (uporządkowana)", czyli <ol> — <ul> to strata punktu mimo podobnego wyglądu. Tabela ma mieć dokładnie 2 kolumny na 6 wierszy — policz je przed oddaniem. Pole e-mail wymaga type="email", bo arkusz pisze „typu odpowiedniego do wpisywania adresu e-mail".

Arkusz styl.css

Czego wymaga arkusz

Cała strona: kolor tła #EEEEEE, krój czcionki Helvetica.
Kontener: szerokość 90%, marginesy zewnętrzne wyliczone przez przeglądarkę.
Bloki logo i menu: tło LightBlue, wysokość 100 px, szerokość 50%, margines wewnętrzny górny i dolny 10 px.
Baner: tło #DDDDDD, wysokość 200 px.
Blok główny: kolor czcionki Navy, marginesy zewnętrzne 50 px, wysokość 400 px.
Stopka: tekst do prawej, tło LightBlue, marginesy wewnętrzne 10 px.
Przyciski: tło LightBlue, czcionka Navy — zdefiniowane wyłącznie selektorem dla przycisków.
Odnośniki menu: Navy, rozmiar 150%, pogrubione bez podkreślenia, margines zewnętrzny 10 px, wewnętrzny 5 px. Po najechaniu kursorem obramowanie ciągłe 1 px w kolorze Navy.

Napisz arkusz, idąc po tej liście od góry — potem porównaj.

Pokaż rozwiązanieKompletny plik styl.css

body {
  background-color: #EEEEEE;
  font-family: Helvetica;
}

#kontener {
  width: 90%;
  margin: auto;
}

#logo, #menu {
  background-color: LightBlue;
  height: 100px;
  width: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#baner {
  background-color: #DDDDDD;
  height: 200px;
}

#glowny {
  color: Navy;
  margin: 50px;
  height: 400px;
}

#stopka {
  text-align: right;
  background-color: LightBlue;
  padding: 10px;
}

input {
  background-color: LightBlue;
  color: Navy;
}

#menu a {
  color: Navy;
  font-size: 150%;
  font-weight: bold;
  text-decoration: none;
  margin: 10px;
  padding: 5px;
}

#menu a:hover {
  border: 1px solid Navy;
}

Uwaga wprost z arkusza: style przycisków należy zdefiniować wyłącznie przy pomocy selektora dla przycisków — czyli selektorem elementu input, a nie przez klasę czy identyfikator. Rozwiązanie przez .przycisk da ten sam wygląd i zero punktów.

Dwa miejsca, gdzie ludzie się przewracają

„Marginesy zewnętrzne wyliczone przez przeglądarkę" to margin: auto. Bez tego kontener o szerokości 90% przyklei się do lewej krawędzi i przepada też punkt za wygląd.
Obramowanie po najechaniu dotyczy odnośników, nie całego menu. Selektor to #menu a:hover.

Skrypt JavaScript

Czego wymaga arkusz

Wykonywany po stronie przeglądarki na stronie kontakt.html, wywoływany przyciskiem „Prześlij".
Pobiera wartości wprowadzone do kontrolek.
Wyświetla komunikat w bloku głównym, w akapicie pod poziomą linią.
Jeśli pole wyboru nie jest zaznaczone: „Musisz zapoznać się z regulaminem" w kolorze czerwonym.
Jeśli jest zaznaczone: „<IMIĘ> <NAZWISKO> Treść Twojej sprawy: <zgłoszenie>" w kolorze Navy, przy czym imię i nazwisko zawsze wielkimi literami, a po nazwisku łamanie linii.

To najkrótszy etap i najczęściej porzucany z braku czasu. Spróbuj napisać go w 20 minut.

Pokaż rozwiązanieFunkcja wyslij() z rozbiorem wymagań na linijki

Skrypt wstawiasz w sekcji <script> na końcu pliku kontakt.html.

<script>
function wyslij() {
  var imie = document.getElementById("imie").value;
  var nazwisko = document.getElementById("nazwisko").value;
  var zgloszenie = document.getElementById("zgloszenie").value;
  var regulamin = document.getElementById("regulamin").checked;
  var komunikat = document.getElementById("komunikat");

  if (!regulamin) {
      komunikat.style.color = "red";
      komunikat.innerHTML = "Musisz zapoznać się z regulaminem";
  } else {
      komunikat.style.color = "Navy";
      komunikat.innerHTML = imie.toUpperCase() + " " +
          nazwisko.toUpperCase() + "<br>" +
          "Treść Twojej sprawy: " + zgloszenie;
  }
}
</script>

Rozbiór wymagań na linijki kodu

Zapis w arkuszu	Co to znaczy w kodzie
„pobiera wartości wprowadzone do kontrolek"	`.value` dla pól tekstowych, `.checked` dla pola wyboru
„w paragrafie pod poziomą linią"	pusty `<p>` po `<hr>`
„zawsze zapisane wielkimi literami"	`toUpperCase()`
„po nazwisku występuje łamanie linii"	`<br>` — i dlatego `innerHTML`
„komunikat w kolorze czerwonym / Navy"	`element.style.color` w obu gałęziach

Najczęstszy błąd: użycie textContent zamiast innerHTML. Zamiast łamania linii na stronie pojawia się wtedy dosłowny tekst <br>. Drugi klasyk to ustawienie koloru tylko w jednej gałęzi — po poprawieniu formularza komunikat zostaje czerwony.

Checklista przed oddaniem

Folder nazwany numerem zdającego, a w nim wszystkie wymienione pliki.
Logo i banery w PNG — sprawdź, czy tło jest naprawdę przezroczyste, a nie białe.
Animacja otwiera się w przeglądarce i klatki zmieniają się co 3 sekundy.
Zrzut klatki.jpg pokazuje cały ekran z paskiem zadań i widoczną wartością 3000.
Wszystkie trzy strony otwierają się, menu przeskakuje między nimi w obie strony.
Na karcie przeglądarki widać tytuł „Firma IT" oraz ikonę z logo.
Polskie znaki wyświetlają się poprawnie na każdej podstronie.
Tabela na stronie kontakt ma dokładnie 2 kolumny i 6 wierszy.
Skrypt sprawdzony w obu wariantach: bez zgody i ze zgodą na regulamin.
Plik przegladarka.txt utworzony i zawiera nazwę przeglądarki.
Płyta nagrana, sprawdzona po nagraniu i opisana numerem zdającego.

Przećwicz to na czas

Przeczytanie rozwiązania to nie to samo, co napisanie go w 150 minut. Otwórz oryginalny arkusz, ustaw stoper i zrób zadanie od zera — dopiero wynik tej próby pokaże, gdzie naprawdę stoisz.

Testy z INF.03 🚀

Pozostałe arkusze

INF.03 styczeń 2024 — aplikacja internetowa firmy IT

Oryginalny arkusz CKE (PDF)

Pozostałe arkusze INF.03