DYDAKTYKA

Zaawansowane techniki WWW (WFAIS.IF-C112)

Organizacja zajęć:

Wykład w semestrze zimowym roku akademickiego 2015/2016 rozpocznie się zgodnie z harmonogramem dnia 7 października 2015 r. i będzie odbywał się co środę w godzinach 15:30 - 17:00 w sali wykładowej A-1-04.

Zajęcia w pracowni komputerowej będą odbywać się w trzech grupach ćwiczeniowych:
Grupa 1: środa 12:00 - 14:00, sala G-1-03, prowadzący: Prof. dr hab. Jerzy Konior
Grupa 2: czwartek 12:30 - 14:00, sala G-1-03, prowadzący: Dr inż. Marcin Zieliński
Grupa 3: czwartek 12:30 - 14:00, sala G-1-07, prowadzący: Mgr inż. Adam Górski

Egzamin

A : Terminy:

I termin egzaminu: 9 lutego 2016 r. (wg. listy od godz. 10:00, sala: - G-1-03)
II termin egzaminu (sesja poprawkowa): - 19 lutego 2016 r.
Osoby które nie mogą przystąpić do prezentacji w podanych terminach proszone są o kontakt mailowy z podaniem propozycji daty prezentacji projektu zaliczeniowego.

B : Projekt - wymagania minimalne:

  • aplikacja tematyczna (np. spis płyt, strona o ulubionym zespole muzycznym, sklep internetowy, chat online etc.)
  • aplikacja napisana w środowisku Node.js + Express.js w architekturze MVC
  • frontend: HTML (JADE/EJS) + CSS (RWD będzie dodatkowym atutem), wykorzystanie jQuery będzie dodatkowym atutem
  • obowiązkowe wykorzystanie bazy danych (SQL lub noSQL), w której przechowywane są dane prezentowane na stronie
  • wykorzystanie metod: router.post() router.get() do przesłania danych na serwer

C : Zagadnienia teoretyczne do egzaminu:

  1. Protokół HTTP - wytłumaczenie zasady działania protokołu, główne cechy, opis metod GET, POST, PUT, DELETE.
  2. Komunikacja synchroniczna i asynchroniczna - zasada działania, wady, zalety, przykłady wykorzystania.
  3. RWD i Mediaqeries - co to jest, na czym polega to podejście przy tworzeniu aplikacji internetowych.
  4. jQuery - omówienia zalet i możliwości wykorzystania.
  5. Model DOM, XML, JSON, AJAX - znajomość znaczenia tych pojęć.
  6. Node.js + pętla zdarzeń - umiejętność wytłumaczenia na czym polega działanie pętli zdarzeń.
  7. Wywołanie zwrotne (callback) - co to jest oraz przykład.
  8. Architektura MVC - co to jest, zalety, wady, przykład zastosowania oraz opis działania środowiska Express.js.
  9. Omówienie współpracy środowiska Node.js z bazami danych SQL, noSQL - jakie są możliwości i ograniczenia.
  10. REST  - co to jest, przykłady.

Wykład

  1. Wykład 1 - Wstęp do technologii internetowych i protokołów komunikacyjnych (PDF)
  2. Wykład 2 - Technologie serwerowe oraz język HTML4/XHTML/HTML5 (PDF)
  3. Wykład 3 - Budowa serwisu www oraz semantyczny kod HTML (PDF)
  4. Wykład 4 - Kaskadowe arkusze stylu CSS. Metodologia Responsive Web Design (RWD) i CSS3-Mediaqueries.
  5. Wykład 5 - Wstęp do języka JavaScript (PDF)
  6. Wykład 6 - Obiekty, dziedziczenie prototypowe, zdarzenia i asynchroniczność w języku JavaScript (PDF)
  7. Wykład 7 - Wprowadzenie do funkcjonalności biblioteki jQuery (PDF)
  8. Wykład 8 - Biblioteka jQuery (cd). Wstęp do środowiska NODE.JS (PDF)
  9. Wykład 9 - Środowisko NODE.JS repozytorium NPM (PDF)
  10. Wykład 10 - Wzorzec projektowy MVC i jego implementacja w Express.js (PDF)
  11. Wykład 11 - Node.js we współpracy z bazą danych MySQL (PDF)
  12. Wykład 12 - Mapowanie obiektowo-relacyjne (ORM) w Node.js (PDF)

Ćwiczenia

  1. Ćwiczenia 1 - Wstęp i organizacja zajęć
  2. Ćwiczenia 2 - Wstęp do html i organizacji kodu strony internetowej
  3. Ćwiczenia 3 - Kaskadowe arkusze stylu (CSS)
  4. Ćwiczenia 4 - CSS3, Mediaqueries i filozofia projektowania RWD
  5. Ćwiczenia 5 - Podstawy programowania w JavaScript.
  6. Ćwiczenia 6 - Pogramowania w JavaScript - cd.
  7. Ćwiczenia 6 - Funkcje obsługi zdarzeń w JavaScript.
  8. Ćwiczenia 7 - Biblioteka jQuery.
  9. Ćwiczenia 8 - Biblioteka jQuery (cd). Wprowadzenie do Node.js.
  10. Ćwiczenia 9 - Node.js i Express.js
  11. Ćwiczenia 10 - Prosty model danych
  12. Ćwiczenia 11 - Komunikacja bazodanowa w Node.js
  13. Ćwiczenia 12 - Wykorzystanie ORM i Sequelize.js

Projekty zaliczeniowe dla grup ćwiczeniowych

Projekt 1 - Strona osobista (wizytówka) zgodna z RWD

Tematem projektu jest strona osobista / wizytówka studenta, która zawiera podstawowe informację, opis zainteresowań, hobby, ulubione zajęcie etc. Strona powinna zostać wykonana z wykorzystaniem technologii HTML oraz CSS, zgodnie ze wszystkimi standardami oraz z naciskiem na poprawność semantyczną. Głównym elementem strony powinno być poprawne pod względem semantyczym menu wykonane w oparciu o elementy listy ul/li. Menu może być pionowe lub poziome i powinno zawierać kilka zakładek kierujących do odpowiednich podstron tematycznych. Ostatnia zakładka menu powinna zawierać dane kontaktowe aktywnym linkiem umożliwiającym wysłaniem wiadomości email do autora strony. Projekt powinnien korzystać z reguł Mediaqueris CSS3, które pozwolają na dopasowanie się strony do warunków urządzenia na na jakim jest wyświetlana. Jednym z wymagań projektu jest aby strona była zgodna z podejściem projektowania RWD (Responsive Web Design).

Termin oddania projektu: 08.11.2015

Projekt 2 - Biblioteka w języku JavaScript

W języku JavaScript proszę przygotować klasę o nazwie "Helper" pełniącą rolę biblioteki do wykonywania operacji na danych dostarczonych w formie obiektów "studentObj" w formacie JSON (przykład pojedyńczego obiektu do pobrania tutaj). Obiekt ten zawiera dane o studencie: imię, nazwisko, datę urodzenia, numer indeksu, aktualny rok studiów, listę kursów podjętych w danym roku akademickim. Każdy kurs składa się z wykładów i ćwiczeń, gdzie tablica jednoelementowa zawiera ocenę w pierwszym terminie, tablica dwuelementowa ocenę w pierwszym i drugim terminie. Do liczenia średnich używamy ocen ze wszystkich terminów. Klasa powinna zawierać następujące metody:

  • getStudentList([studenObj,studentObj,StudentObj,...]);
    metoda przyjmuje na wejściu obiekty "studentObj", a na wyjściu zwraca tablicę (Array) zawierający identyczne obiekty z danymi studentów posortowany w kolejności alfabetycznej (od A do Z).
  • getStudentListForCourse([studenObj,studentObj,StudentObj,...],"year","CourseName");
    metoda przyjmuje na wejściu obiekty "studentObj", rok oraz nazwę kursu, a na wyjściu zwraca tablicę (Array) zawierającą obiekt z imieniem, nazwiskiem i numerem indeksu studenta posortowany w kolejności alfabetycznej (od A do Z).
  • getAvarageForStudentInYear(studentObj,"year");
    metoda przyjmuje na wejściu pojedyńczy obiekt "studentObj" oraz rok, na tej podstawie wylicza średnią ocen dla danego studenta ze wszystkich kursów w danym roku, zwracając na wyjściu liczbę zmiennoprzecinkową.
  • getAvarageForStudentAllYears(studentObj);
    metoda przyjmuje na wejściu pojedyńczy obiekt "studentObj", na tej podstawie wylicza średnią ocen dla danego studenta ze wszystkich kursów ze wszystkich lat studiów, zwracając na wyjściu liczbę zmiennoprzecinkową.
  • getAverageForCourse([studenObj,studentObj,StudentObj,...],"year","CourseName");
    metoda na wejściu przyjmuje obiekty "studentObj", rok oraz nazwę kursu, na tej podstawie wylicza średnią ocen dla danego kursu na podstawie ocen każdego studenta, na wyjściu zwracana jest liczba zmiennoprzecinkowa.

Klasa powinna zawierać również metody pomocnicze:

  • _sortByName() metoda sortująca alfabetycznie po nazwisku (od A do Z),
  • _getAverage() metoda licząca średnią ocen,
  • oraz inne metoday które będą używane kilkukrotnie.

Termin oddania projektu: 31.12.2015