Course

Course Description

This course covers the design and implementation of database-backed websites. Students focus on the use of data gathering, storage, retrieval, processing, and formatting, in the context of a web site. Course covers gathering data from users through online forms and ruby on rails; effectively storing that data in a database on the server (using mysql and sqlite); Web-based administrative interfaces to the database; and the effective formatting and display of the data at the Web site. Practical applications are studied; this course has a significant project component.

This course satisfies half of the programming requirement for HCI students. Although there are no course-based prerequisites for enrolling, the class assumes students with an HCI interest, basic HTML and CSS skills, an understanding of how networked computing is organized, and some previous exposure (thought not practice with) basic programming concepts like variables, assignment, branching, and looping..

Students from other specializations or HCI students without these skills will find this course very challenging, but manageable. If you fall into this category we will try directing you to appropriate resources for increasing your skills, but expect to spend significantly more time on readings, in lab, and completing assignments. That said, if you are willing to put in the time and energy you will emerge from this course with a very valuable skill and a new way of thinking about collections, computing resources, and the people involved.

Students with a significant background in either html design or programming have several options to make this class more valuable to them: focusing on the other skill (i.e. designing if you’re more of a programmer or programming if you’re more of a designer) OR choosing to further excel your strong skill: Designers might want to use all the latest and greatest CSS tricks to create a stunningly visual site; Programmers might want to delve deeper into the Ruby on Rails framework and write a plugin that adds some useful functionality.

Instructional Staff

Trek Glowacki
Office Hours: N/A
Email: pietrekg@umich.edu
IM: umgeek81

Required Books

Build Your Own Web Site The Right Way Using HTML & CSS. Ian Lloyd.
http://www.sitepoint.com/books/html1/

Learn to Program. Chris Pine.
http://www.pragmaticprogrammer.com/titles/fr_ltp/
(You can see the book in its pre-dead-trees form at http://pine.fm/LearnToProgram/

Agile Web Development with Rails 2ed
http://www.pragmaticprogrammer.com/titles/rails2/index.html

Course Pack

Additional readings will be made available electronically through the course website.

Optional Texts

Rails Recipes (Chad Fowler)
http://www.pragmaticprogrammer.com/titles/fr_rr/index.html (This book will help you with your final projects - no doubt. We will be reviewing the most important recipes in class, hence this book being optional)

HTML Utopia: Designing Without Tables Using CSS, 2nd Edition. Rachel Andrew & Dan Shafer.
http://www.sitepoint.com/books/css2/

Required Tools

The Macs in the DIAD have the necessary tools installed to complete the assignments in this course. We will cover development in this type of unix environment.

Optional Tools

Students who want to use their own computers for development are welcome to do so. We recommend the following applications:

Mac Users (OS 10.4)

• Programming Language: Ruby (already installed). To find where ruby is on your computer, open Terminal.app (Applications>Utilities>Terminal) and type ‘which ruby’ (without quotes. To access interactive ruby, type ‘irb’
• Integrated Rails Environment: Locomotive - http://locomotive.raaum.org/
• Text Editor: Textmate - http://macromates.com/
  or subethaedit - http://www.codingmonkeys.de/subethaedit/

Windows Users (Windows XP)

• Programming Language: Ruby http://rubyinstaller.rubyforge.org/
• Integrated Rails Environment: InstantRails - http://instantrails.rubyforge.org/wiki/wiki.pl
• Text Editor: RideMe - http://www.projectrideme.com/

For both Mac and Windows

• Web Browser: Firefox - http://www.mozilla.com/firefox/ with:
  • Web Developer Plugin https://addons.mozilla.org/firefox/60/
  • Source Chart Plugin https://addons.mozilla.org/firefox/655/
  • Firebug Plugin https://addons.mozilla.org/firefox/1843/
  • Page Validator Plugin https://addons.mozilla.org/firefox/2250/
  • CSS Validator Plugin https://addons.mozilla.org/firefox/2289/
• Database tool:Sqlite Browser - http://sqlitebrowser.sourceforge.net/

We highly recommend that every participant in the course own and bring a laptop to each class session. This is not a requirement and all the work in the course can be completed on lab computers available to SI students, but you’ll find parts of the course more valuable if you can play with code examples as we demonstrate them in class. It will also make it easier to work on your assignments and projects in your spare time.

Like most serious web development you will find life easier if you use a linux/unix variant (Mac OS X included in this group) although it is certainly possible to develop websites on a Windows based computer. Most of the examples in the course will be shown on a linux/unix variant but these examples will work with equivalent Windows software.

For backup purposes we suggest you buy a flash drive with 256 to 1024 MB of storage space. This will also allow you to store applications you use in case you are without a laptop and available computers do have what you need installed.

Assignments

There will be 8 weekly assignments due during the early part of the semester. Each of these assignments will be worth 50 points and are designed to test both topics covered that week and topics covered in previous weeks. Budget around 5 hours a week to work on each assignment if you done similar work before, 10 hours if have not but understand the concept, and 15-20 hours if it is entirely new to you.

The assignments are a way for us to be sure you understand the basic concepts (HTML, CSS, Data modeling, and Object Oriented Programming) required to understand Web Development. Assignments are due the Tuesday after they are assigned by 3PM (unless otherwise noted). Because good real-world development relies heavily on rapid feedback we will be returning assignments to you the next day in lecture. This rapid turn around allows to us address any questions or confusion immediately. It will be very difficult to move into the second half of the semester if you do not have a strong grasp of the basics.

Assignments are due both in electronic format and on paper turned into the course website and the Instructor’s mailbox. We use the electronic versions to test on our computers and the paper version for comments and grading. If your submission is not on the course site, we cannot test it: you will lose 50% of the possible points. If you don’t turn in a paper copy you will not receive any comments and will lose 50% of the possible points. Because of our rapid turn around we are unable to accept late assignments for any reason.

Files must be submitted in an appropraite non-proprietary open format (plain text for code, plain text or PDF for diagrams and proposals). Although you may use whatever program you like to create documents we cannot accept files native to Word, PowerPoint, Omnigraffle, etc. Please export these to a more open format (like PDF) for submission. More than a handful of files should be submitted in an archived file like .zip or .rar

We strongly suggest that you read a week’s assignment(s) before doing the reading for the week. When you read, look for concepts that will help you on the assignment: These are typically they key points we want you to understand in the course. Come to lecture prepared to gain a fuller understanding of topics that the readings and assignments cover.

We will post solutions to the the assignments after they are due to let you prepare for better discussion of topics during lecture. Because of this late assignments will receive a 0. You are always welcome to turn in late assignments or revise any previous assignment to receive feedback.

Final Project

There is a final project due in the course that incorporates all topics we have covered during the semester. For this final project we are asking that you create a small, simple site that is:

• a blog or article based site
• a media library (for a single media type)
• a friend/dating site
• a news site

We have chosen these types of sites because they are common and many people will have experience with them. We are not asking you to code the next amazon.com or facebook.com! The scope of these projects will be much smaller. For example, it would be reasonable for a store application to allow users to browse products, add items to a shopping cart, and leave feedback about products and allow administrators to keep track of how many products the have in stock, add and remove products from the store, and track orders.
Knowing how a very basic database driven website is assembled will allow you to look at very complex sites (like Amazon) and understand the magic happening in the background.

If you would like to do a custom website that does not fit into one of the categories above, please speak with us. Because the functionality and data types involved with the categories above is general and well known the instructors will be better able to help you than if you choose a different type.

The final project will consist of 5 separate assignments

• (100 points) Project A: A visual and textual narrative of how users will navigate the site what pages will look like, and where items on the page will go. This is not a design course, so don’t worry too much if you create a site that looks silly or seems overly simple.
• (100 points) Project B: A data model diagram of the types of objects you will be working with and the relationships between them.
• (100 points) Project C: Code Release 1
• (100 points) Project D: Code Release 2
• (400 points) Project E: Final Turn in and Presentation. At this point in the semester you will turn in your completed project and a small paper (1 page or so) about how the project went. This is called a “post-mortem” and explains to us how the project is put together, what users experience, what went well, and what didn’t go well. We will also have project presentations.

Grading

There are a total of 1300 points available for this course:

• 400 points for weekly assignment
• 800 points for the final project (four 100 point parts and one 400 point part)
• 100 points class participation

Semester TImeline & Reading List

Week 0 (January 4)

Intro to the course

No Readings or Assignments

Week 1 (January 10)

HTTP and the Request Response Loop

Introduction to HTML

Readings:

• Sebesta, Chapter 1
• Lloyd, Chapter 2 (CTools)

Assignments:

• Assignment 1: Mark up a blog page

Week 2 (January 17)

Introduction to Basic Programming Concepts,
(Variables, Assignment, Branching, Checking Equalities, Data Types)

Introduction to Object Oriented Programming & Single Object Data Models
(Classes, objects, class methods, object methods, setters, getters, syntax sugar, inheritance)

Introduction to CSS

Readings:

• Pine, Chapters 1-7
• Lloyd, Chapters 3-5
• http://en.wikipedia.org/wiki/Object-oriented_programming
• http://en.wikipedia.org/wiki/Assignment_%28computer_science%29
• http://en.wikipedia.org/wiki/Variable
• http://en.wikipedia.org/wiki/Data_type

Assignments:

• Assignment 2: Style the blog page
• Assignment 3: Data Model Single Object

Week 3 (January 24)

Thinking in Data

Relational Data Models

Model-View-Controller Design Pattern

CSS-Positioning with Yahoo Grids

Readings:

• http://en.wikipedia.org/wiki/Model-view-controller
• http://www.slash7.com/articles/2005/2/22/mvc-the-most-vexing-conundrum
• http://en.wikipedia.org/wiki/Relational_model
• http://developer.yahoo.com/yui/grids

Assignments:

• Assignment 4: Create a Relational Data Model
• Assignment 5: Position a blog page

Week 4 (January 31)

Introduction to Rails

Design Considerations for Single Object CRUD
(reading and deleting)

Readings:

• http://en.wikipedia.org/wiki/Object-relational_mapping
• http://en.wikipedia.org/wiki/Object-relationship_modeling
• http://en.wikipedia.org/wiki/CRUD_(acronym)
• Agile Web, Chapters 2,4, 14, 16(pages 259-264), 17.1-3, 17.4 (only the part about SQLite)
• Pine, Chapter 8
• Lloyd, Chapter 6

Assignments:

• Assignment 6: Single Object CRUD (due February 13)
• Project A: Project Description

Week 5 (February 7)

Design Considerations for Single Object CRUD continued
creating and updating

Readings

• Lloyd, Chapter 7
• Agile Web, Chapter 22.4 - 22.9, 17.5

Week 6 (February 14)

Design Considerations for 1-n, 1-1, and n-1 Relationships

Hans will not be at this lecture.

Reading:

• Agile Web, Chapter 18 (pages 321-350 except “Single Table Inheritance”)

Assignment:

• Assignment 7: Add Relationships to your Single Object Crud

Week 7 (February 21)

Design Considerations for n-n Relationship

Readings:

• Agile Web, Chapter 18 (pages 321-350 except “Single Table Inheritance”)

Assignments:

• Assignment 8: Decompose a website
• Project B: Data Model

Week 8 - Spring Break; no lab or lecture

Enjoy.

Week 9 (March 7)

Intro to AJAX

Extending Rails with plugins

Readings

• Agile Web Chapter 23

Assignments:

• Project C: Code Release 1 (DUE March 20)

Week 10 (March 14)

Implementing AJAX

Better Finding

Readings

• Agile Web, pages 298 - 308 (Power find() to Dynamic Finders)

Week 11 (March 21)

Advanced Layouts with Yahoo Grids and content_for()

Project Work Time

Assignments:

• Project D: Code Release 2 (DUE April 3)

Week 12 (March 28 )

Polymorphic Associations

Readings:

• http://www.matthewman.net/articles/2006/01/06/rails-activerecord-goes-through
• http://wiki.rubyonrails.org/rails/pages/UnderstandingPolymorphicAssociations

Week 13 (April 4)

Working with Dates and Times

Readings:

• Agile Web, 15.4-15.5

Week 14 (April 11)

Routes

Readings:

• Agile Web, Chapter 20

Exam Period

Final Presentations & Project E: Final Project due

How to Succeed in this Course

Challenge yourself, challenge us. We believe that people learn best when they engage in the activities of the course, and engage deeply with the subject, their colleagues in the class, and the instructors. ASK QUESTIONS! There is no lecture so structured that we will ignore your needs. We may defer questions until a little later if the answer is coming, but please don’t be afraid to raise your hand and ask. We are in this together.

Before you ask us a question about a homework or your project:

Talk to someone who knows you, a roommate, significant other, spouse, landlord, etc. Explain to them in detail what the problem is, and I’ll bet that more often than not you’ll figure out exactly what’s wrong when you go through this exercise. It doesn’t matter if they understand what you are explaining (ask them to humor you!). Once you get good at it, you can then talk to your “invisible friend” – talk through the problem out loud to yourself.

Contacting the instructors for help

The easiest way to get help outside lecture/lab times is via email. Emails for help should be sent to learn.rails@gmail.com. In EVERY email for help include the following headings:

• What I am trying to do:
• What files I am editing and what lines of code are not working:
• What error messages are occurring:
• What result I am seeing:

Finally, include all files necessary for us to help debug your problems. If there are many files, please place them in a .zip archive.

Under each of these headings we expect at least one paragraph of text detailing the problem. Be as explicit as possible. If we need to do a lot of guess work, hunting for files, or flipping through books it will be very hard for us to give useful help.

Copyright Notice

All materials in this course including but not limited to text, presentation, video,
audio and other multimedia formats are released under a creative commons
attribution, share-alike, non-commercial license. More information about the
license can be found at the creative commons website

http://creativecommons.org/licenses/by-nc-sa/2.5/

You are free to copy, distribute, display, and perform the works
and create derivative works. Copying, distributing, and displaying
these works must include authors’ names and contact information. The
creation of derivative works must include attribution and cannot be
used for any commercial purpose.

Other copyrighted materials used in this course are copyright their
respective authors or publishers and are used as “fair use” for the
purpose of education. We have made every attempt to use only media released
under a similar creative commons license and give attribution where due.
If you discover a violation of either a creative commons license
or violation of copyright you feel does not qualify for distribution as “fair
use” for the purpose of education please contact us immediately.