Web Coding: Intro to Web Development and Game Prototyping

Andrea Klaura
Institut für Kunst und Technologie, Coding Lab
2024W, Vorlesung und Übungen (VU), 2.0 ECTS, 2.0 SemStd., LV-Nr. S04916

Beschreibung

This course will introduce you to modern web development basics in a playful approach by (re)creating simple web-based game prototypes. Throughout this course you will develop your own skills to develop websites and simple games that can be run in (almost) any web browser and be integrated into (almost) any web page.

Course Webpage: https://tantemalkah.at/web-coding

(Note: This course was formerly known as "Artful Coding 1", and is now rephrased into "Web Coding: Intro to Web Development and Game Prototyping" to reflect more specifically the Web and the Browser as coding environments.)

Learning goals:

After completion of this course you will be able to

* create a basic scaffold for dynamic web pages
* grasp the relationships between markup (HTML), styling (CSS) and dynamic scripting (Javascript), and
* know how different kinds of codes, styles and markup can be used to manipulate a web page and to provide interactivity to the visitor
* adapt and extend exisiting code, in order to factor in your own tweaks
* implement simple web-based game prototypes with interactive UI elements

Course outline:

The course will get you up to speed with the basics of web development, based on HTML5, CSS and modern Javascript (ES6>). While the first few sessions aim at getting everyone to a point where you have basic coding skills and are able to solve our entry level challenge. After that we will use a few session to introduce more advanced concepts in modern Javascript. In the sessions from December onward, we will create two simple web based game prototypes: a typing game, and a memory game.

At the end of the course you will be tasked with a final project, the contents of which will be chosen throughout the course. The minimal version of a final project is an individual adaptation of one of the two game prototypes implemented before in the course (e.g. build your own experimental extension, quirky and whacky mechanics, reflective/engaging/provocative content, ...).

As a teaser, this course also readies you to attend the web-based game prototyping workshops in summer semester at the Coding Lab. There you can learn to create a simple physics-based jumping block game prototype, or to facilitate a professional and mobile ready HTML5 game engine and follow a more open approach to creating your very own kind of web based game from scratch.

Requirements:

There is no formal requirement to attend. But you should be familiar to some extent with basic web design and/or programming. If you have already completed one or more of the following courses at the Angewandte you are all set:

* Web Design 1 or 2
* Creative Coding 1 or 2
* Graphics Programming 1 or 2
* Introduction to Programming
* Grundlagen des Programmierens

If you have not visited any of these or similar courses you still can attend and get up to speed with additional materials pointed out in the first session. It just means, that you will have an increased and intense workload in the first month of the course. In case of doubt please send an e-mail to andrea.klaura@uni-ak.ac.at , then we can discuss if it makes sense for you to participate.

The course will employ a flipped classroom setting. So you are also required to watch some lecture content prior most of our sessions, in order to fully profit from our workshop style in-person session.

ECTS breakdown:

2 ECTS = 50 hours

* 21 hours: scheduled course sessions
* 14 hours: flipped class room prep
* 15 hours: exercises

Prüfungsmodalitäten

Grading will be based on:

* 20%: Attendance & active participation
* 40%: Entry level challenge
* 40%: Coding exercises

Anmerkungen

BYOD policy:

Bring your notebook computer (except for the introductory session), to get most out of the course, as the course sessions will facilitate hands-on coding exercises. You can participate in the sessions without one, but you will have to redo most of the in-class activities on your own to get the same learning effect and to be able to solve the course challenges.

Schlagwörter

coding, programming, web development, HTML, CSS, JavaScript, games, computational art, creative coding

Termine

07. Oktober 2024, 16:00–18:00 Seminarraum 21 , „Intro & evaluation of expectations & tooling“ (Vorbesprechung)
14. Oktober 2024, 16:30–18:30 Seminarraum 21 , „Basics Refresher HTML & CSS“
21. Oktober 2024, 16:00–18:00 Seminarraum 21 , „Basics Refresher JavaScript“
28. Oktober 2024, 16:00–18:00 Seminarraum 21 , „Basics Refresher JavaScript ctd.“
04. November 2024, 16:00–18:00 Seminarraum 21 , „Entry Level Challenge“
11. November 2024, 16:00–18:00 Seminarraum 21 , „Advanced JavaScript 1/4 - ECMAScript history, functions, callbacks and promises“
18. November 2024, 16:00–18:00 Seminarraum 21 , „Advanced JavaScript 2/4 - Loops“
25. November 2024, 16:00–18:00 Seminarraum 21 , „Advanced JavaScript 3/4 - Objects & Classes“
02. Dezember 2024, 16:00–18:00 Seminarraum 21 , „Advanced JavaScript 4/4 - Sets, maps & more“
09. Dezember 2024, 16:00–18:00 Seminarraum 21 , „Prototype 1: Typing Game“
16. Dezember 2024, 16:00–18:00 Seminarraum 21 , „Prototype 1: Typing Game“
13. Jänner 2025, 16:00–18:00 Seminarraum 21 , „Prototype 2: Memory Game Part 1“
20. Jänner 2025, 16:00–18:00 Seminarraum 24 , „Prototype 2: Memory Game Part 2, state & storage“
27. Jänner 2025, 16:00–18:00 Seminarraum 24 , „Project discussion & closing session“
03. Februar 2025, 16:00–18:00 Seminarraum 24 , „buffer / gaming session“

LV-Anmeldung

Von 01. September 2024, 00:00 bis 07. Oktober 2024, 23:42
Per Online Anmeldung

TransArts - Transdisziplinäre Kunst (Bachelor): Künstlerische und kunsttechnologische Grundlagen: Künstlerische und kunsttechnologische Grundlagen 180/002.01

Cross-Disciplinary Strategies (Master): Studienfelder 1-3: Studienfeld 2: Wissenschaft und Technologie 569/020.02

Design: Design und narrative Medien (1. Studienabschnitt): Technische Grundlagen: Technologie, Coding und Programmierung 576/104.25

Design: Design und narrative Medien (2. Studienabschnitt): Technische Grundlagen: Technologie, Coding und Programmierung 576/204.25

Design: Kommunikationsdesign (2. Studienabschnitt): Technische Grundlagen: Design für digitale Medien 577/204.12

Industrial Design (1. Studienabschnitt): Transfertechniken: Experimentallabor 580/102.20

Bildende Kunst (2. Studienabschnitt): Technischer Kontext künstlerischer Praxis: Werkstätten 605/203.10

Bildende Kunst (2. Studienabschnitt): Technischer Kontext künstlerischer Praxis: frei wählbar aus technischer Kontext künstlerischer Praxis 605/203.80

Design: Angewandte Fotografie und zeitbasierte Medien (2. Studienabschnitt): Technische Grundlagen: Angewandte Fotografie - Präsentationsformen 626/204.15

Cross-Disciplinary Strategies (Bachelor): Wissenschaft und Technologie: Vertiefungs-/Anwendungsphase 700/002.20

Mitbelegung: nicht möglich

Besuch einzelner Lehrveranstaltungen: nicht möglich