CIS86 Class Sessions

This page will have the week-by-week class plan, so I will be filling it in as we go. I reserve the right to push a few assignments out by a week, depending on our overall progress in class.

Week 1: 01/21/09 • Overview • Administrivia • Firefox Web Developer Tools

In the first session, we will review the syllabus, objectives, and projects. We will also discuss the textbooks and the class Web site. We will begin talking about Firefox and the Web development extensions we will be using.

Topics

Week 2: 01/28/09 • Basic Tools for Class

The focus today will be on the basic processes and tools we will be using in class: FireFTP, which we will use to transfer files to and from the Web server; and Codetch, which we will use to edit HTML and CSS files. We will also discuss how to access and use the student Web sites. Finally, we will begin to discuss the main components of HTML files.

Administrivia for Week Two

  • Take Roll. Verify problematic email addresses. Assign student logins for Web sites.
  • The textbooks finally arrived at the bookstore on 1/26/09. The total price with tax is $59.24.
  • Official dates to consider: this Friday, Jan 30, is the last day to drop and receive a refund, and it is also the last day to drop without a "W".
  • Discuss results of Assignment #1.
    • Any epiphanies while analyzing sites?
    • Any questions about the class Web site?
    • Was everyone successful at installing Firefox and extensions?
  • Discuss Assignment #2, due on February 4.
  • Talk about CampusTech.com and Studica.com and similar sites. Academic prices for software (and limited hardware) are phenomenally low!

New Material for Week Two

  • Basic look of HTML. Using the Canonical HTML page.
  • Discuss FTP and the process of using the student Web sites. Assign student logins. Talk about storing files on the transfer folder at the College.
  • Talk about differences between browing local files and browing over the Web. Short answer: there is no difference when viewing simple HTML files, whereas any Web page that requires backend services (like using PHP in the Contact Form, or accessing a database) will fail. I can provide a copy of the class Web site on CDs for people with dialup connections.
  • Introduction to FireFTP (file transfer program) and Codetch (HTML editor).
  • Discuss and model the entire lifecycle for Web pages.
    1. View the demo HTML file over the Web. http://www.monolithdesign.com/students/studentXX/index.html
    2. Connect to student Web sites using FireFTP. QuickConnect versus Creating a Profile.
    3. Download the sample HTML file, called index.html. Rename it if you want to keep the original version.
    4. Use Codetch to add common HTML and CSS to the sample HTML file.
    5. Upload your edited HTML file to the Web server.
    6. View the edited HTML file over the Web. http://www.monolithdesign.com/students/studentXX/

Pointers

Week 3: 02/04/09 • Basic HTML

This week, we will review the process of copying files to and from student Web sites, and then viewing the results via URL over the Web. After this review, we will discuss the basics of HTML: the most common tags and how to use them. Finally, I want to save time for one-on-one chats with each student to see how everyone is doing.

  • Administrivia: message from David Gonsalves, Counselor:
    Due to popular demand, a NEW, late start, online GUID 8 class has just been added. This 2.0 unit class is PERFECT for students who need help in clarifying their career and educational goals. Here are the details:
    • GUID 8: "Career Planning" 2.0 Units ONLINE (2/16/09 - 5/16/09) Section# 023417 • Instructor: Cheryl Johnson • Catalog Description: "An introduction to career/life planning and decision making including education, work and leisure alternatives, lifestyles and personal satisfaction"
    • STUDENTS WILL WANT TO SIGN UP SOON. IT’S SURE TO FILL QUICKLY. DG
  • Reminder: I would like to talk to the students interested in the Kelley House Web site at the break tonight.
  • About Filenames: do not use spaces or weird characters in your filenames; limit yourself to letters, numbers, dashes, and underscores.
  • Discuss results of Assignment #2. Review the processUsing the Student Web Sites again as a group.
  • Discuss the basics of HTML. Copy a file from Web sites, add basic HTML to it, and upload to server.
  • Discuss Assignment #3, due February 11.
  • One-on-one chats.

Recent Pointers

Week 4: 02/11/09 • Review

Today, I plan to do a hands-on demo of basic HTML (and a bit of CSS). Everyone will follow along in this exercise on their own computer. Time permitting, I also want to be available for 1-on-1 chats with students.

  • Survey regarding an online version of CIS86.
  • Do a hands-on demonstration of basic HTML, with a little CSS added in for the sake of appearance. Here’s the script (PDF).
  • Instructor 1-on-1 chats.

Recent Pointers

Week 5: 02/18/09 • Basic CSS

Today, I plan to do a hands-on demo of basic CSS styling. Everyone will follow along in this exercise on their own computer. Time permitting, I also want to be available for 1-on-1 chats with students.

Interactive Tools

Recent Pointers

Week 6: 02/25/09 • Debugging Ideas + CSS Basics

This week, we will continue learning to use CSS to style our HTML pages. I will also talk about the process of debugging your HTML and CSS code.

  • Discuss results of Assignment #4.
  • Talk about how you debug problems in your HTML and CSS.
    • Are the top-level tags correct? Doctype, HTML, head, body, style, meta stuff.
    • Where did it stop showing things properly? Look there first! If the entire screen is blank, then make sure that the <head> and <body> tags are set up and closed properly.
    • Are all your tags properly nested (e.g., <li> must always be inside a <ul> or <ol>)? Are tags closed properly? Are the curly braces correct around your style declarations? Are your quote marks in the right places?
    • Does any HTML code appear in the page when you view it in Design View?
    • Have you validated your code? Codetch > Tools > Validate HTML and Validate/CSS.
    • Things that will help:
      • Fill in your opening and closing tags before adding content, especially with nested things like lists.
      • Get the large blocks filled in first, and then break those down into smaller pieces.
      • Write routine code in Design View.
  • Continue discussing the basics of styling HTML pages using CSS.
  • Discuss Assignment #5, due March 4.

Recent Pointers

Week 7: 03/04/09 • Layout with CSS

For Week #7, we will be starting to talk about layout with CSS. To get started, we will review the Box Model stuff from last week, including width, height, margins, and padding. Covering CSS Layouts will take a couple of class sessions.

  • Administrivia: the campus bookstore closes on Thursday (tomorrow). No class the week of March 18.
  • Discuss results of Assignment #5.
  • Discuss the basics of page layout using CSS. This is the core knowledge for would-be Web developers. It’s important to understand this part in your head, more than any other part of CSS and HTML. It is not a fiddling-around thing, because you won’t really understand why things work (and don’t work). Trust me on this: positioning has a certain logic to it, but it is not immediately evident until you’ve worked with it for a while. The sooner you learn the basics of it, and then fiddle around, the sooner you’ll get up to speed on layout. Everything else—and I mean that—is secondary to this aspect of Web design. So don’t waste your time playing around with layouts—read and absorb it, and then try it. At the very least, start from a well-crafted layout, and make principled adjustments until you understand why it works. If you are not planning to become a Web developer, then you don’t need such a rigorous understanding of this. You can work from any number of excellent starting points, and simply evolve a layout into your own design.
  • Discuss Assignment #6, due March 11.

Recent Pointers

Week 8: 03/11/09 • Layout with CSS, Session 2

This is it—the key discussion about layout with CSS using the position attribute.

  • I modified due dates so that Assignment #6 is due 3/25/09. This should include examples of float-based layouts, as well as layouts using positioning. We’re coming up to Spring Break—no class next week. If you have not figured out what you’d like to build for your site, think hard! We will begin talking about the Design Process itself. Try to get caught up with assignments during the break.
  • Two Quick Topics:
    • About floating list items (see below).
    • Screen Sizes and Browser Versions (using Google Analytics)
  • Continue discussing the basics of page layout using CSS. We will discuss the position attribute, and then go through the Examples on the Layout with CSS page. Here are easy pointers to the example layouts: 1a, 1b, 2a, 2b, 3a, 3a-percent, 3a-step1, 3a-step2, 3b, 3c, 4a, 4a-alt, and 5.

Floating List Elements

If you float list items, then they will line up horizontally. This is a standard technique for creating navbars.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Here is the code that makes this happen:

<style type="text/css">
.floatlist { float:left; margin:12px; list-style-type:none; }
</style>

and

<ul>
<li class="floatlist">Item 1</li>
<li class="floatlist">Item 2</li>
<li class="floatlist">Item 3</li>
<li class="floatlist">Item 4</li>
</ul>

Recent Pointers

Week 9: 03/25/09 • Final Project Functional Requirements

This week, we will begin talking about the design of your Web site projects.

Upcoming Topics

In the remaining weeks, my plan will be to lecture for the first half of each class, and then leave the remainder of each class available for questions and individual consultations on your projects and problems.

  • Roundtrip HTML: hands-on class demo to create a small Web site, using an external stylesheet and a starting template.
  • Using Javascript on your site
  • Navbars and Menus
  • Search Engines and Site Analytics
  • Image Galleries and Slideshows
  • Blogging and Wordpress
  • Using Dreamweaver
  • Best Practices
  • How to sell from your site
  • Mailing lists, newsletters, email links, and contact forms

Recent Pointers

Week 10: 04/01/09 • Final Project Site Design

This week, we will focus on applying Javascript to pages to create certain helpful effects. I will also talk about some additional topics regarding CSS, including applying multiple classes to a single tag, and using more advanced CSS selectors.

  • Administrivia:
  • Wave hands at interesting new links (see below).
  • Mid-Term Exam today covers the syntax of HTML and CSS, including specific knowledge of the differences between HTML and XHTML, what the DOCTYPEs mean, and a working knowledge of CSS3 attributes and the status of implementation in the top 10 browsers.
  • Discuss the use of Javascript and jQuery to enhance Web sites, with some practical examples: dropdown menus, tabs, charts, image sliders; date pickers, Ajax loading, and more. Here are some code examples:
  • Discuss good design processes for student Web sites.
  • Discuss assignment due next week: the actual design of your project sites.
  • 1-on-1 chats with individuals.

Recent Pointers

Why We Should All Switch to Macs

  • Viruses and Browser Hijacks are rampant on PCs.
  • Microsoft releases inferior Web browsers that must poke holes in OS security to get an advantage. Internet Explorer 6, the bane of all Web developers, was the flagship browser for Microsoft for 6 years without further development. It still comprises 15-20% of the browsing market. Ouch!
  • Inferior OS: instability and lack of security cause terrible problems for people and businesses. Windows XP reportedly had more lines of code than the Space Shuttle.
  • Most PCs look like they are built for sitting in a bank. Macs are prettier on the outside and the inside.
  • Modern Macs are Unix boxes, providing modern operating system niceties like stability and security. They are built by a company that values the user experience.
  • They have a certain snob appeal.

Week 11: 04/08/09 • Topics About Building Sites

Most of the class session will be devoted to a hands-on exercise. We will create a very simple site from a common starting point with 2 or 3 pages of content.

Recent Pointers

Week 12: 04/15/09 • Topics About Building Sites

We will discuss dynamically-generated Web sites, using Wordpress as an example....

Recent Pointers

Week 13: 04/22/09 • Topics About Building Sites

This week, we will talk in some detail about the importance of Google Analytics: how to set it up on your sites, and how to interpret the results.

Recent Pointers

Week 15: 05/06/09 • Going Live with A Site

This week, we will talk about the process of going live with a Web site: following SEO guidelines when creating the site; buying a domain name; arranging domain service with an ISP; uploading your files; site administrivia (analytics, sitemaps). I have added a page to the Web site under Praxis called “Process of Launching a Web Site”.

Next week is the final week of class. We have all learned a lot, and this is your opportunity to show off what you have done in class. I am hoping that this won’t be a stress-inducing exercise. This is about seeing the variety of work, not judging who put the most widgets into their site. Please approach this with that spirit!

Recent Pointers

Week 16: 05/13/09 (Final) • Final Presentation of Student Web Site Projects

Class Presentation: Each student will present their site to the class, while the other students follow along at their own computers.

CIS86 Home • Contact DFF • SiteMap • © 2009, Dennis F. Freeze