Assignment

Assignment Instructions and SW Recommendations

All students need to complete the first three assignments (Orientation/DE, Post on Previous Designs, CIM-DW w FireFox Addons) and also the textbook tutorial assignments chapter 2..chapter 16.
You may complete the previous class assignments and project as extra credit.

H0 Intro Orientation Week 1

Complete the five steps at https://cim.saddleback.edu/~class/cimRoot/de.html

Attend the 1/20/2016 noon Web-casts or watch the archived version of Web-casts.
Will be releasing course notes, at the start of all web-casts.

Complete the HTML video under Blackboard.

Make sure you complete the Web-cast survey, I need to find a good time to host the web-casts.

Make sure you take the blackboard orientation - intro quiz.

Checklist...

  1. Make sure school e-mail has been forwarded or will be checked
  2. Watch the generic course intro videos at https://cim.saddleback.edu/~class/cimRoot/de.html
  3. Complete the Questionnaire. You need to enter a non academic e-mail.
  4. Login into Blackboard take Orientation Quiz 0;
  5. Watch the blackboard HTML Video
  6. We have help in the IMC lab mon-thurs. Consult office hours for exact times.

H1 Comments on Previous CSS Designs Board Week 1

For Spring/2016 you will not be creating a new design for the class web-sites. All assignments except the first 3 will be from the book. You may complete a new design, or preferably turn a previous design into a mobile first design as extra credit. However you do have to comment on previous designs. Nota Bene, in the summer I plan to update the class site structure to either bootstrap, or jQuery UI w fluid grids. Bootstrap is an HTML/JavaScript framework based on fluid grid layout and jQuery UI components.

In designing a new system we first determine what needs to be done, later on we worry about the how. For this assignment even thou a project design is not required you need to post or rate using blackboard discussion board on previous designs. We currently ranking off all designs. Many other design have potential but need work. Post or rate comments on chosen set active designs and also post comments on some non-active design. You may make general posts on what you think is missing from the designs. Or you can focus in on a critique a few specific designs.

For this assignment You must post on blackboard to receive assignment credit . After posting also come up with some initial design ideas (i.e., central theme, specific look and feel, etc. ) - this is what you think should be done. You don't have to post your design ideas.

Checklist...

  • Make sure you have both posts (zen and cimw240 designs) on blackboard discussion board

 

H2 Create CIM Home Page Week 2

Watch backboard videos on creating a home page on CIM and create your CIM home page, you can use this index page as a starting block. If you have completed other classes you should already have a Dreamweaver site definition. If you don't know Dreamweaver, you can use any FTP client to put files to CIM. Filezilla is the recommended FTP client.

Also watch the Browser add-on video. We will cover chromes internal developers tools when we get to RWD, part 3 of the textbook.

Checklist...

H3 - Complete Tutorial 2 of the Textbook

Attend second web-casts covering chapter 2 and 3.
Complete chapter 2, tutorial in the textbook.

Page 27-39 Tutorial: Creating your first style. Create a sub-folder cimw240 in public_html, put all tutorial assignments in this sub-folder. Make sure you home page has links to all cimw240 assignments.

 

H4 Tutorial 3 Selector

Complete the tutorial 3 page 70-84 tutorial selector example.

Checklist

  • take blackboard quiz 1 intro CSS and quiz 2 selection.
  • on blackboard use tools --> my grades to verify quiz grades for first three quizzes: intro-de, quiz 1, and quiz 2.

H5 Chapter 4 Inheritance and 5 Multiple Style Sheets

  1. Watch blackboard web-casts covering chapters 4 and 5.
  2. Complete both the chapter 4 and chapter 5 tutorials in textbook.
  3. retake blackboard quiz 1 intro to CSS and quiz 2 selection.
  4. make sure you home page is working, and you have links to a cimw240 index page or each cimw240 tutorial.

H6 Complete Chapter 6 Font Tutorial

  1. Watch Blackboardweb-casts covering typography.
  2. Complete the textbook font tutorial.
  3. Complete the blackboard quiz on fonts/typography

H7 Complete Chapter 7 Margins Padding and Borders

  1. Watch Blackboard web-casts covering chapter 7.
  2. Complete the text-book tutorial in chapter 7.
  3. Complete the blackboard quiz on box model - margins, padding and borders.

H8 Adding Graphics to Web Pages

  1. Watch Blackboard web-casts covering chapter 8.
  2. Complete the text-book tutorial in chapter 8
  3. Complete the blackboard quiz on colors and backgrounds.

H9 Chapter 9 Sprucing up Your Sites Navigation

  1. Watch Blackboard web-casts covering chapter 9.
  2. Complete the text-book tutorial in chapter 9

H10 Chapter 10 CSS Transforms, Transitions and Animations (last required assignment for CIMW240/Spring2016)

  1. Watch Blackboard web-casts covering chapter 10..
  2. Complete the text-book tutorial in chapter 10

HExtra Credit Chapter 11-Chapter16

All other chapter tutorials and quizzes will be extra credit.

Will have 2 Web-casts after Spring Break covering part III of textbook and RWD.

Old Assignments Deprecated

H6 and to the end not ready yet, but it will be Tutorials for Chapters 6..17

Add CSS to syllabusH4.htm. to create this image.
get FireBug Add-on Video demonstrates these files: firebug.htm , jsBug.htm, fixed.htm, cs4b, inputName.html & Google Page Speed.

You may use these Italian Cursive font definitions, (on cim you can load jstudent font files, but you can right^click to save file)..

Note Google also has a CDN cursive font Monsieur La Doulaise

Another font is blood dracula ...

You may also want use a Web Based Font...

  • As of 12/2012 W3C recommends using WOFF, Web Open Fonts are otf and ttf fonts that have been compressed using zli.
    all modern day browsers support zlib decompression, you can actually compress all your CSS and JavaScript code using libz; IE9 and up support WOFF. The site font2Web will convert otf or ttf to woff fonts, it also output the font-face directive.

  • Adobe Restricted Use   https://typekit.com/ On CIM we cannot use typekit, 1 site free.
  • No Restrictions  http://www.google.com/webfonts; google doesn't have italian cursive, they have a similar font...

    @import url.(https://fonts.googleapis.com/css?family=Italianno);
  • Cufon is very popular and consider easiest to use.

Note using a CDN (Content Delivery Network) provider is currently the recommended way to create Web Sites. By using Google or Adobe typekit you are using a CDN.

Assignment covers Mutliscreen, Adobe Device Central, Adobe Browser Lab, Chrome Developer Tools, IE8, and Firefox FireBug.

Checklist

  • take a second look at Web Based Fonts and read up on CDN - content delivery networks which are becoming popular
  • watch blackboard video on completing H6
  • make sure h6 is part of your home page: cim student search and the the javascript is working

HX Colors and Backgrounds Week 7

Colors and Backgrounds
Chapter 5 CSS Book &/or Chapter 20 Nutshell

Viewgraph's and tabs8.zip data file available on blackboard; Watch Videos complete blue flame image. Note in Fall 08, many followed this designed, you should try to come up with an innovative design.

Nota bene, I was trying to develop a fire and ice theme. For a project you could look at creating a design around Upsilon Andromeda b, its a Jupiter size planet that is very close to its Sun, with one side always facing the sun (on fire) and the other side is all ice. Planets like this can have one temperature caused by very fast winds. Neptune is also a fire and ice planet, its internal core is still very hot, but the surface is frozen, as a result have have 900mph winds on Neptune. Note a good idea in coming up with a design is to first find the icons or images and the extract colors from them. I tried to do find a good fire and ice image end up giving up and created my own.

Checklist

  • complete chapter 5 blackboard quiz
  • watch blackboard video on completing H8
  • make sure h8 is part of your home page: cim student search - remember you can be creative on this assignment, just demonstrate the basic capabilities I'm looking for.

 

Modern Web layout with Flexbox

Mini-Tutorial Auto Margins for Flex Items page 544 and Tutorial: Build a Flexbox layout page 556

HP Web Site Strategy Video Week 5-7

Web Site Strategy Just Videos

Watch blackboard videos on the Class Web site Strategy. Decide on a project option. Come up with a feasible high level CSS presentation strategy. However, your design should not be influenced by the assignments and/or previous designs. Note you have three options to complete the project:

  1. You can enhance a previous design, however you must let me know which one you will be using.
  2. Form a group - a blackboard thread will be available that you can use to form a group; You probably want to include presentation theme and objectives in your group thread.
  3. Work independently on a brand new design.

Assignments are geared toward understanding the page layout structure of the project. As soon as you are comfortable with the assignment page layout structure and feel you know enough about CSS to start the project, you can watch these videos.

Checklist

  • Use Blackboard tools --> My Grades to verify all quiz grades
  • Make sure all assignments are done: cim student search -
  • Make sure project is done
  • Review course grading option if you didn't complete all assignments/projects.

 

WIP RWD Responsive Web Design Week 8

RWD Responsive Web Design Fall/2013

Reading: Wikipedia RWD, Original Marcotte Publication, Examples of CSS3 RWD sites,

Previous presentation by Joe Ascona

O'Reilly Conference RWD April 16th 2012.

WIP Optional CSS Compression (minify) or Optimization Week 8

May want to compress or optimize your CSS project code. But keep in mind, that readability and maintenance is more important than performance. You can also look into obfuscating your CSS code, but for CSS obfuscating would be minimum, why?

Final Class Reminders aka Final Checklist... Week 9

  • Blackboard Quizzes maintain final due dates
  • Make sure you have a Blackboard posts for H1
  • Make sure you have completed all Blackboard quizzes
  • Refer to syllabusReview Syllabus Grading
  • Make sure you have a working home page on CIM
  • Make sure you have completed the book tutorials chapter 2-chapter 10

Thanks for taking the class, cimw 280 Portfolio, cimw 160 JavaScript/jQuery and cimw 145 Intro PHP, CMS WordPress and E-Commerce are good classes to take next.

.