This course is about building a basic understanding of graphical user interfaces and a basic fundamental expertise in building such graphical user interfaces with web technologies.
...
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
...
, 4.K14)
- History of the Internet
- How the Web works.
- Install the Atom Code Editor
- Basic Introduction to HTML and CSS
Exercise & Homework
Prepare a simple design in Photoshop or Sketch for an App, Website, Portoflio or a crazy Science-Fiction UI.
2. HTML & CSS (12.4, 09.00-12.00, 4.K14)
- Box & Font Formatting
- The CSS Box Model.
Exercises
- Install the Atom Code Editor.
- Start with writing some HTML for your Portfolio.
- Start with writing some CSS to style your Portfolio.
...
Exercise & Homework
Begin building some elements of your design in HTML and CSS.
3. Advanced Layout Techniques (20.4, 09.00-12.00
...
, 4.K14)
- Inline and Block Elements.
- Float Layouts.
Exercise
...
Create a list of your projects with titles, images and descriptions.
...
& Homework
Improve your design and use more advanced techniques to improve the layout.
4. JavaScript (12.5, 09.00-
...
17.00
...
, 4.K14)
- 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.
...
& Homework
Start working on your personal GUI Catalog.
5. Graphical User Interface Elements (
...
19.5
...
, 09.00-
...
12.00
...
, 4.K14)
- 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 & Homework
Start working Work on your personal GUI Catalog.
...
6. Deployment &
...
Future (
...
24.5, 13.30-
...
17.00
...
, 4.E08)
- FTP, @zhdk, Hostpoint, ...?
- Local Server => iPad, iPhone
...
- Frontend Frameworks
Final work
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.