DYDAKTYKA

Zaawansowane techniki WWW (WFAIS.IF-C112)

Organizacja zajęć:

Wykład w semestrze zimowym roku akademickiego 2014/2015 rozpocznie się zgodnie z harmonogramem dnia 8 października 2014 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 dwóch grupach ćwiczeniach:
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

Zaliczenie kursu

A : Terminy:

I termin prezentacji/egzaminu : 10 luty 2015 r, godz: 10:00 - 13:00 sala G-1-03

II termin prezentacji/egzaminu : 23 luty 2015 r, godz. 10:00 - 13:00 sala G-1-03

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 zaliczeniowy - wymagania minimalne:

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

C : Zagadnienia teoretyczne:

  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. Model DOM, XML, JSON, AJAX - znajomość znaczenia tych pojęć.
  5. Node.js + pętla zdarzeń - umiejętność wytłumaczenia na czym polega pętla zdarzeń.
  6. Wywołanie zwrotne (callback) - co to jest oraz przykład.
  7. Architektura MVC - co to jest, zalety, wady, przykład zastosowania oraz opis działania środowiska Express.js.
  8. Omówienie współpracy środowiska Node.js z bazami danych SQL, noSQL - jakie są możliwości i ograniczenia.
  9. 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 - Kaskadowe arkusze stylu oraz semantyczny kod HTML
  4. Wykład 4 - Strony na różnych urządzeniach. Metodologia Responsive Web Design (RWD) i Mobile-first. Wstęp do CSS3-Mediaqueries.
  5. Wykład 5 - Wstęp do języka JavaScript (PDF)
  6. Wykład 6 - Język JavaScript, obiektowość (PDF)
  7. Wykład 7 - XML, JSON, AJAX (asynchroniczność) (PDF)
  8. Wykład 8 - Wstęp do środowiska NODE.JS (PDF)
  9. Wykład 9 - Środowisko NODE.JS: obiekty, moduły, wywołania zwrotne (PDF)
  10. Wykład 10 - Dziedziczenie prototypowe. Środowisko Express.js
  11. Wykład 11 - Środowisko Express.js (cd). Bazy danych
  12. Wykład 12 - Node.js i bazy noSQL
  13. Wykład 13 - Node.js i REST API

Ćwiczenia

  1. Ćwiczenia 1 - Wstęp do html i organizacji kodu strony internetowej
  2. Ćwiczenia 2 - Obsługa serwera Appach (spk-www) oraz język HTML
  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 7 - Podstawy obsługi biblioteki jQuery i jQueryUI
  8. Ćwiczenia 8 - Podstawy obsługi biblioteki Bootstrap
  9. Ćwiczenia 9 - Wstęp do środowiska Node.js
  10. Ćwiczenia 10 - Środowisko Express.js
  11. Ćwiczenia 11 - Bazy danych MySQL we współpracy z Node.js
  12. Ćwiczenia 12 - Program wysyłajacy wiadomości email

Projekty zaliczeniowe

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

Tematem projektu jest strona osobista / wizytówka studenta, która zawiera podstawowe informację o osobie, 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łdka menu powinna zawierać dane kontaktowe z aktywnym linkiem umożliwiającym wysłaniem wiadomości email do autora strony. Projekt powinnien korzystać z modułu mediaqueris z CSS3, który pozwoli na dopasowanie się strony do warunków urządzeń na jakich będzie wyświetlana. Jednym z wymagań projektu jest aby strona była zgodna z podejściem projektowania stron RWD (Responsive Web Design).

Termin oddania projektu: 07.11.2014

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: 10.12.2014

Projekt 3 - Strona wizytówkowa / domowa w środowisku NODE.JS

Proszę przygotować projekt polegający na przeniesieniu swojej strony wizytówki do środkowskia Node.js oraz architekturę MVC, oraz przeniesienie wszystkich funkcji z biblioteki (projekt 2) na akcję w modelu danych. Dodatkowo na tym etapie strona powinna zostać wzbogacona o dadatkowe informację np podstrony związane z hobby, ulubionymi książkami, oraz formularzem kontaktowym.

Termin oddania projektu: 29.01.2015