ProcodingMobile.png

Werkmodul | Fachmodul
Lecturer: Michael Markert
Credits: 6 ECTS, 3 SWS
Date: Tuesdays, 13:30 until 16:00 h
Venue: Marienstraße 7b, Room 105
First meeting: Tuesday, 22. October 2013

Beschreibung

Wolltest du schon immer eine App für dein iPhone erstellen? Oder hast du eine tolle Idee für ein "Creative Coding Experience" auf deinem iPad? Hast du ein neues Android Tablett und möchtest etwas schickes damit machen? Das ist deine Chance!

Wir werden mit den neuesten cross-platform HTML5 Web-Technologien arbeiten (hauptsächlich mit der ECMA Scriptsprache, besser bekannt als JavaScript; inklusive CSS3), um Apps zu erstellen, die auf deinem internetfähigen mobilen Endgerät laufen.

Themen:

  • siehe englische Auflistung

Dieser Kurs wird je nach Bedarf höchstwahrscheinlich auf Englisch abgehalten.


Hinweis: Wer mit mehreren Endgeräten und Web-Synchronisation arbeiten will, dem wird der gleichzeitige Besuch des Werk-/Fachmoduls von Kollege Gabriel Rausch empfohlen, das auch auf Serverseitige Programmierung eingeht. Aus zeitlichen Gründen können wir das in diesem Kurs nicht tun.

English description

Did you ever wish to design an app for your iPhone? Or do you have an idea for this nice creative coding experience on your iPad? Do you have a new Android Tablet and want to make something cool with it? This is your chance!

We will work with the latest cross-platform HTML5 web technologies (mainly the ECMA scripting language, better known as JavaScript; including CSS3) to create applications that will run on your mobile device.

Topics will be:

  • Creative Coding on mobile devices
  • Introduction to Programming
    • Variables
    • Functions / Methods
    • Objects
    • Events
    • Best practices and Software Design Patterns (Accessors: Getters/Setters, Creating Objects, Modules…)
  • ECMA Script (JavaScript)
  • CSS3 (Design, Animation, Transition…)
  • HTML5 (Multitouch, Geolocation, Device Orientation, Local Storage, Canvas, WebAudio, SVG[[HTML#SVG|Scaleable Vector Graphics]]...)
  • Communication Protocols (JSON[[JSON|JavaScript Object Notation]] Format, AJAXAsynchronous Javascript and XML with XMLHttpRequest), using the API[[wikipedia:Application Programming Interface]] of WebServices (Google, FlickR, Twitter, Yahoo Pipes, Facebook...)
  • JavaScript Libraries (Processing.js, Paper.js, D3.js, jQuery Mobile and many more…)
  • Webapps and Hybrid Apps (that's a webApp that is wrapped in a native application that you can download from an app store)

This course will most likely be held in English

Requirements

  • Your own computer (Laptop) with a proper plain text code editor
  • Your own mobile device that's capable of browsing the internet
  • If you have a computer running Mac OSOperating System – for instance Apple's OS X stands for the tenth version of the OS X 10.7 or newer, you'll get a free copy of Procoding
  • If you have an iPhone, iPad or iPod Touch running iOS 7 or newer, you'll get a free copy of Procoding Mobile
  • Procoding is not required, if you have another system, you'll get a starter package that you can edit with the code editor of your choice.

Registration Procedure

 THE COURSE IS FULL. NO MORE REGISTRATIONS ACCEPTED.

Assignment

  • Regular and active participation
  • Working on the weekly assignments and documenting them in this WikiHaiwaiian for ''fast'' (not an acronym). It is the name for a hypertext system for websites where the user may not only read the content but is also able to change it instantaneously through the browser.
  • Presentation of your work in progress in the course
  • Presentation of your work at the IFD:Showreel
  • Final hand-in (in this WikiHaiwaiian for ''fast'' (not an acronym). It is the name for a hypertext system for websites where the user may not only read the content but is also able to change it instantaneously through the browser.) with short documentation at the end of the term

Student Projects

Please copy this first entry (NameOrPseudonym) and make your own subpages:

  • That's what the WikiHaiwaiian for ''fast'' (not an acronym). It is the name for a hypertext system for websites where the user may not only read the content but is also able to change it instantaneously through the browser.-Code means:
    • The first two brackets create a infernal link in this wiki (this creates a new page).
    • The slash "/" makes the page a subpage of this page
  • /NameOderPseudonym <-- Please copy this link and use your own name (this is a public wiki!).

Own Project

Inactive/incomplete (Please do something!!!)

Btw:
Help shows how to edit in this wiki; How to upload and use images. Please do not upload content that you did not create.

Eligible participants

  • Bachelor Students Media Art & Design
  • Master Students Media Art & Design
  • Master Students MediaArchitecture
  • All others: if you're interested, get in contact with Michael!

Syllabus

Preliminary schedule:

  1. 22.10. First meeting, Intro & Showcase
  2. 29.10. HTML[[HTML|Hypertext Markup Language]], CSS[[CSS|Cascading Style Sheets]] & jQuery Mobile
  3. 05.11. no class due to an excursion!
  4. 12.11. CSS[[CSS|Cascading Style Sheets]], JavaScript (ECMA): Variables & Functions
  5. 19.11. Objects (Classic & Modern Syntax, Prototype, Accessors)
  6. 26.11. Event Handlers (Drawing with a Touch)
  7. 03.12. Networking (XMLHttpRequest=xhr), Yahoo Pipes (XML to JSON[[JSON|JavaScript Object Notation]] Format), Weather-API[[wikipedia:Application Programming Interface]]
  8. 10.12. Geolocation, Reverse Geocoding & FlickR API[[wikipedia:Application Programming Interface]] (xhr)
  9. 17.12. Device Orientation, Device Motion, Compass Heading | Forms & Validation (Local Storage)
  10. 07.01. JS Libs Part I (Processing.js, Paper.js)
  11. 14.01. JS Libs Part II (d3) & SVG[[HTML#SVG|Scaleable Vector Graphics]]
  12. 21.01. JS Libs Part III (Bootstrap, PhoneGap, Titanium) & Offline Cache Manifest
    & 1 topic of your choice (fixing errors & general FAQ, git intro, php crash course)
  13. 28.01. Hybrid Apps Part I iOS SDKSoftware Development Kit (Xcode & Objective-C), Android SDKSoftware Development Kit (Java)
  14. 04.02. Hybrid Apps Part II (Design, Distribution, AppStores, …), Design Showcase (bring your most/least favorite apps), Final Remarks
  15. 31.03. Final Hand In of Course Assignment

Links

  • Procoding - JavaScript IDE[[wikipedia:Integrated development environment]] for iOS & Mac OSOperating System – for instance Apple's OS X stands for the tenth version of the OS X
  • CodeCademy.com - Learn Coding
  • processing.js - JS Canvas Library
  • paper.js - The Swiss Army Knife of Vector Graphics (Canvas)
  • d3.js - Data-driven JS Library (incl SVG[[HTML#SVG|Scaleable Vector Graphics]] support)

Literature

Beginners:

  • Marijn Haverbeke: Die Kunst der JavaScript Programmierung (DE) / Eloquent JavaScript (EN), ISBN 9873898647878, http://marijnhaverbeke.nl
  • Florian Franke: Apps mit HTML5 und CSS3: für iPad, iPhone und Android (DE), ISBN 978-3836218481

Advanced:

D3:


Processing and Processing.js: