Interactive Writing & Design

Google Maps Rubric

We will be using the Google Maps JavaScript API v3, which requires that you activate the service and acquire an API key from Google.

Your project, which will be due by Friday, December 5th (at the absolute latest), requires the following:

  • An embedded Google map (using the API above, not just copying an embed code) that has at least three markers and corresponding info windows.
  • Info windows that contain both HTML and images, and are styled to look good.

Some other things you may want to consider including:

If you can use this project in any way that would be useful to you, i.e. as part of another project or for your capstone, feel free to request to make something outside the bounds of the assignment rubric. For instance, Google Maps can now be used for data visualization, which could be really useful. Just let me know.


Posted in Uncategorized | Comments Off on Google Maps Rubric

This @font-face declaration worked for me…

@font-face {

font-family: ‘Graublau Web';

src: url(‘GraublauWeb.eot?’) format(‘eot’),

url(‘GraublauWeb.woff’) format(‘woff’),

url(‘GraublauWeb.ttf’) format(‘truetype’);


Posted in Uncategorized | Comments Off on This @font-face declaration worked for me…

Internet Explorer Rubric

I’ve made a page and put it on the server, in a folder called ‘modernizrStart.’ If you open it up in Chrome, you’ll see that it has:

  • A ‘star’ image, which is an SVG
  • An embedded font
  • A CSS animation
  • Music, using the HTML5 audio tag
  • A border-radius rule
  • An RGBa background color, with transparency
  • A media query

None of the things listed above works in Internet Explorer 8. Your job is to fix them all:

  • To fix the SVG issue, replace the SVG with a PNG (provided) when SVG is not supported (in other words, don’t edit my source code to use a PNG instead, but rather use Modernizr to create a fallback to PNG as needed)
  • To fix the font-face issue, use Paul Irish’s Bulletproof Syntax (you may also have to edit your .htaccess file). Please note that the laptop in the lounge does NOT show your font when you use the correct syntax! Annoying, I know.
  • To fix the CSS animation, use a jQuery animation instead
  • To fix the music, create an audio fallback using audio.js
  • To fix the border-radius rule, use PIE.js, in an IE conditional statement
  • To fix the RGBa issues, use Modernizr’s fallback mode to replace that code with a hexidecimal value, then add the appropriate IE opacity rules
  • To fix the media query, use respond.js

This project is due next week. Your grade will be based on how many of these elements you get to work in IE8. Be sure to test in IE8, I will.

Posted in Uncategorized | Comments Off on Internet Explorer Rubric

Css Animation Rubric

This rubric is pretty short and straightforward, as this assignment is really geared toward creativity, which I do not want to restrict.

  • Create three CSS animations, on three separate HTML pages
  • Use the ‘-webkit-‘ vendor prefix on everything
  • Make sure your animations are different from each other, and are also different from the content we made in class and is on the server. Again, this project is all about creativity, so please don’t minimally adjust existing content.
  • Feel free to make: an interactive infographic, a lo-fi representation of the analog world, a website that relies on animated elements, or anything like what we have on the server.
  • Feel free to re-create reality, or be totally abstract. You can also re-create your favorite video game.
  • If you have a practical use for a CSS animation on a website, make it!
  • Does not have to be responsive
  • Due any time next week.

Some inspirational ideas that we looked at in class:

Posted in Uncategorized | Comments Off on Css Animation Rubric

Intro to CSS Animations

CSS Animations are pretty easy to code. They use Keyframes, as nearly all animations do, but the Web doesn’t have a timeline, so we add our keyframes via code. This makes the syntax look a little wonky, and forces you to fully think through what you want the start, end, and loop to be of your animation very carefully.

But again, it’s pretty easy. As a refresher (or in case you missed class), here’s a reasonably concise summary of the CSS transform properties:

…and a summary of how to make a basic CSS animation:


Posted in Uncategorized | Comments Off on Intro to CSS Animations

Schedule in Brief

I want to give everyone an outline of the remainder of our semester. Here’s when our assignments will be due:

  • Parallax: November 12 (10% of your grade)
  • CSS Animations: November 17 (15%)
  • Modernizr/IE: November 24 (20%)
  • Google Maps: December 5 (15%) (feel free to hand it in early)

That totals 60% of your grade, so work hard!

Posted in Uncategorized | Comments Off on Schedule in Brief

Parallax Rubric

I would like everyone to make a website that uses a JS/JQ plugin which changes the appearance of your page upon either scrolling, mouse position, keyboard commands, or something similar. Examples include:

For any of the above plugins, I’d like you to control the narrative, to try to tell a ‘story,’ in a very loose sense. If there is a progression of ideas as the user scrolls, for instance, that’d be great. Remember Jess & Russ?

Alternately, you are more than welcome to design your personal portfolio as a parallax website (I guess that tells your story?). If you do not have all of your desired content for an online portfolio, you can substitute dummy content / ipsum.

You can also use a plugin that responds to the cursor’s position, such as Plax or Parallax.js. I’d encourage you to make something more interactive and visually engaging than the ‘car in desert’ thing we made in class.

This project will be due Wednesday, November 12. It is worth 10% of your grade.

Posted in Uncategorized | Comments Off on Parallax Rubric

jQuery is your Friend

Some of teh cool jQuery-based plugins I showed y’all in class Monday:

Book-like page turning:

Social media icons that animate:

Make a path to control the scrolling of your site:

Lettering.js: great in combination with fitText.js – break all of your text lines (h1 tags, h2 tags, etc.) into <span>s that can be animated individually. Also works really well with Scrollorama.

Or Super Scrollorama. Or Scroll Magic. Please note that those last three jQuery plugins are written by the same guy, who is typically terrible at explaining how to use them.

Tilt Shift: Nick pointed out that this should only work with pictures that are taken with a tilt-shifting lens, but if you really want to get this effect to work, you can simulate tilt-shifted pictures via Photoshop.

Tubular: Put any YouTube video into the background of your page.


Additionally, here’s the mobile re-direct script I recommend using to send people to the mobile version of your website:

And here’s the parallax framework we’ll be using in class today:

Posted in Uncategorized | Comments Off on jQuery is your Friend

Forget about add2home.js


It turns out that the JS plugin I asked everyone to use on their jQuery Mobile website has been changed substantially and is still in Beta since the release of iOS 8. So I will no longer require that you use it on your project. I couldn’t get the beta version to work.

That said, I would still like you to make your JQM site web-app-capable. Use the <meta> tags from the WebAppTemplate.html file on the server, and add your own apple-touch-icon and startup.png files.


Posted in Uncategorized | Comments Off on Forget about add2home.js

Getting started with Foundation

The first step in completing the Foundation portion of your frameworks assignment is to do the mockups. Remember, Foundation works on three assumed screen sizes: small, medium, and large – and your assignment is to come up with a layout strategy that adjusts content to fit each size screen perfectly. Be sure to create layouts that require layout changes for each resolution. You are encouraged to make the ‘large’ version somewhat complicated, from a layout standpoint, and allow it to simplify as your browser gets to the smaller sizes.  Remember, you have to hand in your mockups, too, so try to make the code do what your mockups due. If you can’t get it to work, I’d prefer you hand in something that doesn’t exactly do what you intended, rather than going back and simplifying your mockups.

  • Firstly, download the Foundation framework from – click the big ‘download’ button, then on the following page, choose the ‘download everything’ button.
  • Relocate the downloaded folder to your preferred workspace (desktop, external HD), and rename it simply ‘foundation’
  • Drag the ‘foundation’ folder into Brackets. Open the index.html file and delete everything from the opening <body> tag to the scripts at the very bottom of the page (line 12 to line 158), and save your file.
  • Foundation is based on a row system – every bit of content you add to your page has to be inside a <div class=”row”>. You’ll have a lot of these rows. As a way of keeping things organized, I recommend two things: 1) use <div> tags for the rows, and other invisible element tags (header, article, section, etc.) for the interior sections, whenever possible, and 2) indent your code, so your ‘rows’ are all left-justified, and your interior content is indented.
  • Create a ‘row’ div, and break up the content inside using a base-12 grid system. Remember, you need to declare the number of columns each element will occupy at each of the three resolutions.

Here’s an example:

<div class=”row”>

<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>


The above code would create a row of content that would display as four articles across on a large screen. On a medium-sized screen, it’d show two articles side-by-side, and then stack another two articles side-by-side underneath it. On a small screen, each article would occupy the full width of the screen (12 columns).

  • The Foundation website’s ‘kitchen sink’ page has great examples of all of the cool things you can do.
  • It is possible to create more complex layouts using nested rows – see the ‘kitchen sink’ for an explanation of how.
  • Be sure to test your layouts and see that they work.
Posted in Uncategorized | Comments Off on Getting started with Foundation