Artful Coding: web-based games development 1

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

Beschreibung

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

Artful coding can be many things. Besides the creative mastery of the tools of the trade, it often also means a playful approach to developing computer programmes. More specifically it can also mean to create playful digital content by applying a (playful) approach to computer programming. In this course we will approach this kind of coding and you will learn the basic skills to develop simple games that can be run in (almost) any web browser and be integrated into (almost) any web page.

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, to build 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 you own experimental extension, quirky and whacky mechanics, reflective/engaging/provocative content, ...).

As a teaser, this course also readies you to attend the Artful Coding II course in summer semester, which will continue with a simple physics-based jumping block game prototype. We then will switch to a professional and mobile ready HTML5 game engine and facilitate 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
* Physical Computing
* Grundlagen des Programmierens

If you have not visited any of these or similar courses and are not sure, and if you did not learn those skills in some other settings on your own, 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.

ECTS breakdown:

2 ECTS = 50 hours

* 21 hours: scheduled teaching sessions
* 19 hours: exercises alongside the teaching sessions
* 10 hours: final project

Prüfungsmodalitäten

Grading will be based on:

* 20%: Attendance & active participation
* 40%: Coding exercises
* 40%: Final mini project

Anmerkungen

BYOD policy:

Please bring your own device (ideally a laptop computer), to get most out of the course, as part of the course sessions will facilitate hands-on exercises in coding. In case you do not have a laptop or cannot bring one, it is possible to team up with another person with laptop. You can also send a mail to andrea.klaura@uni-ak.ac.at and we might find some spare device that you can use for the course.

Schlagwörter

coding, programming, web development, HTML, CSS, Javascript, games, digital art, computational art, media art, creative coding, Programmieren, Spiele, Webentwicklung, Computerkunst, Medienkunst, Digitale Kunst

Termine

05. Oktober 2022, 17:00–18:30 Seminarraum 21 (Vorbesprechung)
12. Oktober 2022, 17:00–18:30 Seminarraum 21 , „Basics Refresher HTML & CSS“
19. Oktober 2022, 17:00–18:30 Seminarraum 21 , „Basics Refresher Javascript“
25. Oktober 2022, 17:00–18:30 Seminarraum 21 , „Basics Refresher Javascript“
31. Oktober 2022, 17:00–18:30 Seminarraum 21 , „Entry Level Challenge“
09. November 2022, 17:00–18:30 Besprechungsraum 13 , „Advanced Javascript“
16. November 2022, 17:00–18:30 Besprechungsraum 13 , „Advanced Javascript“
23. November 2022, 17:00–18:30 Besprechungsraum 13 , „Advanced Javascript“
30. November 2022, 17:00–18:30 Besprechungsraum 13 , „Advanced Javascript“
07. Dezember 2022, 17:00–18:30 Besprechungsraum 13 , „Prototype 1: Typing Game“
14. Dezember 2022, 17:00–18:30 Besprechungsraum 13 , „Prototype 1: Typing Game“
11. Jänner 2023, 17:00–18:30 Besprechungsraum 13 , „Prototype 2: Memory Game“
18. Jänner 2023, 17:00–18:30 Seminarraum 27 , „Prototype 2: Memory Game“
25. Jänner 2023, 17:00–18:30 Seminarraum 27 , „Project discussion & closing session“
01. Februar 2023, 17:00–18:30 Seminarraum 27 , „(buffer session)“

LV-Anmeldung

Von 01. September 2022, 05:23 bis 05. Oktober 2022, 16:42
Per Online Anmeldung

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

Design: Grafik Design (2. Studienabschnitt): Technische Grundlagen: Human Computer Interaction 576/204.13

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

Mitbelegung: nicht möglich

Besuch einzelner Lehrveranstaltungen: nicht möglich