Allow 4-9 hours each week to work on these assignments.  Start working on your assignment early enough to get some help if you get stuck.  Don't wait 'till the night before class to start.

Standing Assignment:

• In addition to whatever is posted below, between each class:
  • Scan your Spring '18 Web Site Evaluation Worksheet (preliminary) for items we covered in class.  If you find an item:
    • Make at least one addition/improvement to your final project.
    • Complete, using a word processor, at least one additional item on your Spring '18 Web Site Evaluation Worksheet (preliminary)
  • Keep a "Diary" of each decision you make as you work on your site.  Record relevant decisions on your "Content Strategy" document/page.
     

Expression Web is available on Bridges:

•  If you want to install Expression Web on your Windows computer you can get a copy on Bridges  --> CIS 206 --> Resources --> Web_Trial_en.exe
   

---

Thanks:

• Thanks for taking this class. You were a great group to work with.  I look forward to seeing some of you again next spring in CIS 299: The Web Development Center
   
•   Have a great summer!

Final Presentations: Friday, May. 11 from 5:00 - 7:00 PM in GSB-223

• You must present your project on Friday, May. 11 from 5:00 - 7:00 PM in GSB-223
   
• When you present:
  • Pass in your completed Web Site Evaluation Worksheet just before you present your site to the class.
  • Don't Rush!
  • Introduce yourself: name, year, major(s), minor(s), anything else the class might find interesting.
  • Introduce your site: why you chose your topic.
  • Two minute overview of your site.
  • Demonstrate what happens to your home page as you:
    • resize the browser window
  • Demonstrate
    • style switching
    • other features to be announced at the start of the presentations.
  • What are you most proud of?
  • What would you do if you had another month just to work on your site?
     
•   Portfolio tips from top studios: do's and definite don'ts
  Note: None suggest organizing your portfolio chronologically or by course
   
•   Interesting Interview with Benjamin De Cock - Stripe
  Belgium-based all round designer who loves coding as well as making things beautiful.
   
•   John Maeda: If You Want to Survive in Design, You Better Learn to Code

Due Monday, May 7:

•   You may find these useful:
  • eMail:
    • Link to an email address with a specified subject 
    • Customizing mailto: Links
    • HTML URL Encoding Reference
       
  • Keyword, author and description meta tags:
    • Meta Description
    • Why Google's Meta Description Expansion Matters
    • Is the META KEYWORD tag still used by GOOGLE, BING and YAHOO?
    • W3Schools
       
  •  Internal Anchor links
     
  • RSS is Extra Credit this semester.  If you want to try it:
    • Check out the page source for this page
      • Find the <div class =" RSSfeed">  Each one is an RSS feed.
    • Check out feed.informer.  It will generate the code that goes in your <div class =" RSSfeed ">
      Note: you can't just use one of my RSS feeds.  You have to create your own feed at feed.informer.
       
•    You might enjoy this:
  • 7 Reasons Having a Twitter Feed in Your Sidebar is a Really Dumb Idea
  • Toddler creates new beer label design

Due Thursday, May 3:

• In CSS: Page Layouts with James Williamson at Lynda.com, take detailed notes in your notebook as you watch:
  • In 1. Layout Basics
    • Box model review   8m 47s
    • Calculating element dimensions   11m 11s
    • Understanding margin collapse   7m 59s
  • In 4. Positioning Elements
    • Relative positioning  7m 59s
    • Absolute positioning  8m 59s
    • Fixed positioning   4m 23s
    • Controlling stacking order  8m 31s
  • Be prepared to show me your notes at the beginning of class. 
     
• You may find these useful:
  • Accessibility:
    • W3C Before and After Accessibility Demo
    • Facts About Color Blindness
    • Colorblind Web Page Filter
    • Color Blindness Simulator for images
       
  • Style sheet for printing:
    • Print Different
    • There is also a simple example (HTML and CSS) in the Cutting --> CIS 206 --> 151207 directory on the faculty drive.  It has a print stylesheet that prevents an image from appearing on the printout.
    • If you really want to get into it (extra credit) check out How To Set Up A Print Style Sheet.

Due Tursday, April 26:

• CSS font-display: The Future of Font Rendering on the Web

Due Monday, April 23:

• Take handwritten notes in your notebook as you read and study:
  • 10 Tips On Typography in Web Design by Nick Babich
  • Hate Comic Sans? You don't know anything about typography
  • Alternative Style: Working With Alternate Style Sheets
• Upload your Final Project (as much as you have completed) to your site on CuttingEdgeSpace.  Be ready to show it to me at the beginning of class.
   
•  Links for class:

Due Thursday, April 19:

•  Links for class:
  • Dynamic Drive
  • Working With Alternate Style Sheets
    • Explanation: Alternative Style: Working With Alternate Style Sheets
    • Code: jQuery styleswitch – now with toggle!
       

Due Thursday, April 12:

• Complete the "At least one interesting font group ..." question on page 3 of the Final Web Site Evaluation Worksheet.
• Read and study Can Fonts Really Help Those With Dyslexia?
   
•   Links for class:
  • Fonts:
    • Google Web Fonts
    • FontSquirrel Fonts
    • Glyphs
    • Icon Fonts
  
  
•   You might find this interesting:
  • Design: What You Didn't Know About the Color Red
  • 20 Best And Worst Fonts To Use On Your Resume
  • Selecting typefaces for body text
  • Playing With Color: Vibrant Options For Apps And Websites
  
   
• On Monday, April 9th at 5PM, two seasoned, Arnold Advertising Worldwide Brand Planners who are part of the Progressive Auto Insurance account team will speak about what Brand Planning is all about and how it has energized the very successful Progressive advertising campaign.  Senior Planners, Lanna Tokuhiro and Molly Chisholm, will speak about what Brand Planning (sometimes referred to as Account Planning) is and what it takes to be one. They will use Progressive as a case study to demonstrate how a Brand Planner proceeds from a client "ask" to strategic insight, to creative development and analysis.  Monday, April 9th at 5 PM Room 124, School of Engineering

Due Monday, April 9:

• Add a section to your colorScheme.css stylesheet to define border colors.
   
•  Links for class:
  • Fonts:
    • Web Fonts at the Crossing
    • Cross-platform 
      • CSS Font Stack & Fonts!
      • VisiBone Font Survey Results
    • TypeTester
    • Identifont
    • How much does it cost to custom design a typeface?
    • Google Web Fonts
    • Extremely simple CSS font embedding
       

Due Thursday, April 5:

• Continue working on the topNav.html / colorScheme.css pages we worked on in class.
  • Move all your color (not background-color) specifications to your colorScheme.css page.
     
• Study each of the following sections at W3Schools.  Experiment with each "Try It Yourself."  Do the Exercises at the end.
  • CSS Syntax and Selectors
  • element, element 
  • element element
  • element > element
  • element + element
  Experiment until you thoroughly understand the difference between the last three.
   
  
•   Links for class:
  • Color Schemes
    • Examples from the art world
      • Le picador II
      • Ana Tzarev: Thistle
      • Ingrid With Hat
      • Girl with Hair Ribbon
      • The Old Guitarist
      • Picasso's palettes
      • Color as Emotion
    • How to Create a Perfect Color Scheme [Infographic]
    • COLORlovers COPASO
      • For the Record: Adobe Kuler vs. COLOURlovers
    • Kuler
    • Color Scheme Designer (Paletton.com)
      
  • Fontreach
  • GetImageColors 
  • Colorzilla
  • Brands, Unevolved Brands
  • Which Color Button Converts Best? Here's What Research Shows
  • Color That Site!
     
•    You Might find this interesting:
  • The Best Interview Question for Hiring UX Designers [or pretty much anyone].

Due Monday, March 26:

• Use the How To --> Top Navigation at W3Schools to create a Web page with a top menu
  • There's a lot here that we haven't covered yet, so play round with the "Try It Yourself >>" to figure out what you can.
  • See if you can change the menu titles from "Home, News, Contact, About" to something more appropriate for your site.
  • See of you can change the text color for all the links.
  • See if you can change the background color for the current page menu item.
  • See if you can change the background color for the other menu items,
  • Once you have it working in "Try It Yourself >>", copy it to a page in Expression Web.  Indent it properly, check to make sure it works, save it and be ready to show it to me at the beginning of class.
     
•    You Might find this interesting:
  • 25 Free and Amazing Dropdown Menus in HTML5, jQuery and CSS3 - Just to see what's possible...

Due Thursday, March 8:

• Take handwritten notes in your notebook as you watch 1. Getting Started in  CSS Essential Training 1 on Lynda.com
  • In addition to introducing CSS, this chapter of the tutorial has a nice review of many of the HTML concepts we've covered.
  • Remember, you can use handwritten notes in your notebook if we have a quiz
     
•  Links for class:
  • Jobs-to-Be-Done - Prof. Clayton Christensen (0:7:55)
     
  • 6 Reasons Why Website Speed Matters
  • Responsive Web Design - Images
     
    
•   Note: Two candidates for the new Graphic Design position will be coming to campus after the break.  If you would like to have lunch with them or would like to accompany them on their campus tour please let me know.
   
  • Alan O.W. Barnes - Monday, March 19
    • 10:00 a.m. - Exhibition of Personal Work and Student Work (Open Forum with Students and Faculty) -  GHH 200
    • Noon - Lunch with Graphic Design Students - Upper Commons
    • 1:30 p.m. - Tour of Campus and Department Facilities
    • 3:30 p.m. - Teaching Demonstration  (Present a lesson unit you would teach during the first week of an Intro to Graphic Design class) - GSB-223 (in this class)
       

Due Thursday, March 1:

• If you didn't do all the Try it Yourself's and all the Test Yourself with Exercises in the assignment due on Monday, Feb. 26, do them now.
• Continue working through the HTML(5) Tutorial at W3Schools.com
  • Be sure to experiment each time you see a Try it Yourself  button.
  • Go through the following chapters:
    • HTML Images (skip Image Maps for now)
      • Do exercises 1, 2, 3, 4, 5 and 6 in the Test Yourself With Exercises section.  Don't just press the "Show Answer" button... that won't help you if we have a quiz...
         
• Create an HTML5 Web page about someone born on your birthday (enter month and day at the top of the page).
  • It should include:
    • A heading
    • At least two paragraphs (practice copy and "paste text")
    • At least two images
  • Make sure your code is properly indented.
• Be ready to show me your page in a browser at the beginning of class.
• Print your page from a browser.  Put your name on it and be ready to pass it in at the beginning of class.  Nothing printed after I arrive will be accepted.

Due Monday, Feb. 26:

• Create a new Web site in Expression Web
  • Create a Web page with a quote from https://skillcrush.com/2014/10/21/advice-for-web-designers/
  • Add some text to explain why you selected that quote.
  • Save the page.
  • Create another Web page with a quote from https://99designs.com/blog/creative-inspiration/10-famous-design-quotes/
  • Add some text to explain why you selected that quote.
  • Save that page.
• Zip your site.
• Go to another computer.
• Unzip your site.
• Open your unzipped site.
• Make sure that you can see both of your pages.
   
• Continue working through the HTML(5) Tutorial at W3Schools.com
  • Click on Next Chapter to get from one chapter to the next.
  • Be sure to experiment each time you see a Try it Yourself  button.
  • Go through the following chapters:
    • HTML Introduction (Review)
    • HTML Editors (Skip)
    • HTML Basic Examples (Experiment with all the Try it Yourself opportunities. For example, add a link to CuttingEdgeCourse.com)
    • HTML Elements (Read)
    • HTML Attributes (Read)
    • HTML Headings (Experiment with all the Try it Yourself opportunities)
    • HTML Paragraphs (Experiment with all the Try it Yourself opportunities)

Due Wednesday, Feb. 21:

• Review How to Choose a Domain Name
• Research a domain name for your site.
• See if you can find the highest price ever paid for a domain name.

Due Thursday, Feb. 15:

• Complete the following question on page 6 of your Spring '18 Web Site Evaluation Worksheet (preliminary)
  • At least one image you converted to a two-color image...
    • Use an image relevant to the topic of your site... something that you might want to use on your Web site.
    • Be sure to write down the source of the image, you'll need it for your "Credits" page.  You may find this useful http://www.easybib.com/mla8-format/digital-image-citation .
• Also on page 6:
  • Identify two images relevant to the topic of your site, one which should be saved as a .gif and one which should be saved as a .jpg .
    • Bring a copy (print or digital) of each image to class.
    • Make sure you can explain why one should be a .gif and the other should be a .jpg .
       
•  Links for class:
  • Correction: Voice frequency on the phone
  • Online Tone Generator
  • Spectrum Analyzer
     
  • How to Choose a Domain Name
  • Free .design domain name (for one year)... not necessarily recommending this, just passing it along.
  • Other cheap domain names at https://www.namecheap.com/domains/domain-name-search.aspx .
  • Crash Course: Optimizing and Exporting SVGs in Adobe Illustrator
     
  • DIGITAL IMAGE INTERPOLATION
  • Geometric Transformation of Digital Images
  • Fireworks --> Edit --> Preferences --> Interpolation
  • image-rendering: pixelated
  • image-rendering on W3C
     
  • The ASCII Code
     
  • Responsive Web Design - Images

Due Monday, Feb. 12:

• Watch The importance of HTML (3:19) from: HTML Essential Training with James Williamson at Lynda.com.  Take notes.
  • You'll need to login at Lynda.com (https://lyndalog.rwu.edu)
    • Your Username is your Bridges Username.
    • Your Domain is ACADEMICS.RWU
    • Your Password is your Bridges Password
       
• Start working on the HTML(5) Tutorial at W3Schools.com
  • Go through HTML Introduction (study, take notes)
     
• If we have a quiz you'll be able to refer to  handwritten notes in your notebook... so make sure you take good notes.
   
  

Due Thursday, Feb. 8:

• Be ready to pass in your paper (see Feb. 5 below)
  • Be sure to identify (in pencil or using end notes) exactly where in your paper you have answered each of the seven "the why" questions and the three research tasks.
  • Be sure to give enough detail about your audience that you can "get inside their head", so that you know how to talk to them, so that you know what will resonate and what won't.  See https://www.crazyegg.com/blog/3-psychographic-gems/ .
     
•  Links for class:
  • How Analog-to-Digital Converter (ADC) Works
  • Digital Images
    • Bitmap vs Vector Graphics
    • Bitmap Font
    • Pixel
      • The Million Dollar Homepage
      • Pixactly
    • Bit depth
    • Dithering
    • Image Spam
    • When to Use JPEG, GIF & PNG

Due Monday, Feb. 5:

• Read Sections 1 & 2 in How to Make a Better Website: A 6-step Designer-developer's Guide by Jake Cooper.   Take notes in your notebook.  Bring any questions to class.
• Write a short paper (1-3 pages) to address:
  • The seven "the why" questions listed under 1. Define your goals
  • The three research tasks under 2. Do your research
    

Due Thursday, Feb. 1:

•  Links for class:
  • Zeno's Paradox of the Tortoise and Achilles
     
  • Jobs-to-Be-Done - Prof. Clayton Christensen (0:7:55)
  • My Content Strategy
  • What You Want To Say Vs. What People Need To Hear
  • Why Your Portfolio's Not Getting You The Job You Want
  • Improving Design With Critique
     
  • Analog Dish   Digital Dish
  • Analog Cell Phone
  • Analog TV
     
  • How Analog-to-Digital Converter (ADC) Works
  • Digital Images
    • Bitmap
    • Pixel
      • The Million Dollar Homepage
      • Pixactly
    • Bit depth
    • Dithering
    • Image Spam
    • When to Use JPEG, GIF & PNG

Due Monday, Jan. 29:

• Read Sending a Message That You Don’t Care. 
• Watch:
  •  Phone Etiquette in Meetings  (6 min).
  • The Esquire Guy: Stop Using Your Phones During Meetings (2 Min.)
  • Why You Shouldn't Bring Your Phone To Meetings (4 Min.)
     
• Go through these slides on how to Select a topic for your Web site
• Select a topic for your Web site
   
• Watch A Quick Introduction to Binary.
   
• Links for class:
  • Need To Know?
     
  • Medieval Fonts (5th to the 15th century)
  • Rembrandt (1606 - 1669)
    • The Night Watch (1642)
  • Ana Tzarev (1937 - ) 
    • Gallery
    • Star of Africa Lotus
    • Thistle
  • Shakespeare (1564 - 1616)
    • Henry V (play) (1599)
  • Sheet Music (2000 BC, 600 BC, 15th Century)
    • Pachelbel's (1653 - 1706) Canon in D piano and violin sheet music - Video Score
  • Technology's biggest myths: HDMI Cables
     
  • The Limitations Of Marketing To Persuade  
  • Historical yearly trends in the usage of content management systems for websites