< 4 >

Creative Explorations in Screen-Based and Physical Computing

DGMD E-15, Spring 2016

Mock-ups, Story Maps, Specs, & Sharpies

Some readings about
mock-ups & specification

By Monday…

  1. Some kind of visual mock-up of your project, capturing user-flow and layout (e.g. how the think will be used and look). This could be a sketch — like the one I made for the physical pomes project. Or it could be a story map, a specification, or some other approach laid out in one of those readings.
  2. Answers to the below questions.
    • What is your idea?
    • Who is its audience, and what do they value?
    • How will you know if it is successful?
    • What is your plan for going about it?

An overview to HTML/CSS/JavaScript

Cloning pomes
with git/GitHub Desktop

  1. Go to github.com/dgmd/a-story-in-pomes and fork the repository
  2. Open Github Desktop
  3. Click through File > Clone Resository and then type in the name of the pomes repository (a-story-in-pomes)
  4. Click Clone Repository
  5. Now choose where you want the repository to be cloned and what you want it to be called, and click Clone again
  6. At the top of GitHub Desktop, click the dropdown that currently reads master and instead choose gh-pages.
  7. Now, using Finder, locate the new repository on your computer

Viewing pomes locally

  1. Open Terminal; change directory into the a-story-in-pomes repository.
  2. Run npm install; this looks at the package.json file and installs the various packages required for a-story-in-pomes
  3. Run node server.js; this runs the file server.js, and will serve up a version of the pomes site locally.
  4. Now, in Google Chrome, go to localhost:3000; this page will reflect any changes you make to the pomes project files on your computer.
  5. Now, try making a change to the index.html file in the pomes repository and saving it to make sure the changes are being reflected.

pomes Extensions

  1. Change Background Image & Content
  2. Change Formatting of Byline Dates & Times
  3. Fix Background Image Changing Algorithm
  4. Pull in Images Using the Flickr API
  5. Pull in Outside Media Using Another API
  6. Rewrite Camera Functionality with New Tokens

Setting up your
development environment

  1. On a Mac, run xcode-select --install in the application Terminal. On a Windows machine, install Babun.
  2. Inside your terminal (Terminal.app on Mac, Babun on Windows), install Homebrew by running:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  3. Run brew update, then brew doctor. Watch for any errors that come up.
  4. Install Sublime Text 3, Google Chrome, GitHub Desktop, and Slack.
  5. Open Sublime Text and install the Package Control plugin by following these directions.
  6. Install the HTMLPrettify with these directions and then restart Sublime Text.

< break >

Studio Time

  1. Coding a square and making it do things (shaunalynn)
  2. Working on pomes extensions (alec)
  3. Thinking about your projects and mock-ups (bakhtiar)

For next session

  1. Post a mock-up (or story map or spec) and description of your personal project to your journal. If you aren't yet feeling generative, please get in touch with us to brainstorm! (We don't want you to work on something you think is lame!)
  2. Take a go at messing around with the pomes project, whether with the extensions we've suggested or by making it your own in your own way.
  3. Submit a Code Snippet Request or get in touch on Slack if you have any trouble!
  4. If you just want some more stuff to explore...

  5. If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page. We suggest starting with our own intro to and demo of the basics of HTML/CSS/JS. Then, we recommend Shay Howe's Learn to Code HTML & CSS and the online book series You Don't Know JS.

< /4 >