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 '17 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 '17 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
   
•   You may find these useful:
  • eMail:
    • Link to an email address with a specified subject 
    • Customizing mailto: Links
    • HTML URL Encoding Reference
       
  • Accessibility:
    • W3C Before and After Accessibility Demo
    • Colorblind Web Page Filter
      • Vischeck 
      • ColorFilter
         
  • 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.
       
      
  • Keyword, author and description meta tags:
    • Meta Description
    • 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.
     
• The following sections are also Extra Credit this semester:
  • At least one Roll-Over Effect
  • At least one page with a background image that stretches (not tiles) to fill the viewport regardless of the size of the viewport.  The image must remain fixed as the content scrolls.
     
• Sample final Web sites from previous semesters.
  Keep in mind that the requirements for these sites may not be the same as the requirements this semester and that the sites may have been modified after the course.
  • http://rwulaughs.cuttingedgespace.com
  • http://wanderdesign.cuttingedgespace.com
  • http://chefs.cuttingedgespace.com
  • https://www.youtube.com/watch?v=8AvU5Bm5Jyg
     
•   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

---

Thanks:

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

Friday, May 12  10:15 - 12:15:

• Final Presentations - You must present your project on Friday, May 12 @ 10:15am in SB-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
    • enlarge the font size (zoom text only).
  • 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?

  
  

Due Monday, May 8:

•  Links for class:
  • Selective jpg
    • Child Portrait
    • Child Portrait 2
    • Depth of field
    • Shutter & Aperture
    • Sphere
    • Lytro
       
  • Image Slice:
    • 25 Creative Movie Posters Design Examples
       

Due Thursday, May 4:

• Graphic Design Senior Showcase

Due Monday, May 1:

•  Links for class:
  • Working With Alternate Style Sheets
    • Explanation: Alternative Style: Working With Alternate Style Sheets
    • Code: jQuery styleswitch – now with toggle!
       
•    You might find this useful:
  • Experts Weigh In: What's Your Favorite CSS Trick?  (Check out the first tip by Nicole Dominguez)
  • How to Set CSS Margins and Padding (And Cool Layout Tricks) Great article, especially "Maintaining Image Aspect Ratios."
     
•   Check this out:
  • 6 tech jobs that will grow like crazy in 2017 and beyond.  Be sure to scroll down to the #1 job.
  • Web Developer Overview
 

Due Thursday, April 27:

• "Javascript effect" requirement (bottom of page 6)
  • Dynamic Drive
  • Or... get any of these to work for extra credit
    • Unheap
    • Simple 3D Coverflow
      • See Bridges Resources
      • Unzip simplecoverflow.zip
      • Start by reading index.html in the "documentation" folder
         
• Check this out:
  • The 100 Best Jobs

Due Monday, April 24:

Due Thursday, April 20:

• Take notes in your notebook as you read The New Rules for Scrolling in Web Design
• In CSS: Page Layouts with James Williamson at Lynda.com, take detailed notes in your notebook as you watch:
  • 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.
       
•  Links for class:
  • Gradients
    • linear-gradient
    • Colorzilla
    • CSS 3: RGBA
    • What is CSS3 Opacity?  (also contains a good example of effective use of CSS Positioning)
       
•   You might find these interesting:
  • subtlepatterns.com
  • Transparent Background Images

Due Thursday, April 13:

NO CLASS TODAY - Stay tuned for Monday's assignment.

• Take handwritten notes in your notebook as you read and study the following.  Indicate areas wherer you disagree.
  • Young Adults/Millennials as Web Users (Ages 18-25)
• Take handwritten notes in your notebook as you read and study the following.  Be sure to do all the "Try It Yourself" as well as the Exercises:
• Nav Bars (be sure to do all the "Try It Yourself" as well as the Exercises.
  • W3Schools:  Bootstrap - Get Started
  • W3Schools:  Bootstrap - Navbar
  • TWBSColor Custom Colors for your Bootstrap navbar

Due Monday, April 10:

•  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!

Due Thursday, April 6:

• Bring an annotated copy of your Spring '17 Web Site Evaluation Worksheet (preliminary) indicating which items we have covered and which items you have completed.
   
•  Links for class:
  • Fonts:
    • Google Web Fonts
    • FontSquirrel Fonts
    • Glyphs
    • Icon Fonts
    • Selecting typefaces for body text
      

Due Monday, April 3:

• No Class today. 
• Work on your final project (see the "Standing Assignment" above).  The classroom will be available at the usual class time.  Take advantage of this opportunity to work on your project in a "Peer Support" environment.

Due Thursday, March 30:

•  Links for class:
  • Fonts:
    • Web Fonts at the Crossing
    • Cross-platform 
      • CSS Font Stack & Fonts!
      • WebspaceWorks Resources
      • VisiBone Font Survey Results
    • TypeTester
    • Google Web Fonts
    • Selecting typefaces for body text
      

Due Monday, March 27:

• Finish converting the XHTML layout page that Expression Web Created ( File --> New --> Page... --> CSS Layouts --> Header, Nav, 2 Columns, Footer ) to an HTML5 page:
  • Replace, where appropriate, <div id=" ... "> with the appropriate HTML5 tag.
  • Adjust the style sheet so that the style for the old <div id=" ... "> tag now applies to the new HTML5 tag.
  • Add your name to the footer.
  • Set a different text color an background color for each section (each DIV and HTML5 tag).
  • Change the size of the text in each section.
     
• Take handwritten notes in your notebook as you read and study the tutorials at http://learnlayout.com/ .  
  • Skip Page 14: Media Queries
     
• Create a home page for your Final Project site. 
  • This won't be the final version.  It doesn't have to be perfect.  It's practice.  Feel free to experiment.
  • The layout for your home page should be based on either the float or inline-block model.
  • Your header and footer should be fixed.
  • Put your CSS in an embedded/internal style sheet.
  • Use a simple unordered list for your navigation.  Don't worry about a horizontal Nav Bar yet... we'll add that later.
  • Make sure your page has at least two images.
     
• Select the fonts for two font groups:
  • A font group should consist of two fonts:
    • One font should have a high probability of appearing if someone is browsing your site on a Mac, but a low probability of appearing if they are browsing on a Windows computer.
    • The other font should have high probability for Windows but low probability on a Mac.
    • The two fonts should look similar... one should be a good substitute for the other.
      • Make sure you compare the look of each font by looking at an image of the font.
         
• Print the HTML for the HTML5 version of your Expression Web Layout page and your home page.  Write your name and the due date on your printout.  Be ready to pass it in at the beginning of class... anything printed after I arrive will not be accepted.
• Upload both pages to your Web site.  Be ready to show me your pages on CuttingEdgeSpace at the beginning of class.

Due Thursday, March 23:

• Take handwritten notes in your notebook as you work through the following tutorials at http://www.w3schools.com/
  
  • HTML Block and Inline Elements
  • HTML The id Attribute
  • HTML The class Attribute
  • HTML CSS:  Inline, Internal and External Style Sheets
  • CSS Layout - float and clear   (skip The clearfix Hack)
     
  As you work through each section be sure to:
  • Experiment with each "Try it Yourself »"
  • Complete each exercise in "Test Yourself with Exercises!" at the end of the section.  Try to do these without the "Hint".  You won't get the "Hint" on a quiz.
     
• Take handwritten notes in your notebook as you watch Appreciating the value of the semantic web from the Web Semantics video on Lynda.com.
   
• Take handwritten notes in your notebook as you read and study the following seven tutorials at http://www.html-5-tutorial.com/.  Make sure you can describe when to use each of these tags.
  • <div>
  • <header>
  • <nav>
  • <article>
  • <footer>
  • <aside>
  • <section>
     
•  Links for class:
  • HTML Layout
  • Pull Quotes
  • Fonts:
    • Web Fonts at the Crossing
    • Cross-platform 
      • CSS Font Stack & Fonts!
      • WebspaceWorks Resources
      • VisiBone Font Survey Results
    • TypeTester
    • Google Web Fonts
    • Selecting typefaces for body text
       
•   You may find this interesting:
  •  How to Tell If Your Webcam Has Been Hacked

Due Monday, March 20:

•    You might find this interesting:
  • Question of the day: Is Photoshop done as a web dev tool?
     
• Links for class:
  • Blocks
    • <div>
       
    • New with HTML5
      • <header>
      • <nav>
      • <article>
      • <footer>
      • <aside>
      • <section>
         
  • HTML Layout

Due Thursday, March 9:

• Unless you got an "A" on your first draft, revise your paper from Feb. 16:
  • Read with care:
    • What You Want To Say Vs. What People Need To Hear
    • How to Use Psychographics in Your Marketing: A Beginner's Guide
      • For this class you'll have to substitute intuition for market research...
        To learn more you may want to take MRKT.305.01 Marketing Research with Prof. Micken, Wed.  06:45PM 09:30PM next fall.
    • Target Market
    Write a paper (1-2 page max)
    • State the topic of your Web site (1 sentence).
    • State the goal of your site... what action do you want visitors to take (1 sentence).  Note: "learn about" is not an action.
    • What do you know about your target market (see the three articles above)?
    • What problem are you going to solve for your visitors?
    • Explain how you will appeal to them?  Put it all together.
       
  • In adition to improving areas noted on your paper, make sure you cover all the points above.  Feel free to improve on any area of your paper. Put some more thought into this.
     
• 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 Blocks
    • HTML Classes
      • Do Exercise 1, 2 and 3.  Be ready for a quiz.
        

Due Monday, March 6:

• Find an image that you like.  Pick an image that is NOT 600 px wide.
• Create a Web site with three pages.  The title and the heading on the pages should be: Nearest Neighbor, Bilinear, Bicubic.
• On each page place a version of the image that was resized to a width of 600 px using the interpolation technique specified in the title and heading for that page.
• Each page should have a link to the other two pages as well as a link to this, the Assignments, page.
• Save your site and be ready to show it to me at the beginning of class.
   
• 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
      • Play with the Try it Yourself for Image Maps
    • HTML Blocks
       
•  Links for class:
  • HTML Image Maps

Due Monday, Feb. 27:

• 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,5 and 6 (skip Exercise 4) in the Test Yourself With Exercises section.
         
• Create an HTML5 Web page about something you are passionate about.  It should include:
  • A heading
  • At least two paragraphs
  • At least two images
    • Make sure your images are resized appropriately (use Fireworks or Photoshop).
• Upload your page to your site on CuttingEdgeSpace.
• 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.
   
•  Links for class:
  • DIGITAL IMAGE INTERPOLATION
  • Fireworks --> Edit --> Preferences --> Interpolation

Due Thursday, Feb. 23:

• 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 (Skip)
    • HTML Headings (Experiment with all the Try it Yourself opportunities)
    • HTML Paragraphs (Experiment with all the Try it Yourself opportunities)
       

Due Thursday, Feb. 16:

• Read with care:
  • What You Want To Say Vs. What People Need To Hear
  • How to Use Psychographics in Your Marketing: A Beginner's Guide
    • For this class you'll have to substitute intuition for market research...
      To learn more you may want to take MRKT.305.01 Marketing Research with Prof. Micken, Wed.  06:45PM 09:30PM next fall.
  • Target Market
     
• Write a paper (1-2 page max)
  • State the topic of your Web site (1 sentence).
  • State the goal of your site... what action do you want visitors to take (1 sentence).  Note: "learn about" is not an action.
  • What do you know about your target market (see the three articles above)?
  • What problem are you going to solve for your visitors?
  • Explain how you will appeal to them?  Put it all together.
     
• Print your paper.  Be sure your name is on it.  Be ready to pass it in at the beginning of class.  Note:  nothing printed after I arrive for class will be accepted.
   
• Create a two or four color GIF that "looks good"... something that might be useful for your final project.

Due Monday, Feb. 13:

• 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.
   
  
•  Links for class:
  • What You Want To Say Vs. What People Need To Hear
  • 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 Thursday, Feb. 9:

• No Class - Snow.

Due Monday, Feb. 6:

•  Links for class:
  • HDMI Cables
  • American Standard Code for Information Interchange (ASCII)
  • Digital Images

Due Thursday, Feb 2:

• Write a short  description of the topic (see the previous assignment) you have selected for the Web site you will develop for this class. 
  • Explain why you selected this topic (1-2 paragraphs)
  • State the message (a single simple sentence) that you want your site to convey.
  • State the goal (a single action you want visitors to take) for your Web site.
• Review your notes from class.
  • Watch Pachelbel's (1653 - 1706) Canon in D piano and violin sheet music - Video Score. 
  • Is Music Analog, Digital or both?  Write a succinct (1-2 paragraph) explanation for your answer. 
• Select an article you find interesting from the list of articles (A List Apart, Smashing, Web Designer News or User Defender) on this page.  Write a short (1-2 paragraph) synopsis.
  Note: article links may not be visible if you view this page on your phone...
   
• Print your work.  Be sure your name is on it.  Be ready to pass it in at the beginning of class.  Note:  nothing printed after I arrive for class will be accepted.

Due Monday, Jan. 30:

• Read Sending a Message That You Don’t Care.  Watch the video on Forms of Workplace Incivility (6 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.  Take notes in your notebook.  Bring any questions to class.
   
• Links for class:
  • 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