< 1 >

Creative Explorations in Screen-Based and Physical Computing

DGMD S-15, Summer 2016

Why do we
run this course?

How do we
run this course?

We will look at...

  1. …projects in the world
  2. …projects by us
  3. …projects by you

During our sessions,
this means time for...

  1. Discussion
  2. Design
  3. Studio

Outside of sessions,
this means you'll...

  1. …build new stuff every week (and store it on GitHub)
  2. …read materials related to building stuff every week (from a mixture of suggested resources and independent investigations)
  3. …reflect on and refine work every week (and document that process in your journal)

We're available!

  1. …anytime on the course's Slack Channel
  2. …anytime at dgmds15@gmail.com
  3. …after each session on Mondays and Wednesdays from 3-5PM at Clover in Harvard Square

Why do we code?

What we'll
build next week

the code | the site

What we'll
do today

Some people examples

  1. Shaunalynn's card for Alec
  2. Alec's card for Shaunalynn
  3. Last semester's cards

Designing /people cards

  1. Pair up with someone in the room.
  2. Get to know each other a little bit. (Really take some time to chat; you'll be seeing a lot of each other over the next 7 weeks! Go get a coffee across the street if you'd like.)
  3. Based on what you learn about them, come up with at least three ideas for effects you might apply to their /people card. (Don't let your skill with HTML/CSS/JS (or sketching) influence your design too much!) If it helps you brainstorm, feel free to sketch and draw.
  4. Come back by 2:30PM.

dgmd.github.io/people

To get our feet wet, let's take a stab at using HTML, CSS, and Javascript by populating the people page of the course site with our own information…

  1. Create an account at Codepen.io.
  2. Fork this Codepen and modify it to reflect what you've learned about your partner.
  3. Now, add some CSS or JavaScript effects to your card. Check out last semester's /people page or this list of effects for inspiration on how to adapt your card. Please read the comments in the Codepen, as they provide instructions on how to make a card that will be easily incorporated into the course website.
  4. When you're done with your card, post a link to it on your GitHub Pages journal and send us a link to your journal at dgmds15@gmail.com. If you'd like, you can take a look at Shaunalynn and Alec's journals to see how they're set up, too.

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 sync to GitHub.

For next session

  1. Make at least three sketches representing effects you'd like to add to your partner's card and have them choose one to represent them on the course website. We'll be posting them to a personal journal hosted on GitHub, which we'll ask you to use as your central place for keeping materials. If you'd like to get a headstart, check out these directions.
  2. We'll be using Slack (tour here) as our course chat room, which you can join here.
  3. Take a go at setting up 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.

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

  4. Check out our /people card template and start transforming it to represent your partner. Make your own account, fork our sketch, and replace Kanye with your partner, adding a CSS or Javascript effect of your own. You can look at the people page on last semester's class site for some ideas or use this library of basic effects for inspiration.
  5. 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.

< /1 >