Plan studiów „Aplikacje Internetowe – Front-End Development” obejmuje około 300 godzin zajęć, z przewagą zajęć praktycznych i dotyczy następujących zagadnień:
Semestr 1
- Podstawy programowania HTML5/CSS3 – wykład/pracownia: 16h/30h
- Podstawy programowania JavaScript – wykład/pracownia: 16h/30h
- Tworzenie szablonów HTML na podstawie projektów graficznych – wykład/pracownia: 4h/4h
- Webdesign – Wprowadzenie – wykład/pracownia: 8h/12h
- Projektowanie User Experience – wykład/pracownia: 8h/8h
- Narzędzia Front-End Developera 1: pracownia: 6h
Semestr 2
- Zaawansowane techniki programowania HTML5/CSS3 – wykład/pracownia: 16h/30h
- Język JavaScript w praktyce – wykład/pracownia: 16h/30h
- Zaawansowane frameworki JavaScript: pracownia: 12h
- Web Design – Zagadnienia zaawansowane – pracownia: 16h
- Narzędzia Front-End Developera 2 – pracownia: 9h
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.
Tworzenie szablonów HTML na podstawie projektów graficznych
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.
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.
Narzędzia Front-End Developera 1
Narzędzia front-end, wykorzystywane przy tworzeniu współczesnych stron internetowych, stały się wymogiem w pracy programisty. Cel celem jest pokazanie ich wykorzystania jako ułatwiających pracę oraz pomagających w optymalizacji strony i jej działania.
Podczas przedmiotu zostaną omówione:
- Git – System kontroli wersji;
- Node.js – środowisko dzięki któremu możemy uruchamiać nasze aplikacje JavaScriptowe / npm – manager pakietów dla środowiska Node.js
- Gulp należy do rozbudowanych narzędzi front-end, które wykorzystywane jest do automatyzacji pracy;
- SAAS – Sass to narzędzie, będące rozszerzeniem języka CSS; Automatyczne przeładowanie przeglądarki; Automatyzacja pracy;
II Semestr
Zaawansowane techniki HTML5/CSS3 – Responsive Web Design
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. Wytyczne w zakresie CSS3 wraz z podstawowymi animacjami i technikami CSS3. Walidowanie stron oraz dodawanie bardziej zaawansowanych funkcji. Zapoznanie Słuchaczy z zaawansowanymi technikami tworzenia stron z wykorzystaniem paradygmatu Responsive Web Design. Treści dotyczące RWD znajdują się obecnie w przedmiotach traktujących o HTML5/CSS, JavaScrip oraz
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”
JavaScript w praktyce
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.
Zaawansowane frameworki JavaScript
Rozszerzenie wiedzy o języku JavaScript i zapoznanie Słuchaczy z wiedzą odnośnie potencjalnych frameworków. Framework to szkielet, który pozwala na budowę aplikacji oraz dostarcza dodatkowe funkcjonalności. Dzięki nim stworzenie aplikacji bogatej w wiele różnego rodzajów funkcjonalności staje się dużo łatwiejsze.
Frameworki są też najlepszą bazą do szybkiego tworzenia projektów poglądowych i prototypów aplikacji i są świetnymi narzędziami dla startup’owców czy uczestników hackathonów.
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.
Narzędzia Front-End Developera 2
Narzędzia front-end, wykorzystywane przy tworzeniu współczesnych stron internetowych, stały się wymogiem w pracy programisty. Cel celem jest pokazanie ich wykorzystania jako ułatwiających pracę oraz pomagających w optymalizacji strony i jej działania.
Podczas przedmiotu zostaną omówione:
- JavaScript API / Postman – Postman pozwala wygodniej pracować z API;
- VueJS – „framework od interfejsów”; Sposób na progresywne podeście budowania interfejsów użytkownika;
- Google fonts / Font awesome – Ikony dostępne jako czcionka.