Principles of Web Authoring

Course Description

This course teachs the principles of web authoring, both design and content. Authoring effective web content involves writing words for machines and for humans while also designing documents to deliver this content in a variety of settings from cellphones to massive screens to screen readers for the blind. In this course, students will learn strategies to become effective at dealing with this multi-device ecology.

Assignments

The three assignments in this class are designed to match to each of the modules on the class schedule.

Grade Values

  1. Authoring a Web Document (20%)
  2. Designing a Web Page (35%)
  3. Building for the Responsive Web (35%)
  4. Class Attendance (10%)

Assignment 1: Authoring the Professional Biography

For this first assignment, you will be creating an online professional biography using the HTML preprocessor known as Markdown.

Professional biographies are increasingly important due to the proliferation of social media and the increasing reliance on the Internet as a source of information. They narrate the content of your resume and help create a “personal brand.” Differing in goals from a résumé (which is a scannable summary of your work history), a professional biography allows you to market yourself in a different way by creating a more holistic picture of yourself. Similar to a résumé, though, the professional biography is written with a strategic eye toward incorporating keywords and capturing your strengths.

For this document you need to include the following items:

  1. An overview of your skills and goals (including desired employment)
  2. Background on your education
  3. List of skills
  4. List of accomplishments
  5. A photograph that represents who you are as a professional

Additionally, this document must show your mastery of Markdown as a language. You will need to figure out italic, bold, links as well as including images and level 1 and level 2 headers to organize and structure your document.

Style-wise, a professional biography is always written in the third person (“she was born in 1993” not “I was born in 1993”). You will also be evaluated on your usage of web-writing conventions as we establish them in our class discussion.

You will be turning in two documents. Turn-in will be your Markdown document either saved as a .md or a .markdown file, along with the image file you are using to represent yourself. Additionally, a second document (either a .docx, .pdf, or .md file) will offer a brief explanation of the writing strategies you used and the reasons for choosing the image you associated with your biography.

Assignment 2: Designing the Press Release

For the second assignment, you will be learning HTML 5, CSS 3, and also how to use those tools in support of coherent, user-focused web content. Specifically, you will be writing a press release and designing it using the best practices we have studied in class.

Press releases are short documents submitted to news agencies announcing a company milestone or offering support of an initiative. Generally between 300 and 400 words, they are meant to be effective, high-density documents that attempt to capture the attention of an often jaded public.

For this document, you will need to create a fictional company or non-profit organization and write a press release either highlighting an accomplishment of your organization, drawing attention to an event or initiative, or advocating for a piece of legislation or course of action. In addition to this, you will need to design this document using HTML 5 and CSS 3. To do this, you will need to think seriously about your company’s brand identity, including fonts and colors.

Content Elements

The written content of this assignment will have two components:

  1. The release itself.
    • Press releases have attention grabbing headlines.
    • The first sentence needs to clearly articulate what the whole document will be about.
    • Include real-sounding quotations that add impact.
  2. Background on the company.
    • Press releases often also include background on the company.
    • In 2-3 paragraphs (below a separate headline, “About Us” or something similar), explain what your organization is and does.

Design Elements

The web content will contain a number of features.

  1. Brand identity
    • Color scheme
    • Fontography
    • Image or Wordmark
  2. Properly designed site
    • Logo area at the top
    • Properly spaced font
    • Readable line length
  3. Content must include:
    • At least three (3) links
    • One <blockquote> element

Deliverable

You will turn in a .zip archive containing all of the files needed to display your website, including images, stylesheets, and HTML files.

Assignment 3: Rapid, Responsive Websites

For the final assignment in this course, we will be using Bootstrap—a responsive website framework made by the team behind Twitter. Bootstrap has become an industry standard for rapidly producing sophisticated, modern websites. Because of this standardization, knowledge of Bootstrap can both help make you a more effective web author and also help market yourself as a professional web designer. Additionally, Bootstrap easily allows us to make dynamic websites that work across a wide array of devices.

Expanding on Assignment #2, you will be producing a more complete web presence for the company you wrote about. From the press release, you will make a website for your organization that has a consistent UI across each site and will break down into three separate pages (a splash page, a list of products for sale, and a specific product information page, for instance).

You can use my Bootstrap starter kit to get started.

A Note on Documentation

Part of learning Bootstrap is learning by doing. Bootsrap offers solid CSS support, a wide array of components, and a huge user base. For this assignment, part of your challenge will be learning to use documentation and online support communities (mostly Stack Overflow) to figure out problems you run into.

Customizing Bootstrap

Bootstrap is great out of the box, but to make the site display with your brand identity (font, colors, etc), you will need to customize Bootstrap. The tool is very powerful but not terribly difficult. You can save your configuration and extract the .ZIP file directly to your project, as you develop your customize your project.

Hosting

You will be posting your website on ASU’s public site. You can configure your ASU website following instructions here (though the SelfSUB URL is now: https://selfsub.asu.edu/apps/WebObjects/ASURITEManagement).

Once you have this configured (you may have to wait a few hours), you can store files in the www directory of your My Files to post them on the web. From lab machines, you can access this folder by mounting your M: drive. Additionally, following the instructions above, you can upload files using SFTP.

For local development, you can enable a server on your local machine:

Deliverable

You will turn in the URL of your website, hosted on your ASU web space or a host of your choice.