Program nauczania

Spotkanie 0: Wprowadzenie podstawowych pojęć i umiejętności związanych z tworzeniem stron internetowych
1. Co to jest strona internetowa?
2. Co to jest przeglądarka?
3. Rola HTML, CSS, JS i jQuery w tworzeniu stron.
4. HTML: Jak ogólnie wygląda tag?
5. CSS: Jak ogólnie wygląda reguła?
6. JavaScript vs. jQuery
7. charakterystyczne różnice w składni.
8. Nabyta umiejętność: Instalacja Chrome (i omijanie trudności stawianych przez Microsoft)
9. Nabyta umiejętność: Podglądanie źródeł strony
10. Nabyta umiejętność: Manipulacja DOM za pomocą Developer Tools
  1. Usuwanie elementów (obchodzenie niektórych paywall'i)
  2. Przesuwanie elementów
  3. Zmienianie właściwości elementów
  4. Pobieranie zasobów (omijanie niektórych zabezpieczeń)
Spotkanie 1: Środowisko developerskie i podstawy kodowania w HTML+CSS oraz korzystanie ze sztucznej inteligencji
1. Środowiska developerskie i jego wybór
2. Nabyta umiejętność: Instalacja środowiska developerskiego Visual Studio Code
3. HTML:
  1. Struktura dokumentu HTML: <html>, <head>, <body>.
  2. Tworzenie prostych elementów: nagłówki, paragrafy.
  3. Nabyta umiejętność: Tworzenie minimalnej struktury dokumentu HTML
4. CSS:
  1. Podstawowe selektory i właściwości
  2. Referowanie do stylu tagiem, identyfikatorem, klasą
  3. Kaskadowość styli i referowanie pozycją
5. Budowa interaktywnych elementów z HTML i CSS:
  1. Tworzenie przycisków i linków.
  2. Interaktywne efekty, takie jak hover.
6. Wsparcie Sztucznej Inteligencji w tworzeniu stron internetowych:
  1. Sztuczna inteligencja na przykładzie LLM
  2. Jak Sztuczne inteligencje wspierają programistów (LLM)
    1. Microsoft Bing
    2. OpenAI GPT
    3. Google Bard
  3. Konstruktywna rozmowa ze sztuczną inteligencją
  4. podstawowa inżynieria promptów
Spotkanie 2: Podstawy kodowania w JavaScript i jQuery
1. JS: Wprowadzenie
  1. Co to jest JS i jak dodawać skrypty do strony.
  2. Proste instrukcje i zmienne.
2. JS: Podstawowe interakcje
  1. Reagowanie na zdarzenia, takie jak kliknięcia.
  2. Zmiana treści na stronie w czasie rzeczywistym.
3. Nabyta umiejętność: Debugowanie strony internetowej
  1. Wpisy w konsoli narzędzi developerskich
  2. Wyzwalanie komunikatu modalnego
4. jQuery: Wprowadzenie
  1. Co to jest jQuery i jak go dołączyć do strony.
  2. Nabyta umiejętność: Dołączanie do strony biblioteki jQuery
  3. Podstawowe selektory
  4. Podstawy manipulacji elementami.
5. jQuery: Animacje i efekty:
  1. Przejścia, ukrywanie/pokazywanie elementów.
  2. Animacje bazujące na CSS.
6. HTML: Praca z formularzami:
  1. Tworzenie formularzy w HTML.
  2. Zbieranie danych z formularza za pomocą JS.
7. CSS: Responsive Web Design:
  1. Co to jest RWD i dlaczego jest ważne
  2. Podstawy media queries w CSS
8. Podstawy projektowanie produktów informatycznych:
  1. Cykl życia produktu infomatycznego
  2. Pomysł, Koncepcja, Projekt, Specyfikacja
  3. Gry to produkty informatyczne
  4. Rodzaje gier zręcznościowych
  5. Przykładowe gry zręcznościowe (odpowiedniki 8-bitowych)
9. Praca domowa: Rozpoczęcie Projektu graduacyjnego
10. etap 0
  1. Wymyśl pomysł(y) na prostą grę i weź pod uwagę ile masz siły, umiejętności i czasu
  2. Przygotuj dokumentację prostej gry wykorzystując zdobyte umiejętności.
Spotkanie 3: Programowanie gier zręcznościowych
1. Pojęcia związane z grami zręcznościowymi:
  1. Duszek (sprite)
  2. Kolizje i ich wykrywanie
  3. Pętle i opóźnienia
  4. Ścieżki i podstawowe algorytmy ich wyznaczania
2. ...
3. Ćwiczenia
  1. Prezentacje pomysłów
  2. Ewaluacja i szacowanie wybranego pomysłu
  3. ...
Spotkanie 4: HTML i CSS
Zaawansowane techniki:
1. Zaawansowane selektory CSS i techniki layoutu
2. Tworzenie responsywnych stron przy użyciu media queries
3. Praktyczne zastosowania HTML5 w grach
Spotkanie 5: JavaScript
Zaawansowane koncepty:
1. Funkcje, obiekty i tablice w JavaScript
2. Asynchroniczność i obietnice (Promises)
3. Tworzenie i obsługa formularzy
Spotkanie 6: jQuery
Zaawansowane manipulacje i efekty:
1. Zaawansowane selektory i metody jQuery
2. Tworzenie efektów animacji i interaktywności
3. Integracja jQuery z czystym JavaScript
Spotkanie 7: Wprowadzenie do projektowania gier
1. Podstawy projektowania i tworzenia gier
2. Tworzenie koncepcji i specyfikacji gry
3. Omówienie różnych rodzajów gier zręcznościowych
Spotkanie 8: Projektowanie grafiki i dźwięku w grach
1. Podstawy projektowania grafiki dla gier (sprites, tła)
2. Wprowadzenie do dźwięku w grach
3. Narzędzia i zasoby do tworzenia grafik i dźwięków
Spotkanie 9: JavaScript i jQuery
Integracja w grach:
1. Skrypty i mechanika gry w JavaScript
2. Użycie jQuery w kontekście gier
3. Debugowanie i optymalizacja kodu gry
Spotkanie 10: Testowanie i optymalizacja gier
1. Techniki testowania gier
2. Optymalizacja wydajności i rozwiązywanie problemów
3. Zbieranie feedbacku i iteracja projektu
Spotkanie 11: Prezentacja postępów i sesja mentorowania
1. Prezentacja postępów w projektach
2. Sesja Q&A z mentorami
3. Planowanie końcowych etapów projektu
Spotkanie 12: Przygotowanie do prezentacji końcowej
1. Finiszowanie projektów
2. Przygotowanie prezentacji i materiałów demonstracyjnych
3. Sesje próbne prezentacji
Spotkanie 13: Prace nad końcowymi poprawkami
1. Dalsze prace nad projektami
2. Sesje konsultacyjne i wsparcie techniczne
3. Przygotowanie do finalnej prezentacji
Spotkanie 14: Finał - DEMO gier PROGRAMERSÓW - retrospektywa
Finałowe spotkanie ma na celu nie tylko ocenę umiejętności uczestników, ale również umocnienie ich pewności siebie i umiejętności prezentacyjnych. To okazja do świętowania ich osiągnięć i zachęcenie do dalszej nauki w przyszłości. Utrzymujemy pozytywną i motywującą atmosferę. Podkreślamy, że każdy projekt jest ważny i wartościowy, bez względu na poziom skomplikowania. Zachęcamy uczestników do interaktywności i zadawania pytań.
1. Prezentacja gier uczestników (DEMO)
  Każdy uczestnik ma do 10 minut na prezentację swojej gry.
  Na widocznym dla wszystkich ekranie prezentuje się grę w przeglądarce uruchomionej na laptopie.
  DEMO powinna zawierać:
  1. krótkie wprowadzenie do gry
  2. demonstrację działania (GAMEPLAY)
  3. omówienie kluczowych funkcji i fragmentów kodu
  4. omówienie procesu tworzenia
  5. omówienie napotkanych wyzwań
  6. omówienie planów na przyszłość
2. Omawiamy DEMA i uczymy się od siebie nawzajem
  1. Uczestnicy oraz instruktorzy zadają pytania dotyczące gier, na które odpowiadają ich autorzy
  2. Instruktorzy i uczestnicy wypowiadają się o kreatywności, funkcjonalności oraz estetyce gier.
  3. Rozmowa o tym, co poszło dobrze, a co mogło być lepsze.
3. Podsumowanie szkolenia
  1. nowych umiejętności i wiedzy, którą uczestnicy nabyli podczas całego szkolenia
  2. postępu w umiejętnościach programistycznych
  3. możliwości dalszej nauki i rozwoju w obszarze programowania