MM1123 Fundamentals of Web-based Programming

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.

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

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 my availability immediately following class, or via email.

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

Class Meetings: Section A. 11weeks, 8 am – 12 noon, room 309. Monday, January 10, 2012 - Monday, March 21, 2012. Punctuality and attendance are expected. Points are deducted for excessive tardiness (more than 3).

Grade Information: As I receive emails from students that they have uploaded their homework to their homework sites, I update points. Login to this link to Gradekeeper and enter your First and Last name (case sensitive, capitalize the first letter of each) and your student id number to see your points to date. Your name is exactly like I have it below. It is case (and space) sensitive.

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.

List of lectures and labs

Students are responsible to check this at least one day prior to class. Email me at sharon@casabasa.com if you have any questions. Tutoring is available on Mondays at noon, rm. 309.

Week 1: Monday January 9, 2012

Complete the student survey.

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:

Email me your url.
On the web page created today, add a link to your favorite design website: (hint: <a href="...)
Read www.webpagesthatsuck.com.
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.

Useful 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

Week 2: Holiday January 16, 2012 Martin Luther King, Jr. Day

What do you do? Read below:

What is good design? What makes a design "sucky"? Since we are missing a day of class, I want you to spend at least 1 hour on the Internet, researching what makes good vs. bad design.

Some links to get you started:

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/

You should also try to practice writing your html. Here are some links to assist:

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

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

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:

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!

Please note: as of the beginning of week 4, you should have 20% of your final grade.

Week 4:

Lecture:

Review of grades and assignments to date. More work with html, css and Dreamweaver.

Lab:

Adding the footer on each main page: copyright, email address, url, last revised

Adding Meta tags
- meta Robots tag
Coding a table and lists.

Creating Frames

Homework:

Complete Chapter 5 of the text and upload to your website. This is the last chapter from the book.
Link your frames page created in class to your homework page.
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).

Another good example of a perfect design document: Example from ex-student Jeremy Belk, of a well-thought out design document.

Week 5:

Lecture: Integrating graphics and web-making software

[Midterm Test moved to week 6. We will complete the Frames exercise today.]

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 buttons (as time allows)
- Using Adobe Bridge and Dreamweaver to create a web gallery (this week and next)

Homework:

Complete design documentation, due week 7. Add your logo to your site. Logo is traditionally in the upper left side, known as "prime real estate". Logo should be linked to your homepage and have both alt and title attributes.

Week 6:

Lecture: Review of file structures, grids, layouts and resources. http://css-tricks.com/designers-these-days/. Fixing links, site reports: using Dreamweaver's Commands and Site menus

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/
- http://www.w3.org/2005/10/howto-favicon

Lab:

Adding visual interest: integrating Dreamweaver and other Adobe products

Homework:

Practice creating a gallery, either using Bridge or maybe trying a tutorial from online. Try one of the templates in Dreamweaver, or, again, try something from the recommended resources online. Use this last week of experimentation to try out ideas for your portfolio.
Begin work on final project. It is understood that the final project is a work-in-progress and will improve over time.

Week 7:

Lecture:

Review of final project requirements
Adding a Spry menu bar
Design documentation due. Examples: 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. Another well done analysis of good vs. bad web design by Catherine Clow.

Lab:

Practice time. Please have your final project assets and sketches available to work on in class. Working in groups of 2-3, show what you've been working on and discuss.

Homework:

Add Description and keyword meta tags to your final project web site.
Upload an example of the menu bar in which you have changed the css (different from class).
Add a wireframe of a sample page to your design document, to add visual interest and to help establish hierarchy (visual).

Useful Links:

Creating wireframes for Web Design (thanks, Nick!)

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

Week 8:

Lecture:

Using Dreamweaver templated pages:
Creating a CSS site using built in Dreamweaver templates
http://www.webreference.com/authoring/style/sheets/layout/advanced/
step-by-step Dreamweaver and CSS palettes

Lab:

Open lab with instructor. Continue working in groups of 2-3, discussing any technical or design issues you may have. http://coderace.me/

Homework:

Continue work on final project and make adjustments based on this week's group critique.
Can you validate your site? http://www.w3schools.com/site/site_validate.asp? Add proof to at least 2 pages on your web site.

Week 9:

Lecture:

Creating a form in Dreamweaver
Rubric on how final project is graded.

Lab:

Lab time to work on project with instructor assistance.

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. Continue work on final project.

Read: Effective About Me pages

Useful Links:

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

http://www.freecontactform.com/email_form.php

http://www.w3schools.com/PHP/php_mail.asp

http://www.kirupa.com/web/php_contact_form.htm

Week 10:

Lecture:

[Final exam]
Search engine submittal: Submitting your site to Yahoo and Google.
Q & A

Lab: ALL PAST DUE WORK MUST BE COMPLETED BY THE END OF CLASS TODAY TO RECEIVE ANY CREDIT. Review of final project requirements. Assistance as needed.

Homework:

Email me and tell me all you learned this quarter (not just this class) and how proud of yourself you are. No negativity! Full credit only for those who write a lot. Continue work on final project. Please double check your points.

Week 11: Monday March 19, 2012

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.

Grading rubric: Your final project is your online portfolio. In the first half of this course, you learned basic skills to create a website. In the second half, your focus has been on creating the final project, your online portfolio. Figuring out how to do that is part of your grade; applying skills I demonstrated in class is another part. There were many decisions as you designed your solution and they all use a variety of your skills: technical, creative and cognitive.

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