Essentials of Interaction Design: Controls Overview

Types of controls

imperative – used to initiate a function
selection – used to select options or data
entry – used to enter data
display – used to directly manipulate the program visually

Imperative controls (commands immediate action)
– Buttons
– Butcons (icons as buttons)
– Hyperlinks

Selection controls (allows user to choose from a group of valid choices)
– checkboxes (can expand on butcon – latching button or toggle)
– flip flop buttons (may want to avoid)
– radio buttons (mutual, also radio butcon)
– combutcon – group of latching butcons that behave like a combo box
List controls (allows users to select from a finite set of text strings)
– list boxes or listviews
– dropdown
– earmarking (multiple checkboxes)

Entry controls (enable users to enter information into app)
– bounded and unbounded (use bounded controls for bounded input)
Bounded
– spinners (small edit field with 2 buttons attached, up/down arrows)
– dials and sliders
– thumbwheels
Unbounded (handle out of bounds data)
– text edit (validation – active/passive)
– clue boxes

Display controls (display and manage the visual presentation of info on screen)
– text controls
– scrollbars (thumb)
– splitters (think bootstrap with dividing screen into panes)
– drawers and levers

Famo.us Integrations

Famo.us is only just a few months old, but has been gaining traction in the way of integrations that are currently available for the framework. Here are the many different types of integrations that are currently out and also some in the works.

Currently Available

Famo.us + d3.js

  • Use d3’s data-binding and Famo.us’ surfaces and rendering capabilities to create awesome charts and graphs

Famo.us + Firebase

  • Focus on the front-end and let Firebase take care of the rest

Famo.us + Angular

Famo.us + Meteor

  • For those that can’t get enough Meteor

Famo.us + React

  • Famo.us with Facebook’s React

Famo.us + Maps

  • Add map components to the Famo.us render tree and also use Famo.us modifiers to pan the map and sync the position of renderables

Future Integrations

As hinted at by the Famo.us CEO, Steve Newcomb, here are some of the integrations that are currently in the works.

  • Famo.us + Backbone
  • Famo.us + Ember

Will keep up-to-date, subscribe to be notified of new integrations.

 

Installing PostGreSQL database on Microsoft Azure Virtual Machine

azure_logo

Login to Microsoft Azure.

Create a new virtual machine

  1. Click on the ‘+ New’ in the lower left corner
  2. Select Compute -> Virtual Machine -> From Gallery
  3. Tab 1: Use an Ubuntu 12.04 LTS image
  4. Tab 2: Keep default settings, type in ‘Virtual Machine Name’ and a password (I didn’t use the SSH certificate)
  5. Tab 3: Keep default settings, change region, choose a DNS name and create a TCP endpoint called ‘postgres’ (port #’s don’t matter)
  6. Tab 4: Nothing to change here, click the checkmark and wait a few minutes for azure to do its magic (grab some tea from Punjab Kebab!)

SSH into the virtual machine

  1. Open up terminal
  2. type in:
     ssh azureuser@[DNS-Name].cloudapp.net 

    and enter your password

You are now inside your virtual machine!

Now we need to install PostGreSQL on your virtual machine

Type in a few commands:

sudo apt-get install postgresql
sudo apt-get install postgresql-9.1-postgis
sudo apt-get install postgresql-contrib

To get  into your database type

 sudo -u postgres psql postgres 

And that’s it, now you can write psql commands to create tables for your database!

How to Run Javascript Code in Sublime Text

Had many Hack Reactor students ask how I was running our daily toy problems straight from Sublime.

Disclaimer: This is not an interpreter and only allows you to see console.log() output. Alert() will not work. Besides that, it’s a quick way to test code. For those wanting an entire interpreter, try out SublimeREPL

Here’s how you can create a Javascript Sublime console:

  1. Open Sublime
  2. Go to ‘Tools’ on the tab bar
  3. Hover over ‘Build System’
  4. Click on ‘New Build System’

At this point, Sublime should have opened up a new tab for you, that looks like this:

Screen Shot 2014-06-17 at 9.57.29 AM

Delete the default text and paste this in:

{
"cmd": ["node", "$file"],
"selector": "source.js"
}

Save it as node.

Now the next time you want to code in JS, go to Tools > Build System > Javascript.

To run your code, simply Command-B.

EDIT: If the above does not work, try this instead:


{
"cmd": ["/usr/local/bin/node", "$file", "$file_base_name"],
"working_dir": "${project_path:${folder}}",
"selector": "*.js"
}