Syllabus INFM 603 (Fall 2013)

Schedule of Classes

Session 1: Physical and Web Infrastructure September 5

Readings (to be completed before class)

• Head First HTML, Chapter 1: "Getting to Know HTML: The Language of the Web". Note that pages 12-19 (same in both first and second editions) about editing HTML on Mac and Windows. We're going to be using Sublime Text, so this part is for reference only.
• Head First HTML, Chapter 2: "Going Further, with Hypertext: Meeting the 'HT' in HTML."
• Head First HTML, Chapter 3: "Building Blocks: Web Page Construction".
• Head First HTML, Chapter 4: "Getting Connected: A Trip to Webville". When you come to a section about FTP, skim through it to get the basic idea, but we'll be using slightly different procedures to upload pages onto your TerpConnect account. In fact, this is part of Assignment 0.
• Head First HTML, Chapter 5: "Adding Images to Your Pages: Meeting the Media", pages 163-174 (in the second edition) or 165-177 (in the first edition).

Head First HTML (2nd Ed.)

Resources

• Dynamically play with HTML, CSS, and JavaScript

Slides

PPTX (Mac)   PDF

Back to top

Session 2: HTML and CSS September 12

Readings (to be completed before class)

• Head First HTML: "Getting Started with CSS: Adding a Little Style". (Chapter 7 in the 2nd edition, Chapter 8 in the 1st edition)
• Head First HTML: "Styling with Fonts and Colors: Expanding your Vocabulary". (Chapter 8 in the 2nd edition, Chapter 9 in the 1st edition)
• Head First HTML, Chapter 13: "Tables and More Lists: Getting Tabular".

Head First HTML (2nd Ed.)

Resources

• Dynamically play with HTML, CSS, and JavaScript
• Fancy tables!
• CSS
  • Introduction to CSS
  • CSS Property Index
    
  • Changing how links look with CSS
• CSS: Demo
  • Demo 1
  • Demo 2
  • Demo 3
  • Demo 4
  • Demo 5 (style sheet)
• CSS: Exercise
  • Starting Point
  • Final Product

Slides

PPTX (Mac)   PDF

Back to top

Session 3: JavaScript: Structured Programming September 19

Readings (to be completed before class)

• Head First HTML5 Programming, Chapter 1: "Getting to know HTML5: Welcome to Webville".
  • Don't worry too much about the distinction between HTML4 and HTML5.
  • Pay particular attention to section "How HTML5 really works" (pages 14-15).
  • Don't worry too much about the browser support grid on page 17.
• Head First HTML5 Programming, Chapter 2: "Introducing JavaScript and the DOM: A Little Code".
  • You'll learn about the DOM in this chapter, but we won't cover that in depth until Session 4.
  • You'll learn about arrays in this chapter, but we won't cover that in depth until Session 5.

Head First HTML5 Programming

Resources

• Dynamically play with HTML, CSS, and JavaScript
• JavaScript Comparison and Logical Operators
• Demo: temperature conversion, Fahrenheit to Celsius
• Conversion of units of temperature (Wikipedia)
• Demo: creepy guy formula
• Definition of creepy guy formula (Urban Dictionary)
• Demo: Bottles of Beer
• 99 Bottles of Beer
• Demo: ice cream scoops (static)
• Demo: ice cream scoops (dynamic)

Slides

PPTX (Mac)   PDF

Back to top

Session 4: JavaScript: DOM and Events September 26

Readings (to be completed before class)

• Head First HTML5 Programming, Chapter 3: "Events, handlers and all that jazz: A Little Interaction". (Stop at page 102)

Head First HTML5 Programming

Resources

• Dynamically play with HTML, CSS, and JavaScript
• Demo: arrays (part 1)
• Demo: arrays (part 2)
• JavaScript and HTML DOM Reference
• Demo: manipulating the DOM
• Demo: events
• Guide to JavaScript Events
• HTML DOM Events Reference
• Demo: forms
• HTML Forms and Input
• HTML <select> Tag
• Demo: dynamic list
• Demo: dynamic table

Slides

PPTX (Mac)   PDF

Back to top

Session 5: JavaScript: Functions and Objects October 3

Readings (to be completed before class)

• Head First HTML5 Programming, Chapter 4: "JavaScript functions and objects: Serious JavaScript".

Head First HTML5 Programming

Resources

• Dynamically play with HTML, CSS, and JavaScript
• Exercise: temperature conversion (again)
• Demo: wine as objects (part 1)
• Demo: wine as objects (part 2)
• Demo: wine as objects (part 3)
• Demo: summation (iteration and recursion)
• Demo: binary search
• Demo: binary search (recursive version)

Slides

PPTX (Mac)   PDF

Back to top

Session 6: Relational Databases October 10

Readings (to be completed before class)

Note that readings for this week come from another book in the "Head First" series (see link below).

• Head First SQL, Chapter 1: "Data and Tables: A place for everything", pages 1-14. (We're not going to worry about creating tables and inserting data into tables.)
• Head First SQL, Chapter 2: "The SELECT Statement: Gifted data retrieval", pages 53-63, pages 71-117.
• Head First SQL, Chapter 6: "Advanced SELECT: Seeing your data with new eyes", pages 253-280.
• Head First SQL, Chapter 8: "Joins and Multi-Table Operations: Can't we all just get along", pages 363-364 (inner equi-joins only).

Resources

In class, we'll be working with a simple SQL database engine called SQLite. Download SQLite Manager, which is an add-on to Firefox (so you'll need to download Firefox first if you don't have it already).

• Chinook database: Chinook_Sqlite.sqlite
• Chinook database schema
• SQL exercises

Slides

PPTX (Mac)   PDF

Back to top

Session 7: PHP October 17

Readings (to be completed before class)

Note that readings for this week come from another book in the "Head First" series (see link below).

• Head First PHP & MySQL, Chapter 1: "Add life to you static pages: It's alive.", pages 1-42. (Don't worry about the email stuff.)
• Head First PHP & MySQL, Chapter 2: "Connecting to MySQL: How it fits together", pages 59-101. (When reading this chapter, it's important to understand how PHP and MySQL interact, but the specifics of the database INSERT statement isn't as important.)

Resources

• Free PHP & MySQL hosting at 000webhost.com.
• Chinook database in MySQL format.
• PHP demo files: [index.html] [catalog.php] [search.php]

Slides

PPTX (Mac)   PDF

Back to top

Session 8: Ajax and Asynchronous Programming October 24

Readings (to be completed before class)

• Head First HTML5 Programming, Chapter 6: "Talking to the web: Extroverted Apps", pages 213-246.

Resources

• RideShare demo files: [All files zipped together] [SQL statements]
• PHP demo files (search + browse): [index2.html] [search.php] [browse.php] [catalog.php]
• Might Gumball demo files: [mightygumball.html] [mightygumball.css] [mightygumball.js] [sales.json]
• AJAX + PHP demo files (search + browse): [chinook-ajax.html] [search-ajax.php]

Slides

PPTX (Mac)   PDF

Back to top

Session 9: Visualization October 31

Readings (to be completed before class)

• A Tour Through the Visualization Zoo by Jeffrey Heer, Michael Bostock, and Vadim Ogievetsky.
• We're going to be using d3.js for visualization. Browse the contents of this tutorial, but in particular, pay attention to the following pages:
  • An SVG primer
  • Drawing SVGs
  • Making a scatterplot

Resources

• Dynamically play with HTML, CSS, and JavaScript
• Simple SVG shapes
• Exercise: self-portrait
  [start here] [solution]
• Very simple bar graph (with plain JavaScript)
• d3.js
• Very simple bar graph (with d3)
• Simple bar graph with labels (with d3)
• Exercise: bar graph of historical population of Washington, D.C.
  [start here] [solution] [Wikipedia]
• Simple scatterplot
• Exercise: replicate Gapminder "Health and Wealth of Nations" chart for 2000.
  [start here] [solution]

Slides

PPTX (Mac)   PDF

Back to top

Session 10: Information Retrieval November 7

Slides

PPTX (Mac)   PDF

Back to top

Session 11: Cloud Computing and Big Data November 14

Readings (to be completed before class)

• Above the Clouds: A Berkeley View of Cloud Computing (2009)
• Economist report on "big data" (2010)
• Chapter 5, "Information Platforms and the Rise of the Data Scientist" in Beautiful Data.

Slides

PPTX (Mac)   PDF

Back to top

Session 12: Developing and Managing Technology November 21

Readings (to be completed before class)

Note that readings for this week come from another book in the "Head First" series (see link below).

• Head First Software Development, Chapter 1: "Great Software Development".

Slides

PPTX (Mac)   PDF

Back to top