IDCC 370: Web Design I   Spring 2008

Check this out: I hope you enjoyed your design experience in class Monday. You learned some very important XHTML, CSS, and design principles. We'll keep working on the aquatic page from a design perspective on Wednesday. In the meantime, here is a brief listing of some of the major terms and concepts covered in class on Monday, January 30:

1. design using layers (Dreamweaver); divs (CSS)
2. wrapper div or wrapper layer (also matrix div or matrix layer)
   
3. file-naming conventions (no space, no special characters, so caps)
4. master jpg or master graphic
5. img element (tag) and its XHTML attributes width and height
6. Image distortion relative to changing unit values of width and height attributes
   
7. .jpg (image file type that stands for Joint Photographic Experts Group; check them out at JPEG)
   
8. alt = alternative text, an attribute of the img element
9. tooltip (browser-rendered alt)
10. search engines blindness (text-oriented only)
11. assistive technologies; page accessibility
    
12. inline image
13. float:left; float:right
14. resample image
15. downsample image
16. upsample image
17. maintain aspect ratio
18. bounding box and sizing handles (horizontal, vertical, and diagonal)
19. jaggies
20. pixelation
21. 1 em = 16 pixels, browser default size (also known, though erroneously, as 12 points)
    
22. the CSS clock (box model) proceeds clockwise: top, right, bottom, left for unit values
23. CSS shorthand = padding: 1em 0 1em 0
24. 0 has no unit declared; why?
    
25. Dreamweaver code hinting
26. CSS rules: embedded in document head
    
27. CSS in-line rule (example: style="font-size:1em;") a CSS attribute of an element
    

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:
When we were working with the container elements last class, you may remember the talk about white space and the importance of letting contained elements "breathe." Here is a model that illustrates the relationship of margins and padding to the element being affected by a particular "block-level" style rule (Cascading Style Sheets: The Definitive Guide).

Here are some of the key terms and concepts dealt with in class, Wednesday, January 25:

1. Doctype declaration (loose, transitional, frames) to stay in standards mode and prevent quirks mode
2. Container or block elements
3. Style rule parts (binary structure nested):
   
1. Selector = XHTML element or tag: body, p, h1
   
2. Declaration = property:value (font-size:100%); also known as a property/value pair
   
4. Margins and padding = white space
5. Color contrast (no dark hyperlinks against dark background)
6. Pseudo class (a:link, a:active, a:visited, a:hover)
7. Screen scraping (when we selected text from a Web page and copied it into our Dreamweaver test page)
8. Embedded CSS (in head portion of document)
9. Browser default settings (overriding)
10. Scannability (title, headings, short paragraphs, unordered and ordered lists, white space)
    
11. ul = unordered list (bullets)
12. ol = ordered list (numbers)
13. em = size of default typeface from just below descender to just above ascender from baseline (think of the letter "L" for the ascender and the letter "p" for the descender; the baseline is the imaginary line where the letters sit or are centered vertically)
14. Use relative measurements in sizing: % and em rather than absolute measurements such as pt, px, pica, in, cm, mm
15. Liquid design relative to browser viewport
16. Body font-size default setting of 100.01%
17. Font family (verdana, arial, helvetica, sans-serif)
    

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out: It was a pleasure to meet all of you, Monday, January 23 — our first class meeting, and your first opportunity to get started in designing for the Web of tomorrow. Here is a brief listing of some of the major terms and concepts covered in the first meeting:

1. Web site shell
2. Home page, start page, fire page (all the same thing)
3. Folder hierarchy
4. Root directory and subdirectories
   
5. Placeholder page that becomes a gateway (assignments 2 and 3)
6. Template driven by CSS (Cascading Style Sheets)
7. IDE (Integrated Development Environment, e. g., Dreamweaver)
8. Workspace (in Dreamweaver)
9. Keyboard shortcuts:
1. ctrl+enter to automate http://www....com for URL in address bar
   
2. ctrl+` to toggle between views in Dreamweaver
3. ctrl+s to save document
4. ctrl+x to cut and copy to the clipboard
5. ctrl+v to paste from the clipboard
   
10. Requirements document (Assignment directions)
11. Database-driven Web page (home page of IDCC 370 site)
12. Source code or XHTML markup view
13. Browser-rendered markup (a Web page being viewed)
14. Browser window: the viewport
15. Doctype in document head to prevent quirks mode of I.E.
16. Markup tags: h1, h2, and p
17. WYSIWYG view versus code or markup view
18. Page <title> tag
19. File naming conventions
20. FTP (File Transfer Protocol) to server
    

You should be comfortable with all these terms — just in case I ask you in class to define or explain them. Also remember: these terms and concepts will be operationalized every time we work on designing something for the Web.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

A revolutionary development in communication, the World Wide Web offers unprecedented access to mass audiences. This introductory course focuses on the principles and practices necessary to create effective pages for the Web.

You will receive instruction in writing hypertext documents, designing Web pages, authoring well-formed HTML, and meeting a variety of technical challenges. The course focuses on purpose, scope, and audience considerations in page design; writing informative and persuasive on-line documents; designing coherent, portable, navigable, and interactive pages; and employing the fundamental principles of color theory, typography, layout and graphic design for the Web.

Combining lab, lecture, and discussion, you will learn the best practices of electronic design to create your own interactive Web sites. Be sure to check into the class Web site every day for announcements.

During the first class meeting, everyone will be responsible to discuss with the class some part of the course information, syllabus and reading and design assignments. The various areas for presentation to your fellow students will be assigned during class.

Here is a picture of the door to the Smith 110. Wait 'til you see what's behind it. Good luck to you all. I look forward to our journey together into the wonderful world of Web design. WJB

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out: Web Site Directory Structure

Be sure to work through this tutorial carefully before class. The thumbnail image to the left links directly to the PowerPoint Web tutorial (for your convenience).

The information in this tutorial is vital. Understanding this and undertaking the suggested "best practices" will save you a lot of grief as we proceed through the course. Be sure to ask questions that may occur to you as you study the slides in this tutorial. I have some real horror stories to share with you from students who did not take directory structures and Web backup seriously enough.

You may want to print out the tutorial before class (Web Site Directory PDF). That way you'll have the slides and my discussion notes right in front of you . . . and you can make any additional notes you might need right on the printout.

Once your directories are all put into good shape, here is an example of the kind of functionality your site will exhibit: Webmodel.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

MIS Web Design: XHTML Web Design for Beginners: Introduction: "The Internet is no longer limited to people with computers viewing Web sites through one or two different Web browsers. Everything has a Web browser in it these days. Mobile phones, Televisions, Personal Digital Assistants, Cars, even fridges. Blind users 'view' Web sites using speech synthesis or Braille devices. There is no way you can test each page you produce in all of the possible ways it may be used. But there is a way to give you the best chance that they will work. This is achieved through producing pages using the standards laid out by the World Wide Web Consortium (W3C), the people who work on XHTML and other Internet standards. Once you have produced your pages the W3C provide a validation service to check that your page meets the standards and therefore has the best chance of being used on any device. I do not know of any HTML generation programs that produce valid code."

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.