Zachodniopomorski Uniwersytet Technologiczny w Szczecinie

Wydział Informatyki - Informatyka (N1)

Sylabus przedmiotu Aplikacje internetowe 1:

Informacje podstawowe

Kierunek studiów Informatyka
Forma studiów studia niestacjonarne Poziom pierwszego stopnia
Tytuł zawodowy absolwenta inżynier
Obszary studiów charakterystyki PRK, kompetencje inżynierskie PRK
Profil ogólnoakademicki
Moduł
Przedmiot Aplikacje internetowe 1
Specjalność Inżynieria systemów informacyjnych
Jednostka prowadząca Katedra Inżynierii Systemów Informacyjnych
Nauczyciel odpowiedzialny Artur Karczmarczyk <Artur.Karczmarczyk@zut.edu.pl>
Inni nauczyciele Piotr Czapiewski <Piotr.Czapiewski@zut.edu.pl>, Jarosław Jankowski <Jaroslaw.Jankowski@zut.edu.pl>, Artur Karczmarczyk <Artur.Karczmarczyk@zut.edu.pl>, Bartłomiej Małachowski <Bartlomiej.Malachowski@zut.edu.pl>, Jerzy Pejaś <Jerzy.Pejas@zut.edu.pl>, Piotr Piela <Piotr.Piela@zut.edu.pl>
ECTS (planowane) 4,0 ECTS (formy) 4,0
Forma zaliczenia zaliczenie Język polski
Blok obieralny 3 Grupa obieralna 1

Formy dydaktyczne

Forma dydaktycznaKODSemestrGodzinyECTSWagaZaliczenie
laboratoriaL5 18 2,00,50zaliczenie
wykładyW5 18 2,00,50zaliczenie

Wymagania wstępne

KODWymaganie wstępne
W-1Programowanie 2

Cele przedmiotu

KODCel modułu/przedmiotu
C-1Zapoznanie studentów z zasadami budowy stron internetowych
C-2Ukształtowanie rozumienia podstawowych pojęć związanych ze środowiskiem WWW
C-3Ukształtowanie umięjętności budowy prostych aplikacji internetowych, z położeniem głównego nacisku na wysoki poziom interaktywności aplikacji.

Treści programowe z podziałem na formy zajęć

KODTreść programowaGodziny
laboratoria
T-L-1Domena i serwer – rejestracja hostingu i domeny internetowej. Połączenie hostingu i domeny w różnych wariantach: PARKED, A, CNAME. Badanie witryny z wykorzystaniem narzędzi DIG i WHOIS.2
T-L-2HTML i CSS – Zen Garden – tworzenie pojedynczej strony HTML i zestawu styli CSS zmieniających jej wygląd, w zależności od wybranego stylu.2
T-L-3JS i DOM – utworzenie dynamicznej listy czynności do zrobienia z wykorzystaniem JS ES2015. Programowe przemieszczanie się po drzewie DOM. Dodawanie, usuwanie, edytowanie elementów drzewa DOM.2
T-L-4Zaawansowane JS w przeglądarce. Projekt aplikacji w JavaScript korzystającej z Geolocation API, Google Maps API oraz Notification API. Realizacja gry w JavaScript (układanie Puzzli) z użyciem mechanizmu Drag and Drop.2
T-L-5Budowa aplikacji klienckiej REST z użyciem XMLHttpRequest API oraz Fetch API.2
T-L-6TypeScript – Zen Garden. Przekształcenie statycznej witryny z laboratorium 2 do postaci aplikacji dynamicznej, wyświetlającej listę styli oraz umożliwiającej jej podmianę w sposób dynamiczny bez przeładowania strony.2
T-L-7Wprowadzenie do tworzenia systemów webowych w oparciu o backend. Przygotowanie specyfikacji wymagań, user stories, work breakdown structure, metoda Delphi, tworzenie harmonogramów, klikalne makiety nowej aplikacji. Realizacja systemu webowego zgodnie z ustalonym harmonogramem: Mapowanie obiektowo-relacyjne; Uprawnienia. REST API server; Testy jednostkowe4
T-L-8Hybrydowe aplikacje mobilne oparte o WebView, z wykorzystaniem TypeScript i REST API.2
18
wykłady
T-W-1Synteza HTML i CSS. Obrazki. Hiperłącza. Listy. Tabele. Układ strony. Formularze. HTML 5. Struktura i semantyka. Tranfsormacje i obrót. Przekształcanie i animacje. Elementy formularzy HTML 5. Poziom wsparcia elementów. Preprocesory CSS na przykładzie LESS.2
T-W-2JavaScript ES2015. Podstawy: Historia JS. Podstawy programowania – przypomnienie. Podstawy JS – wartości, typy danych, operatory. Zmienne. Przepływ sterowania. Wyrażenia regularne. JS i przeglądarki.2
T-W-3JavaScript ES2015. Programowanie obiektowe: Enkapsulacja. Interfejsy. Obiekty. Metody. Prototypy. Funkcja konstruktor. Operator new. Klasy. Polimorfizm. Interfejs Iterator. Gettery i settery. Dziedziczenie. Błędy i wyjątki. Funkcje wyższego rzędu. Drzewo DOM.2
T-W-4JavaScript ES2015. Biblioteki i API: Zdarzenia i ich obsługa. Połączenia asynchroniczne XMLHttpRequest i Fetch. Grafika rastrowa w Canvas. Grafika wektorowa w SVG. Animacje SVG. Drag-and-Drop API. Obsługa multimediów. Geolokalizacja i mapy.2
T-W-5Wprowadzenie do PHP: Środowisko deweloperskie. Homestead. Serwer PHP. Podstawy PHP. Operatory. Zmienne i stałe. Przepływ sterowania. Funkcje. System plików. PHP i Web.2
T-W-6Zaawansowane PHP: Programowanie obiektowe. Klasy i obiekty. Konstruktor. Destruktor. Właściwości. Metody. Stałe w klasie. Dziedziczenie. Blokowanie nadpisywania metod. Poziomy widoczności. Type hinting i polmorfizm. Klasy abstrakcyjne. Interfejsy i traity. Referencje i klonowanie. Metody statyczne. Przestrzenie nazw. Wyjątki i ich obsługa. Baza danych. Interfejs PDO. Prepared Statements. Mapowanie obiektowo-relacyjne.2
T-W-7Zaawansowane PHP: PHP i Web. Obsługa formularzy. Obsługa JSON payload. Wyrażenia regularne. Sesje. Bufor wyjściowy. Pamięć podręczna. Poczta email. Usługi sieciowe Web Services. SOAP. REST. Testy jednostkowe. PhpUnit. Debugowanie i XDEBUG. Dokumentacja automatyczna. Akceleracja kodu. Profilowanie kodu. Podstawowe zasady bezpieczeństwa aplikacji. Obfuskacja kodu.2
T-W-8Języki programowania dla przeglądarek WWW ze statyczną kontrolą typów. Problemy z JS. Wprowadzenie do TypeScript. Porównanie TS i JS. Instalacja TS. Typy. Funkcje. Polimorfizm. Obiektowość.1
T-W-9Wzorce projektowe. Geneza wzorców projektowych. Krótkie przypomnienie UML. Wzorce behawioralne: strategia. Wzorce kreacyjne: Simple Factory, Factory Method, Abstract Factory, Lazy Initialization, Builder, Prototype. Wzorce strukturalne: Decorator. Adapter. Façade.2
T-W-10Hybrydowe aplikacje mobilne – instalacja, platformy, pluginy, użycie API urządzenia (geolokalizacja, kompas, kamera, bateria, akcelerometr), merges, debugowanie w Chrome, usługi automatyzacji budowy aplikacji1
18

Obciążenie pracą studenta - formy aktywności

KODForma aktywnościGodziny
laboratoria
A-L-1Uczestnictwo w laboratoriach18
A-L-2Praca własna nad tworzonymi witrynami internetowymi.30
A-L-3Zaliczenie2
50
wykłady
A-W-1Uczestnictwo w wykładach18
A-W-2Analiza i wykonanie we własnym zakresie przykładów prezentowanych na wykładzie.30
A-W-3Egzamin2
50

Metody nauczania / narzędzia dydaktyczne

KODMetoda nauczania / narzędzie dydaktyczne
M-1Wykład informacyjny
M-2Wykład problemowy
M-3Dyskusja dydaktyczna
M-4Ćwiczenia przedmiotowe
M-5Objaśnienie lub wyjaśnienie

Sposoby oceny

KODSposób oceny
S-1Ocena formująca: Kontrola poprawności realizacji zadania zdefiniowanego na poprzedzających laboratoriach
S-2Ocena podsumowująca: Końcowe zaliczenie wykładu w formie ustnej lub w formie pisemnego testu złożonego z pytań otwartych
S-3Ocena podsumowująca: Końcowe zaliczenie laboratoriów - w formie prezentacji przygotowanej witryny internetowej (zaliczenie obejmuje również kody przygotowanych skryptów)

Zamierzone efekty uczenia się - wiedza

Zamierzone efekty uczenia sięOdniesienie do efektów kształcenia dla kierunku studiówOdniesienie do efektów zdefiniowanych dla obszaru kształceniaOdniesienie do efektów uczenia się prowadzących do uzyskania tytułu zawodowego inżynieraCel przedmiotuTreści programoweMetody nauczaniaSposób oceny
I_1A_D03.03.1_W01
W wyniku przeprowadzonych zajęć studen powinien być w stanie scharakteryzować sposób działania architektury klient - serwer w środowisku internetowym, opisać działanie podstawowych protokołów sieciowych, wyjaśnić podstawowe pojęcia związane z tworzeniem stron internetowych, scharakteryzować wybrane środowiska do budowy aplikacji internetowych (po stronie klienta oraz serwera)
I_1A_W04C-2M-1, M-2, M-5S-2

Zamierzone efekty uczenia się - umiejętności

Zamierzone efekty uczenia sięOdniesienie do efektów kształcenia dla kierunku studiówOdniesienie do efektów zdefiniowanych dla obszaru kształceniaOdniesienie do efektów uczenia się prowadzących do uzyskania tytułu zawodowego inżynieraCel przedmiotuTreści programoweMetody nauczaniaSposób oceny
I_1A_D03.03.1_U01
Po zakończeniu przedmiotu student będzie potrafił zbudować witrynę internetową pozwalającą na prezentację wybranych treści w Internecie, z położeniem głównego nacisku na intuicyjność obsługi witryny przez użytkownika.
I_1A_U09, I_1A_U10C-1, C-3M-3, M-4, M-5S-3, S-1

Kryterium oceny - wiedza

Efekt uczenia sięOcenaKryterium oceny
I_1A_D03.03.1_W01
W wyniku przeprowadzonych zajęć studen powinien być w stanie scharakteryzować sposób działania architektury klient - serwer w środowisku internetowym, opisać działanie podstawowych protokołów sieciowych, wyjaśnić podstawowe pojęcia związane z tworzeniem stron internetowych, scharakteryzować wybrane środowiska do budowy aplikacji internetowych (po stronie klienta oraz serwera)
2,0Student nie zna podstawowych pojęć związanych z programowaniem aplikacji internetowych
3,0Student jest w stanie zdefiniować podstawowe pojęcia związane z programowaniem aplikacji internetowych
3,5Student jest w stanie opisać podstawowe etapy budowy stron internetowych
4,0Student jest w stanie zastosować zdobytą wiedzę w praktyce, czyli jest w stanie rozwiązać postawione przed nim zadanie za pomocą wskazanej technologii internetowej
4,5Student jest w stanie dokonać analizy porównawczej różnych środowisk służących do budowych aplikacji internetowych
5,0Student jest w stanie dokonać oceny wskazanych środowisk służących do budowych aplikacji internetowych pod kątem ich adekwatności do postawionego przed nim zadania

Kryterium oceny - umiejętności

Efekt uczenia sięOcenaKryterium oceny
I_1A_D03.03.1_U01
Po zakończeniu przedmiotu student będzie potrafił zbudować witrynę internetową pozwalającą na prezentację wybranych treści w Internecie, z położeniem głównego nacisku na intuicyjność obsługi witryny przez użytkownika.
2,0Student nie jest w stanie stworzyć prostej witryny internetowej
3,0Student jest w stanie stworzyć prostą witrynę internetową
3,5Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych
4,0Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji
4,5Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji, pozwalającą na przeprowadzenie poprawnej walidacji danych wprowadzanych przez użytkowników
5,0Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji, pozwalającą na przeprowadzenie poprawnej walidacji danych wprowadzanych przez użytkowników oraz jest w stanie uatrakcyjnić witrynę pod względem wizualnym oraz zwiększyć intuicyjność obsługi witryny

Literatura podstawowa

  1. Kris Jahmsa, Ph. D., Introduction to Web Development using HTML5, , Jones & Bartlett Learning, 2014
  2. Zend PHP Certification Study Guide (Developer's Library), Zend Technologies, 2017, available at: http://www.zend.com/en/services/certification/php-certification-study-guide
  3. Marjin Haverbeke, Eloquent JavaScript. Third Edition., No Starch Press, 2018, http://eloquentjavascript.net/
  4. Sarah Drasner, SVG Animations, O’Reilly Media, 2017
  5. Boris Cherny, Programming TypeScript, O’Reilly Media, 2019
  6. Junade Ali, Mastering PHP Design Patterns, Packt Publishing, 2016

Literatura dodatkowa

  1. Farhad Ghayour, Diego Cantor, Real-Time 3D Graphics with WebGL 2, Packt Publishing, 2018
  2. Jesse Cravens, Jeff Burtoft, HTML5 Hacks, O’Reilly Media, 2013
  3. Sebastien Dubois, Alexis Georges, Learn TypeScript 3 by Building Web Applications, Packt Publishing, 2019
  4. Eric Freeman, Elisabeth Robson, Head First Design Patterns, 2nd Edition, O’Reilly Media, 2020
  5. Simon Timms, Mastering JavaScript Design Patterns – Second Edition, Packt Publishing, 2016

Treści programowe - laboratoria

KODTreść programowaGodziny
T-L-1Domena i serwer – rejestracja hostingu i domeny internetowej. Połączenie hostingu i domeny w różnych wariantach: PARKED, A, CNAME. Badanie witryny z wykorzystaniem narzędzi DIG i WHOIS.2
T-L-2HTML i CSS – Zen Garden – tworzenie pojedynczej strony HTML i zestawu styli CSS zmieniających jej wygląd, w zależności od wybranego stylu.2
T-L-3JS i DOM – utworzenie dynamicznej listy czynności do zrobienia z wykorzystaniem JS ES2015. Programowe przemieszczanie się po drzewie DOM. Dodawanie, usuwanie, edytowanie elementów drzewa DOM.2
T-L-4Zaawansowane JS w przeglądarce. Projekt aplikacji w JavaScript korzystającej z Geolocation API, Google Maps API oraz Notification API. Realizacja gry w JavaScript (układanie Puzzli) z użyciem mechanizmu Drag and Drop.2
T-L-5Budowa aplikacji klienckiej REST z użyciem XMLHttpRequest API oraz Fetch API.2
T-L-6TypeScript – Zen Garden. Przekształcenie statycznej witryny z laboratorium 2 do postaci aplikacji dynamicznej, wyświetlającej listę styli oraz umożliwiającej jej podmianę w sposób dynamiczny bez przeładowania strony.2
T-L-7Wprowadzenie do tworzenia systemów webowych w oparciu o backend. Przygotowanie specyfikacji wymagań, user stories, work breakdown structure, metoda Delphi, tworzenie harmonogramów, klikalne makiety nowej aplikacji. Realizacja systemu webowego zgodnie z ustalonym harmonogramem: Mapowanie obiektowo-relacyjne; Uprawnienia. REST API server; Testy jednostkowe4
T-L-8Hybrydowe aplikacje mobilne oparte o WebView, z wykorzystaniem TypeScript i REST API.2
18

Treści programowe - wykłady

KODTreść programowaGodziny
T-W-1Synteza HTML i CSS. Obrazki. Hiperłącza. Listy. Tabele. Układ strony. Formularze. HTML 5. Struktura i semantyka. Tranfsormacje i obrót. Przekształcanie i animacje. Elementy formularzy HTML 5. Poziom wsparcia elementów. Preprocesory CSS na przykładzie LESS.2
T-W-2JavaScript ES2015. Podstawy: Historia JS. Podstawy programowania – przypomnienie. Podstawy JS – wartości, typy danych, operatory. Zmienne. Przepływ sterowania. Wyrażenia regularne. JS i przeglądarki.2
T-W-3JavaScript ES2015. Programowanie obiektowe: Enkapsulacja. Interfejsy. Obiekty. Metody. Prototypy. Funkcja konstruktor. Operator new. Klasy. Polimorfizm. Interfejs Iterator. Gettery i settery. Dziedziczenie. Błędy i wyjątki. Funkcje wyższego rzędu. Drzewo DOM.2
T-W-4JavaScript ES2015. Biblioteki i API: Zdarzenia i ich obsługa. Połączenia asynchroniczne XMLHttpRequest i Fetch. Grafika rastrowa w Canvas. Grafika wektorowa w SVG. Animacje SVG. Drag-and-Drop API. Obsługa multimediów. Geolokalizacja i mapy.2
T-W-5Wprowadzenie do PHP: Środowisko deweloperskie. Homestead. Serwer PHP. Podstawy PHP. Operatory. Zmienne i stałe. Przepływ sterowania. Funkcje. System plików. PHP i Web.2
T-W-6Zaawansowane PHP: Programowanie obiektowe. Klasy i obiekty. Konstruktor. Destruktor. Właściwości. Metody. Stałe w klasie. Dziedziczenie. Blokowanie nadpisywania metod. Poziomy widoczności. Type hinting i polmorfizm. Klasy abstrakcyjne. Interfejsy i traity. Referencje i klonowanie. Metody statyczne. Przestrzenie nazw. Wyjątki i ich obsługa. Baza danych. Interfejs PDO. Prepared Statements. Mapowanie obiektowo-relacyjne.2
T-W-7Zaawansowane PHP: PHP i Web. Obsługa formularzy. Obsługa JSON payload. Wyrażenia regularne. Sesje. Bufor wyjściowy. Pamięć podręczna. Poczta email. Usługi sieciowe Web Services. SOAP. REST. Testy jednostkowe. PhpUnit. Debugowanie i XDEBUG. Dokumentacja automatyczna. Akceleracja kodu. Profilowanie kodu. Podstawowe zasady bezpieczeństwa aplikacji. Obfuskacja kodu.2
T-W-8Języki programowania dla przeglądarek WWW ze statyczną kontrolą typów. Problemy z JS. Wprowadzenie do TypeScript. Porównanie TS i JS. Instalacja TS. Typy. Funkcje. Polimorfizm. Obiektowość.1
T-W-9Wzorce projektowe. Geneza wzorców projektowych. Krótkie przypomnienie UML. Wzorce behawioralne: strategia. Wzorce kreacyjne: Simple Factory, Factory Method, Abstract Factory, Lazy Initialization, Builder, Prototype. Wzorce strukturalne: Decorator. Adapter. Façade.2
T-W-10Hybrydowe aplikacje mobilne – instalacja, platformy, pluginy, użycie API urządzenia (geolokalizacja, kompas, kamera, bateria, akcelerometr), merges, debugowanie w Chrome, usługi automatyzacji budowy aplikacji1
18

Formy aktywności - laboratoria

KODForma aktywnościGodziny
A-L-1Uczestnictwo w laboratoriach18
A-L-2Praca własna nad tworzonymi witrynami internetowymi.30
A-L-3Zaliczenie2
50
(*) 1 punkt ECTS, odpowiada około 30 godzinom aktywności studenta

Formy aktywności - wykłady

KODForma aktywnościGodziny
A-W-1Uczestnictwo w wykładach18
A-W-2Analiza i wykonanie we własnym zakresie przykładów prezentowanych na wykładzie.30
A-W-3Egzamin2
50
(*) 1 punkt ECTS, odpowiada około 30 godzinom aktywności studenta
PoleKODZnaczenie kodu
Zamierzone efekty uczenia sięI_1A_D03.03.1_W01W wyniku przeprowadzonych zajęć studen powinien być w stanie scharakteryzować sposób działania architektury klient - serwer w środowisku internetowym, opisać działanie podstawowych protokołów sieciowych, wyjaśnić podstawowe pojęcia związane z tworzeniem stron internetowych, scharakteryzować wybrane środowiska do budowy aplikacji internetowych (po stronie klienta oraz serwera)
Odniesienie do efektów kształcenia dla kierunku studiówI_1A_W04Ma wiedzę w zakresie programowania systemów komputerowych, zna podstawowe paradygmaty programowania i wiodące języki programowania.
Cel przedmiotuC-2Ukształtowanie rozumienia podstawowych pojęć związanych ze środowiskiem WWW
Metody nauczaniaM-1Wykład informacyjny
M-2Wykład problemowy
M-5Objaśnienie lub wyjaśnienie
Sposób ocenyS-2Ocena podsumowująca: Końcowe zaliczenie wykładu w formie ustnej lub w formie pisemnego testu złożonego z pytań otwartych
Kryteria ocenyOcenaKryterium oceny
2,0Student nie zna podstawowych pojęć związanych z programowaniem aplikacji internetowych
3,0Student jest w stanie zdefiniować podstawowe pojęcia związane z programowaniem aplikacji internetowych
3,5Student jest w stanie opisać podstawowe etapy budowy stron internetowych
4,0Student jest w stanie zastosować zdobytą wiedzę w praktyce, czyli jest w stanie rozwiązać postawione przed nim zadanie za pomocą wskazanej technologii internetowej
4,5Student jest w stanie dokonać analizy porównawczej różnych środowisk służących do budowych aplikacji internetowych
5,0Student jest w stanie dokonać oceny wskazanych środowisk służących do budowych aplikacji internetowych pod kątem ich adekwatności do postawionego przed nim zadania
PoleKODZnaczenie kodu
Zamierzone efekty uczenia sięI_1A_D03.03.1_U01Po zakończeniu przedmiotu student będzie potrafił zbudować witrynę internetową pozwalającą na prezentację wybranych treści w Internecie, z położeniem głównego nacisku na intuicyjność obsługi witryny przez użytkownika.
Odniesienie do efektów kształcenia dla kierunku studiówI_1A_U09Potrafi analizować i oceniać przydatność języków, platform programistycznych i narzędzi informatycznych do rozwiązywania wybranych problemów inżynierskich w dziedzinie informatyki.
I_1A_U10Potrafi projektować i implementować systemy informatyczne posługując się narzędziami wspomagającymi proces wytwarzania oprogramowania na różnych jego etapach.
Cel przedmiotuC-1Zapoznanie studentów z zasadami budowy stron internetowych
C-3Ukształtowanie umięjętności budowy prostych aplikacji internetowych, z położeniem głównego nacisku na wysoki poziom interaktywności aplikacji.
Metody nauczaniaM-3Dyskusja dydaktyczna
M-4Ćwiczenia przedmiotowe
M-5Objaśnienie lub wyjaśnienie
Sposób ocenyS-3Ocena podsumowująca: Końcowe zaliczenie laboratoriów - w formie prezentacji przygotowanej witryny internetowej (zaliczenie obejmuje również kody przygotowanych skryptów)
S-1Ocena formująca: Kontrola poprawności realizacji zadania zdefiniowanego na poprzedzających laboratoriach
Kryteria ocenyOcenaKryterium oceny
2,0Student nie jest w stanie stworzyć prostej witryny internetowej
3,0Student jest w stanie stworzyć prostą witrynę internetową
3,5Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych
4,0Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji
4,5Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji, pozwalającą na przeprowadzenie poprawnej walidacji danych wprowadzanych przez użytkowników
5,0Student jest w stanie stworzyć witrynę internetową współpracującą z bazą danych, wyposażoną w mechanizm logowania i rejestracji, pozwalającą na przeprowadzenie poprawnej walidacji danych wprowadzanych przez użytkowników oraz jest w stanie uatrakcyjnić witrynę pod względem wizualnym oraz zwiększyć intuicyjność obsługi witryny