#wdds19 course calendar

About the Course Calendar

Texts are to be read/watched/listened to for day they are listed. For example, Duckett is to be read for Monday, September 10. 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

M 1/14: Introductions, Syllabus, Books

Assignment for Wednesday, 1/16
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:

If you have a WordPress.com account, come to class with your username and password. If you do not have a WordPress.com account, we will be using WordPress for Design Journal Assignment.

W 1/16: Design Journal Setup
Hand out Design Journal Blogging Assignment
F 1/18: Sample HTML5 & CSS page; sample-html.pdf; sample-style-css.pdf

Week Two: Web Standards and Getting Started

M 1/21: Class Canceled — MLK Day

Assignment for Wednesday, 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 Wednesday. 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 the last minute to sign up.

Please read “The Importance of Web Standards” and “40 Maps that Explain the Internet” and come to class with 4 questions based on the readings — 2 questions about each reading — that you will turn in to me and we can use to inform class discussion. I’d also like you to do a few Google searches to find out each of the following:

  • which county has the fastest internet
  • which country has the highest broadband Internet penetration
  • which country has the cheapest internet prices for the fastest speed
  • what percentage of the world has internet access
  • what is the difference between the internet and the world wide web?

Bring those results with you to class.

W 1/23: URL verification; Web Standards; Maps; Doug Engelbart; SRI Timeline

Assignment for Friday, 1/25
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, as assigned for Wednesday. Something that looks like http://yourname.wordpress.com is not correct.

Second, make sure you have installed Firefox Developer Edition, FileZilla (free), Web Developer Toolbar Firefox Add-on (free), and Brackets plain-text editor (free) on your computer. 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 (note, I will be updating this tutorial to use FileZilla instead of FireFTP, but the process is exactly the same for both, so feel free to try to connect, if you can):

If you have questions or run into some issues, contact Bill with your questions.

F 1/25: Coding Friday: FTP, servers, text editor, workflow

Week Three: Intro to HTML

Assignment for Monday, 1/28
Please read Duckett, chapter 1, on the structure of an HTML page. When completed, I’d like to try to code a very basic page, copying the code that Duckett presents on page 20. Copy the verbatim, though you may include your own sample content.

Before coding your page, make sure you have gone through the 4 steps in the assignment for Friday, 1/25. Update: Bill emailed you if you needed to complete Step 3 above or if your URL was returning an error.

As we discussed in class on Friday, your workflow will be:

  1. Open Firefox Developer Edition and go to your own URL.
  2. Open FileZilla and Log In go to your “public_html” directory
  3. Open Brackets and start a new document.
  4. Enter the Code in Brackets.
  5. Save the page as index.html in your web design course folder.
  6. Go to FireZilla and upload index.html to the public_html directory.
  7. Go to Firefox Developer Edition and Refresh the page.

If you have trouble, only try to get it to work a few times. If it doesn’t, STOP. Note what you have done and we will work through it all in class on Monday.

M 1/28: Duckett chapter 1, Structure; Coding a page structure
Hand out Story of Learning Assignment

Assignment for Wednesday, 1/30
Please read Duckett, chapters 2 and 3. In the “index.html” file you worked on in class on Monday, please experiment with the following:

  • three levels of headings
  • paragraphs
  • line breaks
  • ordered lists
  • unordered lists

If you are feeling confident, try to find out how to make text bold and italics and add that. Please read through the Story of Learning Assignment and Bill any questions you have.

Group 1 blog posts are due by class on Wednesday, as well.

W 1/30: Duckett, chapters 2 and 3, texts and lists;
Group 1 Blog 1 Due

Assignment for Friday, 2/1
Please read Duckett chapter 4 on linking. In your index.html page you’ve been playing with, create ABSOLUTE links to 3 web pages that are important to you.

I’d also like you to create a new file called “resume.html” and upload it to “public_html” folder on your server. In resume.html, add your education information, using proper coding.

Then, create a RELATIVE link from “index.html” to “resume.html.”

Please bring a digital version of your resume with you to class on Friday.

Now that we have our first blog posts online (!!), students in Groups 2 and 3, please start adding comments to those posts. Bloggers, please monitor the site by approving and commenting on any comments you receive. You can also alter the theme of the blog so that it isn’t the default theme anymore, if you’d like. you can change the title, too.

Your first Story of Learning Weekly Update is due by 5:00pm on Friday and Part 1. My Story Up Till This Moment due by 11:00pm.

If you have any questions, please let me know.

F 2/1: Coding Friday: chapter 4, links; coding a page
Part 1 of My Story of Learning due by 11:00pm

Week Four: FTP and Workflow Review; HTML5; Emotional Design

Assignment for Monday, 2/4
Please read pages 429 – 439 in Duckett on HTML5. After reading, please go to your resume.html file and add the following codes in the appropriate places:

  • <header></header>
  • <article></article>
  • <section></section>
  • <figure></figure>

If you add the codes correctly, you should not see any change to your resume as it looks in the browser.

We’ll discuss more about HTML5 in class.

If you have any questions, please let me know.

M 2/4: Review FTP and Workflow; HTML5

Assignment for Wednesday, 2/6
Please read chapters 1, 2, and 3 of Aarron Walter’s Designing for Emotion (it’s a quick read with lots of pictures–see the Readings page).

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.

AFTER completing the reading I’d like you to start thinking about your own Design Persona for your a new version of your web site–one that is going to have a home page, about page, portfolio page, contact page, and resume page.

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.

Your design persona is due on Friday, 2/15, but start thinking about them now.

W 2/6: Walter chapters 1, 2, and 3 on Emotional Design; emotional-design-notes.docx

Assignment for Friday, 2/8
Please read Walter, chapters 4 and 7, and Boaz on White Space, and be ready to discuss them in class. Also continue looking for web sites that you think have a clear personality. Start working on your Design Persona (see above for templates). Group 1, Blog 3 is due on Wed.

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.

F 2/8: Walter, chapters 4 and 7; Simon Sinek; Design personas and your Why

Week Five: Intro to CSS; Design Personas

M 2/11: Class canceled — Snow

Assignment for Monday Wednesday, 2/11 2/13
Please read Duckett chapters 10 and 11, which introduce stylesheets (CSS) and how to style color in various ways (we’ll get to the CSS3 stuff later in the semester). Please try to style your resume headers with different colors. Give your page a background color by styling the body.

Please read Noa’s (2015) and Neidlinger’s (n.d.) posts on color theory (see Readings page) and then check out the two color pickers under the design links on the right sidebar: Adobe Color Wheels and HTML Color Codes. If you have yet to select a color theme for your design persona, use the readings and the color wheels to help you select a color theme. When doing so, think about what you want your resume to say about yourself and what colors (and white space) will help you bring that to fruition.

Look back to the exercise we started in class where we articulated our Why, How, and What based on Sinek’s talk. From that in-class work, compose a 250-300-word statement that articulates what you believe about your chosen field, how your approach to your work has made real that belief, and what the tangible results have been.

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.

If you have any questions, let me know.

W 2/13: Duckett chapters 10 and 11, Intro and Color; Color Theory
Discuss Design Personas

Assignment for Wednesday Friday, 2/13 2/15
Please read Duckett chapter 12 on text and chapter 14, only the content relating to lists.

Try to create styles for your <body>, <p>, and <li> tags in a new CSS files called main.css. Save that file into a new “css” folder that resides in your “web design” folder. Then upload the folder and the file to your “public_html” folder on the server.

If you created CSS for Wednesday that is in your “resume.html” file, move it to the new main.css file. Add this line of code to the <head></head> section of your resume.html file and then re-upload the file to the server:

<link href="css/main.css" rel="stylesheet" type="text/css" />

This will allow the browser to apply the styles to your resume.

Please read Santa Maria, chapters 3 and 4, on Web Typography (see the Readings page). (If you haven’t studied typeface before, I also encourage you to read chapters 1 and 2.)

Come to class with 3 sets of paired typefaces that you might be able to use on your resume, using the discussion in chapter 4 as a guide. One typeface will be for headers; the other will be for content. You might also consider a third typeface that would be for your name at the top of the resume. Use Google Fonts for your selections. If you already have a set of typefaces you like, locate 2 additional pairings as a way to practice thinking about typeface relationships.

F 2/15: Coding Friday: Duckett chapter 12, Text, and 14 (only content relating to LISTS); Santa Maria, chapters 3 and 4, on Web Typography
Hand out Responsive Resume Assignment
Group 2 Blog 1 Due

Week Six: CSS & HTML5 Boxes and Layout

Assignment for Monday 2/18
It seems many students have not started adding comments to blog posts. You are required to comment on two posts per week when blog posts are due. Please make sure you are commenting.

Don’t forget to add your weekly update to your Story of Learning, as well.

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

M 2/18: Working on CSS: sizing, colors, and fonts. persona-to-code.docx
Design Personas Due in class

Assignment for Wednesday, 2/20
Please continue to work on the persona-to-code.docx handout we started in class. You should have the sheet completed and your main.css file updated to reflect that work by the start of class.

Group 3, blog 1 is due on Wednesday. If you have yet to comment on Group 2 blog posts, please do so.

There is no other reading for Wednesday. I will be adjusting the calendar over the next few days, so please ignore everything until it is update. Thanks!

W 2/20: Working on CSS: sizing, colors, and fonts.
Group 3 Blog 1 Due
F 2/22: Coding Friday: Some CSS review and introduction to class, id, and float.

Week Seven: CSS Layout and Responsive Design

Assignment for Monday, February 25
Please read Duckett chapter 8 on “Extra Markup,” paying attention to the portion on class and id, and chapter 13 on CSS Boxes, and chapter 15, pages 359 – 376, paying special attention to the discussion of the float property. CSS Boxes are perhaps the most complex part of CSS for several weeks and it is vital that you are in class on Monday.

Please attempt to style at least 5 of your resume.html elements with padding, borders, margins, and widths.

If you have yet to include your personal statement on your resume.html page, please add it to the page above your resume, but below your name. Style the text in a way you would like.

I’d like you to try to use the float property to put your Personal Statement next to your resume content. You will need to do this within this media query:

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

}

You’ll also need to add the following line of code just before the </body> tag in resume.html:

<div class="clear"></div>

Don’t forget to comment on blog posts and complete your weekly Story of Learning update.

M 2/25: CSS Boxes and thinking about layout;

Assignment for Wednesday, 2/27
Continue to work on your resume to add  padding, borders, margins, and widths as well as floating the #content, #statement, and #resume divs.

I have noticed that most of your Professional Statements have not been composed in response to the work we did with the Why, What, and How statements. As stated in a prior homework:

Look back to the exercise we started in class where we articulated our Why, How, and What based on Sinek’s talk. From that in-class work, compose a 250-300-word statement that articulates what you believe about your chosen field, how your approach to your work has made real that belief, and what the tangible results have been.

This must be completed by Friday.

In class on Wednesday, we’ll dedicate the whole time to open coding.

W 2/27: Open Coding in Class
Group 1 Blog 2 Due
F 3/1: Class Canceled – Bill at a conference

Week Eight: Validation Testing; Resume Conferences

Assignment for Monday, 3/4
Please read Marcotte, chapter 4, on media queries, and Scacca on typeface and font for mobile devices.

 

M 3/4: Making Resume Responsive; Marcotte chapters 1, 2, and 4; Scacca on mobile typography; media queries and responsive design; stacking discussion

Assignment for Wednesday, 3/6
Please read Marcotte, chapters 1 and 2, which was accidentally left off the homework for Monday. Based on our discussion in class on Monday, please come to class with stacking strategies for each of your 3 layouts. As we discussed in class, they can look like this (from here):

stacking

Break your resume and statement down by <section></section> , number them, and think about how you want the sections positioned on each device (phone, tablet, computer). It might make sense for smaller sections to be next to each other. The sections can be styled with floats, just as we did in class last week.

Looking at your phone stacking, please attempt to style for your phone. In your phone media query, set the following:

  • body to a width of 99%;
  • paragraph and list font to 1.1.25em;
  • paragraph and list line height to 1.1875em;
  • paragraph and list letter-spacing to .02em;
  • paragraph and list text-align to justified;

Add additional styles as you’d like.

If you feel like taking the chance, try to style your table size, as well.

W 3/6: More work on responsive layouts; HappyCog; max-width

Assignment for Friday, 3/22
Your resume draft is due by 11:00pm Friday night, which means you should be working diligently on each of your three screen sizes, as they are all due by 11:00pm. I’d like you to have a working draft due by the start of class that we can validate.

Please read through the resume-draft-checklist (.pdf) and note which requirements your code meets and which it doesn’t meet. Come to class with a list of up to 10 questions about your code. Before settling on a question, try using the book and then entering that question into Google to see if you can locate a response you can implement.

F 3/8: Resume Working Draft due; Intro to Validation testing
Resume Rough Draft due online by 11:00pm

Spring Break — March 11 – March 15

Week Nine: Resume Conferences; Resume Work

M 3/18: Class Canceled for Conferences to discuss Resume Drafts
W 3/20: Class Canceled for Conferences to discuss Resume Drafts
Midterm Story of Learning Due by 11:00pm
Group 2 Blog 2 Due
F 3/22: Final Resume Questions

Week Ten: Midterm Conferences Images and Accessibility

M 3/25: Class Canceled for Conferences to discuss Stories of Learning
Final Resume Questions
Resume Final Draft and Reflections Due by 11:00pm
W 3/27: Class Canceled for Conferences to discuss Stories of Learning

Assignment for Friday, 3/28
Please read Duckett, chapter 5 & 16 and Marcotte, chapter 3 on images. Note that in chapter 5 Duckett discusses how to align images using HTML, which is important to know. But, we will be doing our alignments in CSS, as he discusses in chapter 16. Marcotte is all about making your images flexible so they change size with your screen size. We’ll discuss all this in class on Friday.

Come to class with a large digital image that you can experiment with a bit. It should be large enough to fill the entire browser — at least 3000 pixels wide.

Group 3 Blog 2 Due
F 3/28: Duckett, chapters 5 and 16; Marcotte, chapter 3; on Images; Images and Accessibility

Week Eleven: Grids and Sketching Layouts

Assignment for Monday 4/1
Please read Clark Chapter 3 and Chapter 6. The readings on the Readings page under the Usability and Accessibility Readings. 

In class we coded our first image and I’d like you go back back to the file you were using and add title and alt text, using the techniques that Clark describes. The goals of this text is to help users who are blind or have images turned off have a commensurate experience on your web site.

We’ll discuss and share out title and alt text in class, as well as consider more css image styling.

M 4/1: More on Images and Accessibility; image-handout.docx

Assignment for Wednesday, 4/3
Please read Marcotte, Chapter 2 on grid systems. Grid systems are key for understanding responsive layout. In class, we’ll talk about grid systems, do some math, and start sketching our own websites.

W 4/3: Marcotte, Chapter 2; Grid Systems, Sketches, and Layouts; sample-grid-sizes-s19; grid-fun-s19.docx
Group 1 Blog 3 Due
F 4/5:  Coding Friday: More on grids
Handout out Grid-Based Responsive Professional Site Assignment 

Week Twelve: Portfolio and Navigation

Assignment for Monday, 4/8
If you did not complete it in class, please complete steps 3 and 4 (on the back) of the reflexive grid worksheet we’ve been working on in class.

Please read through the Grid-Based Responsive Professional Site Assignment and come to class with any questions you have.

In class I handed out 3 large sheets of graph paper to each student. Please complete grid-based sketches for your portfolio page for each of the 3 screen sizes: 320px, 768px, 1024px. They must have substantial differences. Use a pencil so you can erase. Include pixel sizes and percentages for all boxes create. Bring your sketches to class.

If you are unsure how to lay out a portfolio, remember earlier in the semester I asked you to: “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.” Go back to those sites (and others you might find) and see what they are doing.

In class, we’ll talk about portfolios.

We’ll be talking about navigation on Wednesday, so you can hold off on adding that now.

M 4/8: Portfolio pages

Assignment for Wednesday, 4/10
This homework is designed for you to start getting your full site ready for the code we’ll be adding in the next weeks. Please follow the steps exactly as described. If you have questions, email me or come to Open Coding this Thursday (which will be 11:15 – 12:45 instead of 10:00 – 12:00).

  1. Open your index.html and save it as index-old.html. This will not delete your index.html; it will just make a new file.
  2. Open your resume.html and SAVE IT AS portfolio.html. This will not delete your resume.html; it will just make a new file.
  3. In portfolio.html, delete everything between the <body></body> tags.
  4. Add the following code on the line below the one connecting your page to main.css (DO NOT DELETE the main.css line):<link href=”css/nav.css” rel=”stylesheet” type=”text/css” />This will allow the page to connect to another stylesheet, which will control your navigation.
  5. Save the page. At this point you should have just the skeleton of a page with no actual content.
  6. Save the page as about.html. And save it again as contact.html. And save it again as index.html (you will be asked if you want to overwrite the file; say Yes — since you have saved it as “index-old.html in step 1 all that content is okay).
  7. You now have FOUR new HTML pages: a new index.html, about.html, portfolio.html, and contact.html (as well as your resume.html).

W 4/10: Creating navigation; Navigation Sample
Group 3 Blog 2 Due

Assignment for Friday, 4/2
For class on Friday, I’d like you to have two versions of an image (or two images) that tells a story about who you are without having any additional accompanying words. The versions should be the following sizes:

  • for the phone: 1366px width × 2048px height
  • for other screens: 2048px width × 1366px height

Name the images appropriately, add them to your images folder, and upload them to your images folder on the server.

Group 3 Blog 2 was due Wednesday. Please complete yours if you haven’t and comment on them, as well.

F 4/12: Coding Friday: storytelling front page; Navigation Sample

Week Thirteen: More on Accessibility

M 4/15: Accessibility; More on storytelling front page; WuFoo

Assignment for Wednesday, 4/17
For this assignment, I’d like you to locate the Accessibility features on your computer and learn the basics of how to use the screen reader (all operating systems now have accessibility features and screen readers).

Once you started learning how to use the screen reader, completely lower the brightness on your computer and attempt to go to Amazon.com and put one of your holiday wish items in your shopping cart.

We’ll discuss your experiences in class. Good luck!!

W 4/17: Accessibility
Group 3 Blog 3 Due
F 4/19: No Class — Easter Break

Week Fourteen: Professional Site and Conferences

M 4/22:No Class — Easter Break
T 4/23: Working on Professional Site
Professional Site Rough Draft Due by 11:00pm
W 4/24: Class cancelled for Conferences
F 4/26: Class Cancelled for Conferences

Week Fifteen: Coding Final Pages

M 4/29: Work on Professional Site
W 5/1: Final Questions and Wrapping Up

Saturday, May 4: Project 2 Final Draft and Reflections Due by 11:00pm
Monday, May 6: Final Story of Learning due by 11:00pm

Comments are closed.