Casa Basa ˜ blending art with technology

Syllabus

Course Description: An introduction to writing and editing html documents for the production of Web pages. In addition, this course examines the history and future of web media.

Download the Word version of your syllabus here

Course Length: Summer 2010. Section A, 11 weeks. Monday July 12, 2010 to Monday September 20, 2010, from 1 p.m. – 5 p.m., Room 309. Punctuality is expected. Points are deducted for excessive (more than 3) tardies.

Course Competencies:
Upon successful completion of this course, the student should be able to:

• Identify websites that demonstrate good layout and usability design techniques.
• Compose basic HTML using a simple text editor.
• Design, produce, and successfully upload a basic website.
• Construct logical file and directory structures for a website.
• Implement frames, tables and forms using HTML.
• Apply principles of visual design to the layout of web pages.
• Create a proposal and flow chart suitable for delivery to a potential client.
• Apply time and resource management principles to the website production.
• Prepare and use images as effective elements of web design and content.

Course Prerequisite(s): FS104 Computer Applications

Required Textbooks:
Build Your Own Web Site The Right Way Using HTML & CSS, Second Edition Ian Lloyd
November 2008. Publisher: SitePoint
ISBN 10: 0-9804552-7-8 | ISBN 13: 9780980455274

Recommended Textbooks:
"Dreamweaver CS4 Bible" by Joseph A. Lowery. (Wiley Publishing), ©2009. ISBN: 047038252X or latest edition

"Head First HTML with CSS & XHTML" by Elisabeth Freeman & Eric Freeman. (O'Reilly Media, Inc.), 2nd Ed. ©2006. ISBN: 0-596-10197-X.

"Creating Web Sites: The Missing Manual" by Matthew MacDonald. (O'Reilly Media, Inc.), 2nd Ed. ©2006. ISBN: 0-596-00842-2.

"Learning Web Design: A Beginner's Guide to HTML, Graphics, and Beyond" by Jennifer Niederst Robbins. (O'Reilly Media, Inc.), 2nd Ed. ©2003. ISBN: 0-596-00484-2.

Dreamweaver CS3: Hands on Training by Garrick Chow (Peachpit Press), Copyright ©2008. ISBN:032150985

Materials and Supplies: Storage drive, notepad and pencil or pen

Estimated Homework Hours: 4 Hours per week

Technology Needed: PC and Mac computers will be used or discussed, access to Microsoft Office and Adobe Creative suite software, scanner, and the web.

Instructor Contact Information: skaitner{at}aii.edu or Sharon{at}casabasa.com

Top of page

List of lectures and labs

Weeks: 1 2 3 4 5 6 7 8 9 10 11

Students are responsible to check this at least one day prior to class. Here you will find weekly lectures, homework assignments, and your standing within the class. Please email me at sharon{at}casabasa.com if you have any questions.

Week 1: Monday, July 12, 2010

Complete the student survey. Review of the school’s emergency evacuation procedures. Review of course and requirements. Contact is skaitner{at}aii.edu or sharon{at}casabasa.com.

Lecture:

• Introduction and discussion of course content. The history and future of web media. Looking at web design, structure and color schemes.

Lab:

• The Basic Web Page: Tags, Structure, Formatting, Headings and Images. Save your work.
• About coding a page
• Setting up your OLS account: uploading to the school's server.

All homework is due the following week unless otherwise stated. Be prepared to discuss any assigned readings.

Homework:

• On the web page created today, add a link to the book's companion web site: http://www.sitepoint.com/books/html1/. (hint: <a href="...)
• On the page, download (free for your email address) Chapters 1-5. Read and complete chapters 1 & 2 and link from the home page created today.
• Read www.webpagesthatsuck.com.
• Find 3 examples EACH of good and bad sites. Compare and contrast what makes the site good/bad. Write a review based on the readings and save as a Microsoft Word document. Be sure to critique each site. Due next week at beginning of class. You may email to skaitner{at}aii.edu attached as a .pdf or a Word document.

• Here is an example of a critique receiving full credit: Example Good vs. Bad (full credit). Note that there are no misspellings, that a proper comparison is done using design considerations, and that correct grammar is used. The url's are given and the company identified.

• Email me your url.

On a Mac and having issues with TextEdit not rendering your .html in text? View this help page from Adobe: http://support.apple.com/kb/TA20406

Week 2: Monday, July 19, 2010

• Lecture: Logical files and structure

Lab: Explaining XHTML 1.0 Transitional (yes, more coding)

• unordered, ordered, and definition types
• comments
• doctype
• About CSS (cascading style sheets) http://htmldog.com/guides/css beginner/applying css/
• http://validator.w3.org/

Homework:

• Complete Chapter 3 of your text and upload to your web site. Let me know via email once it's there and ready for grading. sharon{at}casabasa.com or skaitner{at}aii.edu.
• Read 10 Principles of Web Design from Smashing Magazine. Email me which of Smashing Magazine's 10 principles you can relate to the most and why.
• And on the flip side, read this article: 10 rules that you can break

Code Archive:

http://www.sitepoint.com/books/html2/code.php

Week 3: Monday, July 26, 2010

Lecture:

Well done analysis of good vs. bad web design by Catherine Clow

• What is good design? What makes a design "sucky"?
• Looking at web design and structure
  • http://buildinternet.com/2009/09/principles-of-effective-web-navigation/
  • http://meiert.com/en/blog/20070113/web-design-15-important-research-findings-you-should-know/
  • http://www.smashingmagazine.com/2009/08/03/mastering-css-styling-design-elements/
• Adding style to our web page: Inline, Embedded and External style sheets
• Positioning and div's, spans, classes and id's
• Necker Cube: connector.gif and square.gif

Lab:

• Introduction to Dreamweaver: split screen (coding and designing), modifying the page properties.
• Using Dreamweaver in code view, condensing code, the shortcut menu.
• Adding style. using CSS in Dreamweaver, we can add a border to our page, change our links, and add margins and padding to the page.
• Sample table and CSS layout (from class)

Homework:

• In your text, complete chapter 4 and add to your website. Email me once you have uploaded.
• Sketch 2 home page interfaces for next week. Pencil and paper only!

Below is an example of a "logical" page at this point. There is no fancy hiding the links, but instead lists each item offered, in mind of the end user (me). How would this be different if this was intended as an artist personal portfolio? Or for employment?

Example of what your home page should look like:

Week 4: Monday, August 2, 2010

Lecture:

• Adding the footer on each main page: copyright, email address, url, last revised
• Adding Meta tags
  • meta Robots tag
• Coding a table and lists.

Lab:

**All homework is due by week 5 to receive any credit at all. Remember, you only qualify for full credit if the work has been turned in on time. If you have not already done so, please email your url.

Homework:

• Complete Chapter 5 of the text and upload to your website. Email once it's there.
• Research design documents online. Simple example: web/desdocument.html
  • Decide who your target audience is, what your main objective is, and the overall style (typography and colors) you intend to use for your portfolio site. Begin working on your design document. Due week 7.
  • Design Document example (Patty McAllister).
• Study for midterm based on online readings and chapters 1-5

 

Week 5: Monday, August 9, 2010

Lecture: Integrating graphics and web-making software

• [Midterm test]
• Resource and time management principles for web site production.
• Introduction to Photoshop: Graphics for the Web

Lab:

• Photoshop (as time allows, we will use this software throughout the course)
• Saving for the web.
  • .gif for animations, transparencies, 2-3 colors, solid blocks of color
  • .jpg for millions of colors
  • .png superior transparency and saving of information but limited by some browsers
• Adding color - creating background color and image
  • Creating backgrounds
  • Creating buttons (as time allows)
• Creating a favicon for your web page.
• http://www.degraeve.com/favicon/
  • http://www.golivein24.com/tips/favicon/. This set of instructions refers you to a Photoshop plug-in offered by Telegraphics.com. If you use this open source plug-in, be sure to save it in the "File Formats" subdirectory of Photoshop's "Plugins" folder, then quit and re-launched Photoshop. You will then be able to save as an .ico. Be sure you have already optimized the image.
  • Another tutorial can be found at: http://www.yourhtmlsource.com/
• Fixing links, site reports: using Dreamweaver's Commands and Site menus

Homework:

• Complete design documentation, due week 7. Breathe for a bit. ;-)

 

Week 6: Monday, August 16, 2010

Lecture: Review of file structures, grids, layouts and resources. http://css-tricks.com/designers-these-days/

Lab:

• Adding a Spry navigation Menu Bar
• displaced rollover

Using Adobe Bridge and Dreamweaver to create a web gallery

Creating a form

Homework:

• Add a form to your site and email me when ready to grade. I will check that the user must give his/her email address.
• If all your points have been accounted for up to the midterm, you can remove your old web pages and begin work on final project. It is understood that the final project is a work-in-progress and will improve over time.

Week 7: Monday, August 23, 2010

Lecture:

• Design Document discussed
• Create a sample Spry menu bar (any one)
• http://www.dwfaq.com/Tutorials/
• Review of final project requirements
• Creating Frames
• Adding Meta tags

Lab:

• Class time with instructor

Homework:

• Add Description and keyword meta tags to your final project web site (week 4)
• Create a sample Spry menu bar (any one), either for your homework site, or in your final project. Alter the CSS in some way. Remember to email me whenever pages have been updated for points. As an alternative, visit DynamicDrive.com and see what they have to offer.
• Continue work on final project.

Week 8: Monday, August 30, 2010

Lecture:

• Optimizing video using Flash Media Encoder
• Submitting your site to Yahoo and Google.
• Creating wireframes for Web Design (thanks, Nick!)
• Rubric on how final project is graded.
• Embedding fonts

Lab:

• Project time. Using different layouts and widgets within Dreamweaver. Commands and site reports.

Homework:

• Can you validate your site? http://www.w3schools.com/site/site_validate.asp? Add proof to at least 2 pages on your web site.
• Add a frames example to your web site.
• Continue work on final project.
• Read: Effective About Me pages

 

 

Week 9: Monday, September 6, 2010

Labor Day holiday

Homework: Read this article on CSS positioning: http://css.researchkitchen.de. It may help. Then change your computer resolution to 1024 x 768 and take a look at your site through the eyes of most people. Email me what you saw.

**A good example of a perfect design document: Example from Stephanie Sakai, of a well-thought out (A) design document.

Week 10: Monday, September 13, 2010

Lecture:

• [Final exam]
• Search engine optimization (SEO)
• Portwiture.com, social networking

Lab: ALL PAST DUE WORK MUST BE COMPLETED BY THE END OF CLASS TODAY TO RECEIVE ANY CREDIT.

• Review of final project requirements
• Homework: Email me and tell me all you learned this quarter and how proud of yourself you are. No negativity! Continue work on final project.

Week 11: Monday, September 20, 2010

Lecture: Final project presentation

• Presentations and in-class critiques. Speak about technical, design and creative challenges. Show how you targeted your selected audience, and where you were successful.

Lab: http://css-tricks.com/what-beautiful-html-code-looks-like/

Search Engine No-No's: http://www.seopros.org/members/practices.htm

Homework: none

Criteria by which you and your projects are graded for this course. Please see me if you have any questions.

Logging into your personal grade

Please remember that the software I uses a tally of total points of a possible 100. You will not see the grade of "F" change until you are way into the quarter, somewhere around week 8 or 9.

Class Standings

Click on this individual score link to access scoring information on your completed projects.  Enter your name and id (password) exactly as you provided in the student survey.

I upgrade my grades every Sunday, usually no later than 2 p.m. I may update points for work received after this time, but before 7 p.m. only.

If there are any questions at all, please feel free to email me. I usually respond the same day and sometimes immediately, or at least within the hour.

If you have any problems, email me.

Attendance and Class Participation Policy - Attendance and class participation are 25% of the final grade for the course. Students will be expected to attend class as well as act as active participants in class lectures. This is worth 10% of your overall grade. 5% is awarded for perfect attendance, recognizing that you cannot learn if you do not attend, and how difficult it is to do. This is a sign of excellence.

Assignments and homework are graded by points for a total of 45% of your grade. Usually the homework is a demonstrated skill, like emailing me your url. With this assignment, you are telling me that you can use the email, know what a url is and how to accurately send a link. Usually, I have more than one goal with an assignment, and each assignment builds on the previous.

Working from the chapters of the book is also a demonstration of skill. It shows whether or not you understand what you are doing. It can also demonstrate paths, how your web pages are saved, and organization, the ability to display your work in a thorough, logical manner. This means that each chapter of the book (chapters 1-6) should be linked separately and displayed in a way that it is easy for the end user (me) to find.

After the midterm, you will probably want to build a separate web page titled Homework, and link individual assignments given after week 5. You also have the option of demonstrating the homework skill on your final project. When you email me that you have posted that week's homework, you can tell me where it can be found.

Midterm and Final tests and presentations are a combination of tests and projects. The midterm test is a check for knowledge on both our parts. The final test demonstrates your hard work, skill and knowledge gained in this class. Because this class produces a final project, part of that demonstration includes using the software, xhtml, css and web graphics, and part of that demonstration is the actual final project, your portfolio. These items total 30% of your grade.