Intermediate Web Design & Development

• Web review: some reminders
• Web Development with Firefox
• Homesite introduction
• XHTML
• Assignment & Homework

There are a few things that bear reminding:

• file and folder names cannot contain:
  • capital letters
  • spaces
  • special characters: ! @ # $ % ^ & * ( ) + { } [ ] : ; " < > ? |
• default page: index.htm, index.html or index.shtml (or whatever your server default is)

http://www.mozilla.org/firefox/

Why Use Firefox?

• Extremely standards compliant
• Designed by web developers
• Tabbed layout
• Totally customizable (UML)
• Excellent selection of extensions
• Very lean code-base, making for a small application footprint
• Uses the superb Gecko page-rendering engine
• Open source and user supported
• User contributable code and suggestions
• Corporate independence

Challenges

• Open source and user supported
• User contributable code and suggestions
• Gbrowser my dwarf Firefox - behemoth coming!

Considerations

• Remember that there are other browsers out there!
• Test in Moz/IE/Opera/FF and anything else just to be sure

Multiple Homepages

You can set multiple homepages by using the | (pipe) character between homepage declarations

Short Exercise:

Create multiple Homepages

• Click Tools > Options
• Under the General Tab, enter more than 1 homepage separated with a pipe (|)
• Click OK
• Click the Home button

Single Keystrokes

Backspace

Go back one page in history (also ALT+(right arrow))

/ + word pattern

Highlights first matching word pattern on page

' + word pattern

Highlights first matching hyperlink pattern on page

F3

Cycles through remaining instances of pattern

CTRL Shortcuts (use CTRL + key to invoke shortcut)

T

Opens a new tab and takes the focus to the new tab

O

Open Local File. This is one of the biggest changes from IE where both Ctrl-O and Ctrl-L opened a dialogue box for a URL.

L

Changes focus to the Address bar

Tab

Scrolls through the tabs from current window towards the right. Loops back to the first tab when rightmost tab is reached

1, 2, 3, ... 0

The numbers 1 to 0 takes the focus to Tab 1 to 10

N

Opens a new window like IE

W

a tab or if there are no tabs, close the window

B

Open bookmark sidepanel

D

Bookmark current page

H

Brings up the history dialogue box on the right. Useful if you closed a page accidentally and forgot the URL

U

Show page source

Y

Open downloads window

K

Focus goes to search bar

R

Refresh current page (also F5)

J

Page Info (same as properties in IE)

(- minus)

Decrease font size (also CTRL+mouse wheel forward)

(+ plus)

Increase font size (also CTRL+mouse wheel back)

S

Save current page to disk

P

Print current page

A

Select All

Firefox allows the user to highly configure their environment. Beyond just thmese and icon sets, you can configure the inner workings of the browser.

How it works

• Firefox has a configuration system built into the browsers codebase
• Access it through about:config in the address bar
• BE CAREFUL! This area can hoop your Firefox install if you are not careful

Short Exercise

Configure an Entry

• Look for this entry: browser.throbber.url
• Hint 1: click once on any entry & start typing "browser" and you should be taken down to the first matching entry. Keep typing to further refine your search.
• Hint 2: You can also enter criteria in the Filter section to remove all entries that do not match your word pattern.
• Double-click to bring up dialog box
• Enter your own URL
• Click OK
• No restart required, try the throbber!

There are lots of other tips similar to this one: Firefox Tips & Tricks

Extentions are a big part of Firefox:
https://addons.mozilla.org/extensions/?application=firefox

There are many to choose from, with an entire category dedicated to Developer Tools

The best tool for Web Developers is the Web Developer toolbar

Some of the amazing tools this has to offer web developers:

• Disable styles - by embedded/linked/inline as well as all styles, or just a single sheet
• Edit CSS & HTML - Make live changes to your CSS or HTML!
• Images - outlining, file sizes, alt information... lots more
• Form detail - useful for working with form elements
• Built in validators
• Line Guides & Rulers

what is it?

30-Day Trial: http://www.macromedia.com/software/homesite/

• designed as a way for Web Developers to GET AT their code
• WYSIWYG code editors becoming the norm, causing lots of heavy pages
• a way to work in a plain environment, but with development tools

what can it do?

• allow you to directly edit your code, in many languages
• colour your code for easy markup reading
• map to a server environment, allowing you to test PHP, ASP, ColdFusion and more

why use it for this course?

• allows for XHTML colour coding
• reminders of code problems (open tags, incorrect syntax)
• easier to create larger blocks of code
• superb search & replace - file/open files/directory, etc. with regular expression capability
• customizability for developers
• integration with CSS tools such as TopStyle
• origin of the species: most other similar tools evolved from homesite
• Learning to use Homesite in this course will help you figure out all the other code-building tools out there

basic interface tools:

Title Bar:

• Displays the current file you are working on

Resource Area:

• Find Files
• Create/Edit projects
• See Document Trees
• Get Help
• Create/Edit Snippets
• Use the Tag Inspector

Editor Toolbar

• Edit/Browse/Help tabs
• Switch from one view to the other
• Help is not there by Default
• F1 inside any tag will take you to that tags entry in the W3C HTML (or XHTML) spec

Quickbar

• Has custom icons for many of the most commonly used coding sections
• Customizable

Document Window

• Where all of your editing takes place, there is also a preview available
• Document tabs allow you to edit more than 1 doc at a time

Results Window

• Appears after a Search & Replace, Validation, Link Verification, Image Thumbnail, project deployment.

Help System:

• F1 - Comprehensive Help on a tag
• F2 - Pop Up Help on a tag
• Help Tab for extensive searching

Configuring Homesite with options that are optimal for XHTML:

1. Open the Options > Settings > Markup Languages pane.
2. Select the following options: Lowercase all inserted tags, Include closing </p> when inserting paragraph tag, Insert numeric values surrounded by quotes (Tag Inspector), and Minimize empty tags (e.g., <br/>).
3. In the Insert special characters as box, select Character entities. (Numeric references need to have the ampersand encoded; for example &#38; instead of just &.)
4. Under the Markup Languages pane, in the HTML/XHTML pane, select Compatibility mode for older browsers (e.g., space before "/>"). This ensures that your code displays properly in older browsers, for example by inserting a space before minimized empty tags (<br /> instead of <br/>).
5. Select Display DTD selection dialog when the XHTML namespace is specified if, when you select Options > Set Document as XHTML, you want to be able to choose between inserting the DOCTYPE declaration for the XHTML Strict, Frameset, or Transitional DTD, or not inserting/replacing a DOCTYPE declaration. The dialog box that appears has options to Always replace with this DTD or Don't ask me again, in case you do not want it to appear again.
6. If you clear this option, when you set a document as XHTML, no dialog box appears and no DOCTYPE declaration is inserted or replaced.
7. Click Apply.

To create an XHTML document, do one of the following:

• Create a document with one of the templates available in the File > New > XHTML dialog box (Strict, Transitional, or Frameset)
• Open or create a document containing a Strict, Transitional, or Frameset DOCTYPE declaration

Using CodeSweepers to convert your code to XHTML There is more than one way to configure a CodeSweeper to convert your code to be XHTML; this is one possibility.

1. To use a pre-configured XHTML CodeSweeper:
2. Open the Options > Settings > CodeSweeper > HTML Tidy CodeSweeper pane.
3. Select Macromedia HTML Tidy Settings and click Edit Profile. This opens the default settings for editing.
4. In the Formatting options box, select Convert document to XHTML and other options as desired.
5. In the Char encoding box, select UTF8.
6. Set any other options as desired.
7. Click Apply.
8. To use the CodeSweeper on the current document, select Tools > CodeSweeper > Macromedia HTML Tidy Settings.

Tag Insight

• Start with a < and a tag name then wait
• Options will appear that help you complete the tag

Tag Completion

• This will close the tag for you
• Not always great for XHTML

Code Templates

• Allow you to enter code that can be added with a CTRL+J plus a keyword (or select from list)
• Similar to Snippets

Snippets

• Create code that can be inserted into a page
• Can also wrap around selected text
• For instance, select a paragraph and wrap specific
  tags around it

What is a project as defined by Homesite?

• Collection of files that you use in your Web site
• Include any type of file in your project, for example:
  • HTML files
  • Cascading Style Sheets
  • Images
  • Scripts

Why use projects?

• Projects let you to create your own file system that contains only the files that you need for developing your Web site.
• All of the files you need to build your Web site located in a central, easily accessible location
• The physical files themselves can be located anywhere on your local, network, or remote drives.
• Deploying sites is easy with projects, once they have been set up
• Maintenance chores, such as search and replace and link verification, can be accomplished on an entire project instead of one file at a time

• Evolution from HTML to XHTML
• X = eXtensible
• X = XML related
• A reformation of HTML reformulated in XHTML.
• First major update to HTML since the 4.0 specification was released in 1997.
• Mature specification, which is currently at 1.0, with 2.0 just around the corner (the 6th working draft of 2.0 was just released on July 22nd, 2004).

• Better, more predictable coding patterns
• "verifiable" or "well-formed" code can be produced
• Many coders kept a poor standard on their HTML
• Browsers were forgiving in coding errors or omissions
• Coders/designers became lazy, some exploited known rendering problems

• Forces coders to adhere to a common standard
• Code can be manipulated by applications
• Interoperability with XML (eXtensible Markup Language), XSLT (Stylesheet Transformations), XHTML Modularization, MathML and SVG.

• Almost identical to HTML 4.01, but a much stricter syntax in XHTML
• Technically: XHTML is just HTML defined as an XML application.

XHTML Rules:

• All elements must be properly nested
  • This is not valid: <p><b>Bolded Text</p></b>
  • This can be a problem with things like Lists <ol> and <ul>.
  • Especially when closing the List Item <li> tag that contains the <ul> or <ol> tag.
• All tags must close
  • Example: <p>Some text here</p>
  • Empty Elements are closed as well: <br /> or <img src=”#” />
  • An extra space is required before the slash to work with all browsers.
• All tag names must be in lower case
  • <Img Src=”some_image.gif”> is not valid
• Attribute names are always in lower case
  • <p ALIGN=”center”> should be <p align=”center”>
• All attributes must be quoted
  • <body bgcolor=black> will not work, you need: <body bgcolor=”black”>
• Attributes cannot be minimized
  • <input type=”checkbox” checked> cannot be used. The valid code is: <input type=”checkbox” checked=”checked”>
• Name Attribute is no longer used. Replace with “id”.
  • <img src=”picture_off.gif” name=”picture_off” /> will not validate. Use id=”picture_off” instead.
  • In order to work with new and older browsers, use both name and id as an interim measure (however, you will get a
  • warning).
• Mandatory Elements: Every XHTML document must have these elements:
  • <html>1
  • <head>
  • <title>
  • <body>
  • The <doctype> declaration *must* be there, but it is part of the document itself rather than an element of the document.
• Documents must be well-formed
  • The document must conform to all of the above rules
• Optional XML declaration
  • Not required, but good practice:
  • <?xml version=”1.0” encoding=”ISO-8859-1”?>

DTD: Document Type Definition

• A description of the document, and the legal definitions that fall within it.
• The DTD defines the syntax of the page in SGML.
• This translates to: Because XHTML is just the application of XML to HTML, you need to tell the browser (the interpreter) how to interpret all of the code on the page.

Strict

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Mostly used for technical documents or content that requires very little markup.
• This is the original intention of the W3C"s recommendation.

Transitional (most common)

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• This is by far the most common DTD in use today
• Supports most HTML features
• Was created to provide a middle ground for users trying to convert from HTML to XHTML in stages.
• Will be the class standard

Frameset

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• Same as Transitional, but allows the use of frames

<?xml version=”1.0” encoding=”ISO-8859-1”?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>COMP 1950 – Intermediate Web Development and Design</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This class will begin at 6:45 each Tuesday for 12 weeks</p>
</body>
</html>

Validate your code:

http://validator.w3.org/

Course Website

• Convert your course website over to XHTML Transitional
• Link to the W3C Validator (http://validator.w3.org/) from your Week 2 Assignment page
• Pages have to be on the net (not your computer filesystem) for the referer validation to work!

Quiz (sort-of)

• For next week
• Convert this XHTML Quiz to an XHTML-Strict page
• Think about how to strip the code of extraneous garbage

Note: if the W3C Validator complains that there is no character encoding found, use this META tag in the HEAD of your document:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">