Dołącz do naszej społeczności na Discord

Wstęp

Baza wiedzy: Kurs HTML i CSS (pl) , HTML i CSS Tutorials (eng)

Zasady oceniania przedmiotowego 2022/2023

Przykładowy egzamin poprawkowy - diagnoza
1) HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych. Aby zacząć tworzyć stronę internetową należy utworzyć plik tekstowy i zmienić jego rozszerzenie na .html, następnie odpalamy go w przeglądarce oraz edytowrze tekstu (np. Notepad++). Podstawowa struktura pliku HTML znajduje się poniżej. W sekcji head wpisujemy ustawienia strony, w sekcji body całą widoczną zawartość strony.
strukutra html

W HTML korzystamy ze znaczników w formacie <nazwa atrybut="wartość">, znaczniki mogą być otwierające <> lub domykające </>.
2) CSS (ang.Cascading Style Sheets) – język służący do modyfikacji wyglądu naszej strony internetowej (np. rozmiary, kolory, układy). Aby tworzyć arkusze styli możemy wykorzystać jedną z trzech metod:
  • a) Wykorzystanie jednolinijkowego atrybutu style="kod w css" w znaczniku
  • b) Skorzystanie z blokowego znacznika <style> kod w css </style>
  • c) Stworzenie pliku .css i w nim kod w css (podpięcie <link rel="stylesheet" href="style.css">)

strukutra css

Aby odwołać się do konretnego znacznika w CSS wystarczy wpisać jego nazwę i komendy umieszczać w klamrach {}. Możemy nadawać elementom strony własne identyfikatory (id="nazwa"), do których odwołujemy się w formacie #nazwa_id {KOMENDY} oraz klasy (class="nazwa"), do których odwołujemy się w formacie .nazwa_klasy {KOMENDY}.Komendy css'owe zapisujemy w formacie opcja: wartość;.
3) XAMPP – to lokalny serwer pozwalający na korzystanie z funkcjonalnosci serwera bez konieczności posiadania wykupionego zasobu sieci. Pozwala na tworzenie stron internetowych z obsługą PHP (funkcja Apache) a także korzystanie z baz danych (funkcja MySQL).

Pomocnicze materiały

[Live coding] NAGRANIE Z KONSULTACJI - film 1.5h kodowania na żywo z tłumaczeniem zadań z lekcji 1-6 z tabelami włącznie.

Literatura

  • Internetowy niezbędnik webmastera [eng] - w3schools
  • Kurs HTML i CSS [pl] - kurshtml
  • Dokumentacja Bootstrap - getbootstrap
  • Informatory zawodowe CKE
  • Podręcznik WSiP - Tworzenie stron i aplikacji internetowych oraz baz danych i administrowanie nimi. Kwalifikacja INF.03. Część 1
  • Podręcznik Helion - Kwalifikacja EE.09. Programowanie, tworzenie i administrowanie stronami internetowymi i bazami danych. Część 1. Tworzenie stron internetowych. Podręcznik do nauki zawodu technik informatyk

Ściągi

Materiały wideo

Playlista przedmiotowa
GIMP - Grafika Rastrowa
Podstawy GIMP Retusz zdjęć
Animacja poklatkowa
PHP - programowanie backendu
Wprowadzenie Metoda POST
Metoda GET
MySQL - programowanie baz danych
Wykorzystanie Xampp Łączenie z bazą i pobieranie rekordów
Dodawanie i usuwanie rekordów z bazy

Egzamin teoretyczny

Zbiór pytań teoretycznych Egzamin-informatyk

Egzamin praktyczny

Przygotowanie do egzaminu E.14 / EE.09 / INF.03

Wytyczne Centralnej Komisji Egzaminaczynej [pdf]
    Umiejętności sprawdzane testem praktycznym:
    1. Programowanie aplikacji
  • stosuje podstawowe zasady programowania;
  • wykorzystuje środowisko programistyczne: edytor i kompilator;
  • stosuje instrukcje, funkcje, procedury, obiekty, metody wybranych języków programowania.
    • 2. Tworzenie i administrowanie bazami danych
  • stosuje lokalne i sieciowe systemy zarządzania bazami danych;
  • korzysta z podstawowych funkcji strukturalnego języka zapytań;
  • posługuje się strukturalnym językiem zapytań do obsługi baz danych;
  • importuje dane do bazy danych i eksportuje dane z bazy danych;
  • zarządza systemem bazy danych.
    • 3. Tworzenie stron i aplikacji internetowych
  • wykonuje strony internetowe zgodnie z projektami;
  • posługuje się hipertekstowymi językami znaczników;
  • posługuje się kaskadowymi arkuszami stylów (CSS);
  • stosuje elementy grafiki komputerowej do tworzenia stron internetowych;
  • stosuje skrypty wykonywane po stronie serwera i klienta przy tworzeniu aplikacji
    • internetowych.
Pomoce: lista znaczników html [txt] , lista komend css [txt]

Zadania praktyczne: Zadanie 1

Zbiór arkuszy Egzamin-informatyk

FOTO - HTML: Strukura strony i znaczniki

Nauka podstaw

Link: Ściąga - znaczniki i struktura
<-- Jak zacząć? Patrz zakładki Wstęp i Materiały pomocnicze
ZAGADNIENIA

- Czym jest HTML
- Jak tworzy się dokumenty HTML
- Podstawowa struktura dokumentu HTML
- Definicja znacznika i atrybutu
- Znaczniki: <html> <head> <title> <body> <div> <p> <h1> <b> <i> <u> <s> <img> <ul> <ol> <li> <a> <button> <br>
- Atrybuty: Width, Height, Src, Alt, Align

Wprowadzenie teoretyczne


ZADANIE 1

Odwótrz stronę prezentowaną na poniższym obrazie. Strona ma składać się z 3 sekcji, (pierwsza z dwoma podeskcjami) ułozonych pod sobą, gdzie każda z nich ma posiadać stworzony nagłówkiem stopniowanym tytuł oraz poszczególne treści:
  1. Wycentrowana sekcja nagłówkowa: cztery aktywne hiperłacza
  2. Wycentrowana sekcja Witaj: nagłówki stopniowane z tytułami, obrazek frakcji w rozmiarze 200x200px, separator na końcu
  3. Wycentrowana sekcja O Nas: ukośny tekst cytatu, opis frakcji z pogrubionymi kategoriami, przycisk
  4. Przyciągnięta do lewej sekcja Korzyści: lista punktowano-numerowana z ulgami dla członków frakcji
  5. Przyciągnięta do prawej sekcja Kontakt: podpis autora, przekreślony numer telefonu (może być losowy)
Do wykonania zadania wykorzystaj znaczniki i atrybuty poznane na tej lekcji. Wykonaną stronę wyślij na Teams.

Obrazek do zadania

FOTO - CSS: Podstawowe właściwości


ZAGADNIENIA

- Czym jest CSS
- Definicja selektora, właściwości
- Właściwości: width, height, background, color, margin, padding, border, border-radius, position display, text-..., font-...;
- Pseudoklasa "...:hover"
- Reguła @media
ZADANIE 2
Odwótrz stronę prezentowaną na poniższym obrazie. Powinna odwierciedlać pokazany układ i składać się z 4 bloków, o różnym kolorze, wszystkie elementy powinny być wycentrowane.

Blok 1 (baner): zajmuje 100% szerokości strony i 200px wysokości. W tle posiada powtórzony obrazek - jeden z deseni poniżej; zawiera tytuł napisany nagłówkiem 1 stopnia, tytuł posiada przezroczyste tło, biały tekst.
Blok 2 (menu): zajmuje 100% szerokości strony i 50px wysokości. Posiada niebieskie załadki z ramką i marginesem wewnętrznym, które po najechaniu zmieniają kolor tła.
Blok 3 (srodek): zajmuje 80% szerokości strony i jest wycentrowany (margin:0px auto;). Posiada obrazek, który powiększa się po najechaniu. Sugerowane dodanie zaookrąglonej ramiki (border-radius)
Blok 4 (stopka): zajmuje 100% szerokości strony i 50px wysokości. Posiada ukośny, pogrubiony tekst z podpisem
To jest bazowa wersja na 60%
* Sekcja dodatkowa na ocenę (każdy myślnik to +10%)
- stopka jest zawsze przyczepiona do dołu ekranu, nawet przy przewijaniu (komenda position)
- obrazek po najechaniu płynnie się powiększa, a nie skokowo (komenda transition)
- przy zmniejszeniu rozmiaru strony poniżej 500px tło zmienia kolor (reguła media)
- zakładki się animują i zmieniają styl (reguła keyframes oraz komenda animations)

Obrazek do zadania

Grafiki do bannera


Przydatne komendy CSS
- margin:0px auto; //wycentrowanie bloku/sekcji
- position: relative; left:100px; //przeusnięcie elementu względem pozycji domyślnej
- a:hover{//tutaj css} //pseudoklasa najechania myszą


ZADANIE 3

Wykonaj opracowanie pytań dotyczących stron internetowych z załączonych poniżej arkuszy egzaminacyjnych. Wycinki te zostały wydobyte z archiwalnych egzaminów, które odbyły się w zeszłych latach. Stwórz dokument tekstowy, w którym wytypujesz prawidłową odpowiedź i napisz uzasadnienie dla każdego podupnktu - dlaczego ta odpowiedź jest według Ciebie poprawa, a inna nie. Pytania zostaną omówione na forum grupy.

- Zestaw 1
- Zestaw 2
- Zestaw 3
- Zestaw 4
- Zestaw 5
- Zestaw 6
- Zestaw 7
- Zestaw 8

Temat 1 - HTML: Strukura strony i znaczniki

Nauka podstaw

Link: Ściąga - znaczniki i struktura
ZAGADNIENIA

- Czym jest HTML
- Jak tworzy się dokumenty HTML
- Podstawowa struktura dokumentu HTML
- Definicja znacznika i atrybutu
- Znaczniki: <html> <head> <title> <body> <div> <p> <h1> <b> <i> <u> <s> <img> <ul> <ol> <li> <a> <button> <br>
- Atrybuty: Width, Height, Src, Alt, Align
ZADANIE

Strona ma składać się z 5 sekcji ułozonych pod sobą (jak na obrazku), gdzie każda z nich ma posiadać stworzony nagłówkiem stopniowanym tytuł oraz poszczególne treści:
  1. Wycentrowana sekcja nagłówkowa: cztery aktywne hiperłacza
  2. Wycentrowana sekcja Witaj: nagłówki stopniowane z tytułami, obrazek frakcji w rozmiarze 200x200px, separator na końcu
  3. Wycentrowana sekcja O Nas: ukośny tekst cytatu, opis frakcji z pogrubionymi kategoriami, przycisk
  4. Przyciągnięta do lewej sekcja Korzyści: lista punktowano-numerowana z ulgami dla członków frakcji
  5. Przyciągnięta do prawej sekcja Kontakt: podpis autora, przekreślony numer telefonu (może być losowy)
Do wykonania zadania w wersji podstawowej wykorzystaj znaczniki i atrybuty poznane na tej lekcji. *Zadania dodatkowe na ocenę z pracy na lekcji (zadania musisz wykonać w kolejności):
  1. Na 60%: Spraw, aby kliknięcie linków nagłówkowych przewijało stronę do konkretnych sekcji na tej stronie.
  2. Na 75%: Dodaj ramkę do loga frakcji.
  3. Na 100%: Ułóż sekcje Korzyści i Kontakt na jednym poziomie, obok siebie.

      4. Obrazek do zadania



      Gotowiec

      Sprawdź się! :)

Temat 2 - CSS: Zmiana stylów bloków i tekstów

Nauka edytowania styli

+ Ściąga - css z pojęciami z lekcji
+ Baza wiedzy - kurs HTML i CSS
ZAGADNIENIA

- Czym jest CSS
- Jak dodać CSS wewnętrznie
- Odwoływanie po selektorach znaczników
- Definicja reguły, selektora, deklaracji, właściwości i wartości
- Znaczniki: <style>
- Atrybuty: id, class
- Właściwości: width, height, background, color, font-…, text-…, direction, line-height, letter-spacing, word-spacing, white-space
- Praca z przeglądarkowym DevTools.
ZADANIE

Do wykonania jest strona prezentowana na poniższym obrazie. Powinna odwierciedlać pokazany układ i składać się z 4 bloków, a każdy tekst powinien mieć zmieniy kolor i styl.

Nagłówek: posiada duży wycentrowany tekst napisany wyróżniającą się czcionką oraz zmienione tło.
Baner: posiada grafikę w tle, wycentrowane napisy o różnych stylach i ręcznie zrobiony przycisk (z divów)
Artykuły: posiada conajmniej dwie różne zajakwi artykułów zamieszczone w osobnych sekcjach o szerokości 90%, w środku napisany nagłówkiem stopniowanym tytuł, szary podtytuł z linkiem w podpisie autora, krótki opis oraz ikony z hiperłączami do mediów społecznościowych i łapek góra/doł
Stopka: Kolorowy zwykły tekst z zamieszczonym znakiem Copyrights
    *Zadania dodatkowe na ocenę z pracy na lekcji (zadania musisz wykonać w kolejności):
  1. Na 50%: Przycisk i artykuły powinny mieć zaokrągloną ramkę.
  2. Na 65%: W tle sekcji artykułów znajduje się grafika, która się nie przewija podczas przewijania strony.
  3. Na 85%: W nagłówku powinna być zastosowana czcionka zainstalowana z zewnątrz.
  4. Na 100%:Przycisk powinien zmieniać kolor tła po najechaniu myszą.

      5. Obrazek do zadania

      Sprawdź się! :)

ZADANIE 2

Poniżej przedstawiam listę zagadnień do samodzielnego zgłębienia, przećwiczenia i zanotowania w zeszycie. Zagadnienia te będą na kartkówce! Polecam pobrać sobie jakiś mały obrazek, dodać go w tle i pobawić się opcjami background :)

- Znaczniki heada: <meta> <link> ;
- Atrybuty powyższych znaczników: charset, name(author, description, keywords, viewport), content, rel, type;
- Właściwość CSS background-… (zwłaszcza background-image, -repeat, -origin);
- Pobieranie czcionek z internetu: fonts.google, daFont.com, myFonts.com;
- Reguła CSS @font-face (importowanie własnej, zewnętrznej czcionki);

Temat 3 - CSS: Model blokowy i interkcja

Nauka edytowania styli

+ Baza wiedzy - kurs HTML i CSS
Wykład - Zasady tworzenia stron
ZAGADNIENIA

- Etapy tworzenia stron (projekt -> backend-> fontend oraz cykl życia produktu)
- Cechy dobrej strony (porównanie współczesnych stron ze stronami w układzie tabelarycznym)
- Projektowanie stron w kodzie HTML5
- Box model w CSS
- Znaczniki sekcji a pozostale znaczniki blokowe i liniowe (div i span)
- Znaczniki sekcji: <span> <header> <section> <footer> <article> <asite> <main> <nav> <details> <summary> <time> <figure> <mark>
- Atrybuty: margin, border, padding
ZADANIE
Do wykonania jest strona prezentowana na poniższym obrazie. Powinna odwierciedlać pokazany układ i składać się z 4 bloków, o różnym kolorze, wszystkie elementy powinny być wycentrowane.

Blok 1 (baner): zajmuje 100% szerokości strony i 200px wysokości. W tle posiada powtórzony obrazek - jeden z deseni poniżej; zawiera tytuł napisany nagłówkiem 1 stopnia, tytuł posiada przezroczyste tło, biały tekst a po nejchaniu myszką tekst zmienia styl
Blok 2 (menu): zajmuje 100% szerokości strony i 50px wysokości. Posiada niebieskie załadki z ramką i marginesem wewnętrznym, które po najechaniu zmieniają kolor tła.
Blok 3 (srodek): zajmuje 80% szerokości strony i jest wycentrowany (margin:0px auto;). Posiada obrazek, który powiększa się po najechaniu
Blok 4 (stopka): zajmuje 100% szerokości strony i 50px wysokości. Posiada ukośny, pogrubiony tekst z podpisem
* Sekcja dodatkowa na ocenę (każdy myślnik to +33%)
- stopka jest zawsze przyczepiona do dołu ekranu, nawe przy przewijaniu
- obrazek po najechaniu płynnie się powiększa, a nie skokowo
- przy zmniejszeniu rozmiaru strony poniżej 500px tło zmienia kolor

Obrazek do zadania

Grafiki do bannera


Przydatne komendy CSS
- margin:0px auto; //wycentrowanie bloku/sekcji
- position: relative; left:100px; //przeusnięcie elementu względem pozycji domyślnej
- a:hover{//tutaj css} //pseudoklasa najechania myszą




Temat 4 - CSS: Kolory i kształty

Nauka wykorzystywania różnych modeli barw

+ Baza wiedzy - kurs HTML i CSS
+ Wykład Jednostki i właściwości koloru oraz kształtu
ZAGADNIENIA

- Modele barw: RGB, HSL, CMYK, HSV
-Jednostki względne i bezwzględne (ostatnia strona ściągi)
- Właściwości CSS: border-radius, text-shadow, box-shadow, background: linear-gradient(...) / radial-gradient(...)
- Sposoby zapisu kolorów
  • angielskie nazwy kolorów
  • model szesnastkowy #RRGGBB lub #RRGGBBAA
  • rgb(R G B) oraz wersja z alfą rgba(R G B / A)
  • hsl(0 deg 0% 50%) - hue, saturation, lightness value
    gdzie wartości: h - odcień, s - nasycenie, l - światło
ZADANIE
Do wykonania jest strona prezentowana na poniższym obrazie. Powinna odwierciedlać pokazany układ i składać się z 3 bloków. Każdy blok posiada tytuł z zaokrągloną ramką oraz cieniem oraz 5 prostokątów zawierających barwę oraz podpis.

Blok 1: Prezentuje paletę barw szesnastkowych bądź opisywanych nazwami.
Blok 2: Prezentuje paletę barw rgb oraz hsl i pokazującą przezroczystość.
Blok 3: Prezentuje paletę gradientów.
*Każdy z bloków, tytułów i prostokątów powinien być unikatowy.
Za ukończenie bazowej części zadania można otrzymać 60% za prace na lekcji, każdy poniższy punkt to +10% do wyniku:

- Wszystkie właściwości CSS napisano w zewnętrznym pliku (wyjątkiem może być zmiana koloru boxa)
- Strona posiada co najmniej 5 unikatowych znaczników w sekcji header poprawiających pozycjonowanie strony (np. kodowanie, opis, autor, viewport)
- Każdy tytuł bloku napisany jest unikatową czcionką zaimportowaną zewnętrznie sposa standardowej biblioteki.
- Strona posiada dodatkowy czwarty blok, sekcję z osadzonymi odtwarzaczami filmów z YouTube.

Obrazek do zadania

Sprawdź się! :)

Temat 5 - CSS: Pozycjonowanie i responsywność

Nauka tworzenia skalowalnych stron

+ Baza wiedzy - kurs HTML i CSS
ZAGADNIENIA

- Reguła @media
- Definicja responsywności
- Atrybuty: z-index
- Właściwości: float, display, clear, position
ZADANIE
Do wykonania jest strona prezentowana na poniższym obrazie. Powinna odwierciedlać pokazany układ i składać się z 3 bloków, o różnym kolorze.

Blok 1 (nagłówek): zajmuje 100% szerokości strony i 70px wysokości. Zawiera z lewej strony logo szkoły, z prawej strony zakładki. Zakładki posiadają ramkę, zmienione tło i tekst bez podkreślenia. Cały blok jest "pływający" co oznacza, że przy przewijaniu strony jest on przyklejony do górnej krawędzi przeglądarki.
Blok 2 (banner): zajmuje 100% szerokości strony i 200px wysokości. Zawiera podpis autora strony i gradientowe tło.
Blok 3 (zawartość): zajmuje 80% szerokości strony i minimum 900px wysokości. Zawiera zajawki arytukłów z datą oraz obrazkiem. Zajawki są kwadratami z wyróżniającym się kolorem tła, ułożone są obok siebie i posiadają równe odstępy między sobą.
* Responsywność: Strona powinna zmieniać się w zależności od rozdzielczości czyli po zmniejszeniu się szerokości strony: zakładki powinny się przeszeregować (display z inline-grid), zajawki artykułów powinny się zwjać (floaty), kolor bloków strony powinien się zmienić na inny (patrz gif "Animacja z responsywnością strony").

Strona na dużej rozdzielczości (lewo) i małej rozdzielczości (prawo)
 

Animacja z responyswnością strony
Image from Gyazo
Przydatne komendy CSS
- display:...; //zmiana sposobu wyświetlania elementów w bloku
- position: fixed; top:0px; //przyklejenie elementu do okna przeglądarki
- @media... //reguła zmieniająca CSS w przypadku zmiany rozdzielczości

Temat 6 - HTML: Tabele

Nauka tworzenia zaawansownych tabel

+ Baza wiedzy - kurs HTML i CSS
ZAGADNIENIA

- Znaczniki: <table> <thead> <tbody> <tfoot> <caption> <tr> <th> <td>
- Atrybuty: colspan, rowspan, cellpadding, cellspacing, width, height, valign, align, bgcolor, border
- Właściwości: border-spacing, caption-side, vertical-align, text-align
ZADANIE
Do wykonania jest tabela prezentowana na poniższym obrazie. Należy wykorzystać wszystkie znaczniki budujące strukturę tabeli (thead, tbody itd.).

Układ: Sześć kolumn i wierszy, ze scalonymi komórkami w pionie oraz poziomie
Nagłówek: Zmieniony kolor, wycentrowane tytuły napisane czcionką zaimportowaną z internetu
Stopka: Zmieniony kolor i tekst wyrównany do prawej krawędzi
* Wiersz zmienia się po najechaniu myszą

Obrazek do zadania
Znaczniki budujące tabelę
- <table> <thead> <tbody> <tfoot> // podstawowa struktura
- <th> <tr> <td> //komórka nagłówka, wiersz ciała, komórka ciała
- <caption> // podpis tabeli
Atrybuty HTML modyfikujące tabele
- colspan = "liczba", rowspan = "liczba" //scalanie kolumn, wierszy
- valign = "wartosc" // wyrównanie w pionie (middle, top, bottom)
- align = "wartosc" // wyrównanie w poziomie (left, center, right)
- cellspacing = "liczba", cellpadding = "wartosc" //odstępy
- border= "liczba" //czarna ramka o podanej grubości
- bgcolor = "wartosc" //zmiana koloru, działa tylko dla tabel
Importowanie czcionki
Baza czcionek: DaFont , GoogleFonts , WhatTheFont

Temat 8 - HTML: Media i plug-iny

Dodawanie multimediów do strony: dźwięk, mapy, wideo, podstrony, widgety

+ Ściąga - html z pojęciami z lekcji
+ Baza wiedzy - multimedia
ZAGADNIENIA

- Importowanie map i filmów z youtube
- Dodawanie gotowych widgetów pogodowych i zegarka
- Znaczniki: <map> <area> <embed> <iframe> <script> <object>
- Atrybuty: shape, usemap, coords, data, form, name, poster, autoplay, constrols, loop
ZADANIE
Do wykonania jest strona informacyjna dotycząca wydarzenia, na wzór prezentowanej na poniższym obrazie. Powinna odzwierciedlać pokazany układ i składać się z 3 bloków.

Nagłówek i stopka: Zajmują 100% szerokości strony, jednolite tło i wyśrodkowany element. Elementem nagłówka powinna być grafika, a stopki Widget (np. pogoda, licznik czasu, licznik odwiedzin).
Środek: Zajmuje 80% szerokości strony i jest wycentrowany. Zawiera tytuł oraz minimum trzy elementy interaktywne:
- iframe z osadzoną stroną
- filmik od zewnętrznego dostawcy (Youtube bądź Vimeo)
- mapa z lokalizacją (GoogleMaps bądź OpenStreetMap)
*Mile widziane animacje i inne skryptowe ozdobiniki oraz osadzenie dźwięku.

Obrazek do zadania

Przykładowe widgety: gotowy timer, ręcznie robiony timer, pogoda, pogoda 2.
Przydatne znaczniki
- <iframe> //ramki do osadzania mediów
- <embed> //pozwala osadzać elementy w ramkach
- <object> //dodanie plug-inu np. mapy
- <audio> //dodanie ramki audio
- <video> //dodanie ramki filmu
- <source> //dodanie źródła do ramki audio/video
- <tracks> //dodanie tekstu do filmu
- <script> //dodanie skryptu

Temat 11 - CSS: Transformacje i animacje

Modyfikowanie pozycji, rotacji i skali elementów, tworzenie animacji elementów z przejściami

+ Ściąga - html z pojęciami z lekcji
+ Baza wiedzy - transformacje, animacje, przejścia
ZADANIE


    Stwórz zanimowaną stronę internetową zgodną z powyższym filmikiem.

    Strona powinna składać się z czterech elementów: syreny, pojazdu, kół i tabliczki informacyjnej.
    1) Syrena - jest to prostokąt z zaokrąglonymi rogami zmieniająca kolor (animacja) po najechaniu myszką (hover).
    2) Pojazd - jest to prostokąt z zaokrgląnymi rogami, napisem na środku i gradientem w tle (zachęcam do korzystania z generatorów ).
    3) Koła - są to kwadraty ze zmienioną pozycją i zaokrąglonymi wszystkimi rogami, które się nieustannie rotują (animacja)
    4) Tabliczka informacjna - jest to prostokąt z ramką i tekstem w środku, która po najechaniu myszką płynnie się powiększa (transformacja i przejście) a po zjechaniu wraca do pozycji poczatkowej.
    Przydatne komendy CSS
    - transform: funkcja //przekształcenia
    Opcje tranformacji
    translate() //przesuwanie
    rotate() //obrót
    scaleX() scaleY() scale() //skalowanie
    skewX() skewY() skew() //nachylanie
    matrix() //zmiana płaszczyzny
    - transition: parametr_modyfikowany czas //włączenie przejścia dla zmiany parametru
    - animation: nazwa_klipu czas //włączenie animacji

    Tworzenie animacji
    @keyframes kolor {
    0% {background:red;}
    30% {background:green;}
    70%{background:blue;}
    }

Temat 7 - HTML: Formularze

Tworzenie formularzy przy wykorzystaniu inputów i innych znaczników wejścia danych
+ Baza wiedzy - w3schools, kurshtmlcss

ZAGADNIENIA

- Znaczniki: <input> <select><option> <textarea> <fieldset> <legend> <label> <datalist>
- Atrybuty: type, name, value, action, method, maxlegth, enctype, rows, cols, required, pattern, size, multiple
ZADANIE
Poziom podstawowy:
Przy wykorzystaniu znaczników formularza HTML stwórz fomularz tworzenia postaci do gry RPG. Zastosuj w swoim formularzu wszystkie dostępne znaczniki, opisywane w sekcji poniżej. Wzoruj się na przykładowych formularzach tworzenia postaci popularnych gier: WFRP, FUNT, Wiedźmin, DND.

Poziom rozszerzony:
- na 80% - Spraw aby pola formularza płynnie się powiększały po najechaniu na nie.
- na 100% - Dodaj skryptową obsługę formularza (w JS lub PHP). Pobierz wartości ze wszystkich pól i wyświetl je w zbiorczym komunikacie Popup lub w dedykowanym temu bloku na stronie.
TWORZENIE FORMULARZY
Aby móc stworzyć formularz konieczne jest skorzystanie ze znacznika <form></form>, w ktorego środku zapisujemy znaczniki wprowadzania.
Najważniejsze znaczniki
<input type="text">Wprowadz tekst
<input type="number">Wprowadz liczbę
<input type="pasword">Wprowadz haslo
<input type="radio">Wybierz: K M
<input type="checkbox">Zaznacz:
<input type="button">
<input type="reset">
<input type="submit">
<textarea>
<select>, <option>
<label>//podpisanie inputa
<fieldset>,<legend>//grupowanie i definiowanie sekcji
Najważniejsze atrybuty
name //nazwanie pola
value //wprowadzenie wartości pola
selected //wybranie domyślnej wartosci selecta
multiple //zaznaczenie wielu wartosci selecta
checked //zaznaczenie radio, checkboxa
max, min //ustawienie zakresów wartości
readonly //ustawienie uprawnień pola
required //ustawienie obowiązkowości pola
disabled //wyłączenie pola
Pamiętaj, że znaczników i atrubutów jest dużo więcej, przykładowo:
tutaj znajdziesz listę ponad 20 typów inputów, przetestuj je ;)


Temat 9 - Grafika rastrowa

Tworzenie i obróbka grafiki rastrowej
Wykład - Obraz cyfrowy
Wykład - GIMP

ZADANIE 1
Wykorzystując dowolne oprogramowanie do obróbki grafiki stwórz własny cyfrowy podpis lub znak wodny. Możesz wykorzystać do tego tablet graficzny. Efekt swojej pracy wyślij na czacie Teams.

Uwaga - pamiętaj, że podpis / znak wodny powinien jednostacznie Cię identyfikować, a przy tym nie przesłaniać stworzonej pracy graficznej. W przyszłości będziesz go nanosić na swoje prace.
ZADANIE 2
Wykorzystując program GIMP dokonaj retuszu zdjęcia, aby uzyskać na nim efekt lustrzanego odbicia tafli wody.
Co należy zrobić?
1) Pobierz stąd obrazek domku w lesie
2) Wykonaj w programie GIMP efekt odbicia lustrzanego w tafli wody (kopia, kanał alfa, gumka, kopia, obrót, odbicie, kolory -> barwienie, fitry -> rozmycie)
3) Dodaj dookoła ramkę (ctrl+a, zaznaczenie->zmniejsz, zaznaczenie->obramuj i kolorek)
4) Podpisz się na grafice wykorzystując stworzny na ostatnich zajęciach podpis
5) Efekt swojej pracy wyślij na czacie Teams

Przykład retuszu:
PRZED                                                 PO

ZADANIE 3
Wykorzystując program GIMP dokonaj retuszu zdjęć: korekta twarzy postaci, kolekra barw, wycinanie, kadrowanie, skalowanie.
Co należy zrobić?
1) Pobierz cztery grafiki stąd: starsza osoba do retuszu twarzy, samochód na drodze z niebem w tle, okno z kilkoma skrzydłami, ramka portretowa
2) Na zdjęciu starszej osoby retuszu twarzy - pozbądź się zmarszczek, krost, pieprzyków i innych niedoskonałości (pry pomocy narzędzi Łatka i Stępel)
3) Na zdjęciu z autem dokonaj barwienia - zmień kolor samochodu i odcień nieba (nalezy zaznaczyć ten obszar, a następnie dokonać Kolor -> Barwienie)
4) Na zdjęciu z ramką wklej portret starszej osoby
5) Na zdjęciu z oknem wklej w tle (widok za oknem) drogę z samochodem
6) Na zdjęciu z oknem wklej obok okna (na ścianie) portret ze starszą osobą
7) Podpisz skończoną pracę (wszystkie grafiki na zdjeciu z oknem) i wyślij na Teams (na priv)

Przykład retuszu:


Pomocniczy materiał wideo:

Temat 10 - Grafika wektorowa

Tworzenie i obróbka grafiki wektorowej
Wykład - Inkscape

ZADANIE 1
Wykorzystując program Inkscape stwórz prosty rysunek przedstawiający krajobraz domu:
- dom z ogódkiem i płotkiem
- samochód na podjedzie
- niebo ze słońcem

Tworząc graficę wykorzystaj krzywe Beziera, gradienty i grupowanie elementów.

Przykładowa grafika

Temat 12 - Animacja, wideo i audio

Tworzenie i obróbka obrazów dynamicznych, montażu wideo i audio
Wykład - Animacja
Wykład - Wideo i audio
Pytania na sprawdzian

ZADANIE 1
Część 1) Stwórz Storyboard animacji na baner strony rekrutacyjnej przedstawiający zawody lub specjalizacje. Zapisz swój scenopis w dokumencie tekstowym zamieszczając ewentualne rysunki. Pamiętaj o określeniu modeli obiektów i przygotowaniu niezbędnych materiałów (zdjęcia, pliki dźwiękowe, czcionki, teksty).
Część 2) Wykorzystując program GIMP stwórz animowany baner zgodnie z opisanym Storyboardem. Baner wykonaj metodą poklatkową (minimum 10 klatek) i zapisz w formacie GIF - może to być Hero Image lub Slider. W banerze umieść:
- teksty
- zdjęcia
- efekty specjalne

ZADANIE 2
Wykorzystując dowolną aplikację lub narzędzie online wykonaj animację postaci bohatera do gry. Może to być prosta pikselowa animacja 8-bitowa (np. na PikselApp) lub pivotowa (np. na PivotAnimator).
ZADANIE 3 - DOMOWE, NA OCENĘ
Materiały do zadania: Lista klipów wideo
Wykorzystując dowolne narzędzie do obróbki wideo stwórz 30 sekundowy filmik z dostarczonych materiałów. Gotowy film wyślij na Teams. Filmik powinien posiadać:
- jeden główny kanał z filmem
- przynajmniej jeden obraz na kanale dodatkowym (małe okienko z filmikiem na filmiku)
- soundtrack - muzykę przez cały film
- sound - dodatkowy pojedynczy odgłos zgodny z dowolnym elementem na filmie (np. 2 sekundowy szum, gdy widać wodę)
- tekst z podpisem
- przejścia, filtry, efekty specjalne
Polecam skorzystanie z programu Reaper, do którego załączam wideotutorial: Filmy Marcina Grzegorczyka. W dźwięki wyposażyć możecie się na freesounds.org, creativecommons.org

Temat 13 - Bootstrap

Wykorzystanie najpopularniejszego CSS Framework
Notatka z lekcji - o Bootstrapie
Konfiguracja hostingu udostępnionego na lekcji Praca z siatką strony

ZADANIE PROJEKTOWE
Do wykonania jest strona internetowa prezentująca Twoje portfolio lub projekt, który realizujesz. Głównym założeniem jest skorzystanie z technologii Bootstrap. Strona powinna zostać opublikowana na hostingu i być widoczna pod jakąś publiczną domeną. Pierwsze ocenianie projektu odbędzie się wraz z końcem maja, finalny termin oddania to 12 czerwca – potem tylko poprawki. Forma oddania osobiście na zajęciach. Projekt można i należy realizować w trakcie zajęć, na których służę pomocą :)
Szczegółowe wytyczne znajdują się tutaj [docx]
EDIT: Stworzyłam Wam zadanie na Teams wraz z kartą oceny, projekty zwracajcie tam.

Temat utrwalający - tworzenie stron zgodnie z projektem

Wykonywanie stron na podstawie wytycznych, utwralenie wiedzy

TEST 1

Podstawowe znaczniki HTML i komendy CSS, pozycjonowanie elementów na stronie, interakcja i responsywność (lekcje 3.1 - 3.4). Pobierz paczkę z zadaniem Twojej grupy. Treść zadania znajduje się w czerwonej ramce na obrazku.

TEST 2

Kolory i kształty, Tworzenie tabel, Dodawanie mediów i plug-inów (lekcje 3.5 - 3.8). Pobierz paczkę z ikonami i włącz zadanie Twojej grupy.

Temat - Content Managment System

Podręcznik o CMS [pdf]
(trzyliterowe hasło to literki z loga szkoły)
Wykład - Publikacja strony internetowej [pdf]
Wykład - Tworzenie stron internetowych i zarządzanie nimi [pdf]

ZADANIE 1
Zapoznaj się z treścią podręcznika o CMS (rozdziały 16 - 17), a następnie zainstaluj na lokalnym serwerze XAMPP system zarządzania treścią Joomla! (instalator) lub Wordpress (instalator). Następnie zapoznaj się z treścią podręcznika o CMS (rozdział 18) i przy wykorzystaniu systemu zarządzania treścią Joomla! lub Wordpress zainstalowanego na lokalnym serwerze stwórz stronę internetową będącą blogiem z artykułami.
ZADANIE 2
Zapoznaj się z treścią podręcznika o CMS (rozdział 14 - 16), a następnie przygotuj notatkę odpowiadającą na pytania:
  1. Czym jest serwer WWW i jakie są najpopularniejsze
  2. Czym jest usługa hostingu i na jakie jej parametry należy zwrócić uwagę
  3. Czym jest domena i protokół DNS
  4. Czym jest język PHP i do czego jest stosowany
  5. Czym jest MySQLi oraz PHPMyAdmin
  6. Czym jest protokół FTP i program FileZilla
  7. Jakie są rodzaje zastosowań CMS (z przykładami)
  8. Jak nazywamy główny plik "rozruchowy" strony
  9. Jak nazywa się folder, do którego wrzuciamy pliki strony na serwerze lokalnym a jak na sieciowym
* będzie z tego kartkówka
ZADANIE 3
Spróbuj odtworzyć wygląd jednej z uzyskanych w CMS stron przy wykorzystaniu samego HTML oraz CSS i bez korzystania z internetu.

Temat 2 - PHP: Include, GET

Tworzeie uniwersalnego szablonu strony. Nauka załączania stron w stronie, obsługa GET.

+ Ściąga - include i GET (kod)
+ Baza wiedzy - $_GET
ZADANIE 1
Przygotuj stronę internetową z układem jak na załączonym zdjęciu. Bloki oddziel odstępem. W prawej sekcji zakładkowej umieść listę punktowaną z pięcioma pustymi hiperłączami (teksty w nich obojętne). W banerze umieść powtarzający się mały obrazek. Do stopki dodaj ramkę. Do stworzenia strony wykorzystaj komendy: width, height, margin, padding, border, float, clear, background. Żadnych flexów!

Obrazek do zadania

ZADANIE 2
Wykorzystując wiedzę załączonego filmu przekształć zrobionę w poprzednim zadaniu stronę w szablon z treścią ładowaną z pliku. Do przełączania zawartośi wykorzystaj zakładki z bloku lewego.
UWAGA - pracując na serwerze, pamiętaj o odświeżaniu strony skrótem CTRL + F4. Pozwala on na twardy restart strony wraz z pobraniem wszystkich plików z serwera (bez pomijania CSS, które są przez przeglądarke cache'owane).



ZADANIE 3
Zapoznaj się z wartościami jakie przyjmują komendy CSS opisane w zadaniu 1 i przygotuj się na kartkówkę z nich. Wiedzę uzupełnij o jednostki wartości np. px, em itd. (strona 5 ściągi ).

Temat 3 - PHP: Formularze, POST

Nauka formularzy w HTML, podstawy PHP, obsługa POST

Wykład - Zasady tworzenia stron [pdf]
+ Ściąga - formularze i POST (strona i kod)
+ Ściąga - patterny w HTML (strona i kod)
+ Baza wiedzy - Obsługa formularzy
+ Baza wiedzy - $_POST
ZADANIE 1
Zapoznaj się z tutoringowym materiałem wideo a nastepnie przygotuj stronę internetową z kalkulatorem obsługującą pobieranie danych z formularzy metodą POST. Szczegółowy opis znajdziesz na załączonym poniżej obrazie.


Obrazek do zadania

Materiał tutoringowy
Więcej tutoriali znajdziesz w zakładce Materiały pomocnicze, po lewej stronie.

ZADANIE 2
Przygotuj notatkę o różnicach w zacznikach HTML dla wersji HTML5, HTML4 i XHTML oraz przypomnij sobie obsługę formularzy w HTML (Lekcja 3.9). Przygotuj się na kartkówkę z różnic oraz formularzy.

Projekt strony internetowej - Etap 1 - Dokumentacja

Połączenie zebranej wiedzy w dużym projekcie.

Wykład - Projektowanie stron i praca z klientem - [pdf]
Szablon dokumentacji [docx]
Informacje o projekcie
Projekt ma być serwisem internetowym łączącym frontend z backendem i czerpiący z całej wiedzy, która została Wam przekazana przez ostatni rok kształcenia w kwalifikacji INF.03. Zakłada stworzenie strony z tabelą, zawierającą wylistowane wpisy z bazy danych. Wpisy powinno dać się podejrzeć (przekierowanie metodą GET) a także dodać, wyedytowac i usunąć (formularze POST). Całość strony powinno dać się obsłużyć z konta użytkownika o odpowiednich uprawnieniach (kolejna tabela w bazie, kolejne fomularze + sesja/ciasteczka do zapamiętania zalogowania). Strona powinna działać za każdym razem na pliku index i mieć includowane GETem podstrony. Powinna też być responsywna i wykorzystywać znaczniki sekcji. Formularze na stronie powinny być walidowane i nie powinny się resetować przy odświeżaniu strony lub błędnym uzupełnieniu formularza (za każdym razem POST powinnien być wpisywany do value inputa). Strona powinna też zawierać dokumentację wraz z makietami. Strona powinna znaleźć się na hostingu szkonym lub własnym.

Tematyką dla każdej grupy jest stworzenie serwisu turystycznego poświęconego:
- alfa - atrakcjom (wydarzenia, ciekawe miejsca)
- beta - budynkom (zabytki, obiekty kultury)
- gamma - gadżetom (maskotki, rzeczy regionalne)
Szczecina lub innego zachodniopomorskiego regionu.

Etapem początkowym, przed rozpoczęciem implementacji, jest opisanie tworzonej strony i zaprojektowanie jej szablonu. Należy spisać założenia początkowe, przygotować grafiki, opracować strukturę strony i szatę graficzną. Dlatego też, konieczne jest stworzenie dokumentu zbierającego te informacje.
ZADANIE 1
Pobierz załączony powyżej Szablon dokumentacji, a nastepnie uzupełnij dwa pierwsze rozdziały. W rozdziale pierwszym dokonaj Briefu. Zasymuluj przyjmowanie zlecenia od klienta, może to być istniejąca lub wyimaginowana firma, a następnie uzupełnij tabelę zgodnie z tytułami. W rozdziale drugim zaprojektuj swoją stronę. Utwórz makiety strony głównej i podstron wykorzystując do tego narzędzia informatyczne (podane w wykładzie). Dokonaj doboru grafik, kolorów i czcionek. Utwórz samodzielnie logo oraz banner.
ZADANIE 2
Utwórz prostą stronę internetową z tabelką w HTML i zamieść w niej kopię pierwszego rozdziału swojego dokumentu (Brief). Plik ze stroną zamieść na szkolnym hostingu (dane konta FTP zostały Ci przekazane w zeszłym semestrze na prywatnym czacie Teams, a konfiguracja znajduje się pod adresem pracowniezsk.pl).
ZADANIE 3
Przygotuj się na kartkówkę z tabel HTML oraz kolorów i kształtów CSS.

Projekt strony internetowej - Etap 2 - Frontend

Połączenie zebranej wiedzy w dużym projekcie.

Etap pierwszy - do wykonania jest frontend (sam wygląd) strony internetowej, składającej się ze strony index i dołączanych do niej stron: lista wpisów, dodawanie wpisów, podgląd szczegółów wpisu, logowanie i rejestracja, moje konto. Strony powinny być zrobione zgodnie z szablonem strony opisywanym w dokumentacji i zawierać:
*** STRONA ***
0) Strona główna index.php. Składa się z 4 sekcji:
  • Nagłówek (header)
  • Pasek zakładek (nav)
  • Środek (content) - ładowany funkcją include() z innych plików (patrz lekcja 4.2)
  • Stopka (footer)

Przykładowy wygląd szablonowej strony index

1) Content #1 "Pokaż wpis" (strona domyślna):
  • zawiera Tytuł
  • zawiera input tekstowy do wszyszukiwania i przycisk Szukaj
  • zawiera trzy kolumnową tabelkę z przykładowymi informacjami o wpisie oraz przyciskiem Szczegóły (w przyszłości pobierać będzie infromacje o wpisach z bazy danych)

Przykładowy wygląd strony Pokaż wpis

2) Content #2 "Dodaj wpis":
  • zawiera tytuł "Dodaj"
  • posiada formularz z polami zgdnymi z kolumnami w tabeli wpisów bazy danych
  • zawiera oznaczenie pól obowiązkowych i walidację wypełnienia tych pól
  • pobiera dane z formularza do zmiennych (metoda $_POST[], patrz lekcja 4.3)

Przykładowy wygląd strony Dodaj wpis

3) Content #3 "Logowanie i rejestracja":
  • zawiera formularz z tytułem Logowanie i polami: login, hasło oraz przyciskiem Zaloguj
  • zawiera formularz z tytułem Rejestracja i polami: Imię, nazwisko, login, hasło, kontakt (long text) oraz przyciskiem Rejestruj
  • formularz Rejestracji posiada pola obowiązkowe i walidację ich uzupełnienia

Przykłądowy wygląd strony Rejestracja/Logowanie

4) Content #4 "Podgląd szczegółów wpisu":
  • zawiera tabelkę z danymi książki
  • zawiera talebkę z danymi użytkownika
  • zawiera przycisk Wstecz

Przykładowy wygląd strony Podgląd wpisu

5) Content #5 "Moje konto":
  • zawiera tabelkę z danymi użytkownika
  • zawiera formularz z polem tekstowym Konktakt i przciskiem Zmień

Przykładowy wygląd strony Moje konto

Projekt - łączenie z bazą danych

Połączenie zebranej wiedzy w dużym projekcie.

Etap trzeci polega na stworzeniu bazy danych i wykonaniu integracji strony z nią przy pomocy MySQL. Do zrobienia:
1) Stworzenie bazy danych z tabelami:
  • użytkownicy (zawiera pola: id, imie, nazwisko, login, haslo, informacje)
  • wpis (zawiera pola w zalezności od tematyki projektu, z uwzględnieniem informacji podstawowych i szczegółowych)

Przykładowa tabela "wpis"" dla książek w bibiotece


Przykładowa tabela "użytkownik"

2) Pobranie z bazy danych listy wpisów i wyświetlenie ich w tabeli na stronie z listą wpisów. W tabeli powinny znaleźć się podstawowe informacje o każdym wpisie oraz przycisk przenoszacy do szczegółów wpisu. Przykładowa struktura dla książek w bibliotece "Autor | Tytuł | Przycisk Podglądu".
  • Patrz < - Ściągi na dole, MySQL: Łączenie i zapytania
  • Patrz < - Materiały pomocnicze, MySQL - programowanie baz danych
3) Obsługa podglądu wpisu
  • Przycisk "Podgląd" z listy wpisów powinien przekierowywać na podstronę "Podgląd" i zawierać w hiperłączu wpis ze zmienną o wartości bazodanowego "ID" wpisu
  • Podstrona "Podgląd" powinna metodą GET pobierać z URL "ID" żądanego wpisu i pobierać z tabeli tylko jeden wpis
  • Podstrona "Podgląd" powinna wyświetlać wszystkie informacje o pobranym wpisie
Jak to zrealizować? Hiperłącza w tabeli z listą wpisów powinny wyglądać w ten sposób:
<a href="index.php?page=podglad&id=12">

gdzie id jest pobierane z bazy podczas wypisywania wpisów
...?page=podglad&id=".$row['id'];

Podstrona z podglądem powinna metodą GET pobierać informację o wpisie, który jest do wyświetlenia
idWpisu = $_GET["id"];

Następnie z bazy powinien zostać pobrany tylko ten jeden wpis
SELECT * FROM wpis WHERE id=$idWpisu;

  • Patrz <- 4.2 PHP: Include, GET
  • Patrz < - Materiały pomocnicze, MySQL - programowanie baz danych
4) Obsługa formularza z podstrony dodawania wpisu i wysyłka danych do bazy danych
  • Patrz < - 4.3 PHP: Formularze, POST
  • Patrz < - Materiały pomocnicze / MySQL - programowanie baz danych
*** ŚCIĄGI ***
MySQL: Łączenie i zapytania

Łączenie z bazą danych w nowej wersji


Pobieranie rekordów z bazy danych


Dodawnaie rekordów do bazy danych

Projekt - Rejestracja i Logowanie

Połączenie zebranej wiedzy w dużym projekcie.

Etap czwarty zakłada dodawanie kont użytkowników. Strona powinna zezwalać na tworzenie kont użytkowników zapisywanych w bazie danych i logowanie się do nich po prawidowej autoryzacji. Etap wymaga: obsługi formularzy metodą POST, wysłania danych do bazy, pobierania danych z bazy z ich walidacją oraz obsługi sesji.

Do zrobienia:
1) Rejestracja - po wypełnieniu przez użytkownika formularza, przy wykorzystaniu metody POST należy pobrać wprowadzone przez niego dane a następnie wysłać je do bazy danych ("INSERT INTO ... VALUES", Ściąga, Patrz < - Etap 3). Użytkownik powinien dostać informację zwrotną o powodzeniu wykonania rejestracji.

2) Logowanie - po pomyślnej rejestracji użytkownik powinien móc zalogować się na swoje konto danymi podanymi przy rejestracji. Po wypełnieniu przez użytkownika formularza, przy wykorzystaniu metody POST należy pobrać wprowadzone przez niego dane a następnie porównać je z danymi zapisanymi w bazie danych ("SELECT * FROM uzytkownicy ... WHERE login LIKE ... AND haslo LIKE ...", Ściąga, Patrz < - Etap 3). Jeżeli dane są zgodne (baza danych zwróci dokładnie jeden wpis), użytkownik powinien zostać zalogowany. Proces logowania powinien utworzyć sesję z identyfikatorem zalogowanego użytkownika (Ściąga Patrz < - Ściąga na dole), a także poinformować użytkownika o prawidłowym logowaniu.
*** ŚCIĄGI ***
Sesja i ciasteczka
Aby przechować w programie dane stosujemy zmienne, jednak pojawia się problem gdy dane chcemy wykorzystać a zostały one zadeklarowane w jednym dokumencie czy funkcji i potrzebujemy z nich skorzystać w szerszym kontekście. W takich sytuacjach możemy określać zasięgi zmiennych. Posiadamy:
- Zasięg lokalny - zmienna istnieje tylko w danej funkcji
- Zasięg globalny - zmienna istnieje tylko w danym pliku
- Zasięg superglobalny - zmienna istnieje na całej stronie
Skupimy się dzisiaj na zasięgu superglobalnym, a dokładniej superglobalnych tablicach. Tablice takie pozwalają na dostep do danych z każdego miejsca, udostepniane są w sposób mniej lub bardziej bezpieczny i przechowywane na serwerze lub po stronie użytkownika. Do superglobalnych zmiennych tablicowych zaliczamy między innymi:
- $_GET - zmienne HTTP GET, które już znacie
- $_POST - zmienne HTTP POST, które również już znacie
- $_COOKIE - zmienne odpowiedzialne za ciasteczkowego potwora, które poznacie zaraz
- $_SESSION - zmienne sesyjne, które również poznacie zaraz
ale są również: $_REQUEST, $_ENV, $GLOBALS, $_SERVER, $_FILES i masa supergbloabnych predefiniowanych zmiennych.
Przyjrzyjmy się dzisiaj bliżej tablicom $_SESSION oraz $_COOKIE. Na wielu profesjonalnych stronach na pewno spotkaliście się z różnego rodzaju systemami rejestracji/logowania lub licznikami odwiedzin odpornymi na przeładowania przeglądarki. To własnie w nich najcześciej wykorzystuje sie cookie lub sesje. Służą one do przechowywania danych na komputerze klienta lub serwerze dzięki czemu zmniejsza się ilość danych przesyłanych między stronami i długość kodu. Różnica między ciasteczkami a sesją polega na tym, że ciasteczka przechowują dane na komputerze klienta (po stronie przeglądarki), a dane sesyjne przechowywane są bezpośrednio na serwerze, na którym istnieje strona. Obie można stosować zamiennie, w zależności od potrzeb.
Pomyślmy o problemie logowania użytkownika. Gdy użytkownik przejdzie pomyslnie przez proces rejestracji moglibyśmy na naszej stronie utworzyć zwykłą zmienną, która przechowywałaby informację o aktualnie zalogowanym użytkowniku. Jednak gdyby użytkownik zmienił jakąkolwiek zakładkę bądź przeładował stronę autoryzacja przepadłaby, bo zmienna zniknęłaby z pamięci. Gdybyśmy użyli do tej operacji superglobalnej tablicy $_COOKIE i zapisali autoryzację jako ciasteczko informacja byłaby trwalsza jednak co z bezpieczeństwem? Ciasteczka zapisują się po stronie klienta, a nie jesteśmy zagwarantować takim danym bezpieczeństwa - nie każdy użytkownik zadba odpowiednio o zabezpieczenie komputera. W przypadku wykradzenia ciasteczek z komputera użytkownika haker mógłby podszyć się pod jego tożsamość. Najlepszym rozwiązaniem w tej sytuacji będzie skorzystanie z tablicy $_SESSION czyli sesji zapisywanej po stronie serwera - a więc naszej stronie. Jakie informacje potrzebujemy wiedzieć o użytkowniku? Czy musimy zapisywać gdzieś jego dane logowania i hasło? Jeżeli potwierdziliśmy, że podane dane są prawidłowe i użytkownik może zostać zalogowany to nie ma takiej potrzeby, w końcu mamy to wszystko zabezpieczone w bazie danych. Jedyną przydatną do przechowywania w sesji infromacją w tym momencie będzie identyfikator zalogowanego użytkownika, który zapewni nam dostęp do reszty jego informacji poprzez bazę danych.

Projekt - Konto użytkownika i uprawnienia

Połączenie zebranej wiedzy w dużym projekcie.

Etap piąty to zarządzanie zasobami, które już posiadamy. Po stworzeniu możliwości przechowywania informacji w sesji oraz autoryzacji użytkowników możemy modyfikować stronę w zależności od rangi użytkownika.

Do zrobienia:
1) Konto użytkownika (panel zarządzania wpisami użytkownika) - użytkownik powinien móc modyfikować i usuwać wszystkie dodane przez siebie wpisy a także zmieniać dane o samym sobie. Należy stworzyć listę wpisów dodanych przez użytkownika z opcją "Usuń" oraz "Edytuj", a także panel zarządzania kontem, umożliwiającym zmianę danych. Do stworzenia tych podstron nie potrzeba nowej wiedzy, wystarczy obsługa formularzy oraz pobieranie i updatowanie wpisów w bazie.

2) Uprawnienia użytkownika (ograniczenie danych dla niezalogowanych użytkowników) - użytkownicy niezalogowani nie powinni mieć możliwości dodawania wpisów (czyli widzieć zakładki). Dla niezalogowanych powinny być widoczne przyciski rejestracji nowego konta i zalogowania, a dla zalogowanych opcja wylogowania. Wszystkie te czynności można osiągnąć "ifologią" i przy wykorzystaniu dwóch zmiennych sesyjnych przechowujących: id zalogowanego użytkownika (jeżeli niezalogowany id = -1) oraz rodzaj typu konta (jeżeli użytkownik niezalogowany ranga = -1).

Projekt - Etap końcowy

Wrzucenie strony na hosting

Należy dokończyć pozostałe rozdziały dokumentacji. Rozdział trzeci - schematy, rodział czwarty - dokładny opis opracowanej funkcjonalności (jak to zostało zaimplementowane w kodzie), rodział piąty - efekty pracy (screeny końcowe, wycinki skomentowanego kodu).

Cały projekt powinien zostać umieszczony w internecie na hostingu i być dostępny po wpisaniu konkretej domeny w url. Każdy z uczniów otrzymał na zajęciach dane dostępowe do własnego kawałka serwera hostingowego, należy z niego skorzystać i umieścić tam projekt razem z bazą danych oraz dokumentacją. Szczegóły tworzenia strony znajdują się na stronie www.pracowniezsk.pl

Strony dostępne na hostingu powinny posiadać podpiętą analitykę (np. Google Analytics0), być zgodne z zasadami walidacji W3C (np. W3Validator) i dostępności WCAG (np. Web Accesability Evaluation Tool).

Projekt - Wyszukiwarka

Obsługa wyszukiwarki wpisów, zadanie dodatkowe dla lubiących SQL

Przeglądanie zawartości strony powinno uwzględniać również wygodne przeszukiwanie jej zasobów. Do wykonania jest algorytm wyszukiwania wpisów po podanych przez użytkownika frazach. Do wykonania wyszukiwarki posłużyć może okno typu input, z którego wartości pobrane zostaną metodą POST. Wprowadzone frazy powinny zostać wykorzystane do stworzenia bazodanowej kwerendy i pobrania pasujących rekordów. Wyszukiwarka powinna przeszukiwać zasoby po minimum dwóch polach np. autor i tytuł, albo miejsce startowe i miejsce docelowe.

Przykładowa wyszukiwarka książek Image from Gyazo

Projekt biblioteki - Zabezpieczenia

Hashowanie haseł przechowywanych w bazie, zadanie dodatkowe dla lubiących PHP

W celu zapewnienia bezpieczeństwa przed kradzieżą tożsamości, hasła do kont użytkowników nigdy nie powinny być przechowywane w bazie danych w formie jawnej. Każde pobierane przez użytkownika hasło powinno zostać zaszyfrowane, a perfekcyjnym ku temu rozwiązaniem bedzie skorzystanie z kryptograficznych szyfrów jednokierunkowych.

Szyfry jednokierunkowe to takie algorytmy, które pozwalają krótki tekst jawny zamienić w prosty sposób na zaszyfrowany ciąg znaków niemożliwy bądź prawie niemożliwy do złamania. Kryptografia do tworzenia funkcji jednokierunkowych korzysta z tak zwanych problemów "NP trudnych", które dla współczesnych maszyn są praktycznie niemożliwe do obliczenia.

Najczęściej stosowanymi obecnie funkcjami jednokierunkowymi (hashującymi) są SHA1 i MD5. Wykorzystując gotowe funkcje języka PHP zaszyfruj przechowywane w bazie danych hasła. Hasło powinno zostać zapisane do bazy w formie zaszyfrowanej już podczas procesu rejestracji, a przy logowaniu porównany z wpisem w bazie powinien zostać hash z podanego jawnego hasła.

SHA5 - Jak to działa? Przy podaniu dowolnego ciągu znaków i przepuszczeniu go przez funkcję hashującą otrzymujemy zawsze ten sam ciąg znaków o określonej liczbie bitów - niezależnie od długości podanego słowa wejściowego. Gwarantuje nam to specjalna funkcja bazująca na liczbach pierwszych i operacjach modulo, która dla obecnych komputerów jest niemożliwa do cofnięcia. W związku z tym gdy będziemy poddawać hashowaniu ciągle to samo słowo, to uzyskamy ten sam wynik ale nigdy nie odczytamy go w drugą stronę.
Przykłady hashy wygenerowanych przez algorytm SHA1 dla słów:
"haslo" -> "ff12bbd8c907af067070211d87bdf098be17375b"
"12345" -> "8cb2237d0679ca88db6464eac60da96345513964"
"ZAQ!@" -> "e4fdb573d9ea483a28bb4cad4ed7477c75a9f1f2"