Interactive Writing & Design

What is a Front End Developer?

You are.

http://www.frontendhandbook.com/what-is-a-FD.html

Posted in Uncategorized | Comments Off on What is a Front End Developer?

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 | Comments Off on Google Maps Rubric

EXTREMELY IMPORTANT PLEASE READ

Not really.

http://saijogeorge.com/css-puns/

Posted in Uncategorized | Comments Off on EXTREMELY IMPORTANT PLEASE READ

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.

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:

http://www.nytimes.com/2015/11/03/science/nasa-adds-to-evidence-of-mysterious-ancient-earthworks.html

Posted in Uncategorized | Comments Off on Google Maps Intro

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) {
alert(‘IE11’);
}

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

Brian

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) {

flexboxPolyfill.init();

}

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) {

window.location.href=”indexIE.html”;

}

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!):

http://php.quicoto.com/how-to-detect-firefox-chrome-and-internet-explorer-with-javascript/

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

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

http://www.creativebloq.com/html5/10-best-polyfills-2133015

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):

https://modernizr.com/docs

Don’t say I never did anything for you.

Posted in Uncategorized | Comments Off on Modernizr Resources

Student Examples: Parallax Project

Beatles:

http://student.elon.edu/ewilliams/stellar-js/indexFinished.html

Dinner:

http://student.elon.edu/tmackins/parallax/index.html

Kyrgyzstan (uses Skrollr):

http://student.elon.edu/mmcgowan5/kyrgyzstan/index.html

Holy Guacamole:

http://student.elon.edu/lbourne/parallaxProject/indexFinished.html

Big Hero 6:

http://student.elon.edu/akim6/bighero6/

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:

http://janpaepke.github.io/ScrollMagic/examples/

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