MM1123 Fundamentals of Web-based Programming

Class Information

Required Textbook:
Build Your Own Web Site The Right Way Using HTML & CSS, Second (or latest) Edition Ian Lloyd
July 2011. Publisher: SitePoint ISBN: 978-0-9870908-5-0 . View syllabus

Recommended Resources:
"Dreamweaver CS5 Bible" (or later edition) by Joseph A. Lowery. Wiley Publishing.

Lynda.com tutorials - you can check out through the school library.

Don't miss my tutorials and resources. Office hours immediately following class, or via email.

Instructor Contact Information: sharon@casabasa.com or skaitner@aii.edu

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

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

Weekly Course Outline

Week 1

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.

Homework:

1. Email me your url.
2. On the web page created today, add a link to your favorite design website: (hint: <a href="...)
3. Read www.webpagesthatsuck.com.
4. Find 3 examples EACH of good and bad sites. Compare and contrast what makes the site good/bad, based on the readings. Due next week at beginning of class. You may email (sharon@casabasa.com or skaitner@aii.edu) attached as a .pdf or a Word document, print and bring to class, or for 1 extra credit upload and link on the web page created today.
   • The critiques should be well written using design terminology on why something works or doesn't work on a web page.
   • Please write at least 3 sentences about each website
   • Include a link to each website
   • Example of a well-written page: from former student Amanda Frink

Week 2:

Lecture: XHTML. Cascading Style Sheets. What is good design? What makes a design "sucky"? After last week's assignment, you should now be looking at other web sites and consider what makes it "sticky" and has clickthroughs, and what makes you never want to return.
Lab:  Setting up your OLS account. Inline, embedded and external style sheets. Coding a table and lists.
Homework:

• Complete Chapters 2 & 3 of your text and upload to your web site. Each chapter should be saved in their own folder so they are separate links. Let me know via email once it's there and ready for grading.
• 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

Useful Links::

http://www.smashingmagazine.com/2009/08/03/mastering-css-styling-design-elements/

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/

To practice writing your html:

Coding HTML (W3c schools)

http://www.w3schools.com/html/html_intro.asp

Lynda.com tutorials are available in the school library.

http://www.lynda.com/CSS-tutorials/for-designers/216-2.html

Week 3:         

Lecture:

Logical files and structure

Setting up your OLS account.

Explaining XHTML 1.0 Transitional (yes, more coding)

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

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

• Coding tables, lists
• 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)

• Below is an example of a "logical" page at this point. There are no fancy hiding of 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?

  An example of how your homework page should appear:

  

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!

Week 4:         

Lecture: Continued work with html, css and Dreamweaver. 
Lab: Working with Dreamweaver, Photoshop and Bridge. Integrating graphics software with Dreamweaver.
Homework: Complete Chapter 5 of the text and upload to website. All past assignments are due no later than beginning of next class. NO WORK WILL BE ACCEPTED AFTERWARDS. We will be moving on to other things after week 5.

Week 5:         

Lecture: Midterm quiz. 
Lab: Frames. Link today's assignment to your homework page.
Homework: 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.

What I expect from your final portfolio site: list of requirements

Week 6:    
Lecture: Best practices, design and usability in web production.

• Forms.
• Resource and time management principles for web site production.
• Fixing links, site reports: using Dreamweaver's Commands and Site menus

Lab:

• Photoshop: Graphics for the Web. Backgrounds.
• 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/

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.

Week 7:          Guest Instructor: Cele Hanzel

Lecture: Discuss project proposals. Analyze technical and design requirements. 
Lab: For week 7, I want you to become more familiar with using Dreamweaver by doing two specific tasks in Dreamweaver and posting on your homework page for me to review.
Adding a Spry navigation menu. Please remember that we reviewed this week 5. In Dreamweaver from the dropdown menu, Insert > Spry and choose from the bottom 5 items. Make a change in the css and post a link from your homework page to the example. You can include the wireframe and a templated page all on the same page. Title the page "Dreamweaver Examples".

Using Dreamweaver templated pages. Again, we reviewed using these the last few weeks. But this time, let's use some of the new features in CS6. In Dreamweaver, File > New Fluid Grid Layout. Your choice which template, mobile, tablet or desktop. You will first have a dialog box asking you to save the css. Create a new folder within your root folder named layout, and save both the page and the stylesheet within the folder. You can use this page to mockup your wireframe if you like. The link provided would be to this page. See my web tutorial for more information: Creating a fluid layout using Dreamweaver CS6 (web page) or Fluid Layout (.pdf)

Creating a wireframe. Read the page from the link below and sketch or use a graphic software like Photoshop or Fireworks to do a visual mockup of the key areas of your homepage: navigation, content area, any asides, logo, headings, images, any interactivity.

Homework: Create a sample spry menu bar, altering text and size via the css page. Add a wire frame to your project proposal.

Useful Links:

Creating wireframes for Web Design (thanks, Nick!)

• Visit DynamicDrive.com and see what they have to offer.

Week 8:

         Lecture: Design and the psychology of the web user.
Lab: In groups of 2-3, discuss technical and design issues of your final project.
Homework: Validate two pages of your final project.

Week 9:        
Lecture: Please work on your contact page of your portfolio site. ;-)
Lab: Submitting site to Yahoo and Google. A look into javascript behaviors.
Homework: Add a contact page to your site.

What I expect from your final portfolio site: list of requirements

Week 10:        Lecture: Final exam. SEO. Q&A.
Lab: Review of final project requirements. Check your points! All work is due except presentation of final project (next week.)
Homework: Email instructor.

Week 11:        Lecture: Final presentations and critique of projects.
Lab: Continue
Homework: none

Helpful Links

Link to the book's companion site: http://www.sitepoint.com/books/html1/

Lab: Code Archive (2008 version):

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

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

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

http://dribbble.com/

• Smashing Magazine
• mastering-css-styling-design-elements/
• The perfect 3-col layout
• 45 step by step web designs with Photoshop
• Simplicity in Good Web Design (thanks, Franky!)
• What Copyright Means for your Website: http://www.sitepoint.com/blogs/2009/03/11/what-it-means-to-copyright-a-website/ submitted by Nick Dyzkeul, former AI student and currently Web Developer for Gallo Winery
• Free FTP: http://www.smartftp.com/
• An Ebay-like site for artists: http://www.etsy.com/
• http://www.cssdrive.com/
• http://issuu.com/

Student Portfolios