8 klasa — 6. Podsumowanie, prawo w internecie i sprawdzian

Klasa 8 · Lekcja 6 z 6 · HTML i CSS w CodePen

Cel lekcji

• Wyjaśniasz działanie własnej strony i rolę użytych znaczników oraz reguł CSS.
• Odróżniasz dostępność materiału w internecie od prawa do jego ponownej publikacji.
• Sprawdzasz licencję, autorstwo, źródła i prywatność przed udostępnieniem projektu.
• Przygotowujesz się do sprawdzianu i oceniasz własne postępy na podstawie konkretnych przykładów.

Wstęp

Zbudowałeś stronę, która ma treść, układ, menu i elementy działające. Ostatnim krokiem nie jest kolejny efekt wizualny. Musisz jeszcze sprawdzić, czy możesz udostępniać użyte materiały i czy nie publikujesz danych innych osób. Twórca strony odpowiada nie tylko za kod, lecz także za decyzje dotyczące treści.

Dzisiaj prezentujesz końcową wersję Klubu Odkrywców. Nie rozpoczynasz nowego projektu. Otwórz etap 5 oraz swoje notatki z debugowania. Przygotuj się do wyjaśnienia kodu własnymi słowami, także wtedy, gdy korzystałeś z przykładów lub pomocy.

Co już potrafisz

HTML porządkuje znaczenie informacji. CSS ustala wygląd i układ. Class łączy elementy ze wspólnymi stylami, id oznacza konkretne miejsce, a href wskazuje cel odsyłacza. Div jest kontenerem, natomiast main i nav opisują rolę zawartości. Link może wyglądać jak przycisk, ale nadal służy do nawigacji.

W naszym projekcie menu przewija do sekcji, details rozwija instrukcję, a reset przywraca początkową pustą notatkę. Każdą z tych funkcji zapewniły elementy HTML. To dobry moment, by odróżnić zrozumienie kodu od jego mechanicznego przepisania: pokaż jedną linijkę HTML, jedną regułę CSS i skutek ich zmiany.

Dostępne w internecie nie oznacza dowolne do wykorzystania

Zdjęcie, rysunek, tekst lub kod mogą być chronione prawem autorskim. Wynik wyszukiwarki nie jest zgodą na ich skopiowanie. Przed publikacją potrzebujesz odpowiedniej podstawy, np. własnego autorstwa, zgody uprawnionej osoby, licencji lub mającego zastosowanie wyjątku ustawowego. Samo dopisanie nazwiska autora nie zastępuje takiej podstawy.

Prawo cytatu ma warunki: cytat musi służyć uzasadnionemu celowi, np. wyjaśnianiu lub analizie, i występować w utworze stanowiącym samoistną całość; należy też oznaczyć autora i źródło, gdy jest to możliwe. Nie jest to pozwolenie na skopiowanie całego cudzego artykułu ani na dowolną dekorację strony zdjęciami. To, że zadanie jest szkolne, nie daje automatycznie prawa do publicznego udostępniania każdej znalezionej treści.

W naszym ćwiczeniu najprościej pisać własne zdania i korzystać z własnych ilustracji bez danych innych osób. Jeśli nie potrafisz ustalić pochodzenia materiału, zastąp go przed publikacją. Podstawowe przepisy znajdziesz w ustawie o prawie autorskim i prawach pokrewnych, w szczególności w regulacjach dotyczących utworu, cytatu i wskazywania źródła.

Jak czytać licencje Creative Commons

Licencja określa warunki korzystania. Sprawdzaj konkretny wariant i wersję, nie tylko znaczek CC. BY wymaga uznania autorstwa; SA dotyczy udostępniania adaptacji na tej samej lub zgodnej licencji; NC ogranicza użycie do celów niekomercyjnych; ND nie pozwala udostępniać adaptacji w ramach tej licencji. Warunki mogą występować razem. CC0 jest narzędziem służącym możliwie szerokiemu zrzeczeniu się praw, a nie kolejnym wariantem CC BY.

Dla materiału na CC BY 4.0 podaj odpowiednie informacje o autorze i źródle, odnośnik do licencji oraz informację o zmianach, jeśli je wprowadziłeś. Sprawdź także inne prawa, np. do wizerunku. Ćwicz odczytywanie warunków na oficjalnym opisie CC BY 4.0, a nie na przypadkowym podpisie pod obrazkiem.

Wzór notatki o zasobie: „Tytuł — autor — adres źródła — licencja i jej adres — opis zmian”. Jest to schemat do uzupełnienia rzeczywistymi danymi, nie gotowy podpis dowolnej ilustracji.

Prywatność i wizerunek

Nie publikuj nazwisk, adresów, numerów telefonu, planów dnia ani zdjęć kolegów tylko dlatego, że przygotowujesz pracę szkolną. Zgoda na zrobienie zdjęcia nie jest tym samym co zgoda na jego publiczne udostępnienie. Przy wizerunku dzieci szkoła musi uwzględniać właściwe zasady i prawa dziecka. W tym projekcie używamy fikcyjnego klubu i nie umieszczamy rozpoznawalnych osób.

Przejrzyj także zrzuty ekranu: mogą zawierać nazwę konta, otwarte wiadomości lub inne dane. Publiczny Pen jest publiczną publikacją, a nie prywatnym zeszytem. Poradnik UODO o wizerunku dziecka w internecie pomaga zrozumieć, dlaczego sprawdzenie prywatności powinno nastąpić przed udostępnieniem.

Sytuacje do wspólnego rozstrzygnięcia

1. Znajdujesz zdjęcie drzewa w wyszukiwarce, ale nie znasz autora i licencji. Czy możesz je wkleić? Najpierw znajdź źródło i warunki; jeśli ich nie ustalisz, wybierz inny materiał.
2. Znajdujesz ilustrację CC BY 4.0. Co zapiszesz w źródłach? Wskaż autora, źródło, licencję i ewentualne zmiany.
3. Kolega zgadza się na zdjęcie podczas lekcji. Czy oznacza to zgodę na publiczny Pen? Nie zakładaj tego; w naszym projekcie nie publikuj jego wizerunku.
4. Kopiujesz całą stronę koleżanki i zmieniasz kolor tła. Czy możesz przedstawić ją jako własną? Nie. Opisz swój rzeczywisty wkład i wykonaj własne zadanie.

Ćwiczenie krok po kroku

Zadanie: przeprowadź końcowy audyt i krótką prezentację. Proponowany podział: 10 minut powtórzenia, 15 minut audytu, 10 minut prezentacji i 10 minut pytań. Czas sprawdzianu ustala nauczyciel.

1. Zrób listę wszystkich treści zewnętrznych wykorzystanych w projekcie. Dla każdej zapisz adres źródła i podstawę wykorzystania. Odsyłacz do cudzej strony odróżnij od skopiowania jej treści.
2. Sprawdź sekcję Źródła. Zastąp robocze podpisy rzeczywistymi informacjami. Jeżeli wszystkie teksty są własne, napisz to zgodnie z prawdą.
3. Usuń materiały o nieustalonym pochodzeniu oraz dane osobowe. Nie dopisuj fikcyjnej licencji do znalezionego zdjęcia.
4. Powtórz test trzech linków menu, details, resetowania i wąskiego podglądu.
5. Przygotuj minutowe omówienie: cel strony, zastosowany kontener, jedna reguła CSS, jedna poprawiona usterka i sposób sprawdzenia źródeł.
6. Oddaj końcowy projekt oraz krótką samoocenę: co umiesz samodzielnie, z czym potrzebowałeś pomocy i co chcesz przećwiczyć.

Sprawdzian wiedzy online

Link do testu zostanie dodany przez nauczyciela.

Zgodnie z wymaganiami przedmiotu raz w miesiącu odbywa się sprawdzian online z czterech ostatnich lekcji. Jeżeli zostanie przeprowadzony po tej lekcji, obejmie lekcje 3–6: strukturę strony, div i znaczniki semantyczne, menu i odsyłacze, przyciski, debugowanie oraz prawo i prywatność. Poniższe pytania podsumowują cały cykl i służą także do samodzielnej powtórki.

Przygotowując się, nie ucz się kodu na pamięć. Wyjaśnij działanie krótkiego fragmentu, znajdź literówkę w selektorze, dopasuj link do sekcji i uzasadnij decyzję dotyczącą cudzej ilustracji. Podczas testu pracuj samodzielnie według instrukcji, a problem techniczny zgłoś od razu.

Dla chętnych: przygotuj trzy pytania dla drugiej osoby: jedno o HTML, jedno o CSS i jedno o odpowiedzialnej publikacji. Do każdego dopisz poprawną odpowiedź z krótkim uzasadnieniem.

Sprawdź swoją pracę

• Potrafię objaśnić własny HTML i CSS.
• Dla zewnętrznych materiałów znam pochodzenie i warunki wykorzystania.
• Nie ma cudzych danych osobowych ani roboczych podpisów.
• Strona przechodzi końcowe testy, a źródła są czytelne.
• Oddałem projekt i samoocenę; wiem, gdzie pojawi się link do testu.

Podsumowanie

Masz za sobą pełny proces tworzenia prostej strony: treść, styl, struktura, nawigacja, testy i odpowiedzialna publikacja. Umiejętność pracy z dokumentacją i szukania błędów przyda się również w kolejnym dziale, w którym będziemy poznawać C++ w cpp.sh.

Materiały i źródła

• Prawo autorskie — ustawa i informacje o zmianach
• Creative Commons — licencje
• Creative Commons — CC BY 4.0 po polsku
• UODO — wizerunek dziecka w internecie
• CodePen — publiczne i prywatne projekty

Pytania kontrolne

1. Za co odpowiada HTML, a za co CSS?
2. Kiedy zastosujesz div, a kiedy nav lub main?
3. Czym różnią się class i id?
4. Jak działa href=”#projekt”?
5. Jakie działanie wykonuje przycisk resetowania?
6. Dlaczego jedna zmiana naraz ułatwia debugowanie?
7. Czy zdjęcie dostępne w wyszukiwarce można dowolnie opublikować?
8. Co sprawdzasz przy materiale CC BY 4.0?
9. Czy podanie źródła zastępuje licencję lub zgodę?
10. Jakie dane należy usunąć ze strony lub zrzutu ekranu przed publikacją?