This course is about building a basic understanding of graphical user interfaces and a basic expertise in building such 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.

Open

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

Right from the start we will begin with building ourselves a new web portfolio.

Here is some inspiration: http://www.awwwards.com

• History of the Internet

• How the Web works.

• Basic Introduction to HTML and CSS.

• The CSS Box Model.

1. Install the Atom Code Editor.

2. Start with writing some HTML for your Portfolio.

3. Start with writing some CSS to style your Portfolio.

• Advanced Introduction to HTML and CSS.

• Inline and Block Elements.

• Float Layouts.

Create a list of your projects with titles, images and descriptions.

• 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()

Create a Calculator with jQuery.

• 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

Start working on your personal GUI Catalog.

• FTP, @zhdk, Hostpoint, ...?

• Local Server => iPad, iPhone