About the Course Calendar (updated 2/5/2017; 2/27/2017)

Texts are to be read/watched/listened to for day they are listed. For example, Duckett is to be read for Monday, January 30. Homework in addition to texts will be presented in yellow. The schedule is subject to change; it is your responsibility to check it regularly.

Week One: Introductions

W 1/18: Introductions, Syllabus, Books

Assignment for Friday, 1/20
Please read the Syllabus carefully and come to class with any questions you have.

Please download each of the following required software applications, including the multiple browsers:

• Brackets plain-text editor (free)
• Firefox Developer Edition (free)
  • FireFTP Firefox Add-on (free)
  • Web Developer Toolbar Firefox Add-on (free)
• Github Desktop (free)
• Image-editing software (such as the free and open-source GIMP)
• As many different browsers as your operating system supports (e.g., Chrome, Opera, Firefox; all free)

If you do not have a Twitter account, or have one only for personal use that you do not want to use for class, please create one and have one with you in class.

F 1/20: Bill Sick; no class Coding Friday: Sample HTML5 & CSS page
Hand out Social Media Assignment

Week Two: History & Web Standards; Begin Unit I

Assignment for Monday, 1/23
You are required to have your own web domain, which you should have purchased in COM 200. If not, or if it has expired due to lack of rue, please go to Reclaim Hosting and register a URL, which is $25 a year. Make sure your URL is professional and easily identified with you, like williamwolff.org is identified with me. Choose a .com or .net domain; try to avoid .org unless the others are taken. You must have your URL with you in class on Monday. Make sure you see the confirmation email Reclaim Hosting sends to you that has the subject heading, “[Reclaim Hosting] New Account Information.” It may take a day to get that confirmation email, so please don’t wait until Sunday night to sign up.

M 1/23: Sample HTML5 & CSS page; sample-style-css.pdf; sample-html.pdf
Hand out Social Media Tweeting and Design Journal Assignments

Assignment for Wednesday, 1/25
Read through the Social Media Tweeting and Design Journal Assignments and follow everyone you are asked to follow.

Please read Abbate’s (2000) “Introduction” to Inventing the Internet (see Readings page), “40 Maps that Explain the Internet,” and the Mission and History of the Web Standards Project. Then, watch the following videos:

First, which is Part 1 of 9 described as, “On December 9, 1968, Douglas C. Engelbart and the group of 17 researchers working with him in the Augmentation Research Center at Stanford Research Institute in Menlo Park, CA, presented a 90-minute live public demonstration of the online system, NLS, they had been working on since 1962. The public presentation was a session in the of the Fall Joint Computer Conference held at the Convention Center in San Francisco, and it was attended by about 1,000 computer professionals. This was the public debut of the computer mouse. But the mouse was only one of many innovations demonstrated that day, including hypertext, object addressing and dynamic file linking, as well as shared-screen collaboration involving two persons at different sites communicating over a network with audio and video interface.”

Second, watch this 40-minute video about web design pioneer Jeffrey Zeldman: 20 years of Web Design and Community:

After reading and watching, I’d like to to think about her final thought that the internet “was constructed through a series of social choices” (p. 6). Tweet 3 ways in which the texts and videos you read and watched show what she is discussing. And reply to 2 of your classmates’ tweets as a way to have a conversation. Be sure to use the #wdds17 hashtag on all your class-related tweets.

W 1/25: Abatte, Maps, Douglas Engelbart, The Mother of All Demos, Web Standards, Zeldman video

Assignment for Friday, 1/27
The assignments for Friday are to prepare each of us to be ready to code and upload our first basic page during class.

First, make sure you have your own personal domain (such as, williamwolff.org) created using Reclaim Hosting. Something that looks like http://yourname.wordpress.com is not correct. It must be your own domain. Do not wait until the last minute to set up your domain. It takes some time for it to be ready for use.

Second, make sure you have installed Firefox Developer Edition, FireFTP Firefox Add-on (free), and Brackets plain-text editor (free) on your laptop. Bring your laptop (if you have one) to class with you on Friday.

Third, look at your URL online. Do you see a blog there? If not, skip to Four below. If so, you need to move your blog to different location. Please do so by following this tutorial:

Fourth, you will need to set up your ability to connect to your server and upload files. To do this, you will need to configure FTP access and try to log in the first time. To do so, follow this tutorial:

If you have questions or run into some issues, tweet @billwolffsju with the #wdds17 hashtag with your questions.

F 1/27: Coding Friday: FTP, servers, text editor, workflow, coding a basic page

Week Three: HTML/XHTML/HTML5

Assignment for Monday, 1/30
Please read Duckett, chapters 1 – 5. While reading please tweet 5 questions you have. Respond to at least 5 classmates’ tweets where you are helping them answer those questions. In class, we’ll start working through some HTML basics.

M 1/30: HTML Basics; Duckett chapters 1 – 5
Hand out Story of Learning Assignment
W 2/1: HTML5 Basics; Keith & Andrew, chapters 1 & 2
Hand out Responsive Resume Assignment

Assignment for Friday, 2/3
Please read chapters 5 and 6 in Keith & Andrew’s HTML5 for Web Designers and, as previously, tweet questions you have and attempt to respond to your classmates.

Please bring with you a digital copy of your resume. We will start to mark it up with HTML in class on Friday.

For homework I’d like you to continue working on experimenting in the sandbox index.html file we created in class.

In that file, please complete the following:

• create an ORDERED LIST in which you rate your top 5 movies of all time.
• create an UNORDERED LIST in which you list your top 5 favorite bands or musicians.
• in that list, link to each band’s web site (if they have one)

To complete this work, use the Duckett book as a reference. You will need to connect to the server through FireFTP in one browser tab, view the sandbox page of your web site in another browser tab, and Brackets to edit the index.html file.

We will build on this page in class on Friday.

F 2/3: Coding Friday: Sandbox play  Marking up your resume, Keith & Andrew, chapters 5 & 6
Part 1 of My Story of Learning due by 11:00pm

Week Four: HTML5

Assignment for Monday, 2/6
I’m going to be updating the course schedule so please ignore what is there. I’ll email you when it is adjusted.

Part 1 of My Story of Learning assignment is due 2/3 by 11:00pm.

Your first Story of Learning is due 2/4 by 11:00pm.

More to be added.

M 2/6: Starting to mark up your resume; header tags; sample.html
Hand out Responsive Resume Assignment

Assignment for Wednesday, 2/8 (updated)
Please read Keith & Andrew, chapters 5 & 6, which, in part, discusses additional HTML elements that have been created for HTML5.

Looking to Keith & Andrew’s discussion of <header></header>, <section></section>, and <article></article>, I’d like you to apply them to your resume.html. The elements can be used repeatedly on the page, so don’t think you need to use them only once.

<header> can be used to block off content at the heading of your resume, such as your name, but as seen on page 74, should be used with subheadings, as well.

<section> and <article> are used to group related content. Use their discussion starting on page 73 to help with organizing similar content in your resume.

We’ll take a look at what you come up with in class.

If you were absent on Monday, here is what we did:

1. Right click on and then save the sample.html file as resume.html into your web design folder on your computer. This file will be the one we use to create our resume.
2. Copy your resume from your Word doc and paste it into resume.html between the <body></body> tags. Placing it there is VERY IMPORTANT.
3. Mark up the resume with header tags (<h1></h1>, <h2></h2>, etc.), <p></p>, and ordered or unordered list tags.
4. Upload the resume.html file to the main directory on your server (do not put in the sandbox folder). You can see your resume online at yoururl.com/resume.html, such as billwolffsju.com/resume.html (we used Kelly’s as a sample).

W 2/8: Keith & Andrew, chapters 5 & 6; HTML5 organization

Assignment for Friday, 2/10
Building on what we did in class with <header></header>, <section></section>, and <article></article>, finish coding your resume.html.

Also add links, bold (<strong></strong>), and italics (<em></em>) where possible.

Make sure your code is cleanly laid out using indents and spacing between lines. We’ll discuss more options in class.

In addition, I would like you to compose a 250-300-word statement that describes your approach to whatever job you are looking for. This is not about the kind of job you want, but about you as a future social media designer or food marketer or artist or whatever job you see yourself in. What are your core beliefs about that job and how do your beliefs connect? What current industry trends do you support and why? Adopt the voice of a professional in the field and not a student looking for a job. (In fact, if you have a Summary section of your resume remove it.) Link to examples of work you have created that illustrate what you are saying. Let people who don’t know you understand who you and what you believe.

When done, create a Professional Statement heading above your resume and paste in the statement. Use paragraphs and code it with the same tags we’ve been using.

See http://billwolffsju.com/resume.html for an example of what I mean. Notice the way that I am wording, based on beliefs and practices.

F 2/10: More HTML5 organization
Discuss Design Journal Assignment

Week Five: CSS Basics • Bloggers: GO, MF

Assignment for Monday, 2/13
This week we start talking about CSS. Please read Duckett chapters 10 – 12. Tweet 5 questions you have about CSS and try to answer your classmate’s questions.

Remember your Stary of Learning Week 4 Weekly Update is due on Saturday, 2/11.

M 2/13: CSS Basics, Duckett chapters 10 – 12

Assignment for Wednesday, 2/15
Please read Duckett chapter 14 (only content relating to LISTS). Tweet 5 questions you have about CSS lists and try to answer your classmate’s questions.

Go to the Responsive Resume Assignment and download the bare bones HTML5 and CSS files (.zip) files. Put the .css files in the CSS folder you created on your computer. You don’t need to do anything with the .html file, as you are already using it for the resume you’ve been working on.

We’ll be working with your resume.html and the .css files in class on Wednesday, so please have them ready to go BEFORE you get to class.

W 2/15: More CSS Basics, Duckett chapter 14 (only content relating to LISTS)
F 2/17: More CSS basics, Marcotte chapter 3

Week Six: CSS & HTML5 Boxes and Layout • Bloggers: AM, JR, DM

Assignment for Monday, 2/20
Please read Duckett, chapter 13, which is about CSS Boxes. These can be tricky, so tweet all questions you have.

In your resume.css file, please style your headings, definition lists, and paragraphs with the following properties:

font-family:
font-size:
color:

Style your ordered and unordered lists with the following properties:

font-family:
font-size:
color:
list-style-type: 
margin-left: 50px;

For the font-size, please make them ems. The default font size for your browser is 16px or 1em. Header tags follow these traditional sizes:

h1 = 32px = 2em 
h2 = 24px = 1.5em

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

You can change these, of course, but this is a good starting point.

Remember, your weekly status updates are due by 11:00pm on Sat.

M 2/20: Duckett chapter 13, CSS Boxes

Assignment for Wednesday, 2/22
There is no reading for Wednesday. I would like to continue to working on your resume by applying margins to your headings (h1, h2, h3, etc.), paragraphs, and lists.

In class on Wednesday, we will be working on making boxes out of your sections.

This Friday, 2/24, is a VERY IMPORTANT class—even more important that the others. Please make sure you are present.

W 2/22: More with CSS Boxes

Assignment for Friday, 2/24
The work for Friday is going to prepare us for moving from basic web design to more advanced design. Specifically, we are going to be thinking about the needs of users using different devices.

Please read chapters 1 and 4 in Marcotte’s Responsive Web Design (see Readings page). Chapter 1 introduces the ideas behind responsive design. Chapter 4 introduces media queries, the code that allows your web site to appear differently on different screen sizes.

After reading the chapters, open your resume.css file. As you scroll down, you will see the following media queries already included (I’ve added ADD RULES HERE below):

/* end main */

@media screen and (min-width: 320px) { /* mobile phone portrait view */

ADD RULES HERE

}


@media screen and (min-width: 768px) { /* tablet portrait view 8 */

ADD RULES HERE

}

@media screen and (max-width: 1024px) { /* computer widescreen view */

ADD RULES HERE

.clear {
    clear: both; /* necessary for floating elements; do not remove */
} 

}

For Friday, I’d like you to start to think about how you think your resume should appear on your phone and in the phone media query, where it reads ADD RULES HERE, create new rules for any of these that you have:

body, h1, h2, h3, p, ol, ul, li, dl, dd, dt, and section.

To test that the new rules are working you can either view your resume on your phone or you can make your browser window really thin. You should see changes.

Tweet screenshots of your resume as it looks on your phone and computer using the #wdds17 hashtag. Remember to obscure any info you don’t want to appear, such as phone numbers.

Good luck!

F 2/24: Making Resume Responsive; Marcotte chapters 1 and 4

Week Seven: CSS layout • Bloggers: EZ + 1 needed

Assignment for Monday, 2/27
Please read Duckett, chapter 15, up to page 386. You do not need to read about the grid system. We’ll be getting to that in Project 2.

As we discussed in class, I would like you to make sketches of how you would like your resume to look on a phone, tablet, and computer as a way of helping you figure out how to code it. Your sketch can be very basic, as was the one I put on the board in class:

Then, I would like you to code each of the screen sizes in your resume.css file. As we discussed in class, rules that will apply to all screen sizes should be placed outside the media queries. For example, your font-family might be the same regardless of screen size, but the font-size and other characteristics will certainly change:

/* main */

/* use this section for styles that will stay the same across all screen sizes */ 

body {
      background-color: white;
      margin: auto;
}

h1 { 
font-family: Helvetica, Arial, sans-serif;
color: black;
}

/* end main */

@media screen and (min-width: 320px) { /* mobile phone portrait view */

body {
width: 98%;
    }

h1 {
font-size: 1.4em;
margin-top: 1.2em;
    }
}

@media screen and (min-width: 768px) { /* tablet portrait view */

body {
       width: 90%;
    }

h1 {
       font-size: 1.6em;
       margin-top: 1.4em;
}

@media screen and (min-width: 1024px) { /* computer widescreen view */

    body {
        width: 80%;
     }

    h1 {
       font-size: 2em;
       margin-top: 1.6em;
     }

}

Take screen shots of each size of your resume as you are working on it and tweet it with any questions you have to #wdds17.

Remember, your weekly Story of Learning update is due and try to comment on the blog posts.

M 2/27: Duckett, chapter 15, CSS Layout

Assignment for Wednesday, 3/1
Please continue working on coding your floats and divs, which we worked on in class. Here is the sketch I put on the board:

Tweet screenshots of your progress.

There is no additional reading for Wednesday.

Thanks for all your hard work! I know this is complex; I’m excited to see how far you have come with your coding!

W 3/1: More with CSS layout
F 3/3: Resume Draft Due; Validation testing; resume-draft-checklist.pdf
Saturday, 3/3: Resume Final Draft and Reflections Due

Week Eight: Conferences

In Preparation for Resume Draft Conferences
As a way to prepare for your resume draft conferences, please make sure you can check off each item on the Resume Draft Checklist I handed out in class on Friday (resume-draft-checklist.pdf). Try to figure out as many of the validator errors/warnings as you can. I’ll help you work through the ones you cannot. Tweet your successes and your questions.

Please remember to complete your weekly Story of Learning update.

See you at your conference next week!

M 3/6: Class Canceled for Conferences to discuss resume drafts
Midterm Story of Learning due by 11:00pm
W 3/8: Class Canceled for Conferences to discuss resume drafts
F 3/10: Class Canceled for Conferences to discuss resume drafts
Resume Final Draft and Reflections Due by 11:00pm

SPRING BREAK 3/13 – 3/17

Week Nine: Conferences

M 3/20: Class Canceled for Conferences to discuss Stories of Learning
Midterm Story of Learning due by noon
W 3/22: Class Canceled for Conferences to discuss Stories of Learning
F 3/24: Class Canceled for Conferences to discuss Stories of Learning

Week Ten: Emotional Design and Sketching Layouts • Bloggers: QR, KH

Assignment for Monday, 3/27
Please read chapters 1, 2, and 3 of Aarron Walter’s Designing for Emotion (it’s a quick read with lots of pictures) and Kissane’s “A Checklist for Content Work.” All readings can be found on the Readings page.

(If you are interested in user-centered design [and who isn’t, really], I have added to the Readings page the [very important and cool] first chapter of the book by Don Norman that Kissane mentions . It is not required, but you will get much from it.)

Search the web for FIVE portfolio web sites by professionals in the field(s) you wish to go into upon graduation that you think embody emotional design principles and employ content well. Tweet links to each and state how each embodies a different on of Walter’s and/or Kissane’s ideas.

M 3/27: Emotional Design

Assignment for Wednesday, 3/29
Please read chapters 4 and 7 in Walter’s Designing for Emotion and chapters 1 and 2 in Jason Santa Maria’s On Web Typography. 

After reading, I’d like you to speculate on Twitter a bit about the relationship between emotional design and typography. Think through some ideas in about 3 or 4 tweets. Reply to your classmates, as well.

We’ll discuss all of these in class on Wednesday.

W 3/29: Emotional Design and Typography

Assignment for Monday, 4/3
Please not that class is not meeting on Friday, 3/31. Please use this time to complete the following assignment because there is a lot. Do not wait until the last minute to complete it.

Please read chapters 3 and 4 in Jason Santa Maria’s On Web Typography. Please also read Coa’s and Neidlinger’s posts on the psychology of color. Spend some time playing with the Color Assistance Tools Coa mentions and try to come up with some palettes you like. See the Readings page for all readings. (And if you totally love color and love music, you might look at the very fun The Sound of Color that Kelly-Moore Paints put together to create a color palette for rock, punk, and other musicians.)

Please watch the below TED talk by Simon Sinek:

After watching Sinek’s talk, I’d like you to write down two of your Whys? First address the question: What is your core belief that guides all of your actions in the world? Second, address the question: What is your core belief that guides (or you hope to guide) your actions in the workforce? Start each sentence with “I believe. . . .” The two can be related, though they don’t need to be.

AFTER completing the reading and writing your Whys, I’d like you to start completing a Design Persona for your web site. Walter discusses the Design Persona process on pages 35 – 47. On pages 36 and 37 he lists the key sections of a Design Persona. Download a copy of the Design Persona Template (.pdf), which adds additional features. Using the Template as a guide, create your own Design Persona for your web site. To see what a well crafted person looks like, see this one for MailChimp (.pdf).

When completing your Design Persona, think carefully about the typography readings and what we have discussed in class about personality and design. Try to incorporate your Why statements, as well. These are key indicators of who you are and if you want your site to be a person, it should showcase at least the second Why.

Bring TWO PRINTED copies of your persona to class on Monday.

F 3/31: Class not meeting

Week Eleven: Bloggers: AF, MM, PF

M 4/3: Design Personas

Assignment for Wednesday, 4/5
Please read chapter 2 in Marcotte on “The Flexible Grid.” I will have graph paper in class, but be sure you have your graph paper notebooks to use for the rest of the semester.

Please also read “Why Whitespace Matters” by Paul Boag. While reading and taking in his article about white space, I want you to pay attention to how he has structured his typeface. His site is just laid out so well and is so readable it makes me happy. We will discuss in it class briefly in comparison to the two sites we looked at last Wednesday.

Tweet about the reading as you have always done this semester.

W 4/5: Boag on whitespace; Marcotte, chapter 2: Grid Systems, Sketches, and Layouts; sample-grid-sizes.pdf; grid-fun.docx

Assignment for Friday, 4/10
Using the large graph paper I handed out in class, I would like you to sketch the front page of your web site for THREE screen sizes: 1200, 768, 320. Look to the Sample Grid Sizes handout to determine the content sizes, column and gutter widths. And use Marcotte to help see how designs are understood on grid layouts.

Use a scale where one graph paper box equals a total number of pixels. Find a ruler and use it to help draw the lines.

Your front page must be bold, emotional, clean, and consistent with your design persona. You can be bold in terms of images, image size, color, typeface, typeface size, amount of whitespace, and/or overall layout. I want your pages to stand out in a crowd of 1000s of other web pages. Incorporate a significant amount of whitespace.

We will be discussing images next week, so feel free to incorporate them into your design. Don’t forget that borders can be rounded.

Your front page should include at the very least: your name, your professional field, and a truncated version of your workforce Why (created for your design persona). It should also have a navigation bar that links to About, Portfolio, and Contact pages. You might also link to social media using the associated icons.

Draw each design feature and label the appropriate width in both pixels and percentages. Also create names for each of the boxes you draw.

Tweet photos of your layouts and bring them to class.

F 4/7: Layouts and Sketches

Week Twelve:

Homework for Monday, 4/10
Please read Duckett Chapter 6, “Images,” and Marcotte, Chapter 3, “Flexible Images.”

 

Using what we discussed in class, code your new web site index.html and CSS using the sample files in this ZIPped file: p2-sample-files.zip. When you download, rename the files: index.html and main.css.

Try to code as much as you can, including images. We will be using web-based fonts for this project and I will have a tutorial for you about that so you can use place-holder fonts for now. Code all three screen sizes. Make sure you use html5 elements, like <header></header> and <section></section>.

Upload the index.html to your main directory and main.css to your CSS folder.

M 4/10: Marcotte, Chapter 3: Flexible Images; Background Images and Google Fonts

Assignment for Wednesday, 4/12
Please reading everything under the Accessibility and Usability Readings heading on the Readings and texts page.

Continue to code the layout of your web site. We will practice more with images in class on Wednesday, especially applying accessibility guidelines.

W 4/12: Accessibility; Navigation, coding-horizontal-navigation.pdf
Hand out Grid-Based Responsive Professional Site Assignment
F 4/14: Class Canceled — Easter Break

Week Thirteen: Bloggers: AS, KF, HK

M 4/17: Class Canceled — Easter Break

Assignment for Wednesday, 4/12
Please reading everything under the Accessibility and Usability Readings heading on the Readings and texts page.

We will practice many of the techniques in class on Tuesday.

T 4/18: Class Meets; Accessibility
W 4/19: Accessibility

Assignment for Friday, 4/21
I would like you to have a fully coded front page of your web site (index.html) for at least 1 screen size. The page should be complete with

• html5 structural tags (<header></header>, <section></section>, <nav></nav>, and <footer></footer>)
• working navigation
• working GoogleFonts import
• alt and title tags with appropriate descriptive text for all images
• title tags in all links
• appropriate links to about, portfolio, and contact pages
• grid math added as comments in your CSS file, such as /* 500 / 1800 */

Please also create and upload your about.html, portfolio.html, and contact.html pages. Add some filler text for now. To create the files, use the sample html file from p2-sample-files.zip and save it as about.html, portfolio.html, and contact.html

If you want give it a try, go to WuFoo.com, create a contact form, and embed it your contact.html page. Here’s a little tutorial about creating the forms:

F 4/21: Looking at front pages, plan for inner pages

Week Fourteen: Bloggers: NN, NM, + 1 needed

Assignment for Monday, April 24
Please read 6 Steps To Creating A Knockout Online Portfolio and 10 tips for a killer design portfolio. Spent some time searching the web for online portfolios and locate designs and layouts you like.

Locate and bring with you to class you (or have links to ) 5 portfolio items that you would like to add to your portfolio. For each item, list the following:

• a detailed back story about the project or a summary of the goals of the project (do not discuss it as part of a class)
• if created for a client, list the client
• if created as part of a team, what was your role on the team and what did you accomplish on the project
• date created
• software you used
• anything else important to say about it

If the portfolio item is a web page or blog, take a screen shots of one or more pages. If you have screen shots of different stages of the project, have those ready, too.

Please create detailed sketches of your portfolio, about, and contact pages, complete with grid sizes and percentages.

For the portfolio page, make sure to provide spaces for the portfolio item (image, embedded video, artwork, etc.) and details about the portfolio item (such as those requested above).

Please wait to start adding content to your about and portfolio pages.

M 4/24: Inner pages and portfolios.
W 4/26:
Project 2 Rough Draft Due by 11:00pm
F 4/28: Class Cancelled for Conferences

Week Fifteen:

M 5/1:
W 5/3: Last Day of Class

Friday, May 5: Project 2 Final Draft and Reflections Due by 11:00pm
Monday, May 8: Final Story of Learning due by 11:00pm