Poster design

Posted: January 25, 2014, filed under: Design, Projects

poster
Kinda fun! For a mission teaching high school students about genetics.

Medal Illustration

Posted: January 9, 2014, filed under: Projects

greatest_city_poster
This is for a poster for a 7th grade class’s mission called “Quest to Discover the World’s Greatest City” at Q2L. Students will measure the per capita income, crime, cost of living, and other statistics to determine the greatest city. Hmm..maybe Pittsburgh?

2013 Web Design Shout Outs

Posted: December 29, 2013, filed under: Design, Ideas, Inspiration

2013

The past few weeks I have been entirely overwhelmed with inspiration and need to drop some serious shout outs:

People and Places

First and foremost, the the entire web design/dev/tech community. What an open, motivating, and supportive group of people! In particular:

Read More →

Responsive Video Embeds [Snippet]

Posted: December 15, 2013, filed under: Tutorials+Tips

Update 4/23/14: Just use Fitvids, but this does essentially the same thing.

How to make embedded videos responsive? It is very annoying, especially in WordPress where you can't count on theme users to modify the HTML. Because embedded media like Youtube and Vimeo videos require a height attribute to be more than 150px tall (that's the browser default), you would have to adjust the height with media queries which would be unreliable and verbose. Here's a simple bit of jQuery and CSS that will solve these headaches, wow!

First we wrap all iframe, object, and embed elements in a .media-wrap class that will be styled. This step isn't necessary if you can just wrap the elements yourself.


// Wrap all media in a figure element 
var $media = $('iframe, object, embed');
$media.wrap( '<figure class="media-wrap"></figure>' );

Then add some styles for the wrapper, courtesy of this blog post by Michael Lancaster.

Read More →

Update: Teaching endeavors in NYC

Posted: November 26, 2013, filed under: Projects

header

NYC is treating me well, no doubt. In addition to part-time work at the Institute of Play, I've found a real passion for teaching and a few excellent opportunities:

Front-end Web Development at General Assembly

This is a ten week course covering HTML/CSS/JS and more, similar to the one I taught this summer at the Saxifrage School. The class has 27 students and, being so large, it is a more traditional classroom format where we code together and I explain concepts as we go. Being in the front of the class, I don't get the visual/body language feedback from students like in a round table or discussion structure. It took me a class or two to get in the groove, but I think it's going really well now and is a lot of fun. Also, I've got a pretty pro profile on the GA site, so that's cool.

Website Bootcamp for Creative Professionals with Simple Labs

Started by Nate Cooper at Simple Labs, this is a two hour crash course in websites. It's perfect for creatives not necessarily looking to make websites, but to learn the lingo. Curriculum-wise, I'll hit on client-server communication, the difference between HTML/CSS/JS, mobile web, about CMSs (mainly WordPress of course), and the current relationship between design and development today.

Interested? It's at 7pm on Dec. 17th at the Centre For Social Innovation in Chelsea. 25% discount here and on Dec. 4th, come meet the developer (me!) for free (breakfast included!).

Read More →

How the Internet Works Comic

Posted: November 21, 2013, filed under: Miscellaneous

How_Internet_Works_by_vladstudio

I’ve totally posted this before, but just want to reiterate how great it is. I used it in my class at General Assembly and I think it was an excellent guide for talking about what is normally a really confusing/jargon-heavy topic.

via Fabulously Broke

Responsive-ize WordPress Gallery Thumbnails with Sass

Posted: November 3, 2013, filed under: Tutorials+Tips, WordPress

UPDATE: Just use Justin Tadlock’s Cleaner Gallery plugin.

I am in the midst of rewriting my WP theme WPFolio Two. I wanted to make the gallery thumbnail images a flexible width rather than their default fixed width. To do this, I gave the attachment images themselves a width: 100%; but needed to apply my responsive grid to each image’s container. So, how to conditionally add the .threecol, .fourcol, .fivecol to each gallery item according to the number of gallery columns selected?

The answer is Sass! Here’s a simple loop that creates a style for each gallery class and gives a %age width according to the number of columns:


$width: 100%;
 
@for $col from 1 through 9 {
	
	.gallery-columns-#{$col} dl { 
		width: $width/$col;
	}
	
}

There would definitely be a fancier way to do this instead of width: $width/$col; if I was using a Compass-y grid like Susy or Singularity. This is on my to-do list.

Lastly, these styles come into play at the tablet size of 768px. For smaller devices, the columns specified in WP will be overridden to two columns or so. I’d post that code, but I can’t work on it now because Mavericks (i.e. sloppy me moving folders around) messed up all of my file permissions, thus no localhost for me at the moment.

Cargo Cult CSS

Posted: October 31, 2013, filed under: Design, Research

About every other day I read a blog post about a new take on CSS best practices. I think either “I’m doing right!” or, “Ohh that makes sense, I’ll change my ways”. Cargo Cult CSS is another of these posts, and resulted in an “Ahh…now I’m really confused, but this was an excellent read.”

NYC + Cute creatures

Posted: September 27, 2013, filed under: Projects

Big news!

As of the middle of September I started as the Design Assistant at Quest to Learn in New York City. My job is, well, assisting the game and learning designers at Q2L’s Mission Lab. It’s been excellent so far – I’ve gotten some fantastic insight into what goes on at the Institute of Play and the the school, plus everyone there is great. I love NYC so far, though I still need an apartment…

One of my first tasks at the Mission Lab was to make some cute creatures for a game about legends. Results below (Bigfoot stealing the show, of course):

bigfoot

The job is part-time so I will continue my freelancing, though I’d like to shift my focus to teaching. More soon!

Social Studies with Charades & SMALLab

Posted: July 17, 2013, filed under: Games, Projects

Recently I've been thinking about adapting common party games for the classroom. The energy and quick thinking involved in games like Charades, Celebrity, Pictionary, and Taboo would work well to help students internalize facts such as historical names and events. "Who Am I" (title will change, don't worry) is basically Charades using SMALLab to provide visual feedback and an architecture for team play. I made a very rough video of how it would work (do not judge my animation & video skills on this!):


In case you don't feel like watching it, here's an illustration and brief description:

main-setup

In the above image, students have been divided into 4 teams. One student from each team has been given a character to act out such as Ben Franklin, Abraham Lincoln, etc. That students stands in the center of each quadrant. When the game begins, the center student silently acts out their character while his/her teammates guess who they are.

Read More →

I’m Just a Bill

Posted: July 16, 2013, filed under: Inspiration

Some inspiring, light-hearted nostalgia for you (I just returned from a month in Europe and am not quite ready to write a substantial post). After that, maybe take a look at Jimmy Kimmel’s parody “You’re Screwed”.

Embodied Learning: Research & Thoughts

Posted: June 4, 2013, filed under: Games, Ideas, Research

Chemistry in the SMALLab. Credit: Ken Howie Photography
Chemistry in the SMALLab. Credit: Ken Howie Photography>

In this post I'll go over two applications of embodied learning. First is SMALLab, a learning environment using motion-capture technology and large scale projections to track movements in space, and second is Science Choreography, a project through Wesleyan University and the Liz Lerman Dance Exchange that combines art, science, and kinesthetic learning to teach science topics. But before getting into all of that, a look at what embodied learning actually means:

Definition

The SMALLab website defines embodied learning as "a field that blends the learning sciences and human computer interaction". Science Choreography deals more with the direct translation of a process or concept into movement. In this video, Liz Lerman describes, "when you embody a process you start to realize what you don't understand, and you begin to ask questions because you want to get the movements right." In embodied learning, physical movement is the medium through which we internalize knowledge.

A few learning theories relevant to embodied learning are embodied cognition, differentiated instruction, and social constructivism. Some quick-ish definitions before getting into the examples:

  1. Embodied Cognition is the argument that all aspects of cognition are determined by the body. This includes higher level cognition like reasoning, judgement, and categorization.
  2. Differentiated instruction refers to a teaching philosophy contrary to the "one size fits all" model that many schools go by today. Students are provided avenues for learning and assessment that are effective for all students, regardless of ability.
    Read More →

Reinventing Board Games

Posted: May 21, 2013, filed under: Games, Research

Dominic Crapuchettes (founder of North Star Games) talks about the renaissance of modern board games. A few main points:

Tablets are making traditional board games obsolete.

Similar to books vs. ebooks: the production process is very expensive compared to buying a game from the App Store, and the convenience of a tablet is certainly desirable.

Game Designers are no longer anonymous.

You won't see the name of the Monopoly's or Scrabble's designer on the box; prior to modern board games, designers were completely anonymous. In this case, designers receive no upside from sales even if the brand is massively successful, and receive no recognition for their work.

Read More →