Plan studiów

Plan studiów „Aplikacje Internetowe – Front-End Development” obejmuje około 250 godzin zajęć, z przewagą zajęć praktycznych i dotyczy następujących zagadnień:

Semestr 1

  1. Podstawy programowania HTML5/CSS3 – wykład/pracownia: 16h/20h
  2. Podstawy programowania JavaScript – wykład/pracownia: 16h/20h
  3. Obsługa programów graficznych na potrzeby przygotowania szablonów HTML – wykład/pracownia: 10h/15h
  4. Webdesign – Wprowadzenie – wykład/pracownia: 8h/12h
  5. Projektowanie User Experience – wykład/pracownia: 8h/8h
  6. Zarządzanie projektami i analiza wymagań biznesowych – wykład/pracownia: 8h/8h

Semestr 2

  1. Zaawansowane techniki programowania HTML5/CSS3 – wykład/pracownia: 16h/20h
  2. Zaawansowane techniki programowania JavaScript – wykład/pracownia: 16h/20h
  3. Responsive Web Design – RWD – wykład/pracownia: 8h/8h
  4. Fotoedycja i kreatywna praca w Photoshopie – wykład/pracownia: 8h/8h
  5. Web Design – Zagadnienia zaawansowane – pracownia: 18h
  6. Narzędzia Front-End Developera – pracownia: 8h

Krótka charakterystyka wybranych przedmiotów

I Semestr

Podstawy programowania HTML5/CSS3

Zapoznanie się ze składnią języków HTML5 i CSS3. Student pozna genezę i ścieżkę powstania języka HTML5 jak i CSS3. Słuchacz pozna podstawy kodowania w HTML5. Student dowie się jaki wpływ ma postrzeganie i renderowanie strony mają tagi oraz w jaki sposób je wykorzystywać aby było to zgodne ze sztuką i wytycznymi standardu wg organizacji i walidatorów W3C. Dodatkowo równolegle do języka HTML5 student zapozna się ze składnią języka CSS3, pozna jego rozbudowane możliwości w stosunku do CSS2 oraz nauczy się je wykorzystywać w praktyce przy ścisłej zależności z kodem HTML5.

Podstawy programowania JavaScript

Zapoznanie się z podstawami programowania w JavaScript. Poczynając od wyjaśnienia co to jest język JavaScript, jakie są jego możliwości i do czego może nam się przydać przy tworzeniu dynamicznych stron WWW.

Wyjaśnienie składni języka, dostępnych typów danych oraz operatorów umożliwiających działania na tych danych. Nauka sterowania wykonaniem kodu poprzez wprowadzanie instrukcji warunkowych oraz pętli. Wprowadzenie w dobre praktyki kodowania (dbałość o czytelność kodu, unikanie powielania kodu czy wykorzystywania zmiennych globalnych, itp) połączone z nauką tworzenia funkcji i obiektów. Zapoznanie studentów z system zdarzeń elementów HTMLa oprogramowywanych  w JavaScript w praktycznych przykładach.  Zapoznanie się z predefiniowanymi obiektami wraz z dostępnymi metodami ze wskazaniem na możliwości ich wykorzystania.

Obsługa programów graficznych na potrzeby przygotowania szablonów HTML

Przedmiot poprowadzi studentów przez drogę jaką powinien przejść projekt od graficznej wizualizacji strony do postaci zakodowanego szablonu. Dowiedzą się jak efektywnie wykorzystać do tego celu programy graficzne na przykładzie Adobe Photoshop.

Studenci zapoznają się z najpopularniejszymi metodami „cięcia”, w tym z grid’em. Odkryją zalety i wady wykorzystania znanych framework’ów w zakresie cięcia projektów graficznych. Uczestnicy zajęć poznają również zalety plików sprite oraz metody ich tworzenia. Dowiedzą się jak należy zapisać optymalne grafiki do Internetu, jakie są metody kompresji, a także jakiego rodzaju grafiki należy stosować w jakich sytuacjach. Poznają metody tworzenia grafiki aby zapewnić obsługę wyświetlaczy „Retina display”.

Webdesign – Wprowadzenie

Nauczenie kreatywnych, plastycznych sposobów budowania graficznego obrazu z udziałem litery i tekstu. Przyswojenie zasad komponowania oraz właściwego doboru środków plastycznego wyrazu w liternictwie i typografii. Nauczanie logicznej analizy treści.

Materiał omawiany na przedmiocie, zawiera niezbędne informacje potrzebne do rozpoczęcia samodzielnej pracy z najpopularniejszym programem graficznym wykorzystywanym w pracy w projektach WWW. Omawiana tematyka cały czas ilustrowana będzie konkretnymi przykładami, a liczne zadania praktycznie, mają na celu skuteczne opanowanie wiedzy zdobytej na wykładach.

Wprowadzenie do testowania i walidacji

Celem przedmiotu jest wstępne przybliżenie słuchaczom ogólnej idei i definicji testowania oprogramowania. Celem będzie również nabycie umiejętności analizowania poszczególnych części aplikacji/strony internetowej z perspektywy użytkownika i tworzenia na tej podstawie testów.

Zastosowanie testów przy tworzeniu oprogramowania w różnych technologiach (mobile, web, desktop), techniki testowania (testy czarno-, białoskrzynkowe, wartości brzegowe, testy dymne), rodzaje testów (jednostkowe [modułowe], integracyjne, funkcjonalne, systemowe, akceptacyjne, wydajnościowe, bezpieczeństwa, kompatybilności, regresyjne). Analiza wyniku testów, walidatory HTML, stosowanie emulatorów (web/mobile), narzędzi typu firebug, w celu analizowania aktualnych postępów swojej pracy i wyszukiwania ewentualnych błędów.

Project Management i komunikacja

Zapoznanie z bieżącymi trendami w zarządzaniu projektami pod kątem branży IT. Od , etapu analizy funkcjonalnej , rozpoznania potencjalnych ryzyk i zagrożeń, realizacji i zakończenia projektu. Zapoznanie ze zwinnymi metodykami prowadzenia projektu  na przykładzie SCRUM.

Przegląd i porównanie tradycyjnych metod zarządzania projektami: PMI, PRINCE2, IPMA.  Omówienie metodyki zarządzania projektem na podstawie metodologii IPMA, zapoznanie z podstawowymi narzędziami zarządzania projektami. Wprowadzenie w zwinne metody prowadzenia projektów. Omówienia metodyki SCRUM.

II Semestr

Zaawansowane techniki programowania HTML5/CSS3

Słuchacz zapozna się z bardziej zaawansowanymi technikami kodowania w HTML5 jak i CSS3. Będzie to rozszerzenie podstawowej wiedzy o językach HTML5 i CSS3 o bardziej rozbudowane składnie, metody i potencjalne możliwości drzemiące w standardach W3C pod kątem wykorzystania ich możliwości w miarę rozwoju i adaptacji standardów W3C przez kolejne przeglądarki WWW.

Implementacja kodu obsługującego różne rodzaje przeglądarek – cross browsing. Wytyczna w zakresie CSS3 wraz z podstawowymi animacjami i technikami CSS3. Walidowanie stron oraz dodawanie bardziej zaawansowanych animacji i styli. Rozszerzanie funkcjonalności strony o funkcje takie jak wideo, a także pozna pojęcie responsywności w kontekście wyświetlania jednej strony pod różnymi urządzeniami mobilnymi jak i komputerami stacjonarnymi.
Frameworki dla języka HTML5 i CSS3 a także na zasady ich wykorzystania na potrzeby swoich wdrażanych projektów.
Wprowadzenie do tematu SEO a następnie rozbudowanie wiedzy oraz technik do tworzenia przyjaznych stron dla przeglądarek www jak i mechanizmów indeksujących strony dla wyszukiwarek internetowych.

Zaawansowane techniki programowania JavaScript

Rozszerzenie wiedzy o języku JavaScript o nowe pojęcia i metody obiektowego programowania, a także zapoznanie Słuchaczy z wiedzą odnośnie potencjalnych frameworków.

Frameworki JavaScript na przykładzie JQuery. Nauka efektywnego wykorzystaniu na własnych stronach gotowych rozwiązań i wtyczek dostarczonych przez JQuery m.in. animacji, walidacji formularzy, manipulacji drzewem DOM. Wprowadzenie technologii AJAX poprzez wyjaśnienie mechanizmu działania wraz z praktycznymi przykładami wykorzystania. Przykłady animacji i renderowania obrazów z wykorzystaniem elementu Canvas ze standardu HTML5. Wprowadzenie w podstawowe  kwestie bezpieczeństwa i optymalizacji działania skryptów na stronach.

Responsive Web Design – RWD

Zapoznanie Słuchaczy z zaawansowanymi technikami tworzenia stron z wykorzystaniem paradygmatu Responsive Web Design.

Zasady kodowania z wykorzystaniem HTML5 i CSS3, preprocesorów CSS, a także tzw. media queries (jak i kiedy należy ich używać). Słuchacze zapoznają się z podejściem „mobile first” oraz z popularnymi framework’ami ułatwiającymi tworzenie w RWD.
Dowiedzą się jak wykorzystać język JavaScirpt w RWD, jak go stosować zgodnie z podejściem „Unobtrusive JavaScript”. Poznają podejście „wykrywania właściwości” (feature detection) oraz narzędzia ułatwiające jego stosowanie. Poznają metody tworzenia kodu aby zapewnić obsługę wyświetlaczy „Retina display”.

Techniki testowania i walidacji

Słuchacz pozna techniki przeprowadzania testów manualnych i automatycznych w różnych fazach cyklu życia oprogramowania, tj. zasady, analizę kompatybilności urządzeń i przeglądarek oraz techniki przeprowadzania testów przy walidacji oprogramowania.

Przedstawione zostaną przykładowe testy automatyczne wraz z uzasadnieniem (Selenium), co pozwoli na praktyczne pisanie prostych scenariuszy testowych przy użyciu Selenium IDE, Selenium webdriver z podstawami języka programowania Java (ćwiczenia/laboratoria). Słuchacze nauczą się zasad tworzenia scenariuszy testowych wraz z przykładami. Będą w stanie poprawnie raportować znalezione błędy (wraz z zasadami tworzenia dokumentacji testowej). Słuchacze poznają przykładowe środowiska do raportowania i monitorowania błędów z jakimi może spotkać się programista w toku swojej kariery zawodowej (Mantis, Redmine, TFS). Nauka opierać się będzie na umiejętności priorytetyzowania błędów, opisywania kroków reprodukcji, zamieszczania podstawowych informacji o środowisku testowym, warunkach brzegowych i załącznikach graficznych (z uwzględnieniem zajęć ćwiczeniowych /laboratoryjnych).

Projektowanie User Experience

Słuchacz pozna podstawy związane z tzw. „doświadczeniem użytkownika” (ang. UX – User Experience) jakie towarzyszą mu podczas korzystania z serwisu internetowego. Wiedza ta ma pomóc mu zrozumieć proces projektowania interfejsów aplikacji internetowych pod kątem wygody korzystania przez użytkownika.

Uczestnik dowie się jakie techniki i narzędzia pozwalają na stworzenie stron o pozytywnym odbiorze, jakie czynniki wpływają na atrakcyjność projektowanych interfejsów i czym należy się kierować, aby treści dotarły do najszerszego grona odbiorców. W czasie zajęć nauczy się w jaki sposób i dlaczego warto analizować grupę docelową oraz jak wykorzystać zebrane wnioski w procesie projektowania. Cała przekazywana wiedza oparta będzie o aktualne standardy, trendy i praktyczne przykłady istniejących interfejsów.

Fotoedycja i kreatywna praca w Photoshopie

Krótkie omówienie ekranu. Selekcja podstawą do fotomontażu, zmiany kolorystyki fragmentu obrazka. Rodzaje selekcji. Omówienie palet. Szparowanie. Warstwy – praca z warstwami. Zapis – sposoby zapisu jak i rodzaje plików.

Photoshop to główne narzędzie webmasterów do tworzenia wyglądów i układów stron internetowych. W ostatnich latach wprowadzono szereg narzędzi ułatwiających pracę webdesignerom. Na zajęciach omówione zostaną techniki i sposoby tworzenia elementów graficznych do stron www.

Webdesign – Zagadnienia zaawansowane

Wykształcenie umiejętności łączenia komunikatów słownych z obrazem. Nauczanie dobierania kroju pisma  do poszczególnych zadań. Wykonanie kompozycji literniczych o zróżnicowanej ekspresji graficznej.

Celem kształcenia jest wprowadzenie słuchaczy w umiejętności w zakresie posługiwania się współczesnym warsztatem grafika dla osiągnięcia projektów przeznaczonych głównie dla zastosowań publikacji w sieci Internet.