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 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 nice.

Some other things you may want to consider including:

  • Custom marker icons
  • Custom color schemes, or other ways to style your map
  • Polyfills, heat maps, other exciting stuff
  • Libraries, such as the ‘places’ library, or the ‘visualizations’ library

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.

I expect some of you to ‘phone it in,’ to do the bare minimum to maintain your grade in the class. That’d be a map with a few markers and infowindows that look nice. But I encourage you to use the assignment to make a killer portfolio piece, in which case, you should go much further with your map.

Due our last class meeting.


Posted in Uncategorized | Leave a comment


Not really.

Posted in Uncategorized | Leave a comment

Google Maps Intro

Here is yesterday’s startpoint for Google Maps:

You can style maps, like so:

…if doing so via JavaScript is too painful, try the google maps style wizard:

..note that the wizard outputs JSON, which may be more painful.

Tyler asked about removing all of the labels for all of the Points of Interest on the map. Here’s what we found that worked:

var myStyles =[
        featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }

var myOptions = {
    zoom: 10,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles 

taken from here.

Finally, in case you thought I was simply mentally unstable, here’s the link (I FINALLY found it) to the NY Times article about Google Maps / Google Earth / NASA being used to identify strange ‘ancient earthworks’ in Kazakhstan:

Posted in Uncategorized | Leave a comment

Detecting IE11

As I mentioned in class, doing a ‘user agent sniff’ on IE used to be pretty easy. For IE11, everything changed. If you google how to detect IE11, you’ll get a lot of useless answers. I’ve dug through the interwebs and found a workable test for IE11, akin to the tests we used in class for Firefox and Chrome and Safari. Here it is:

if (navigator.userAgent.indexOf(‘Trident’) != -1 && navigator.userAgent.indexOf(‘MSIE’) == -1) {

…just replace the alert with the code you need to fix something.


Posted in Uncategorized | Comments Off on Detecting IE11

Modernizr Fixes: A List

I’ll be testing for all of the following capabilities on your modernizr project, in IE11, Chrome, Safari and Firefox:

  • Resizeable box
  • Meter
  • Audio (OGG)
  • Video (OGG)
  • Text Stroke
  • Reflected text
  • Image rotated with ‘image-orientation’
  • Masked image
  • SVG filter
  • Details / Summary
Posted in Uncategorized | Comments Off on Modernizr Fixes: A List

Modernizr Resources

There are many ways to fix something using Modernizr:

Using CSS, you can write for both possibilities: a feature is supported, or it is not supported. To use flexbox as an example, let’s say I have a <div id=”flex”.> My CSS would be:

.flexbox #flex { display: flex;}

.no-flexbox #flex { display: inline-block; margin: 12px; min-height: 120px; }

…that basically says ‘if you support flexbox, use it; if not, the <html> tag will be appended with the ‘.no-flexbox’ class, and if that’s the case, set the #flex <div> to display inline-block.’

Using JavaScript / jQuery, there are many approaches:

You could load a JS polyfill in your <head>, then conditionally load / run it:

if (!Modernizr.flexbox) {



You could force a re-direct to another version of the page that is optimized or browsers that do not support the feature:

if (!Modernizr.flexbox) {



You could adjust the CSS for your element directly in the jQuery:

$(document).ready(function() {

if (!Modernizr.flexbox) {

$(‘#flex’).css(‘display’, ‘inline-block’);


Here are some really useful links for this project:

Polyfills for HTML5

More polyfills

How to detect specific browsers (NOTE: Modernizr encourages you to detect features rather than browsers, for good reason, but this still works!):

Note that the page does not include a User Agent for IE11.

Here’s a list of the ‘best’ polyfills:

And this page from Modernizr’s documentation walks you though the CSS classes that Modernizr defines when it loads your page (scroll down to the table):

Don’t say I never did anything for you.

Posted in Uncategorized | Comments Off on Modernizr Resources

Student Examples: Parallax Project



Kyrgyzstan (uses Skrollr):

Holy Guacamole:

Big Hero 6:

Posted in Uncategorized | Comments Off on Student Examples: Parallax Project

Scroll Magic

If you’re looking for a parallax plugin to use, consider using Scroll Magic – it can really do anything. Here’s a demo page that helps you learn to do different things on scroll, including (but not limited to) parallax:

Posted in Uncategorized | Comments Off on Scroll Magic

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 next Wednesday, November 4.

Posted in Uncategorized | Comments Off on Parallax Rubric

SVG animation

As I stated in class, I’m not good at Illustrator, and I only know SVG from coding it from scratch. So I thought y’all could use some more resources, as I’m proving to not be much help:–webdesign-17658

Posted in Uncategorized | Comments Off on SVG animation