Interactive Writing & Design

Some Modernizr Solutions

//always run this stuff in a document ready function

$(document).ready(function() {

var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );

// test for ios

if( ios ) {

if ( !standalone && safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘browser’;

} else if ( standalone && !safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘standalone’;

} else if ( !standalone && !safari ) {
alert(“ios”);
// document.getElementById( ‘where-am-i’ ).textContent = ‘uiwebview’;

};

} else {

alert(“not ios”);

};

// test for android

if( /Android/i.test(navigator.userAgent) ) {

alert(“android”);
// some code..

}

//test for firefox
if(navigator.userAgent.toLowerCase().indexOf(‘firefox’) > -1){

// alert(“firefox!”);

 

// dynamically load a resource only in FF
$(‘head’).append( $(‘<link rel=”stylesheet” type=”text/css” />’).attr(‘href’, ‘details.css’) );

}
// detect chrome
if(navigator.userAgent.toLowerCase().indexOf(‘chrome’) > -1){

// alert(“chrome!”);
$(‘header’).css(“position”, “fixed”);
$(‘header’).css(“z-index”, “9”);

}
});

Posted in Uncategorized | Comments Off on Some Modernizr Solutions

Here are your Groups!

GROUP 1:

Juwan , Jonathan , Kendra , Chandler , Jess

GROUP 2:

Dexter , Kelsey , Sarah , Lee , Case

GROUP 3:

Kaylin , Sandra , Tip , Mara

GROUP 4:

Gardy , Rhett , Imoni, Arvanna

GROUP 5:

Ashley , James , Trey , TJ

GROUP 6:

Dominique , Kyndall , Amanda , Nick

Posted in Uncategorized | Comments Off on Here are your Groups!

Modernizr Rubric

As a reminder, this assignment does not require that you rely on Modernizr to solve any or all of the browser compatibility issues – your challenge is to make the page’s features work in every browser. That’s all I’ll be checking.

There are 15 features on the page that are not fully supported by all browsers. By using Modernizr, polyfills, and creativity, try to solve as many as you can. (We covered how to solve one of these in class, so that’s your ‘gimme.’)

You will be graded on a scale of 1 (problem solved!), 2 (problem partially solved) and 3 (problem not solved at all).

Here’s a list of the features detected by Modernizr:

https://www.browserleaks.com/features

Here are some popular polyfills, although I can’t attest that any / all of these will work for our assignment:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

WHAT YOU CAN NOT DO

Do not edit the HTML and CSS to no longer use the features described – you can add data-attributes, classes and IDs to the HTML, but that’s all.

WHAT TO TEST IN

  • Edge 14
  • Firefox 56
  • Chrome 62
  • Safari 10
  • iOS 10
  • Android 53

Good Luck!

Posted in Uncategorized | Comments Off on Modernizr Rubric

Language and Region Codes for Google Maps

Language code list:

https://www.w3schools.com/tags/ref_language_codes.asp

Country (region) code list:

https://www.w3schools.com/tags/ref_country_codes.asp

Region coding in Google Maps:

https://developers.google.com/maps/documentation/javascript/examples/geocoding-region-es

Posted in Uncategorized | Comments Off on Language and Region Codes for Google Maps

Google Maps Rubric

I’d like you to make a custom Google Map, using the Google Maps API. I’d like the map to be as impressive as possible, within the confines of the API. Please choose a topic/idea/theme that will help define the content and appearance of your map. You are required to style the map with JSON-based styles.

Beyond markers and info windows, consider some of the myriad options for your map:

  • GeoLocation
  • Traffic
  • A heat map
  • Polylines, polygons, and overlays
  • Customized icons
  • Localizing the map
  • Directions
  • Elevation
  • Places
  • Street View

This project will be due Thursday, December 7th.

Posted in Uncategorized | Comments Off on Google Maps Rubric

Google Maps Styles

The Google Maps Style Wizard:

https://mapstyle.withgoogle.com/

The ‘old school’ style wizard:

http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

3rd-party Google Maps stylers (free):

http://www.mapstylr.com/

https://snazzymaps.com/

 

Posted in Uncategorized | Comments Off on Google Maps Styles

Google Maps Icon Links

How to customize your icons:

https://developers.google.com/maps/documentation/javascript/custom-markers#icon

The Google Earth KML base icon set:

http://kml4earth.appspot.com/icons.html

Map-icons:

http://map-icons.com/

A Stack Overflow question dealing with other icon sets, such as Font Awesome:

https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3

Two Font Awesome icon sets that people have made themselves and put on GitHub:

https://github.com/nathan-muir/fontawesome-markers

https://github.com/jawj/MapMarkerAwesome

 

Posted in Uncategorized | Comments Off on Google Maps Icon Links

Google Maps Intro

Here is yesterday’s startpoint for Google Maps:

https://developers.google.com/maps/documentation/javascript/tutorial

You can style maps, like so:

https://developers.google.com/maps/documentation/javascript/styling

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

http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html

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

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

 

Posted in Uncategorized | Comments Off on Google Maps Intro

More Story Examples Ideas

A great newspaper story that uses parallax effectively:

http://www.nzherald.co.nz/indepth/national/black-gold/

Another good example of using scrolling to tell a story:

https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful

A previous students’ video project from the ‘storytelling’ class – may giveyou some ideas:

Not a *story*, per se, but an example of animating on scroll:

http://student.elon.edu/ddimos/Parallax/

Posted in Uncategorized | Comments Off on More Story Examples Ideas

Story Examples from Class

http://www.nytimes.com/projects/2012/snow-fall/

http://www.visioncritical.com/evolution-of-insight/

http://www.imove.com/american-homes-through-the-decades

http://inequality.is/

http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

http://www.nytimes.com/projects/2013/high-rise/

Posted in Uncategorized | Comments Off on Story Examples from Class