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.

Open

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

• History of the Internet

• How the Web works

• Install the Atom Code Editor

• Basic Introduction to HTML and CSS

Prepare a simple design in Photoshop or Sketch for an App, Website, Portoflio or a crazy Science-Fiction UI.

• Box & Font Formatting

• The CSS Box Model

Begin building some elements of your design in HTML and CSS.

• Inline and Block Elements

• Float Layouts

Improve your design and use more advanced techniques to improve the layout.

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

Start working on your personal GUI Catalog.

• 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

Work on your personal GUI Catalog.

• FTP, @zhdk, Hostpoint, ...

• Local Server => iPad, iPhone

• Frontend Frameworks

You'll have to submit your GUI catalog as part of the final grading process.

Please but the HTML, CSS and JS file(s) on the filer by the 12th of June.