To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza baza z czterema zapytaniami, przeskalowane zdjęcie i strona obrazki.html z czterema blokami, w których skrypt nakłada na zdjęcia filtry CSS - i tak samo spełnia każde kryterium klucza. Inna jest droga:
grid-template-columns: repeat(2, 50%) w <main> (klucz R.4.5 przyjmuje szerokość w tej postaci),transition) i kolor pól formularza z arkusza (accent-color),<br>; suwaki z opisem dla czytnika ekranu,applyFilter dla wszystkich bloków, filtry pól opcji w obiekcie, const, szablony tekstowe i addEventListener od początku,Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza i zdjęcia pochodzą z prawdziwego archiwum pliki12, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a, a skrypt jest sprawdzony w prawdziwej przeglądarce Chrome: każde pole opcji, oba przyciski bloku 2 i oba suwaki.
Jak liczą się punkty. Klucz ma 41 kryteriów (R.1.1 - R.5.10), każde za 1 punkt. Próg zdania to 75%, czyli 31 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 41 kryteriów (pkt)
Utwórz bazę danych o nazwie baza, z zestawem polskich znaków (np. utf8_unicode_ci)
Archiwum pliki12.zip rozpakuj hasłem #TransfoRm@cje (krzyżyk na początku, wielkie T i R, małpa zamiast „a”) do folderu z numerem zdającego. W phpMyAdmin Nowa → baza (tak, baza nazywa się po prostu „baza”), porównywanie utf8_unicode_ci, albo zapytaniem:
CREATE DATABASE baza CHARACTER SET utf8 COLLATE utf8_unicode_ci;
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznaczona baza baza, Import → baza.sql. Dwie tabele z obrazu 1: pracownicy (imię, nazwisko, pensja, staż w latach, klucz obcy stanowiska_id) i stanowiska.
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran z paskiem zadań, w PNG. Zrzuty zapytań idą do JPEG (kw1.jpg - kw4.jpg).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie imię i pensję pracowników ze stażem mniejszym niż 5 lat
WHERE staz < 5 - „mniejszym niż”, bez równości. Wynik: 2 wiersze - Janusz i Andżelika, po 4700. Wykonaj je przed zapytaniem 4: po podniesieniu stażu wynik mógłby się zmienić (klucz o tym wspomina). Zapytania zapisz w kwerendy.txt, zrzut jako kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, pensja
FROM pracownicy
WHERE staz < 5;
Zapytanie 2: liczące średnią pensję pracowników ze względu na rodzaj stanowiska. Zapytanie pokazuje średnią pensję na danym stanowisku i nazwę stanowiska. Należy posłużyć się relacją
ROUND(AVG(p.pensja), 2) AS sredniaPensja - średnia zaokrąglona do groszy i nazwana; bez aliasu kolumna nazywałaby się dosłownie AVG(pensja), a bez ROUND miałaby cztery miejsca po przecinku,p i s, ON s.id = p.stanowiska_id - relacja przez klucz obcy,GROUP BY s.id, s.nazwa - grupa to jedno stanowisko. Grupowanie po samej nazwie skleiłoby dwa różne stanowiska o tej samej nazwie; identyfikator jest jednoznaczny, a nazwa w GROUP BY pozwala ją wybrać w SELECT,ORDER BY s.nazwa - stała kolejność wierszy.Wynik: 5 wierszy - Dyrektor 8000, Kadrowa 5000, Kierownik 6000, Logistyk 4890, Operator 3920 (klucz dopuszcza dowolne zaokrąglenie). Zrzut: kw2.jpg.
Bez GROUP BY zapytanie zwraca jedną średnią dla całej firmy - zrzut nie ma pięciu wierszy.
kwerendy.txt Tekst zmienione: 7 linii -- Zapytanie 1
SELECT imie, pensja
FROM pracownicy
WHERE staz < 5;
-- Zapytanie 2
SELECT ROUND(AVG(p.pensja), 2) AS sredniaPensja, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
GROUP BY s.id, s.nazwa
ORDER BY s.nazwa;
Zapytanie 3: wybierające jedynie imię, nazwisko i pensję pracownika, którego pensja jest najwyższa. Zapytanie musi mieć charakter uniwersalny, a najwyższa pensja powinna zostać wyliczona np. przez zagnieżdżone zapytanie (podzapytanie)
Podzapytanie (SELECT MAX(pensja) FROM pracownicy) zwraca jedną liczbę - najwyższą pensję - i warunek porównuje z nią każdy wiersz. To jest „uniwersalne”: 8000 nie jest wpisane na sztywno. Przewaga nad ORDER BY pensja DESC LIMIT 1 (klucz też go przyjmuje): przy dwóch osobach z tą samą najwyższą pensją podzapytanie pokaże obie, a LIMIT 1 - przypadkowo jedną. Wynik: Krzysztof Dobromilski, 8000. Zrzut: kw3.jpg.
WHERE pensja = 8000 daje dziś ten sam wynik, ale nie jest uniwersalne - klucz wymaga, żeby najwyższa pensja była wyliczona. Uwaga też na SELECT imie, nazwisko, MAX(pensja) FROM pracownicy: klucz go przyjmuje, ale imię i nazwisko pochodzą wtedy z pierwszego wiersza tabeli, a nie od osoby z najwyższą pensją - sprawdzone: po podwyżce Joanny Trojanowskiej do 9000 takie zapytanie pokazuje „Krzysztof Dobromilski 9000”, a wersja z podzapytaniem - Trojanowską.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT imie, pensja
FROM pracownicy
WHERE staz < 5;
-- Zapytanie 2
SELECT ROUND(AVG(p.pensja), 2) AS sredniaPensja, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
GROUP BY s.id, s.nazwa
ORDER BY s.nazwa;
-- Zapytanie 3
SELECT imie, nazwisko, pensja
FROM pracownicy
WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);
Zapytanie 4: aktualizujące staż wszystkich pracowników, nowa wartość stażu jest wyższa o jeden rok
SET staz = staz + 1 - po prawej stronie stoi stara wartość pola, więc każdy wiersz dostaje swój staż powiększony o 1. Brak WHERE jest tu celowy: „wszystkich pracowników” - 14 zmienionych wierszy. Wykonaj je raz: każde kolejne kliknięcie dodaje następny rok. Zrzut: kw4.jpg.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT imie, pensja
FROM pracownicy
WHERE staz < 5;
-- Zapytanie 2
SELECT ROUND(AVG(p.pensja), 2) AS sredniaPensja, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
GROUP BY s.id, s.nazwa
ORDER BY s.nazwa;
-- Zapytanie 3
SELECT imie, nazwisko, pensja
FROM pracownicy
WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);
-- Zapytanie 4
UPDATE pracownicy
SET staz = staz + 1;
Kroki 8-20 · po tym etapie masz 19 z 41 kryteriów (pkt)
Grafikę pszczola.jpg należy przeskalować z zachowaniem proporcji do szerokości 500 px.
Grafika jest taka sama jak w wersji podstawowej. Oryginał ma 592 × 391 px; w GIMP-ie Obraz → Skaluj obraz, szerokość 500 px przy zamkniętym łańcuchu proporcji - wysokość wychodzi 330 px (klucz: 330 ±5), tyle co pozostałe trzy zdjęcia.
Składa się ze strony o nazwie obrazki.html zapisanej w języku HTML5. Ustawiony język zawartości strony na polski. Jawnie zastosowany właściwy standard kodowania polskich znaków
<!DOCTYPE html>, <html lang="pl"> i <meta charset="UTF-8"> jako pierwszy element <head> - razem R.2.2.
obrazki.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Efekty obrazu”
<title> i viewport. Uwaga: tytuł to „Efekty obrazu”, a nagłówek w banerze - „Efekty na obrazach”.
obrazki.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Całe formatowanie pochodzi ze styl.css (R.3.6). Skrypt zmienia style.filter zdjęć - to działanie skryptu, nie formatowanie zapisane w HTML-u.
Klucz odbiera R.3.6 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na baner, poniżej cztery bloki, na dole stopka. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
Baner <header>, stopka <footer> (R.2.4), cztery bloki to <section> we wspólnym <main> - <main> będzie siatką, która ułoży je po dwa w rzędzie. Identyfikatory block1 - block4 pozwolą skryptowi znaleźć blok, a w nim zdjęcie, pole i przycisk.
obrazki.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<section id="block1">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek drugiego stopnia o treści „Efekty na obrazach”
<h2>, jak każe arkusz.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku: Obraz pszczola.jpg z tekstem alternatywnym o treści „pszczoła na fioletowym kwiatku”
Obraz bez identyfikatora - skrypt znajdzie go jako jedyny obraz w bloku #block1.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej trzy pola opcji: „Blur”, „Sepia” i „Negatyw”, zgrupowane tak, że jednocześnie może być wybrane tylko jedno pole
name="effect" - przeglądarka pozwala zaznaczyć tylko jedno pole z grupy (R.3.3),<label> z napisem: kliknięcie w „Sepia” zaznacza pole, a czytnik ekranu odczyta nazwę pola,value mówi, który efekt pole oznacza (blur, sepia, invert) - skrypt nie potrzebuje identyfikatorów pól,<div role="radiogroup" aria-label="..."> nazywa całą grupę dla czytnika ekranu.Pod sobą ustawi je CSS - bez <br> (R.2.7).
Trzy różne wartości name (albo brak name) pozwalają zaznaczyć wszystkie trzy pola naraz - punkt za grupowanie przepada.
obrazki.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformacje obrazu 1
<button type="button"> - przycisk niczego nie wysyła, tylko uruchomi skrypt.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku: Obraz pomarancza.jpg z tekstem alternatywnym o treści „drzewo pomarańczy”. Poniżej przycisk „Kolorowy” oraz przycisk „Czarno-biały”, ich kliknięcie powoduje transformację obrazu 2
Zdjęcie i dwa przyciski z identyfikatorami colorButton i grayButton. Uwaga: w opisie skryptu arkusz nazywa pierwszy przycisk „Kolory”, a w zawartości bloku i w kluczu (R.2.8) jest „Kolorowy” - ta nazwa trafia na przycisk.
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość trzeciego bloku: Obraz owoce.jpg z tekstem alternatywnym o treści „Kosz pełen owoców”. Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 100, wartość ustawiona w stanie początkowym to 100. Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 3
Suwak <input type="range"> z min="0", max="100" i value="100" - startuje przy prawej krawędzi (R.3.4). Suwak nie ma widocznego podpisu, więc aria-label mówi czytnikowi ekranu, co ustawia.
Bez value="100" suwak staje na środku (połowa zakresu) - klucz wymaga wartości początkowej 100.
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość czwartego bloku: Obraz zolw.jpg z tekstem alternatywnym o treści „Żółw w wodzie”. Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 250. Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 4
Wartości początkowej arkusz nie podaje, więc suwak staje w połowie zakresu (125), jak na obrazie 2. Komplet: zdjęcia z tekstami alternatywnymi w czterech blokach (R.2.6), suwaki w blokach 3 i 4 (R.2.9), przyciski „Kolorowy”, „Czarno-biały” i trzy „Zastosuj” (R.2.8).
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: Paragraf (akapit) z odnośnikiem do adresu http://www.css.com/, o treści „Zobacz inne efekty obrazu”. Odnośnik otwiera się w nowej karcie przeglądarki. Paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.
target="_blank" otwiera nową kartę (R.3.2), rel="noopener" odcina ją od karty z obrazkami (obca strona nie przejmie jej przez window.opener). Drugi akapit z autorem - na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL). <h2> i dwa akapity stopki to R.2.5.
Bez target="_blank" strona otwiera się w tej samej karcie - druga część kryterium R.3.2 nie jest spełniona.
obrazki.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 21-28 · po tym etapie masz 30 z 41 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Century, w przypadku jego braku Serif, wyrównanie tekstu do środka
Dwa kolory z arkusza w zmiennych: Indigo (baner, stopka, przycisk pod kursorem) i SlateBlue (przyciski, ramki zdjęć). Selektor *: Century, potem rodzina zapasowa serif - klucz uznaje tylko tę kolejność - i wyśrodkowanie (R.4.1).
styl.css CSS nowy plik :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}Wspólne dla banera i stopki: kolor tła Indigo, biały kolor czcionki, tekst pochylony, marginesy wewnętrzne 2 px
Jedna reguła, kolor ze zmiennej, pochylenie font-style: italic (R.4.6).
styl.css CSS zmienione: 7 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}Wspólny dla czterech bloków: szerokość 50%, wysokość 470 px
<main> jest siatką o dwóch kolumnach po 50% (repeat(2, 50%) to skrót od 50% 50%): bloki same układają się po dwa w rzędzie, trzeci przechodzi do drugiego wiersza - jak na obrazie 2 (R.3.1). Szerokość 50% stoi w kolumnach siatki (klucz R.4.5 przyjmuje ją w tej postaci), a bloki mają tylko wysokość 470 px (R.4.4).
width: 50% dopisane do bloków w kolumnach 50% daje bloki szerokie na 25% strony - procent szerokości elementu siatki liczy się od jego kolumny.
styl.css CSS zmienione: 9 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}Dla selektora obrazu: marginesy wewnętrzne 3 px, zewnętrzne 10 px, obramowanie linią kreskową o grubości 2 px koloru SlateBlue
Selektor znacznika img - uwaga arkusza: styl obrazu wyłącznie selektorem znacznika. Linia kreskowa to dashed. transition: filter 0.4s (dodatek) sprawia, że nałożony skryptem filtr pojawia się płynnie, a nie skokiem.
styl.css CSS zmienione: 7 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed var(--slate-blue);
transition: filter 0.4s;
}Dla odnośnika: biały kolor czcionki
Bez tej reguły odnośnik byłby granatowy na fioletowym tle.
styl.css CSS zmienione: 4 linie :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed var(--slate-blue);
transition: filter 0.4s;
}
a {
color: white;
}Dla przycisków: kolor tła SlateBlue, biały kolor czcionki, brak obramowania, marginesy wewnętrzne górny i dolny 10 px, lewy i prawy 20 px, margines zewnętrzny górny 10 px
padding-block: 10px - margines wewnętrzny górny i dolny, padding-inline: 20px - lewy i prawy: dokładnie słowa arkusza, bez pamiętania kolejności wartości w skrócie padding. cursor: pointer - rączka nad przyciskiem bez ramki. Ta reguła domyka kolory tła (R.4.2), białe teksty (R.4.3), marginesy wewnętrzne (R.4.7) i zewnętrzne (R.4.8) oraz obramowania (R.4.9).
styl.css CSS zmienione: 10 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed var(--slate-blue);
transition: filter 0.4s;
}
a {
color: white;
}
button {
background-color: var(--slate-blue);
color: white;
border: none;
padding-block: 10px;
padding-inline: 20px;
margin-top: 10px;
cursor: pointer;
}W momencie, gdy kursor myszy znajdzie się na przycisku, jego kolor tła zmienia się na Indigo
:hover (R.4.10) i :focus-visible - przycisk wybrany klawiszem Tab też ciemnieje, bo bez ramki nie widać, który ma fokus.
styl.css CSS zmienione: 5 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed var(--slate-blue);
transition: filter 0.4s;
}
a {
color: white;
}
button {
background-color: var(--slate-blue);
color: white;
border: none;
padding-block: 10px;
padding-inline: 20px;
margin-top: 10px;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--indigo);
}Jedynie dla pól edycyjnych w postaci suwaka: szerokość 80%
input[type="range"] - selektor atrybutu trafia tylko w suwaki, pola opcji zostają małe (R.4.5: kolumny bloków 50% i suwaki 80%). display: block z margin-inline: auto stawia suwak w osobnym wierszu, wyśrodkowany - przycisk „Zastosuj” trafia pod niego, jak każe arkusz, bez <br>,label { display: block } - każda etykieta w osobnym wierszu, pod zdjęciem i pod sobą; to zadanie CSS, a nie <br> w HTML-u,accent-color (dodatek) - pola opcji i suwaki dostają kolor przycisków zamiast domyślnego niebieskiego przeglądarki.styl.css CSS zmienione: 14 linii :root {
--indigo: Indigo;
--slate-blue: SlateBlue;
}
* {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: var(--indigo);
color: white;
font-style: italic;
padding: 2px;
}
main {
display: grid;
grid-template-columns: repeat(2, 50%);
}
section {
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed var(--slate-blue);
transition: filter 0.4s;
}
a {
color: white;
}
button {
background-color: var(--slate-blue);
color: white;
border: none;
padding-block: 10px;
padding-inline: 20px;
margin-top: 10px;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--indigo);
}
input[type="range"] {
width: 80%;
display: block;
margin-inline: auto;
}
label {
display: block;
}
input {
accent-color: var(--slate-blue);
}Kroki 29-34 · po tym etapie masz 41 z 41 kryteriów (pkt)
Transformacje obrazu 1: Gdy zaznaczono pole Blur na obraz jest nakładany filtr rozmycia o dowolnej wartości z przedziału 4 px ÷ 8 px
Skrypt na końcu <body>, w pliku strony (klucz sprawdza go „w kodzie strony”).
EFFECTS - obiekt: wartość pola opcji → filtr. Na razie jeden wpis, blur(5px) (5 px mieści się w przedziale 4-8 px, R.5.5),applyFilter(block, value) - jedna funkcja dla wszystkich bloków: w podanym bloku znajduje zdjęcie i ustawia mu style.filter,addEventListener("click", ...) (R.3.5). [...effectRadios] zamienia listę pól w tablicę, a find zwraca pierwsze pole, którego checked jest prawdą - to sprawdzenie, o którym mówi R.5.2. Bez zaznaczenia find zwraca undefined i nic się nie dzieje.W podglądzie: zaznacz „Blur” (albo kliknij sam napis) i „Zastosuj”.
obrazki.html HTML zmienione: 19 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
</script>
</body>
</html>Gdy zaznaczono pole Sepia na obraz nakładany jest filtr kolorów sepii (efekt starej fotografii) o wartości 100%
Drugi efekt to jedna linia w obiekcie - kod obsługi przycisku się nie zmienia: pole z value="sepia" wskaże wpis sepia(100%) (R.5.6). Nowy filtr zastępuje poprzedni, bo style.filter dostaje nową wartość.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
sepia: "sepia(100%)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
</script>
</body>
</html>Gdy zaznaczono pole Negatyw na obraz nakładany jest filtr odwrócenia kolorów (negatyw) w 100%
Negatyw to filtr invert w 100% - trzecia linia obiektu (R.5.7). Przecinek po ostatnim wpisie jest w JavaScripcie dozwolony: dopisanie czwartego efektu nie wymaga poprawiania linii wyżej.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
sepia: "sepia(100%)",
invert: "invert(100%)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
</script>
</body>
</html>Transformacje obrazu 2: Po wciśnięciu przycisku „Kolory” obraz ma zdjęty filtr odcieni szarości. Po wciśnięciu przycisku „Czarno-biały” na obraz jest nakładany filtr odcieni szarości o wartości 100%
Dwa nasłuchiwacze, ta sama funkcja: grayscale(100%) - pełne odcienie szarości, grayscale(0%) - zdjęty filtr (0% to oryginał, tabela 3). Funkcje strzałkowe w jednej linii: () => applyFilter(...). Przycisk „Kolory” z opisu skryptu to przycisk „Kolorowy” z bloku (R.5.3, R.5.8).
obrazki.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
sepia: "sepia(100%)",
invert: "invert(100%)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
const block2 = document.querySelector("#block2");
document.querySelector("#colorButton").addEventListener("click", () => applyFilter(block2, "grayscale(0%)"));
document.querySelector("#grayButton").addEventListener("click", () => applyFilter(block2, "grayscale(100%)"));
</script>
</body>
</html>Transformacje obrazu 3: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr przezroczystości o wartości, która została wskazana suwakiem
value suwaka (0-100) trafia do filtra opacity przez szablon tekstowy `opacity(${...}%)` - bez sklejania plusami (R.5.4). Filtr działa na cały element <img>, więc blednie też kreskowa ramka. Test w Chrome: suwak na 40 - opacity(40%).
obrazki.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
sepia: "sepia(100%)",
invert: "invert(100%)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
const block2 = document.querySelector("#block2");
document.querySelector("#colorButton").addEventListener("click", () => applyFilter(block2, "grayscale(0%)"));
document.querySelector("#grayButton").addEventListener("click", () => applyFilter(block2, "grayscale(100%)"));
const block3 = document.querySelector("#block3");
const opacityRange = document.querySelector("#opacityRange");
block3.querySelector("button").addEventListener("click", () => {
applyFilter(block3, `opacity(${opacityRange.value}%)`);
});
</script>
</body>
</html>Transformacje obrazu 4: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr zmiany jasności o wartości, która została wskazana suwakiem.
Ten sam wzór z filtrem brightness: 100% to oryginał, mniej przyciemnia, więcej rozjaśnia - suwak sięga 250% (R.5.9). Nazwy mówią, co robią i co przechowują: EFFECTS, applyFilter, effectRadios, selected, opacityRange, brightnessRange (R.5.10).
obrazki.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku">
<div role="radiogroup" aria-label="Efekt dla zdjęcia pszczoły">
<label><input type="radio" name="effect" value="blur"> Blur</label>
<label><input type="radio" name="effect" value="sepia"> Sepia</label>
<label><input type="radio" name="effect" value="invert"> Negatyw</label>
</div>
<button type="button">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy">
<button type="button" id="colorButton">Kolorowy</button>
<button type="button" id="grayButton">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców">
<input type="range" min="0" max="100" value="100" id="opacityRange" aria-label="Przezroczystość zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie">
<input type="range" min="0" max="250" id="brightnessRange" aria-label="Jasność zdjęcia (%)">
<button type="button">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank" rel="noopener">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const EFFECTS = {
blur: "blur(5px)",
sepia: "sepia(100%)",
invert: "invert(100%)",
};
function applyFilter(block, value) {
block.querySelector("img").style.filter = value;
}
const block1 = document.querySelector("#block1");
const effectRadios = block1.querySelectorAll('input[name="effect"]');
block1.querySelector("button").addEventListener("click", () => {
const selected = [...effectRadios].find((radio) => radio.checked);
if (selected) {
applyFilter(block1, EFFECTS[selected.value]);
}
});
const block2 = document.querySelector("#block2");
document.querySelector("#colorButton").addEventListener("click", () => applyFilter(block2, "grayscale(0%)"));
document.querySelector("#grayButton").addEventListener("click", () => applyFilter(block2, "grayscale(100%)"));
const block3 = document.querySelector("#block3");
const opacityRange = document.querySelector("#opacityRange");
block3.querySelector("button").addEventListener("click", () => {
applyFilter(block3, `opacity(${opacityRange.value}%)`);
});
const block4 = document.querySelector("#block4");
const brightnessRange = document.querySelector("#brightnessRange");
block4.querySelector("button").addEventListener("click", () => {
applyFilter(block4, `brightness(${brightnessRange.value}%)`);
});
</script>
</body>
</html>Krok 35 · po tym etapie masz 41 z 41 kryteriów (pkt)
Obie wersje dają komplet 41 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ bloków | <main> z flex-wrap: wrap, width: 50% bloków | <main> jako siatka repeat(2, 50%) |
| pola opcji | tekst obok pola, <br> | <label> wokół pola, role="radiogroup", display: block w CSS |
| wybrany efekt | trzy osobne if z getElementById(...).checked | find(radio => radio.checked) i obiekt EFFECTS |
| nakładanie filtra | cztery funkcje, każda z getElementById | jedna applyFilter(block, value) |
| wartość suwaka | sklejanie "opacity(" + ... + "%)" | szablon tekstowy `opacity(${...}%)` |
| zdarzenia | atrybuty onclick | addEventListener |
| SQL zapytania 2 | AVG bez nazwy, GROUP BY nazwa | ROUND(...) AS sredniaPensja, GROUP BY s.id, s.nazwa, ORDER BY |
Na egzaminie wersja podstawowa trzyma się elementów z tabeli 2 arkusza i każdą jej część łatwo sprawdzić osobno. Nowoczesna jest krótsza i łatwiej ją rozbudować: nowy efekt to jedna linia w EFFECTS i jedno pole w HTML-u. Sprawdzenie checked zostało w obu wersjach - klucz (R.5.2) mówi o nim wprost.
Podgląd strony bez zmian - taki jak po kroku 34.
Krok 36 · po tym etapie masz 41 z 41 kryteriów (pkt)
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt nazwa przeglądarki, w której sprawdzana była strona - przy filtrach CSS to ważne, bo starsze przeglądarki ich nie obsługują. W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, obrazki.html, owoce.jpg, pomarancza.jpg, pszczola.jpg, przeglądarka.txt, styl.css, zolw.jpg. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 34.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.