
Meeting Times and Location:
Saturday / Sunday
Room 013 9:00am - 9:50am
Room 228 10:00am - 11:50am
Syllabus: im2420syllabus.doc
Week 1 | Week
2 | Week 3 | Week 4 | Week
5 | Week 6
Week 7 | Week 8 | Week
9 | Week 10 | Week 11
Projects Through Week 6
| Assignment | Week | Due date |
| 1. Create a 12 month calendar... | 1 | Sunday, Week 2 |
| 2. Site eval on SCANMIC criteria in HTML/CSS | 3 | Saturday, Week 3 |
| 3. Create an XHTML form with PHP action | 4 | Saturday, Week 4 |
| 4. CSS Positioning Project | 5 | Saturday, Week 5 |
| 5. Final Project DevPlan | 6 | Saturday, Week 6 |
| 6. Four mockups of one page | 7 | Saturday, Week 7 |
Fundamentals of Scripting Languages - Week 1
Textbook: HTML, XHTML & CSS (6th edition) Visual Quickstart Guide by Elizabeth Castro
Week 1 Reading: Introduction and
Chapter 1 (pages 13-42)
Saturday: Make sure that you can login to your OLS account. Setup an FTP connection using "Add a Network Place", or on a Mac use RBrowserLite . Upload index.html to your "htdocs" directory. Use the following example or create something new using the tags we discussed in class.
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html> |
Sunday: Learn about
and utilize basic HTML tags, including tables, in a web calendar of the current year. Our assignment for the week is to create a 12 month calendar for the
year 2007. Each month must contain all the accurate days for the month
arranged in a table structure of columns and rows. The requirement for this exercise are as follows:
1. Use a typeface other than the default nad include some content besides day numbers (i.e. holidays, etc.).
2.
Create borders without using the table border attribute.
3. Create navigation to get to every month from any month.
4. Use background images in some of the cells.
5. Use background colors to enhance your design.
6. Upload to the OLS or comparible hosting.
7. Place internet shortcut to your project on the dropoff drive under "John Keston:IM2420:<your name>:Calendar URL".
This assignment
is due Sunday, Week 2. Here are some tag definitions and example tags to work from. Remember to use the resources linked below.
<html> <body bgcolor="#FFFFFF" background="bg_image.jpg" link="#FF0000" vlink="#777777"> <h1>heading</h1> <center>center
information</center> <font face="Arial, Helvetica, sans-serif" color="red" size="1">font attributes</font> ordered lists: unordered lists: <img src="image.jpg" width="100" height="25" border="0"> image
tag </body> |
Required Reading:
Authoring:
HTML Basics
Resources
HTML Cheat Sheet (an excellent html resource)
www.webmonkey.com (a
comprehensive web development resource)
ordered list
attributes: unordered list
attributes: image tag and
paths: Relative Link: Internal Link
or Anchor: Absolute or Hard
Link:
<tr> </table> |
Fundamentals of Scripting Languages - Week 2
Week 2 Reading:
Skim chapters 2,3,4 (pages 43-79)
Read chapters 5,6,7 (pages 81-124)
Saturday: Use "colspan" within
your table data cells to merge cells without days in the beginning and
end of months (i.e. <td
colpsan="4"> </td>). Try adding images
and/or text for holidays or birthdays. Also, use "width" and "height" attributes
to line up the calendar days. Here's an example:
<html> |
Note: The use of HTML escape sequences such as allows you to place special characters into your HTML documents. Less than ("<") and greater than (">") symbols would not be available without using an escape sequence. View the link below for a complete list of HTML escape sequences.
HTML Escape Sequences
Sunday: Today your calendars are Due. Make sure that your link on the drop off drive is there and working properly. Stylesheets (technically
Cascading Stylesheets), or CSS allow web developers much more control
over the look of their web pages. They make it possible to define styles
globally for a site, eliminating the need for repetitive font tags,
color tags, alignment attributes and so on. This creates better organization
by separating form from structure. Sytlesheets are a critical tool
for any web developer and make creating sites infinitely faster and
easier, once you've learned how to use them.There are four ways to
include styles in your HTML documents.
1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>
2. Global or Embedded. A better solution is to include the style definitions is a style tag otherwise known as by using the global (embedded) technique. Like this example:
| <html> <head> <title>Style Demo Page 1</title> <style type="text/css"> <!-- h1 { color: red; font-size: 24px; font-family: arial } p { text-indent: 1cm; background: #eeeeee; font-family: courier } td { font-family: arial } b, i { color: green; font-size: 20px } --> </style> </head> <body> <h1>TEST</h1> <p>Hello World</p> <table> <tr><td>I'm in a TD tag with no font tag</td></tr> </table> <b>bold. <u>underline</u> within bold (no style)</b><br> <i>italics</i> </body> </html> |
3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here's how you link a stylesheet:
| <html> <head> <title>Untitled Document</title> <link rel="stylesheet" href="my_styles.css" type="text/css"> </head> <body> <h1>TEST</h1> </body> </html> |
and here's what the stylesheet document (my_styles.css) looks like:
| /* CSS Document
*/ h1 { color: red; font-size: 24px; font-family: arial } p { text-indent: 1cm; background: #eeeeee; font-family: courier } td { font-family: arial } b, i { color: green; font-size: 20px } |
4. Imported stylesheet
go within a style tag, thus allowing you to include other global styles
which will override what's imported. In the following example the h1
definition will override the h1 definition found in my_styles.css:
| <STYLE TYPE="text/css"> <!-- @import url(my_styles.css); h1 { color: #FF00FF; font-family: impact } textarea { text-transform: uppercase } --> </STYLE> |
Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html
Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement all subsequent projects).
Web
Monkey Stylesheet Tutorial
Web
Monkey Stylesheet Reference
Web Monkey CSS Positioning Tutorial
Fundamentals of Scripting Languages - Week 3
Saturday: A good set of guidelines to follow for web development are the SCANMIC Usability Criteria. Read the the reading assignment linked below to gain a full understanding of the SCANMIC principals. Here's a quick outline of each of the criteria:
1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you've been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text - font, font size and color).
Assignment: As a first project utilizing CSS let's create single page with a table, images and type all formatted with CSS. Write the content for your web page as a critique of a website that you consider a bad design. Create a one or two page web based evaluation of the website outlining how your example site does not adequately apply the usability points above. The site you evaluate must be accessible over the internet and shouldn't be too high profile or contain inappropriate materials. Make sure you include links to the pages that you're evaluating in your web document also include images to illustrate your points. Links to your evaluations will be due on the drop off drive by Saturday, Week 4.
SCANMIC Evaluation Project Requirements
1. Select a poorly designed "under the radar" website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use a linked or imported custom CSS document to format the type and images.
5. Link your evaluation on the drop off drive by Saturday, Week 4.
Student Example:
http://www.angelsoftheweek.com/school/scanmic/
Reading Assignment:
Identifying Web Usability Criteria
Sunday: Let's start learning about frames. Read the tutorial at the link below. Try to reproduce the very simple example shown at http://stu.aii.edu/~jck362/frames/. Here's the code for the frames. Each document is referenced within the "frame source" (<frame src="blue.html">) tag:
|
Example Frame Set: <frame src="blue.html" name="left_bar"> <frameset rows="100,*"> <frame src="green.html" name="top_bar"> </frameset> </html> |
Reading Assignment:
Frames
Are a Picnic
Frames Project
Create
a new site that uses frames to display content. There should be a minimum
of 3 frames on the page, and 6 or more documents total. Use targeting
to load new content in one frame from another. See the example example
shown at http://stu.aii.edu/~jck362/frames/.
Experiment with several frame attributes, images and navigation techniques. Also, use CSS to format your documents.
Frames Project Requirements
1. There should be a minimum
of 3 frames in the browser, and 6 or more documents total.
2. Use targeting to load new content into each frame.
3. Use a linked or imported custom CSS document to format type and images.
4. Type the HTML and CSS code using a text editor (TextEdit or Notepad).
5. Due Saturday, Week 5.
Frame Attributes and Targeting: <frameset
rows="100,*,100" frameborder="yes,no"> </html> Targeting
Links: |
Fundamentals of Scripting Languages - Week 4
Week 4 Reading:
Chapter 8 "Working with Stylesheet Files"
Chapter 17 "Forms"
Saturday: Forms let web designers add interactive content to websites, allowing users to actually input information, rather than simply viewing data. Simple examples include guestbooks or surveys. More than just HTML/XHTML skills, such as CGI programming, are required to create online shopping areas, or other sites that have complex functionality. Here's an example of a form using most of the possible input types:
Here's the XHTML code for the form shown above:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Extensible Hypertext Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but a stricter syntax. Whereas HTML was an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed XML documents, XHTML documents offer greater potential for automated processing than older flavors of HTML. ...
en.wikipedia.org/wiki/XHTML
Differences Between XHTML and HTML
Here's a tutorial to help you further with a different way of creating a contact form:
http://kirupa.com/web/php_contact_form.htm
Sunday: The forms exercise is due Saturday,
Week 6. Here are the requirements for the assignment. Create an XHTML/CSS form using all of the different input tags we discussed in
class (shown in the example above). This includes text fields, text areas,
radio buttons, check boxes, select lists and submit and reset buttons.
A minimum of 10 input tags are required. Use tables or CSS positioning to line up the form
nicely. Make the form "work" by including a PHP action. Here's the requirements in step format:
1.
Create an XHTML/CSS form using all of the different input tags.
2. Use a minimum of 10 input tags
3.
Use tables or CSS positioning to line up the form
4. Make the form "work" by including a PHP action
(see below)
5. Internet shortcut due on the drop off drive by Saturday, Week 6
<? |
Fundamentals of Scripting Languages - Week 5
Saturday: Start research on your final project. The final project will be creating or redesigning a website for an existing business. The site must contain at least 15-20 pages of content, and have a development plan describing the functionality and features. It should also have intuitive universal navigation, professional looking logos and images and professional content (no misspellings or grammatical errors).
Sunday: Let's start
working on a proposal for your final project. The proposal should be
a word document containing several components. Which we will discuss
in class. Here's a list of the components:
1. Title page (Title, Author,
Table of Contents, etc.)
2. Summary/Overview (A brief summary of what the site does and what it's
for, etc.)
3 . Feature Lists/Requirements (A list of the features with brief descriptions)
4 . Flow Charts (Represent each page on the site with one or more flow
charts)
5 . Screen Schematics (Simple pages shown with wireframe boxes for nav
buttons, and images. Also include notes describing the purpose of each
page.)
6 . Proposal/Bid in hours (time per pages, etc.)
Fundamentals of Scripting Languages - Week 6
Saturday: Today your XHTML forms are due and we are going to take a close look at CSS positioning for the last exercise of the quarter. CSS can be used to format type, but also be used to position and style <div> layers or containers. Just like HTML tables, CSS positioning can be used to arrange content within the browser. CSS positioning also offers some advantages over the traditional table method; primarily that the content can be separated from the layout to provide better site maintenance and accessibility.
CSS vs Tables for Layout
CSS Zen Garden
For your final exercise the content has been provided in a word document. It includes some information about cycling collected from wikipedia. It's your job to design a set of six pages using the text content provided. Create a consistent design scheme that incorporates images, navigation and type treatments using CSS styles and positioning. The use of tables for this exercise is not allowed. The requirements and a link to the content follows:
CSS Positioning Exercise
1. Organize the content provided into six pages
2. Create a consistent design scheme
3. Include navigation on each page to all the pages
4. Incorporate images into each page
5. Format type, images and the positioning of the content with CSS
6. Each piece of content (including images) should be contained in a <div> layer/container
7. Use of HTML tables is prohibited
8. Due before class on Sunday of Week 7
Content for the CSS Positioning Exercise
CSS Layout Techniques - Great tutorial on "no tables" layout
Sunday: Popup windows are a very popular way to present content on the web. They can be done well, or be completely annoying to users. Obviously unrequested advertisements popups are a nusance for web surfers, however, popups can also be used as an effective media presentation technique. For example, a portfolio page or photographic slideshow can be make quite functional.
When using this technique make sure that you are not creating new popups for every link. This can create a big clean up project for the user after they have visited your site. Also, make sure the popup window comes into focus when new content has been selected. See the following popup example. View the source of the documents to see the javascipt necessary for each of the functions presented.
Javascript Popup Window Demonstration
Yet another technique that's quite useful takes advantage of CSS and Javascript. Making the background color of a table cell change with a mouse rollover is a simple yet effective way to enhance navigation without having to create image rollovers. View the source of this example to apply this behaviour to your designs.
Fundamentals of Scripting Languages - Week 7
Saturday: Below are the requirements for the final project which we have been working toward and discussing throughout the course. In the final project we are using all the skills we have learned so far to create a comprehensive and professional website published on the world wide web. This site maybe an actual site for a client, or it may be a site redesign. In any case, take into account the SCANMIC criteria we discussed on Saturday of Week 3.
1. Your site should take advantage of the technologies we have covered in Class:
Image maps are used to define coordinates within images as links. Define the map at the top of your document and then refer to it in the image like the example shown below. To view the image map in action click here.
| <h3>Image
map Example</h3> <map name="my_image_map"> <area shape="rect" href="home.html" coords="31,16,112,53"> <area shape="rect" href="contact.html" coords="119,16,220,53"> <area shape="rect" href="links.html" coords="239,16,312,53"> </map> <img src="navbar.gif" width="500" height="100" usemap="#my_image_map" border=1 ismap> |
Also, back in week four we discussed creating development plans for your final project. Let's review that process today. The development plan is a required part of your final project. Make sure you include all the components (listed in week 4) in your plan. The due date is Sunday, Week 8.
Sunday: Please copy your mockups to the drop off drive by Saturday, Week 8 . Place them in a folder called "mockups" under "John Keston/im2420/<your name>/". There should be at least two mockups save them as .psd or .png (Fireworks). On Saturday we'll critique them in class, dealing specifically with the SCANMIC criteria.
We've also discussed how to convert your mockup into a working HTML template using the Fireworks application. Fireworks allows to to create an HTML template of sliced images from either a .png or .psd document. Once you have an HTML template you can add rollover behaviors and hit states, and create text content areas.
Fundamentals of Scripting Languages - Week 8
Saturday: Remember to have your mockups done today. We will be viewing them in class in
order to critique them using the SCANMIC criteria. Use the critisism you received to improve your design. When you are satisfied it's time to convert your mockup to an html template.
Sunday: Let's also look at a few more aspects of the Dreamweaver MX application including how to define sites and synchronize your work with a remote server, syntax highlighting, the different views available (design view, code view and split view), the properties panel, the files panel, and using html tag shortcuts.
Here's an example of a site that has many different designs created by changing the css document associated with the site. View the source to see how little HTML is used.
Two mockups of one page/design are required for in class critiques on Sunday, week 9
1. Create a minimum of two mockups of a single page that contains a typical amount of content
2. No mockups of splash pages!
3. Try changing typefaces, layout, color schemes and/or logos
4. Acceptable formats include: jpg, gif, png, pdf, html
5. Points = 10% of final project
Fundamentals of Scripting Languages - Week 9
Saturday: Another very important topic that deserves close examination in this class is Search Engine Optimization or SEO. We can't simply add a few keywords to a web page and expect the hits and Google rankings to just start happening. There's a long laundry list of things that can improve or hamper SEO. Chris Evans has compiled a list of resources that shed some light on the mysteries on SEO. Please browse this articles to get a better understanding of SEO.
http://www.successful-sites.com/articles/usability-krause-passion-usability.php (SEO Article)
www.wordtracker.com (Check Keyword Popularity)
www.marketleap.com (Link Popularity Check, Search Engine Saturation, and Keyword Verification)
www.seocompany.ca/tool/seo-tools.html (Some interesting tools)
www.google-watch.org (Critical view on the web police)
www.searchengineguide.com/claiborne/2005/0117_sc1.html (How long has your domain name been around? If it's less than 6-8 months old, then that's why you haven't been listed well)
There are hundreds of useful CSS techniques that have been developed and documented on the web by designers. A recent article lists the top ten best resources for CSS. Many of the sites listed have excellent tutorials and examples of CSS capabilities. Here are a few of my favorites:
Listamatic - Amazing exampes of lists in CSS
CSS Layout Techniques - Great tutorial on "no tables" layout
Style Gala - This site is great just for the bullets
Sunday: Today we will be critiquing your mockups. Once
you have selected a mockup that you like and want to use as a framework
for the rest of your site,
the next step it to make it into a template that you can use for the
rest of your pages. Fireworks is an excellent tool for making templates.
Within
Fireworks you can slice your images and setup content areas, even create
rollovers and Javascript menus.
Also, make
sure you turn in your work. If you're unsure about what you're missing
ask me and I'll let you know. If you have questions regarding
the grades you received on your Development Plan, feel free to ask.
Next week we'll start reviewing for the final exam and presenting our
final websites.
Fundamentals of Scripting Languages - Week 10
Saturday: This week we will review for the final exam in lecture. Continue working on your final projects in lab, and make sure you get your questions answered. I'll be available in the lab to demonstrate techniques and help you with anything you need regarding your final projects.
Sunday: Continue review for final exam. Work day in lab.
Fundamentals of Scripting Languages - Week 11
Saturday: Today we'll critique your final projects. These critiques are a required component for you final project, so don't miss the class. If you have an emergency and can't be in class, let me know as soon as possible. If we have anytime after the critiques we can continue reviewing for the final exam.
Sunday: Take final exam. No late work will be accepted after this date. I hope you all enjoyed this class. Thanks, and have a good break!