notes & things

Digital Narratives: Taps and Swipes

by lia on June 11, 2013, no comments

Switching images based on taps or swipes

The templates for our class, Digital Narratives, can be found in this repo.

It’s cool to be able to go from one page to another, but what if you want taps or swipes (called “events”) to change the currently displayed image on a certain page? We have three templates that you can use to explore this.

events_tap –> Toggle between two images as you tap
events_swipe –> Switch images depending on the direction of your swipe

To use events, you just have to reference the class you are using, and then say, “.on(event, callback())”. For excample, if we want something to happen when you TAP our “icons” div, you say:

Similarly, if you wanted to detect a SWIPE, you would say:

In this case, we call on the document, not just a div, because we want to make sure we detect when a swipe happens across the entire page. Also, note that JQuery does not come with swipeup and swipedown functionality, probably because it would conflict with scrolling up/ down (so make sure you don’t use this when you expect to scroll). Fortunately, should you need to detect swipes up/ down, we have included a js script that extends Jquery, and lets you do swipe up/ down.

Now that we know how to use events, how do we change what we are seeing onscreen based on an event? The main JQuery method that are using is this:

The idea is simple: replace one class for another. There are a variations of this command, such as .toggle or .toggleClass, but we will use this as you have a bit more control.

For now, we are using these events to change static images. But you can use what you learned about CSS animations to integrate them into our site!

Digital Narratives: Customizing the blank template

by lia on June 11, 2013, no comments

The templates for our class, Digital Narratives, can be found in this repo. Now we will talk about how to customize them.

Central to JQuery Mobile is the idea of “Pages”. You’ll see that within the body all of our .html sheets lies this div:

This marks off a section as a “page”. You’ll see that within that, you further define div sections as the header, content, and footer.

The whole organizational system is basically a page within the html page. This is cool because it means that you can even create multiple pages within a single html file — check out the example on the JQuery Mobile site here. There is also an example of this in our story_blank template’s index.html file, where we put a second “page” within the html — the Popup page.

Anyway, let’s break down what’s in the the markup:

data-role=”page” -> defines the page

id=”menu” -> your page ID. This will help us when we need to go from one page to another.

data-theme=”c” -> You can customize your look with JQuery Mobile’s theme library (choose from a to e).

data-prev=”page4″ -> This tells us where you want to navigate to when the “prev” or “next” event is called in the JS script.

If you want to add content to your page, it couldn’t be easier – simply place it within the data-role=”content” div of your page! In our story_sprites example, we added a GIF of cats working out:

Different kinds of content require different tricks, of course, so you’ll have to study up on some HTML and CSS to add something more complex than a GIF, but for now, knowing where to put stuff is more than enough.

The easiest way to start is to duplicate one of the blank pages, change the name (for instance, page5.html instead of page4.html)
When we duplicated the page, we inherited all the standard html that makes the pages work, like our links to the scripts, css, as well as the standard markdown for dividing the page into its usual parts (header, body, footer, etc). But we now need to tweak the duplicated html to differentiate this page from the original one. The first place to start would probably be the Title:

–> change that to whatever you want to call your page.

We’ll also need to change the Page’s ID, as well as where it should navigate to when “next” and “prev” are called:

And of course, replace any content that you don’t need with the content for the new page, and you’re done!

JQuery Mobile: 2 differences

by lia on June 11, 2013, no comments

I’m not a JQuery expert by any means, so these aren’t definitive. For our purposes, there are two main differences between regular JQuery and JQuery Mobile.

The first is that instead of putting all your initial JS code in document(ready), ie:

You would instead use pageInit, as shown here:

This is related to the second thing we do differently: we load all the scripts at once, the first time the entire app is loaded. This allows JQM to pre-load all the pages at once, making loading times between them faster and transitions possible. The important thing to know is that in effect it ignores the scripts (and CSS) of all the pages other than the first one. So if you have a script in page 2 for an animation that takes place in that page, it simply won’t be called unless you put that script in the first page.

Digital Narratives: Setting up your localhost

by lia on June 11, 2013, no comments

It’s important to set your localhost or else the links between html files won’t work.

If you are running an OS < 10.8: System Preferences > Sharing to turn on Web Sharing
If you are running on 10.8, read this and follow everything under “Document Root”. Stop before you get to “PHP”

I’ve summarized it here:

go to terminal:
enter: cd /etc/apache2/users/
enter: sudo nano username.conf (replace username with your short name. if you don’t know your account shortname type ‘whoami’ the Terminal prompt)

Then add the content below swapping in your ‘username’ in the code below:

<Directory “/Users/username/Sites/”>
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all

enter: sudo chmod 644 username.conf
enter: sudo apachectl restart

Now, any web file you place in your Sites directory will be hosted locally.
Then this user level document root will be viewable at:


Digital Narratives: Running the class examples 3 ways

by lia on June 11, 2013, no comments

The examples from the Digital Narratives class are in this repo.

Seymour_finished is a demonstration of how to use a sprite sheet and css3 for character animations. You can run this by loading the index.html file into your browser.

The files with 01-04 (story_blank, story_events, story_animations, seymour_slides) are all PhoneGap files.

You can run these templates 3 ways:
1. With Xcode/ Phonegap
2. In a browser, normally (it will look stretched unless you resize your browser)
3. In a browser, with an emulator (like Ripple)

1. In the template folder, find the Xcode file. It has a blue icon, and probably named “sprites” or the folder name.
2. Double click that to open.
3. Find the “RUN” button on the upper-left corner of the window — it looks like a play button. Don’t click it yet.
4. Beside the RUN button, select your simulator — iPad or IPhone.

5. Make sure it says “Sprites” beside that, not “CordovaLib” or something else.
6. Now hit RUN. The simulator should open up as a separate program.




1. Move the template files in your Sites directory. If you don’t have one, you probably need to set up your localhost (follow these instructions)
2. Just drag the index.html file (in the www folder) into the brower.
3. Change the address so it doesn’t start with file:///Users/yourname/Sites and instead starts with localhost/~yourname. For instance, on mine the address is: http://localhost/~lia/PhoneGap/Projects/story_sprites/www/index.html


1. Drag the template files in your Sites directory. If you don’t have one, you probably need to set up your localhost (follow these instructions)
2. Go here to use Ripple.
3. Install it as a Chrome extension or just enter the address of your index.html file (in the www folder) at the top of the page — make sure you append it with localhost/~yourshortname/ not file:///Users/yourname/Sites. For instance, on mine the address is: http://localhost/~lia/PhoneGap/Projects/story_sprites/www/index.html
4. Click your Ripple browser extension, and hit “enable”.
5. For more detail about working with Ripple, go here.


Sprite Sheets

by lia on April 15, 2013, no comments

I read that Zach Gage made Ridiculous Fishing with OpenFrameworks, with heavy usage on the ofxSpriteSheetRenderer.
I had never heard of them before, so I’m catching up. Sprite Sheet Renderers are usually built into game engines, but nice folks have found a way to use them with OF + iOS.

Here’s a good starter tutorial that comes in 3 digestible parts: What are Sprite Sheets?
Chris O’ Shea’s OfxSpriteSheet, the forum discussion
OfxSprite, which has a quick tutorial
ofxSpriteSheetRenderer and a discussion

I should probably start categorizing my posts now.

Systems vs. Empathy

by lia on April 15, 2013, no comments

More on girls and boys in this Fast Company article.

“In tests, on average boys show more interest in games like Lego, and girls are more interested in dolls, acting out social stories where they inject emotions and thoughts into the plastic figures. Lego is just one example of systemizing; this is the drive to build or analyse a system, which is simply anything that follows rules or patterns. So you are looking for consistent repeating patterns, and boys on average seem to show a stronger interest in systems, whereas girls develop social skills more quickly. I talk about this in terms of empathy, which is the drive to identify (and respond to) someone else’s thoughts and feelings. The systemizing/empathizing theory is a new model for characterizing typical sex differences.”

Lessons from girl Lego

by lia on April 15, 2013, no comments

This is an article from Businessweek about Lego’s new line targeted at little girls. While I don’t agree with the pinkification of a beloved childhood toy, there are some really good tidbits about what the anthropologists learned studying the differences between how girls play vs. boys.

In the last few years Lego has been making a big profit because it hyper-targeted the little boy market: Star Wars, mechanized sets, pirates and spaceships. Because of its superfocus on the boy market, it severely alienated the other side of the spectrum, and the girlier Lego is the company’s response.

What they learned about boys:
“The skate maneuvers had taken hours and hours to perfect, defying the consensus that modern kids don’t have the attention span to stick with painstaking challenges, especially during playtime. To compete with the plug-and-play quality of computer games, Lego had been dumbing down its building sets, aiming for faster “builds” and instant gratification. From the German skateboarder onward, Lego saw it had drawn the wrong lessons from computer games. Instead of focusing on their immediacy, the company now noticed how kids responded to the scoring, ranking, and levels of play—opportunities to demonstrate mastery. So while it didn’t take a genius or months of research to realize it might be a good idea to bring back the police station or fire engine that are at the heart of Lego’s most popular product line (Lego City), the “anthros” informed how the hook-and-ladder or motorcycle cop should be designed, packaged, and rolled out.”

And girls:
“Encouraged by what it had learned about boys, Lego sent its team back out to scrutinize girls, starting in 2007. The company was surprised to learn that in their eyes, Lego suffered from an aesthetic deficit. “The greatest concern for girls really was beauty,” says Hanne Groth, Lego’s market research manager. Beauty, on the face of it, is an unsurprising virtue for a girl-friendly toy, but based on the ways girls played, Groth says, it came, as “mastery” had for boys, to stand for fairly specific needs: harmony (a pleasing, everything-in-its-right-place sense of order); friendlier colors; and a high level of detail.

Lego confirmed that girls favor role-play, but they also love to build—just not the same way as boys. Whereas boys tend to be “linear”—building rapidly, even against the clock, to finish a kit so it looks just like what’s on the box—girls prefer “stops along the way,” and to begin storytelling and rearranging. Lego has bagged the pieces in Lego Friends boxes so that girls can begin playing various scenarios without finishing the whole model. Lego Friends also introduces six new Lego colors—including Easter-egg-like shades of azure and lavender. (Bright pink was already in the Lego palette.)”

The results of their research is fascinating, ones I completely agree with. I suppose what I am adamantly against is the separation that is made in the first place — why do I, as a girl, need a separate set? Why can’t I play with the boys’ robots? Girls can have a lot of role-playing fun in a pirate ship, too, can’t they? The people in it might not be fighting, but the sets look cool and can be reappropriated as necessary.

And then there’s games like Sim City or the Sims. If you think about it, aren’t these games kind of like adult lego? You build things from scratch with the almost unlimited number of tools that you are given. Why wouldn’t a model like this work for kids, too? I thought it did, back when I played with them. I thought that was the point of Legos — something from nothing, but different every time.