Welcome!
LearnUXD brings you this course on how to add advanced functionality to interactive projects using JavaScript and principles of interaction design (IXD).
By the end of this course students will be able to:
- Explain fundamental programming concepts such as variables, control logic, loops, functions, objects, and document object model manipulation, and apply them in simple, real-world scenarios. (Met by Exercises and Exams)
- Explain principles of usable interactivity and apply these principles to develop, critique, and execute effective interactions. (Mey by Exams and Projects)
- Plan interactions—using contemporary modeling methods and critical thinking—that account for the variable complexity of real-world scenarios. (Met by Projects)
- Integrate current front-end technologies and techniques with fluency in HTML and CSS to add robust, interactive components to a website, web application, mobile application or other interactive project. (Met by Projects)
Lessons
Introduction
lessons
Welcome! This course will challenge you to think on a new level about interactivity in websites. We'll cover the fundamental programming…
Get started1: Humans, Computers, and the Interactive Imperative
lessons
Computers vs. Humans: Introduction to IxD Pick up a free copy of two books we'll use in this class from UXPin. The two books listed below…
Get started2: Numbers and Math
lessons
Numbers and Math In this module we'll take a short break from IxD1 and focus just on basic scripting principles. Specific scripting skills…
Get started3: Words and Truth
lessons
Language in IxD In this module we return to IxD1 to look at how the words we use in our designs affect interactions. Read IxD1, Chapter…
Get started4: Visual Direction and Complex Data Types
lessons
Introduction to Visuals in IxD Having spent time thinking distinctly about the words we use in interaction design, we now turn to think…
Get started5: Affordances and Introduction to jQuery and DOM
lessons
Affordances Visual design for interactive sites and applications moves quickly beyond the elements of the layout that the user sees, reads…
Get started6: Fitts' Law, and DOM Traversal
lessons
Fitts's Law and its Implications for IxD Visual design for interactive sites and applications moves quickly beyond the elements of the…
Get started7: Events
lessons
Events in JavaScript and jQuery Returning to our survey of JavaScript and jQuery concepts, we now turn to the exciting topic of events. Read…
Get started8: Space and Forms
lessons
Embracing Space Let's step back into IxD1 to look at the role space plays in interactive interfaces. Read IxD1, Chapter 7: Embracing Space…
Get started9: Conditional Structures
lessons
Making Decisions in JavaScript We've been building our set of tools in JavaScript and have focused primarily on data types in the past few…
Get started10: Loop Structures
lessons
Loops Continuing our survey of utilitarian structures in JavaScript we turn to discuss how we create repeating blocks of code. Read Duckett…
Get started11: AJAX, JSON, and Time in IxD
lessons
AJAX and JSON Let's extend what we can do with our scripts by learning about how to load external code using AJAX and how to package data…
Get started12: Templating
lessons
Templating This topic is not covered directly in your textbook. Watch this presentation and play along in the demo provided in CULearn. Use…
Get started13: Data Modeling
lessons
Data Modeling This topic is not covered in your book. Watch this presentation and use this handout to take notes. Error Handling and…
Get started14: AJAX and RESTful Services
lessons
AJAX and RESTful Services This topic is not covered in your book. Watch this presentation and use this handout to take notes.
Get started15: Sending and Receiving Data
lessons
Sending and Receiving Data This topic is not covered in your book. Watch this presentation and use this handout to take notes.
Get started
Activities
Project 1
activities
Overview Read the first few pages of Ch.11 from Duckett and skim the remainder of the chapter for a glimpse at some common interactive…
Get startedProject 2
activities
Overview Project 2 provides you the opportunity to build a single page application. You will design the interface and screen states for a…
Get started
