How-To: Make a Google Map

March 29, 2017

Today we’re making maps! At the bottom of this how-to, you’ll see a sample map of our own beloved Evansdale Crossing, made by following these very steps. Follow along and create your own!

Making the map

  1. Sign in to Google and go to maps.google.com
  2. Click the menu icon to the left of the search bar (it looks like three horizontal lines) and select “Your Places” from the drop-down menu, then click “MAPS”
  3. Select “Create Map” (at the very bottom of the left bar)
  4. In the new window, click “Untitled map” to give it a title and description
  5. Add places: Search a place address, click the marker, and select “+ Add to map” in its pop-up window
  6. Make changes by clicking a placed marker:
    1. Edit (the pencil icon) lets you change the title and description of a place. You can also add links () with HTML.
    2. Style (the paint bucket icon) lets you change the color and design of map markers. You can also upload your own designs, if you’re fancy.
    3. Add Image or Video (the camera icon) lets you … well, I think you can figure that one out.
    4. You can also add points of your own by selecting the “Add marker” icon (under the search bar) and clicking to place new map markers.
  7. Add lines and shapes
    1. Click the line/shape button and click points – double-click to finish
    2. Can name/describe your lines and polygons (shapes) in the same way as map markers.
    3. Style:
      1. Click lines to change color and thickness
      2. Click polygons to change color, border thickness, and transparency.
  8. Trash an element by selecting it and clicking the trashcan in its window

Adding group members

  1. Click “share” in top left menu
  2. Under “Invite collaborators,” add email addresses
  3. Choose what they can do: “Can view” or “Can edit”

Embed the map in your blog

  1. Click “share” and change settings from Private to “Public on the Web” (this allows any reader of your blog to see it), then click Done.
  2. Placing the map:
    1. Position the map how you want it to appear on your blog
    2. Click the three dots next to your map’s name in the top left menu > Select “Set default view”
    3. Click them again and select “Embed on my site”
      1. The code should look like this: “iframe src=”https://www.google.com/maps/d/embed?mid=1L7ZYJ8iuII5T9qoIuk4IAtmQF7U” width=”640″ height=”480″ “
      2. [note: There will also be pointy brackets like this <> around it, but I’ve left them out so WordPress doesn’t think I’m trying to embed a map here!]
    4. Paste the resultant line of code directly into a WordPress blog post and preview to see if it looks the way you want it.

Advanced map shaping

  1. Don’t like the shape of your map? Notice the details of that code:
    1. (this code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
  2. See those “width” and “height” values? Right now it’s a horizontal rectangle, but you can change that! Try some different values to get the shape you want.

The final product!


Assignment #6: Storify

February 13, 2017

In last week’s scavenger hunt, we used Twitter to report. Today, we’ll use another app, Storify, to condense that content into something that can accompany a news story or serve as a stand-alone narrative.

The Assignment

Storify your scavenger hunt with the following:

  • An introduction
  • Informative text throughout (so it’s not just 10 tweets with no connective tissue)
  • All your team’s Tweets
  • Your top three favorite Tweets from classmates
  • Don’t just add all this content and think you’re done! You must also include a narrative (text) about the experience. Make it interesting, and make it worth reading.

Due: 10a Wednesday, February 15. To receive full credit, you must publicize with the #WVUblogJ tag and post a link to your storify in a comment to this assignment post.

The How-To

Getting Started

  1. Go to Storify.com and log in with your Twitter handle
  2. Browse through the stories there to get a feel for what’s possible
  3. Click the “Create Story” button at the top right of the screen and create a Storify page (choose Public Story) of your team’s scavenger hunt – each member creates one.
  4. This must be curated – not just a list of tweets – so include explanatory written detail, links, maps, and other information that fleshes things out

Adding content

  1. In the left panel, add a title and description for your story in the blanks, then write some intro text in the main frame.
  2. In the right “Media” panel, click the Twitter icon (the little blue bird) and type in “#WVUblogJ”
    • You can search users and keywords too, but start with this for now)
  3. Drag tweets and images from the right panel to where you want them in the left panel
    • You can click “Images” to just display images to use, “Timeline” for tweets a single user sees, and “User” for tweets from that user
  4. You can also include elements from Facebook, YouTube, Flickr, Instagram & Google by clicking the relevant tab on the right panel
  5. You can embed links to specific sites as well – just click the little chainlink icon, enter the URL, and drag it to your story (OR highlight the text to link, click the chainlink icon, and paste in the URL)
  6. Add text by mousing over blank areas before or after your content links. A yellow bar will appear. Click on any of these to enter text

Publishing your story

  1. At the top right of the left-hand window is a big, friendly blue “Publish” button – click it
  2. You’ll get a window with a Publicity message that lets you send this to Twitter or Facebook and also inform people you quoted
    • You can change these from their defaults to something better
    • You can skip this and send it later by clicking “Notify” at the top of your story panel
      • This is a great way to publicize what you’re doing to the people who helped you do it!
  3. If your Storify is associated with an actual news story (e.g., something in the DA or WVU News), and you’re embedding the Storify at the end, switch the default link to that of your story
    • NOTE: You can’t embed this code in a WordPress-hosted blog, but you can post to there by clicking “Export” (at the top)
    • To embed: Click “embed” (below the headline of your story) and copy/paste the resultant text to your story (or blog post).

In-class: HTML #2

November 16, 2016

This week, we start with the foundation from earlier in the semester and add lists and styles (learned this in this week’s Codecademy module: Web Fundamentals: HTML Basics II):

Remember these basics for coding and previewing your work:

To preview in TextWrangler:

  1. Open Chrome and TextWrangler
  2. In Chrome, go to File > Open File… and open “index.html”
  3. Command-Tab to select TextWrangler and write code
  4. Command-Tab to select Chrome
  5. Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index.html”; add structural tags
  2. Create a comment inside that says “In-class assignment #2: HTML2”
  3. Create a first-level heading and an intro paragraph
  4. Create a second-level heading and an ordered list of your top three books, movies, or bands
  5. Create a fourth-level heading and an unordered list of skills you possess
  6. Add a fourth item to the ordered list (step 4) and add an image to it

Too easy? Try these:

  1. Change background color of page
  2. Change style of top headline to Verdana font family, a different color, and centered alignment
  3. Change style of your intro paragraph to 30px, a different color, and centered alignment

How To: Create a Thematic Map

October 31, 2016

Here’s a guide to creating your own heat map, adapted from this tutorial.

Getting the data into a Fusion Table

  1. Import the dataset (a .csv list of insects from Google)
  2. Sign in to Google Drive, click “New,” and in the menu, go to More > +Connect More Apps
  3. Type “fusion tables” in the search bar and click the Connect button
  4. Click New > More > Google Fusion Tables
  5. In the window, browse to find your .csv and click Next. Review how the data looks and click Next
  6. Give it a name and click Finish
  7. Check out your table of data and images

Map the data

  1. Click the “map of latitude” tab at the top of your table
  2. Click the dots in the map to view individual entries’ data
  3. The Google tutorial also provides directions for making those pop-up windows more readable. Scroll down to “customize the info window template” and try it out!

Make a heat map

  1. Download the “population” and “states.kml” files I’ve sent you
  2. Create a new fusion table with this file
  3. Click the map tab in the spreadsheet, and Fusion Tables will geocode the locations (states) you’ve provided as points
  4. In a NEW window (important), upload “states.kml” – go through same steps to create a second Fusion Table
  5. In the uploaded “population” Fusion Table, click File > Merge
    • Select “states”
    • This table: Region – states: Name – click Next
    • Uncheck “description” and “id” and click Merge
  6. To change from dots to shapes, click “change feature styles” in the left menu and select Polygons > Fill color
  7. Select “Gradient” and change to 5 with the listed values.
  8. You SHOULD get a map with states shaded in colors that are darker with higher population levels
  9. Try searching for other state data and mapping it (use the filetype:.csv to help out)

How-To: Make a Google Map

October 26, 2016

Today we’re making maps! At the bottom of this how-to, you’ll see a sample map of our own beloved Evansdale Crossing, made by following these very steps. Follow along and create your own!

Making the map

  1. Sign in to Google and go to maps.google.com
  2. Click the menu icon to the left of the search bar and select “Your Places” from the drop-down menu, then click “MAPS”
  3. Select “Create Map” (at the bottom of the left bar)
  4. In the new window, click “Untitled map” to give it a title and description
  5. Add places: Search a place address, click the marker, and select “+ Add to map” in its pop-up window
  6. Make changes by clicking a placed marker:
    1. Edit (the pencil icon) lets you change the title and description of a place. You can also add links () with HTML.
    2. Style (the paint bucket icon) lets you change the color and design of map markers. You can also upload your own designs, if you’re fancy.
    3. Add Image or Video (the camera icon) lets you … well, I think you can figure that one out.
    4. You can also add points of your own by selecting the “Add marker” icon (under the search bar) and clicking to place new map markers.
  7. Add lines and shapes
    1. Click the line/shape button and click points – double-click to finish
    2. Can name/describe your lines and polygons (shapes) in the same way as map markers.
    3. Style:
      1. Click lines to change color and thickness
      2. Click polygons to change color, border thickness, and transparency.
  8. Trash an element by selecting it and clicking the trashcan in its window

Adding group members

  1. Click “share” in top left menu
  2. Under “Invite collaborators,” add email addresses
  3. Choose what they can do: “Can view” or “Can edit”

Embed the map in your blog

  1. Click “share” and change settings from Private to “Public on the Web” (this allows any reader of your blog to see it), then click Done.
  2. Placing the map:
    1. Position the map how you want it to appear on your blog
    2. Click the three dots next to “Share” in the top left menu > Select “Set default view”
    3. Click them again and select “Embed on my site”
    4. Paste the resultant line of code directly into a WordPress blog post and preview to see if it looks the way you want it.
    5. WordPress has changed, requiring some extra work. This next part is a little tickly…
      1. This code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
      2. Replace the <> with []
      3. Delete the /iframe tag and its <>
      4. Get rid of the quote marks and the semicolon (“” and ; )
      5. Replace iframe src= with googlemaps
      6. change width and height to w and h; get rid of quote marks around the numbers; and eliminate all spaces from this section (so width=”640″ height=”480″ becomes &w=640&h=480)

Advanced map shaping

  1. Don’t like the shape of your map? Notice the details of that code:
    1. (this code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
  2. See those “width” and “height” values? Right now it’s a horizontal rectangle, but you can change that! Try some different values to get the shape you want.

The final product!

 


How To: Build a Simple Data Scraper

October 5, 2016

We’ve seen how to use spreadsheets to work with data, but what if that data is in a table, not a spreadsheet? You COULD type it all up … or you could write a simple data scraper! Relax – if you know a tiny bit about spreadsheets, it’s pretty easy.

Quick Review of Formulas (in Google Drive):

  • Formulas here work just like in Excel
  • Two parts: Formula (=SUM) and Parameters (in the parentheses)
    • Can have one parameter (A1:A20) or more (B1:B10, “Y”)
    • Parameters can be either strings (in quotes) or numbers
    • Example: =SUM(A1:A20) will add up all the values in the range of cells from A1 to A20.
    • Other formulas:
      • =COUNT(A1:A?)
      • =AVERAGE(A1:A?)
      • There are also IF formulas (COUNTIF, SUMIF, AVERAGEIF) that take two parameters: =COUNTIF(A1:A?, >100) counts all cells in a range that have values greater than 100.

Recipe for a Simple Data Scraper (using Google Drive):

  1. Find a website of interest that includes data in a table (Wikipedia has lots)
    1. Anywhere you’d expect a table or list (e.g. Oscar winners, baseball stats, lists of prison)
    2. You can check in source code by searching <table, <ul, or <ol (don’t include the >)
  2. Note the following:
    1. The URL
    2. The index of the table (e.g., “1” for first table on the page, etc.)
  3. In new Google Docs spreadsheet, paste the following 3-parameter formula:
    1. =ImportHTML(url,query,index)
      1. url is the website’s URL [string]
      2. query is the HTML tag you want (e.g., “table” or “list”) [string]
      3. index is the ranking of that query on the page [number]
      4. Oscar winners example: =ImportHTML(“http://en.wikipedia.org/wiki/Oscars”, “table”, 2)
  1. You can customize it, too:
    1. Delete your formula from A1 and re-paste in B1
    2. Enter the three parameters in A1 (url), A2 (query), and A3 (index)
    3. Paste the formula in B1 and replace parameters with A1, A2, and A3
    4. This allows you to change parameters more easily and visibly
  2. ADVANCED: There’s an =ImportXML formula as well
    1. XML is heavily structured and uses more specific tags, like <book>
    2. Example from openlylocal.com, an open gov’t site: =importXML(“http://openlylocal.com/councils.xml&#8221;,”councils/council”) – Example drawn from Bradshaw’s book (see below)
  3. Want more? For $15, you can download Paul Bradshaw’s “Scraping for Journalists,” an excellent PDF book (first chapter is free): https://leanpub.com/scrapingforjournalists

Having problems?

  • Don’t forget to start the formula with an = sign
  • Check to see if you included quotes around your URL and query
  • Try a different index

How-To: Starting Your WordPress Blog

August 24, 2016

We’ll be creating blogs today, and you’ll begin posting next week (in addition to the About page due Sunday). Here’s a step-by-step of how to do it! We’ll be using WordPress (http://wordpress.com).

  1. Click the “Sign up” link (at top)
  2. Enter the required information (username, password, email)
  3. Give your blog a name
    • The format is YOURNAME.wordpress.com
    • May take a couple tries to find one not taken

Once you’ve got a blog …

  • Post!
    1. Log in & in the top infobar click “New Post”
    2. Enter a title in the top box, enter your text in the lower box (we’ll delete it later)
      • For more detail, go to your dashboard (link in top left of infobar > WP Admin) – in left menu, Posts > Add New
      • You may want to compose your posts in a word processing program then paste them into the blog box
  • Add value! (in dashboard view only)
    • Images: Make sure you know where the image is, then click Add Media > Upload Files > Select Files. Find your image, and decide where you want it in the text (left, right, or center)
    • Links: Select the text you want to make into a link. Click the little chain link icon above the text window and enter an address (or cut and paste) – it MUST begin with http://
    • Tags and Categories: Tags and categories (in the right menu) help index your posts. Just type a new one and click “add”.
  • Publish!
    1. Click the big blue “Publish” button in the right menu
    2. If you want to save a post for later, click “Save Draft”
      1. Log in later and publish manually
      2. Set a specific time for it to publish automatically
    3. Don’t like what you have? Scroll to the bottom of your post and click “edit” and make the changes you want.
    4. Publicity (Publicize > Settings)
      • You can link your blog to your Facebook, Twitter, Google+, LinkedIn, Tumblr, and Path accounts
      • Linked blogs can publish automatically to these
  • NOTE: Whenever you make an assigned blog post, be sure to check the assignment for where to post the link (typically as a comment to the assignment post but sometimes as an email or tweet).