PODSTAWY PROJEKTOWANIA STRON WWW

LATO 2019/2020

Podstawowe informacje

Pliki tworzące strony www można edytować w dowolnym edytorze tekstowym. Popularne edytory:

system Windows: Notepad ++, Notepad

system Linux: notepadqq,

wszystkie platformy: Sublime Text, VIM

Podstawą zaliczenia zajęć jest:

regularne uczestnictwo w zajęciach (dopuszczalna jest maksymalnie 1 nieusprawiedliwiona nieobecność)

wykonywanie ćwiczeń na zajęciach

stworzenie projektu końcowego.

Podczas zajęć będziemy tworzyć proste rozwiązania z użyciem kolejnych narzędzi, wykonując docelowo projekt końcowy.

Projekt końcowy na zaliczenie powinien uwzględniać wszystkie poznane zagadnienia dotyczące tworzenia stron WWW, w szczególności:

strona ma składać się z minimum 5 podstron powiązanych między sobą, ma być wyposażona w prawidłowe nagłówki i elementy semantyczne,

strona ma mieć zdefiniowane poprawnie style CSS,

zastosowanie Javascript,

zastosowanie technologii AJAX (np. pobieranie i wyświetlanie danych z API lub z pliku zewnętrznego),

strona ma być w całości responsywna.

ZAKRES MATERIAŁU

1. HTML5

https://www.w3schools.com/html/default.asp

a. Podstawy: wprowadzenie, budowa dokumentu HTML

b. Semantyka i podstawowe znaczniki, head, meta

c. Podstawowe elementy stron WWW: linki, obrazki, przyciski, listy, formatowanie

tekstu, tabele, komentarze, bloki, znaczniki grupujące (div), formularze.

Przykładowe zadanie do realizacji na zajęciach: Stwórz stronę internetową, na której zaprezentujesz informacje o sobie. Ma ona składać się

z minimum 5 podstron linkujących między sobą, powinna być wyposażona w prawidłowe

nagłówki oraz elementy semantyczne.

2. CSS

https://www.w3schools.com/css/default.asp

a. Klasy, syntaktyka

b. Pseudoklasy, pseudoelementy

c. Tranzycje, animacje

d. Responsywność

Przykładowe zadanie do realizacji na zajęciach:

Opracuj wygląd strony z ćwiczenia 1 wykorzystując style CSS. Pamiętaj, by style definiować

w sposób maksymalnie ułatwiający korzystanie z nich.

3. SASS

(należy zadbać o to, aby został zainstalowany w laboratoriach)

https://sass-lang.com/

a. Instalacja

b. Praca z arkuszami

c. Zmienne

d. Zagnieżdżanie

e. Mixin-y

f. Przekazywanie atrybutów

g. Operatory

Przykładowe zadanie do realizacji na zajęciach:

Opracuj wygląd strony z ćwiczenia 1 wykorzystując pliki SASS.

Nie wymagamy korzystania z SASS-a w projekcie zaliczeniowym. Przedstawiamy go tylko jako

wygodne narzędzie pracy z większymi projektami (np. kilka arkuszy dla jednej dużej strony).

4. JavaScript

https://www.w3schools.com/js/default.asp

a. Wprowadzenie, osadzenie w HTML

b. Zmienne, operatory, syntaktyka

c. Funkcje https://www.w3schools.com/js/js_functions.asp

d. Zdarzenia https://www.w3schools.com/js/js_events.asp

e. Obiekty https://www.w3schools.com/js/js_objects.asp

f. Programowanie: instrukcje warunkowe, pętle

https://www.w3schools.com/js/js_if_else.asp

https://www.w3schools.com/js/js_loop_for.aspg.

g. Pliki JSON https://www.w3schools.com/js/js_json.asp

Przykładowe zadanie do realizacji na zajęciach:

Oprogramowanie kalkulatora w JavaScript, przeliczającego różnego rodzaju jednostki w różnych

kategoriach (np. spalanie w mpg – l/100km).

5. jQuery

https://www.w3schools.com/jquery/default.asp

a. podstawy

b. technologia AJAX https://www.w3schools.com/jquery/jquery_ajax_intro.asp

i wykorzystanie zewnętrznych API (providerów danych), np.

i. Open Movie Database - http://www.omdbapi.com

ii. Open Weather Map - https://openweathermap.org

iii. Wikipedia Web API -

https://www.mediawiki.org/wiki/API:Web_APIs_hub

iv. Lufthansa: https://developer.lufthansa.com/docs

v. Kursy walut NBP: http://api.nbp.pl/

vi. Bitcoin: https://bitbay.net/pl/api-publiczne

Itp.

Przykładowe zadanie do realizacji na zajęciach:

Napisz skrypt pobierający informacje z wybranego API i wyświetlający je w przejrzystej formie na

stronie. Wykorzystaj bibliotekę jQuery i technologię AJAX.

6. Bootstrap

https://getbootstrap.com/docs/4.3/getting-started/introduction/

a. Wprowadzenie: https://www.w3schools.com/bootstrap/

b. Kontenery, siatki (grid), klasy responsywne

https://getbootstrap.com/docs/4.0/layout/overview/

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

c. Przegląd komponentów: https://getbootstrap.com/docs/4.0/components/alerts/

d. Tematy - https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

e. Formularze - https://www.w3schools.com/bootstrap/bootstrap_forms.asp

Przykładowe zadanie do realizacji na zajęciach:

Zaprojektuj portfolio oparte o wybrany przez siebie temat Bootstrap, z wykorzystaniem gridów,

dynamicznych elementów, popupów itp. Materiały do wyświetlenia w portfolio można pobrać

np. z portali z darmową grafiką, takich jak www.pexels.com, pixabay.com.

7. Przegląd bibliotek

a. PhotoSwipe https://photoswipe.com

b. nanogallery2: https://nanogallery2.nanostudio.org/

c. Muuri: https://haltu.github.io/muuri/

d. Timeline.js: https://ilkeryilmaz.github.io/timelinejs/

e. Tilted Page Scroll:

http://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html

f. Material Design Hierarchical Display: http://zavoloklom.github.io/material-design-

hierarchical-display/

g. Tooltipster: http://iamceege.github.io/tooltipster/

h. Font Awesome: https://fontawesome.com/

i. Form Validation: https://formvalidation.io/ (uwaga: komercyjna, nie darmowa)

Przykładowe zadanie do realizacji na zajęciach: Zapoznaj się ze sposobem instalacji, dokumentacją wybranej biblioteki (może to być inna

biblioteka JS/jQuery niż przedstawiona na zajęciach) i zaimplementuj ją do wybranego przez

siebie wcześniejszego rozwiązania.