Class Coding: HTML 1

April 17, 2017

After completing your first Codecademy assignment in Web Fundamentals (HTML I) and showing me your completion badges, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (or another text editor), create a new file called “index.html” and save to WWW
    • Save two images (ideally with short names) to your WWW folder
  2. Place your structural tags
  3. Create a title
  4. Add a first-level headline and one paragraph
  5. Bold a few words. Italicize a few other words.
  6. Insert an image
  7. Add a second-level headline and another paragraph
  8. Create a hyperlink to the SOJ homepage within this paragraph
  9. Add a third-level hed and another image
  10. Make this second image into a hyperlink

To preview in TextWrangler

  • In Chrome, go to File > Open File… and open “index.html
  • Command-Tab to select TextWrangler and write code
  • Command-Tab to select Chrome and Command-R to refresh your webpage

To view a webpage’s source code

  • Chrome: View > Developer > View Source
  • Firefox: Command-U OR Tools > Web Developer > Page Source
  • Safari (why are you using Safari???): Develop > View Page Source
Advertisements

Assignment #5: Twitter Scavenger Hunt

February 8, 2017

It’s time! Every year, our class takes to the streets for a Twitter scavenger hunt. Thus far you’ve probably only used Twitter for personal posting (and some of you haven’t used it at all), but it’s a powerful tool for reporting and newsgathering, and the best way to learn about this is to do it. For the remainder of class today (Wednesday, February 8), you’re heading out into the world in teams of two (at least one of you needs a phone with the Twitter app) to find 10 things. You’ll need to complete the bulk of this assignment by the end of class.

IMPORTANT: To count, each tweet MUST include:

  • A photo
  • The number you are doing (e.g., 1. Joe Smith: “I love WVU”) – Without these, I can’t guess which entry you’re checking off (which means no credit)!
  • The hashtag: #WVUblogJ

So a sample tweet might look like this: “3. Prof. Biggins (Econ): It’s made protesting easier, but also more identifiable. #WVUblogJ”

Restrictions: No College of Media students, and please don’t all mob the same professor. No more than half can come from the same building, so don’t just hang around Evansdale Crossing or the Rec Center – try heading downtown!

FIRST!

Each member of your team must post an introductory tweet or two with a photo of your team so readers (and I) know what to expect. Don’t forget the course hashtag!

And now … the list!

  1. School spirit: Photo and quote from someone (not you or your partner) revealing school or civic spirit (what that means is up to you).
  2. Eating Up: Photo and quote (not you or your partner) from your favorite eating spot or watering hole on or near campus.
  3. Professor on the street. Photo and quote from a professor on campus. Ask them what role they think social media plays in our society today. Be sure you include the professor’s title and department.
  4. Student on the street. Photo and quote from a student (not you or your partner). Ask them where they get their news and if they use social media to keep up on the news. Be sure you include their year in school and major.
  5. Academic excellence. Photo and quote that reveals (you are going to have to be creative) how your school contributes to cutting edge research and/or learning.
  6. Scenic spot. Photo of your favorite scenic spot on or near campus.
    • 2016 rule: No photos of Woodburn Hall. We know! We’ve all seen it!
    • 2017 rule: No photos from the top of Evansdale Crossing. It’s very pretty, but I’ve seen enough of it.
  7. Little-known fact. Photo and detail of something you think many people might not know about your school or campus or city.
  8. Fanatic fans – Photo/quote from somebody asking for their prognosis on a WVU sport of your choice.
  9. Extracurricular extravaganza: Photo and quote/detail that exemplify some of the huge variety of clubs, organizations, etc. available to students at our university.
  10. WVU Weird: The strangest thing you can find. This one’s pretty open-ended, so be creative.

Extras! (for +0.5 each – only your first use gets the extra credit. These must also include both hashtags):

  • Use a microvideo app like Vine to provide interesting/funny/relevant information about your school .
  • Post 3-4 photos in a single tweet.
  • Incorporate other social media in meaningful ways to add value to your tweets.

DUE: You need to make most of your 10 tweets during our regular class time (10-1115a), and your team must be done by 1p today (one or two stragglers are acceptable). You’re expected to use class time to work on this, so if there’s a long delay to your start, it will affect your grade.

A Few Tips:

  • Think like a reporter. Have an eagle eye for the interesting, the important, the relevant, the unique, and the immediate. Double check your facts.
  • Think like a public relations professional. Show other people what’s cool about WVU.
  • Think like a storyteller. You may only have 140 characters in each tweet (actually less, once you subtract numbers, links and hashtags), but you can say a lot in a few words or using an image.
  • You may use more than one Tweet for each of the items below. Don’t overdo it, though, and don’t forget the #WVUblogJ hashtag for each!
  • 140 characters isn’t much. Try using other apps and tactics to allow you to say more.

This is going to seem a little strange to some of you, but the goal is to reveal to you the journalistic applications of Twitter. You need to be an observer, a reporter, and you can’t be afraid to accost people on the street for their opinions. You’ll provide perspective and voice, and you’ll tell a larger audience something about your subject (WVU, in this case) – make sure you’re thinking of them!

Looking Ahead: Storify

We’ll start this next week, but if you’d like to prepare in advance, it will include the following: a) All of your own Tweets, and b) Your top three favorite Tweets from your classmates. In this Storify, you’ll reflect on what you learned and observed from the experience.


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)

Assignment #5: Twitter Scavenger Hunt

September 12, 2016

It’s time! Every year, our class takes to the streets for a Twitter scavenger hunt. Thus far you’ve probably only used Twitter for personal posting (and some of you haven’t used it at all), but it’s a powerful tool for reporting and newsgathering, and the best way to learn about this is to do it. For the remainder of class today (Monday, September 12), you’re heading out into the world in teams of two (at least one of you needs a phone with the Twitter app) to find 10 things. You’ll need to complete the bulk of this assignment by the end of class.

IMPORTANT: To count, each tweet MUST include:

  • The number you are doing (e.g., 1. Joe Smith: “I love WVU”) – Without these, I can’t guess which entry you’re checking off (which means no credit)!
  • The hashtag: #WVUblogJ
  • EXAMPLE: “3. Prof. Biggins (Econ): It’s made protesting easier, but also more identifiable. #WVUblogJ”
  •  Restrictions: No College of Media students, and please don’t all mob the same professor. No more than half can come from the same building, so don’t just hang around Evansdale Crossing or the Rec Center – try heading downtown!

FIRST!

Each member of your team must post an introductory tweet or two with a photo of your team so readers (and I) know what to expect. Don’t forget the course hashtag!

And now … the list!

  1. School spirit! Photo and quote from someone (not you or your partner) revealing school or civic spirit (what that means is up to you. Be creative.)
  2. Eating Up: Photo and quote (not you or your partner) from your favorite eating spot or watering hole on or near campus.
  3. Professor on the street. Photo and quote from a professor on campus. Ask them what role they think social media plays in our society today. Be sure you include the professor’s title and department.
  4. Student on the street. Photo and quote from a student (not you or your partner). Ask them where they get their news and if they use social media to keep up on the news. Be sure you include their year in school and major.
  5. Academic excellence. Photo and quote that reveals (you are going to have to be creative) how your school contributes to cutting edge research and/or learning.
  6. Scenic spot. Photo of your favorite scenic spot on or near campus. (2016 rule: No photos of Woodburn Hall! We know! We’ve all seen it!)
  7. Little-known fact. Photo and quote of something you think many people might not know about your school or campus or city.
  8. Fanatic fans – Photo/quote from somebody asking for their prognosis on the remainder of the basketball season, or other sport of your choice.
  9. Extracurricular extravaganza: Photo and quote that exemplifies some of the huge variety of clubs, organizations, etc. available to students at our university.
  10. Freestyle: Your very own final unique tidbit of information/photo about our campus or city. Be creative.

Extras! (for +0.5 each – only your first use gets the extra credit. These must also include both hashtags):

  • Use a microvideo app like Vine to provide interesting/funny/relevant information about your school .
  • Post 3-4 photos in a single tweet.
  • Incorporate other social media in meaningful ways to add value to your tweets.

Storify

We’ll start this in Wednesday’s class, but if you’d like to prepare in advance, it will include the following: a) All of your own Tweets, and b) Your top three favorite Tweets from your classmates. In this Storify, you’ll reflect on what you learned and observed from the experience.

DUE:

  • Scavenger hunt: You need to make most of your tweets during our regular class time (10-1115a), and your team must be done by 1p today (one or two stragglers are acceptable)
  • Storify: We’ll make this in class on Wednesday, Sept. 14.

A Few Tips:

  • Think like a reporter. Have an eagle eye for the interesting, the important, the relevant, the unique, and the immediate. Double check your facts.
  • Think like a public relations professional. Show other people what’s cool about WVU.
  • Think like a storyteller. You may only have 140 characters in each tweet (actually 120, minus the 20 for your hashtags), but you can say a lot in a few words or using an image.
  • You may use more than one Tweet for each of the items below. Don’t overdo it, though, and don’t forget the #WVUblogJ hashtag!
  • 140 characters isn’t much. Try using other apps like Vine  to make it easier.

This is going to seem a little strange to some of you, but the goal is to reveal to you the journalistic applications of Twitter. You need to be an observer, a reporter, and you can’t be afraid to accost people on the street for their opinions. You’ll provide perspective and voice, and you’ll tell a larger audience something about your subject (WVU, in this case) – make sure you’re thinking of them!


In-Class #1: HTML 1

August 31, 2016

After completing your first Codecademy assignment in Web Fundamentals (HTML I) and showing me your completion badges, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (or another text editor), create a new file called “index.html” and save to WWW
    • Save two images (ideally with short names) to your WWW folder
  2. Place your structural tags
  3. Create a title
  4. Add a first-level headline and one paragraph
  5. Bold a few words. Italicize a few other words.
  6. Insert an image
  7. Add a second-level headline and another paragraph
  8. Create a hyperlink to the SOJ homepage within this paragraph
  9. Add a third-level hed and another image
  10. Make this second image into a hyperlink

To preview in TextWrangler

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

To view a webpage’s source code

  • Chrome: View > Developer > View Source
  • Firefox: Command-U OR Tools > Web Developer > Page Source
  • Safari (why are you using Safari???): Develop > View Page Source

HTML #3: CSS

April 25, 2016

Today we learn about CSS, a more elegant and streamlined way of adjusting the style of our webpages (see the previous three weeks for review). The following instructions are based on this week’s Codecademy module: CSS: An Overview:

As always, remember these basics for coding and previewing your work:

To preview in TextWrangler:

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

Complete these instructions:

  1. Create a WWW folder (or use your previous one). In TextWrangler, open the file I’ve sent you (“index3.html”) and create a new one, “stylesheet.css” – save BOTH to your WWW folder.
  2. Change <title> to something new
  3. In your HTML: Preview html3 in Chrome. Notice which paragraph is different. In your code, identify how that happened.
  4. Change the style of paragraph three in some way (use Google!).
  5. Add a link to paragraph three.
  6. After paragraph 3, create a < d i v >(look it up!). It will be empty for now.
  7. In your HTML <head>, link to the CSS (three parameters, end with /)
    1.  <link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/>
    2. Preview in your browser (it should look the same)
  8. In your CSS, change the style of <p> by doing the following:
    1. p { }
    2. In the { }, enter “font-family: Verdana;” (no quotes)
    3. Save and refresh your webpage – did it change?
    4. If so, notice paragraph two is still unchanged – why?
  9. Once you get this, try these other changes.
    1. Make the font size of <h1> 36px
    2. Make your <p> red
    3. Give your <div> a border of 1px and a background color of blue
    4. Create a comment
  10. In your CSS, change the <div> style to a specific height (e.g., 200px), width, and background-color. Save and refresh to see what happens.