Intermediate Web Design & Development

• Web review: some reminders
• Web Development with Firefox
• Standards & Semantics
• XHTML Review
• Assignment & Homework

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

Why Use Firefox?

• Extremely standards compliant
• Designed by web developers
• Current version very solid (with minimal extensions)
• Excellent selection of extensions
• Uses the superb Gecko page-rendering engine
• Open source and user supported
• Corporate independence

Challenges

• Open source and user supported
• User contributable code and suggestions
• Becoming heavy under it's weight
• Large number of extensions can slow it right down

Considerations

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

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 Web and Developer Tools

The best tool for Web Developers is the Web Developer toolbar

The author, Chris Pedrick, maintains a site for the Web Developer extension .

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

• As we get more complex, the harder it can be to figure out what is going on or what we got right or wrong.
• Having a diagnostic tool to assist us in developing these behaviours would help. That's where Firebug comes in.
• Firebug is a Firefox extension that makes it easy to examine every detail of your web page
• It's similar to Web Developer but with a different focus
• Found at: getfirebug.com
• Install it, restart Firefox and we'll walk through it together

• Even the plugins have plugins!
• Firebug has spawned a huge following, resulting in third party development based on the Firebug platform
• Two excellent plugins that can be incredibly useful:
  • YSlow - Yahoo Developer Network have created this plugin that allows you to analyze any page and give recommendations on how to improve performance
  • Firecookie - A plugin that allows you to examine cookies on the system, even create new ones on the fly!

• Another option: Safari Web Developer Tools
• Started with WebKit, found its way into Safari a few years ago
• Enabled by selecting "Show Develop menu" in Preferences > Advanced
• Similar to many of the Firebug features

What are standards?

• Definition of standards?
• What are some examples of standards in real life?
  • Lightbulbs
  • Grades of gasoline
  • Train rail widths
  • TV Broadcast signals

Why use them?

• Interoperability
• Predictable results/dimensions/values
• A new specification is not needed for each new manufacturing run
• Need a new microwave? You can count on:
  • Plug/Voltage/Power
  • Unit size
  • Operation

Standard support - not always

• Older units don't support standards
• Electrical units
• Televisions
• Cars

Try to Renovate an old house!

• Many non-standard things
• Electrical panels,
• Phone jacks,
• Boilers,
• Door/window sizes
• Stairs

Non-Standard: What does that equal?

• Costly and lengthy upgrades that can threaten the house itself.
• Foundational changes
• Rewiring, replumbing, removing walls, floors, etc.

Web Standards

When you build without standards, you are investing in the here and now, without thinking of tomorrow.

• Code is hard to support
• Future developers may be confused
• Re-engineering websites can be very difficult, costly and time consuming
• Most important Content is fused to your markup!

• ISO: International Organization for Standards ( http://www.iso.org )
  • 1906: As the Intn'l Electrotechnical Commission (IEC): in order to better access pre-determined equipment that was interchangeable and interoperable
  • 1947: 25 countries got together to form ISO: "to facilitate the international coordination and unification of industrial standards"
  • Companies agree to become a part of ISO, and gain access to the complete library of standards set by the organization in concert with their many members
  • While it started slowly, many companies ignored standards, in favor of their own "proprietary" methods
  • Momentum, corporate marketing (companies advertising that their product or method conforms with ISO XXXX), and some government legislation (forcing the adoption of certain standards) led to a larger adoption of standards

Web Standards - A Parallel

• Web standards are going through the same process that the ISO went through
• Many companies see the benefits of interoperability - many are still "forging their own"
• Many companies have standards: Adobe, Microsoft, Apple, Ford, GM
• Many are proprietary standards, and are not supported by many companies
• W3C - World Wide Web Consortium: founded by Tim Berners-Lee to try and uniformly put forward standards through a single communication vehicle
• Leading browser makers did not follow, initially
• Designers were 'taking sides' in the browser wars… users were losers

W3C Goals

1. Universal Access: To make the Web accessible to all by promoting technologies that take into account the vast differences in culture, languages, education, ability, material resources, access devices, and physical limitations of users on all continents;
2. Semantic Web: To develop a software environment that permits each user to make the best use of the resources available on the Web;
3. Web of Trust: To guide the Web's development with careful consideration for the novel legal, commercial, and social issues raised by this technology.

Making Progress

• Eventually, the drive towards standards began to win out
• Users made their voices known and momentum started to slowly shift toward supporting standards
• Seen as a marketing opportunity: Our browser supports standards!
• Mozilla Project emerged after a large number of Netscape developers were let go upon the acquisition by AOL
• Mozilla is now a standards-compliant browser with many features
• Microsoft and AOL followed shortly with adoption of W3C standards (with limitations)
• Large companies started joining the W3C to be seen as part of the Standards game

For Web Developers

Designing to current W3C specifications means that:

• your pages will be viewable in the largest number of browsers,
• the largest number of devices
• and (if used correctly) will gracefully degrade as support for CSS or other presentation layers are absent.

Requirements

• XHTML + CSS + DOM = Agile Web Sites
• Using XHTML Transitional or Strict to deliver valid code
• Use CSS to develop sites that separate content from presentation
• Getting rid of deprecated tags, complex table layouts, browser sniffing, code forking
• Using Semantic Markup to establish content relationships and logical deployment of content

Barriers

• Old coding styles prevent upgrading to new
• Sites styles inconsistent - require entire site overhaul
• Cost to redevelop site can be high
• Parallel development takes away from live site maintenance
• New design paradigm: developers stuck in old ways
• Layout of site may require change
• Process or Tool-based development may hinder adoption of standards
• May require a lot of re-coding!

Bandwidth

• Jeffrey Zeldman says that his development typically yields between 40% - 60% code reduction by converting to XHTML & CSS
• This alone can be reason enough to upgrade your code
• Simple math:
  • Less code = smaller filesystem footprint
  • Less code = smaller bandwidth requirement for the same page
  • Multiply this many times over
  • BCIT: January 17, 2006
  • Bytes: 3,584,495,759 (3.58 gigabytes) divided by
  • Page Views: 153,426 equals
  • 23363 bytes, or roughly 23K
• This is after we trimmed our HTML
• Still room for improvement
• In 2001 (stats no longer available online), the average page was 57K
• Using the same numbers from above, we would get:
  • 153,426 (page views) times
  • 57000 (average page size circa 2001) equals
  • 8,745,282,000 bytes (8.74 gigabytes)
• Speed of downloads: less code to cram through the pipe, the faster it goes
• Less stress on the server
• CNN Example: 9/11 tragedy
  • Seeing the massive number of hits to their site, CNN goes into 'Disaster Mode'
  • Key requirement: Make front page highly available
  • Millions of hits per minute
  • Lowered code to under 10K with only the most important items

Future Compatibility

• Code is easier to use for future developers
• Less presentational code means easier design changes
• Keep the same code for longer periods of time
• Optimally, never change your code (if all presentation is gone)

Development Cost

• Longer development times for design changes
• Complex table layouts difficult to manage
• Harder to integrate with CMS (Content Management System) tools

Special Needs

• XHTML lends itself to assistive readers (low vision, etc)
• Can support multiple stylesheets for different user needs
• Try surfing with your monitor off (at home)! IBM's Home Page Reader

Single Codebase

• No complex sniffing scripts
• Avoid having to support multiple browsers with multiple home/site pages (code forking)
• Much less upkeep (only one source to update)

• WASP http://www.webstandards.org/
• W3C http://www.w3c.org
• W3C Sites http://www.w3csites.com/
• Xstandard http://xstandard.com/

• Some suggestionsem> that you should take as standard development cues
  • Links: colours/underlines/context
  • Navigation: where/how/what
  • Forms: entering info/nav/help
  • Page elements: what to include/exclude
  • Design: basic principles

What is Semantic Markup?

• Practice of organizing your content into a hierarchy
• Using appropriate tags for the content
• H1 ... 6 tags for headings
• Paragraph tags instead of double BR tags
• CSS instead of FONT
• Sounds straightforward, but people are stuck in presentation
• Key: Separate Content (XHTML) from Presentation (CSS)

Building Content Relationships

• Use appropriate tags for headings, content, sub-content, lists
• This builds a relationship that descends from the title of the page
• Each section is a discrete piece of information
• Headings are related to following paragraphs
• Citations, quotes, code samples can be contextualized by nearest heading

Logical vs. Physical Styles

• Tend to display identically in browsers, but are fundamentally different
• Physical styles define what content looks like
• Logical styles define what content is
• Important for screen readers (see IBM's Hope Page Reader above)
• Some physical styles:
  • b - Bold
  • i - Italic
  • s - Strikethrough
  • u - Underline

Logical Styling

• Best way to markup content for long-term usage
• Use CSS to change style (and some behaviour)
• Use DOM to change behaviour (via scripting)
• Requires thinking ahead
• Examples of logical styles:
  • code - Code sample
  • kbd - Keyboard entry
  • samp - Programming sample
  • var - Variable
  • cite - Citation
  • dfn - Definition
  • abbr - Abbreviation
  • acronym - Acronym
  • del - Deleted text
  • ins - Inserted text

Key Advantages

• Content is relational - context can be determined easily
• Extracting important pieces of information is simple (CITE or CODE tags for example)
• Search engine optimization
• Screen readers

• 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 2000.
• Mature specification, which is currently at 1.0, with 2.0 still being worked on (more on that later).

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

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!

Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">