< 2 >

Creative Explorations in Screen-Based and Physical Computing

DGMD E-15, Spring 2016

breaking
something big

…into smaller bits to build it

From Shaunalynn's original card for Alec:

  1. Disappearing on a click
  2. Moving on hover

See the Pen [DGMD] Moving a div on hover by alec resnick (@aresnick) on CodePen.

See the Pen [DGMD] Disappearing a div on click by alec resnick (@aresnick) on CodePen.

Snippets
and
introductions
from previous terms

Sharing out /people cards

  1. Share what you learned about your partner
  2. Share the card you made, whatever its level of finish
  3. Share your mockups/sketches
  4. If you have yet to implement the effects in your card and aren't not sure how you would go about doing so, work with your group to brainstorm some code snippets which might be helpful.
  5. Share a description of the code snippets you'd like us to create for you in this Google Form, giving as much context and detail as possible

What is git/GitHub
and how will
we use them?

Journaling with git/GitHub

  1. Download the GitHub Desktop Client, open it, and login using your GitHub username and password
  2. File > Clone Resository and then select your journal's repository ($USERNAME.github.io) and then click Clone Repository.
  3. Choose where you want the repository to be cloned on your machine and click Clone again.
  4. Locate the new repository on your computer and open index.html file in both Sublime Text and Google Chrome.
  5. Make changes, preview locally, then push to GitHub

Journaling

  1. Check out Alec's journal (here on GitHub) for an example of basic styling
  2. Be sure to style your journal to denote time, so we know when what content is added
  3. You should be able to regularly add:
    • …work product/code snippets to share
    • …project ideas/things you want to make
    • …brainstorms/mockups you make
    • …other materials you come across which you want to archive or which you think we would benefit from seeing

< break >

If you haven't joined our Slack Channel yet, please do so during the break as we're going to use it during the second half of class.

Pomes Project Mock Ups

Given the temporal and geographic aspects of these materials, the materials themselves, and the desire for spontaneous rediscovery…

  • Work with your group to create alternative mockups. Be sure to attend to the audience and what they value.
  • Focus on brainstorming as many distinct ideas as you can.
  • Assign someone to 1) choose a Slack emoji to represent your group, and 2) post images, notes, and ideas for your mockups to the DGMD Slack channel, tagging your comments with your group's emoji.

The Pomes Project

Cloning the pomes project with git/GitHub

  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. 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 git checkout gh-pages; you should now see files in the repository.
  3. Run npm install; this looks at the package.json file and installs the various packages required for a-story-in-pomes
  4. Run node server.js; this runs the file server.js, and will serve up a version of the pomes site locally.
  5. Now, in Google Chrome, go to localhost:3000; this page will reflect any changes you make to the pomes project files on your computer.
  6. 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.

Project 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

For next session

  1. By Sunday evening: Post a link to a digital thing you love to your journal. Whether you think it's beautiful, clever, powerful, hilarious, etc.
  2. By Monday's session: Finish setting up a DGMD S-15 journal using GitHub pages. You can style them as little or much as you'd like. Here are some journals by last semester's participants.
  3. By Monday's session: Finish a first draft of your partner's /people card including at least their name, a new picture, and their GitHub username. Post it to your journal! You should also take a go at implementing the effect to represent them, looking at the people page on last semester's class site for some ideas or this library of basic effects for inspiration.
  4. By Monday's session: Finish setting up your local development environment by following these steps. If you run into trouble, don't stress (or stay up all night). We'll be available to make sure you're set up. We'll be using many of these tools Monday, so please reach out before then if you are having any trouble!
  5. Submit a Code Snippet Request or get in touch on Slack if you are having trouble with any of these steps!

    6. If you just want some more stuff to explore...

  6. If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page and Shay Howe's Learn to Code HTML & CSS. We'll also be digging into our own intro to and demo of the basics of HTML/CSS/JS, which might be of particular use.

< /2 >