Course Information
  • A graduate course in the theory and practice of structuring and designing information for web-enabled devices. This course emphasizes web standards, accessibility, and rapid prototyping.
  • The class meets Monday nights from 6:25-9:05 in Siegel Hall 237 at Illinois Institute of Technology, Chicago, IL.
  • Dr. Karl Stolley, Instructor.
  • Office Hours: M/T 4:00pm - 5:30pm (and by appointment) in SH 208.
  • karlstolley on Twitter, AIM, and @gmail.com
Wiki Controls
Reference Materials
Code References and Libraries
Development Tools

Course Home and Latest News


Project Three Turn-in Procedures

May 3, 2009

We will go through these steps in class together tomorrow night. Also, if you feel you would like to spend more time on this project, I will be accepting final projects until Friday, 2/8 at noon.

The basic steps are:

  • Change the admin password to gradethis
  • Export the database using phpMyAdmin on your USB drive
  • Place the database file into your custom theme's folder
  • Change the admin password back to whatever you'd had it set as
  • Zip up your custom theme folder
  • Move the zip file to the desktop; unzip and make sure everything is there
  • Send the zip file attached to the email with your final memo

And here are the detailed instructions:

Change the admin password to gradethis by logging into your WordPress installation at http://localhost/wp-admin/. Once you've logged in, follow the links on the left for Users > My Profile, or just go to http://localhost/wp-admin/profile.php and scroll to the bottom to enter a new password, gradethis.

Export the Export the database using phpMyAdmin on your USB drive by going to http://localhost/phpmyadmin and logging in with your database user (root) and password (unsafe).
    • Choose the Export tab (upper right)
    • in the Export pane, click on the name of your WordPress database (whatever you named it)
    • On Database export options select "Add DROP DATABASE"
    • Under data, deselect "Extended inserts", but leave "Complete inserts" selected
    • At the very bottom, select "Save as file"
    • For File name template, delete __SERVER__ and type your last name followed by -project3, e.g., smith-project3
    • Double-check these settings, and then hit Go; you'll be prompted to save a file.

Save or save and then move the database's export file into your custom theme folder, which should be a folder in /wp-content/themes.

Zip up your custom theme folder and ONLY your custom theme folder (e.g., do not zip up the whole /wp-content/themes folder).

Move the zip file to the desktop; unzip and make sure everything is there including your SQL file from the database export.

Send the zip file attached to the email with your final memo and have a great summer.

Installing WordPress

April 13, 2009

I've put together instructions for installing WordPress on your USB drive running XAMPP. We'll do these together in class next week, but feel free to try them yourselves.

Project 2 Sites

April 13, 2009

Tricia Nowacki
Brad Dalrymple
Halcyon Lawrence
Laurie Riley
Alison Somilleda
April Wedekind
Ed Scott
Shimoni Sheth
Cynthia Laughlin
Kelly's Website, http://kellyannschaefer.com
Carmen McDonald
Jaime McCabe

Project 2 Turn-in Checklist and Procedures

April 7, 2009

Project Checklist

  • The Basics:
    • Is your site hosted and available at the domain you registered?
    • Do your pages have short, memorable meaningful names (e.g., resume.htm)?
    • Does your XHTML validate as XHTML 1.0 Strict at http://validator.w3.org ?
    • Does your CSS validate at http://jigsaw.w3.org/css-validator/ ?
    • Does your site display appropriately (though not necessarily exactly the same) in Firefox, Safari (or Google Chrome, if you have no Mac access), Opera, and Internet Explorer (IE)?
  • XHTML & Structure:
    • Does your XHTML feature a sensible source order (structured for content, not presentation/design)?
    • Does your XHTML include accessibility features, such as links for skipping to navigation or content sections?
    • Does your XHTML use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes?
    • Is your XHTML hand-written and original? (That is, you have not ripped off the XHTML from another website or template, with the exception of the rapid-prototyping files provided by the instructor, which you are encouraged to have used.)
    • Is your XHTML free from tables (except for tabular data)?
  • CSS & Design:
    • Is your CSS--for screen, print, and possibly IE--loaded into your XHTML via the <link> tag?
    • Is your CSS hand-written and original, and not taken from another site or template?
    • Have you used conditional comments to load special/corrective CSS for IE, when necessary?
  • DOM/JavaScript:
    • Are you making use of the MooTools JavaScript Framework?
    • Are you adhering to progressive enhancement design principles (in other words, does your site still work in JavaScript-less environments)?
    • Are your pages free from any JavaScript errors? (Use the Pederick toolbar to help you determine this.)
  • The Big Stuff--Have you:
    • Established a solid and sound representation of yourself and your skills, based on your career or field of study/area of expertise?
    • Organized and styled your professional site for maximum rhetorical effect?
    • Learned to prepare and organize appropriate materials to represent yourself in a portfolio?
    • Learned to use CSS to control the layout and design of XHTML pages?
    • Learned to use JavaScript on the DOM to progressively enhance your pages for JavaScript-capable browsers and devices?
    • Learned to develop your site in a baseline browser, to test in other browsers, and use conditional comments to address the oddities of Internet Explorer?

Turn-In Procedures

To turn in your project, simply email the instructor your URL and self-critique memo, which should evaluate your project and your progress in the class to this point.

Free and Open Source (FOSS) FTP Clients

April 6, 2009

To get your files from your home computer or USB drive, you'll need to use an FTP client. Here are some free and open source clients to try out (consult your web host's documentation for help with how to connect to your server).

Windows: WinSCP
Mac OS X: Cyberduck

Still Looking for a Web Host?

March 30, 2009

Here are some suggestions from your classmates.

Project One Turn-in Procedures

February 22, 2009

Turning in Project One consists of two parts: the easy part is to post your memo to the wiki, prepended with your username (e.g., KarlSProjectOneMemo.

The second part is to send your web folder (htdocs, if you're using a blank one with XAMPP) with your:
  • Two XHTML files (resume and portfolio item)
  • One screen CSS file, which styles the two XHTML files
  • Any image or media files that you added to your pages as links or using the <img /> tag

Once you have sent that folder to a .zip file, email it to karl.stolley@gmail.com with the subject line COM530: Firstname Lastname Project One, replacing Firstname and Lastname with your first and last names.

Before you email me the ZIP file, copy it to the desktop, remove your USB drive, and extract your files from the ZIP and view your project in a browser. If your site doesn't appear correctly under those conditions, it won't appear correctly for me. Go back and check that you are using relative paths to your CSS, images, etc., and not paths with http:// or G:/ in them.

Showtunes at Sidetrack

Going Monday, February 23, 2009

If you are interested in heading north for a cocktail and some showtunes after class Monday night, join a few of us at a video bar called Sidetrack. From their website: "Sidetrack is Chicago's premier Video Bar. Catering to the Gay and Lesbian community we play today's hottest hits and our timeless original clips and productions." Location: 3349 North Halsted Street.

Posted by KellyS

From Today's IIT Today

February 16, 2009

Call for Nominations: 2009 CSL Undergraduate Summer Research Stipends
The College of Science and Letters believes strongly in research experience for undergraduates. Research allows students to explore their interests, solve problems, advance knowledge, and prepare for the next step - whether graduate school, medical school, or the workplace.

The College of Science and Letters will award a $5,000 stipend to select undergraduates to perform 10 weeks of research under faculty supervision this summer. The deadline for nominations by faculty is February 27, and awards will be announced in April.

All CSL majors are eligible. Last year's winners included humanities, computer science, and applied mathematics students, in addition to biology, chemistry, and physics students. Their research areas ranged from cancer therapy and imaging, to problems in graph theory, to machine-medicated communication. Read more about 2008 CSL undergraduate research here.

Research opportunities for CSL undergraduates are available as early as the second semester of freshman year and are guided by world-class faculty who have received national and international recognition in their respective fields.

Read more about the program and nominate a student at the CSL website.

As Soon as You Sit Down Tonight...

February 9, 2009

Go to the XAMPP installation page and follow the instructions for downloading and unzipping XAMPP. The download will go fast (just put it right on your desktop), but the unzipping takes a bit longer (unzip it to your desktop by right-clicking the .zip file, choose 7-Zip > Extract here, and move it to your USB drive after as soon as it's unzipped). Moving the xampp folder to your USB drive takes forever, so do this immediately tonight.


Getting More Out of Notepad++ with HTML Tidy

February 5, 2009

As you're duking it out with XHTML this week, you might want to try out HTML Tidy if you're working with Notepad++. Tidy will fix an awful lot of errors in XHTML code. However, to get it to run properly, you must create a folder called NppTextFX in the plugins folder. Once you have created that folder, you can start Notepad++ and open your XHTML file; go to the TextFX menu, then choose TextFX HTML Tidy. I recommend the TiDy clean Document - wrap option. If HTML Tidy catches an error, it will give you an alert box pop-up; you can view the error report in the NppTextFX folder.

In addition to correcting errors in your XHTML, Tidy will also clean up the line wrapping for long chunks of text, and neatly indent all of your nested XHTML tags. Try it, you'll like it.

Smultron/Mac users might want to try a web-based version of Tidy at http://valet.htmlhelp.com/tidy/


One of Our Tech Comm PhD Students Needs Your Help

January 27, 2009

Please look at this note from Stephany, one of your fellow IIT graduate students, who needs subjects for her dissertation study.


First Night of Class

January 26, 2009

Welcome to the course website for COM530: Online Design. You'll want to bookmark this site for future reference; beyond containing the policies for successful completion of the course, it also contains the course calendar with each week's class agenda and readings and activities for the next meeting. We'll go over both the policies and the calendar tonight.

One of the other important orders of business tonight will be for everyone to register on the wiki. A top-secret invitation code will be given in class that you'll need to register; please set your username (aka "wiki name") as your first name and last initial (e.g., Karl Stolley is KarlS, Jane Smith is JaneS and so on). Read more about naming conventions on the wiki. This will help keep everyone clear on who's doing what on the wiki, while also avoiding having this site show up in a Google search for your full name.

(By next week, edit your page with a short introduction to the class, and then add your name on the Course Members page in alphabetical order. See the WikiHelp page for more information on using the wiki.)

Also, if you don't have a Delicious or other social bookmarking account, you'll need to register for one. You'll use the tag com530 to mark links you find that are of relevance to the class--anything from standards-based web design tutorials to news stories with a web writing/design angle to them. Starting next week, your com530-tagged Delicious bookmarks will appear on the wiki.

Finally, we'll spend just a little time tonight setting up a few other course technologies and covering what's expected of you for next week.

Again, welcome to the course.--Karl


Author:


There are 57 comments on this page. [Display comments]

XHTML 1.0 :: CSS :: Powered by WikkaWiki
Page was generated in 0.1214 seconds