Jonathan Warren studying online social movements from their artifacts

Lab exercises

Table of Contents

2010-08-31: Basic HTML

  • Choose a text editor
    • recommendations: jEdit is a good cross-platform (any operating system) editor, Notepad++ for Windows-only users, SubEthaEdit or BBEdit for Mac-only users, <oXygen/> for John Walsh's students, Gedit or Kate for Linux users, and vim or emacs (or an IDE) for advanced Linux users. (You may use a graphical/WYSIWYG editor, such as Dreamweaver or FrontPage, but the code you turn in must comply with the international standards and best practices taught in class. Amaya and Kompozer are graphical editors that produce fairly clean code.)
  • Start creating your resume in HTML, using whatever you remember from S401 and the things we review during class. Next week we will make it XHTML Strict compliant.

2010-09-07: XHTML

  • everyone:

    Start creating a resume (the basis for your first resume assignment), written in XHTML Strict 1.0 (or 1.1), with at least the following features:

    • your name, large at the top
    • an image of yourself
    • a table of contents, with in-page anchors linking to the page's sections
    • at least three sections (e.g., contact info, education, work experience, skills, etc.), though the exact number and contents of the sections do not matter. For safety reasons, please do not use your real contact information.
    • an ordered list with two/nested levels
    • a table with a row of headers, and at least one instance of both rowspan and colspan. Remember not to use tables for page layout (CSS positioning is coming soon).

    This version of your resume will look quite bland, until we learn CSS. The following deprecated, CSS-replaced, and proprietary elements and attributes should not be used:

    • Elements: animate, applet, audioscope, b, basefont, bgsound, blackface, blink, blockquote, bq, center, code, comment, dir, embed, fn, font, i, ilayer, image, isindex, layer, limittext, marquee, menu, multicol, nobr, noembed, nolayer, nosmartquotes, s, samp, shadow, sidebar, sound, spacer, strike, u, wbr, and xml (which is different from <?xml version="1.0"?> )
    • Attributes: alink, align, autoactivate, background, bgcolor, bgproperties, border, bordercolor, bordercolordark, bordercolorlight, cellspacing, cellpadding, color, compact, controls, dynsrc, face, frame, framespacing, halign, height, ibmlogo, internal-gopher-menu, language, left_arrow, left_margin, link, loop, marginheight, noshade, nowrap, red_bullet, rightmargin, size, start, target, text, type (except on script tags), usestyle, valign, value, version, vlink, and width

    The resume may be either divided into multiple pages or all on one page. The one-page format is more common out on the job market, because it's easier for a potential employer to print and save.

  • advanced: try to understand and duplicate some of the HTML 5 demos in these pages:

2010-09-14: CSS basics

  • everyone: identify the three types of CSS, class and ID selectors, and how to use properties and {braces}
  • intermediate: experiment with adding different inline CSS properties to your resume, try using all three types of CSS (inline, in-page, and external), and try different selectors
  • advanced: try selectors that are more complex than classes and IDs

2010-09-21: Intermediate CSS

  • everyone: try 1-3 of each type of property covered in the notes on your resume code.
  • intermediate:

    try to duplicate the positions of the following blocks using divs and CSS positioning (in an empty file):

    css positioning exercise 1 of 2 css positioning exercise 2 of 2

    solutions

  • advanced: using only CSS positioning, make a multi-column page with a footer that stays at the bottom edge of the content. One solution is available here.

2010-09-28: Advanced CSS

2010-10-05: IA

2010-10-12: Web project management

2010-10-19: Accessibility

2010-10-26: Graphic design & review

Mid-semester review/discussion questions

  • What kinds of elements and attributes are not included in the XHTML Strict standard, and why?
  • Do the directions in which XHTML, HTML, and CSS are developing make following IA principles harder or easier to implement?
  • What are the three kinds of CSS, and when is each appropriate?
  • With respect to what are relatively and absolutely positioned elements positioned?
  • Describe the difference between "Big IA" and "Little IA". Where does each fall in JJ Garrett's model?
  • If I wanted to make a website for the Monroe County Public Library downtown, what local-contextual factors should I consider?
  • Imagine you walk in the front door of a random organization. How could you go about creating the navigation/page structure for their website?
  • Describe an ideally accessible website. Why is it hard to achieve? What are the tradeoffs?
  • Try to characterize people who do things like "management", "architecture", "development", "design", and "service" (and have a sense of which you want more/less to be)?

2010-11-02: Programming basics

2010-11-09: HTTP, CGI, and PHP forms

  • everyone: try to make the Lindley Hall slideshow code from the HTTP notes work on your Ella account
  • everyone: try to make the basic form and PHP combination (i.e., the 1-2-3 process) from the PHP notes work on your Ella account
  • advanced: try putting both an HTML form and the PHP output script in the same .php file
  • advanced: explore the readings from the occasionally offered PHP workshop

2010-11-16: Javascript, DHTML, & Flash

2010-11-23: Domains, hosting, & CMSs

  • everyone: try to follow along as I install Drupal on my personal server, and show you around typical hosting and CMS control panels
  • everyone: explore live demos of Wordpress, Gallery, and Joomla (content management systems, besides Drupal, that you are likely to encounter in your future LS and IS jobs).

2010-11-30: XML, RSS, & SVG

  • everyone: using this simple RSS feed as a template, make your own RSS feed by hand, put it on Ella, and subscribe to it with your RSS reader of choice (e.g., Firefox, Google Reader, Bloglines, Thunderbird, RSS Owl, etc.). If you want, here is a brief tutorial.
  • everyone: look through the "SVG Tutorial" section of this page, to see the basic capabilities of SVG.
  • everyone: check out what's possible with SVG on Inkscape's screenshot and showcase galleries.
  • advanced: inspect and try to understand the code from one or more of the examples in the "SVG in Action:" section of the previous link
Archived in