Web Design Summary

While we make the switch to Google Classroom, I’m going to put a summary post here for the current notes and assignment for Web Design.

Class Notes:

Web Design Day 1

Web Design Day 2

Web Design Day 4

First Assignment (Due start of class Thursday):

Create a single web page using the skills we’ve learned so far. on the topic of your choice (Consider service experiences, college comparisons, movie ratings, summer experiences…or whatever you have in mind. Just try to make it ABOUT something). Include at least:
Correct Structure
A header
At least one tag from h1 – h6
A table
An image

Introducing Google Classroom

For this trimester, I am working on using Google Classroom to manage posts and assignments for the classes. This provides a number of advantages of a standard web site (even one as robust as WordPress).

In particular, Google Classroom recognizes the difference between assignments and regular posts, and it offers the ability to submit assignments through the web site. It allows me to add comments and Continue reading Introducing Google Classroom

Citation Managers Initial List — P. 1

Link to the spreadsheet:


  • Works Cited 4 U
  • EZ Bib
  • iMiser
  • Ultimate Research Assistant
  • Refworks
  • Mendeley
  • Noodle Tools
  • Bibme
  • Citation Machine
  • Owl Purdue
  • Refme
  • Citation Generator by Mick Schruder
  • Citefast
  • Citation Maker
  • Cool Tools For Schools
  • Zitavi
  • Essay Writing Web.com
  • Ottobib
  • Cite This 4 Me
  • Noodle
  • DiRT
  • Citavia
  • Citeliter
  • Docear
  • Recipes4success
  • Refdot
  • Neil’s toolbox
  • Eturabian


The Dream Tool

Here are the features we decided would make up the perfect Research Assistant Tool

Wouldn’t it be great if…:

It would find related sources

  • Universal, cross-platform access
  • Easy add/modify/remove citations from paper
  • Organize sources more clearly
  • List citations alphabetically
  • Proper indents/formatting  — up to date
  • Automatically add the inline citation
  • Automatically grab citation information — web –books too?
  • Multiple platform
  • Integrated with Word and Integrated with other platforms
  • Recognize that there are two authors with same last name and make appropriate adjustments
  • Ties research notes to sources
  • Makes research notes searchable


Notes on Google Maps API — create map, set to location, add pins

Maps with Javascript

Google Maps API is at:



  1. Get the key from Google – you are looking for the Javascript API key.
    1. Do not enable billing unless you want to go bankrupt
  2. HTML
    1. Need a div that will be the container for the map
      1. <div id=”mapContainer”>
    2. Your Javascript
      1. Function that will initialize the map after the Google API has loaded

Notice that the map variable is global. That way you can access and change the map object from other functions and in response to user input or geolocation inputs

var map;

function initMap(){

   map = new google.maps.Map(document.getElementById(“mapContainer`”),{

       center: {lat: 44.461458, lng: -110.830992},

       zoom: 14





  1. Script to load the Google Maps API
    1. Goes at the bottom of the body in your html so that it will load only after your other HTML has loaded.
    2. There are ways to do this in an onload function that involve creating a script element and adding it to the body.
    3. <script src=”https://maps.googleapis.com/maps/api/js?key=YourKeyc&callback=initMap”

   async defer></script>


Notice that the callback function is the same as the function Name in step 3. Yours don’t have to be named the same as mine, but they do need to match between the Google API script tag and your own function


Getting the actual position of the person using this page

Check and see if geolocation is available:

If it is, then run the getCurrentPosition method

      That takes an argument that is looking for the function to run once it has received the current position.





alert(“Geolocation is disabled”);



Then, in the setMap function, you can use the map.panTo method to move the map to the specificed position. Note: the panTo method will do a smooth animation if the new location is in the bounds of the displayed map. Otherwise, it will jump to that location.


The position object that will be sent my navigator.geolocation.getCurrentPosition has two things that really matter to you for this:




So setMap might look like this:


function setMap(position){


   map.panTo({lat: position.coords.latitude, lng: position.coords.longitude});






To add a marker to a map, you create a new google.maps.Marker object. It needs at least these properties:

position (a latlng object – google maps style)

map (the map variable you used when you created your original map – remember, this should be a global variable)




title – what the pin will say when you hover over it.


For this example, we’re going to add a click listener to the map which will add a marker wherever the user clicks on the map. It will say “Hello World” and it will enter with a Drop animation effect.


map.addListener(‘click’, function(e){

       var marker = new google.maps.Marker({

           position: e.latLng,

           map: map,

           animation: google.maps.Animation.DROP,

           title: ‘Hello World’