This course is about building a fundamental expertise in building graphical user interfaces with web technologies.

In several inputs, we will look into the history of the Internet, basic concepts, languages and frameworks for building web interfaces.

http://thenextweb.com/media/2012/06/02/jayse-hansen-on-creating-tools-the-avengers-use-to-fight-evil-touch-interfaces-and-project-glass/

Inputs

1. The Web (6.4 - 09.00-12.00 - ???)

• History of the Internet
• How the Web works.
• Basic Introduction to HTML and CSS.

Homework

1. Install the Atom Code Editor.
2. Prepare a simple design in Photoshop for an App, Website, Portoflio or a crazy Science-Fiction UI.

2. HTML & CSS (12.4 - 09.00-12.00 - ???)

• The CSS Box Model.
• Inline and Block Elements.
• Float Layouts.

Homework

3. ???

• Advanced Introduction to HTML and CSS.

3. Basic Logic (20.4 - 09.00-12.00 - ???)

• Basic Introduction to JavaScript.
  • Differences to Processing (Compiled, Interpreted)
  • Variables (var (Number, Array, ...) vs. int, float, ...)
  • Similar Conditionals & Loops
  • Functions
• Working with jQuery.
  • .$()
  • .click()
  • .text()
  • .css()

Exercise

Create a Calculator with jQuery.

4. Graphical User Interface Elements (12.5 - 09.00-17.00 - ???)

• Basic Elements: Button, Text Field, Checkbox, Switch
• Advanced Elements: Progress Bar, Drop Down, Slider, Radio Group
• Navigational Elements: Toolbar, Tab Navigation, Accordion
• Basic Layouts: Content Card, Dialog, Formular
• Special Elements: Window, Tooltip

Exercise

Start working on your personal GUI Catalog.

5. Deployment & Testing (19.5 - 09.00-12.00 - ???)

• FTP, @zhdk, Hostpoint, ...?
• Local Server => iPad, iPhone

6. Future (26.5 - 09.00-12.00 - ???)