Browser Futures

Browser Futures:

A Site Developer's Roadmap

Silicon Valley Web Guild (8 October 2003)

• Danny Goodman, Author/Consultant
• "JavaScript & DHTML Cookbook" (O'Reilly)
• "Dynamic HTML: The Definitive Reference" (O'Reilly)
• "JavaScript Bible" (Wiley)
• Marcio Galli, Software Engineer
• Mozilla Contributor
• Netscape/AOL Technology Evangelist

Overview

• A Brief History Lesson

Overview

• A Brief History Lesson
• Fundamental Pre-Development Questions
• Establishing a Direction
• Examples: Extensibility & Forward Compatibility

Overview

• A Brief History Lesson
• Fundamental Pre-Development Questions
• Establishing a Direction
• Examples: Extensibility & Forward Compatibility
• Alternate Delivery Mechanisms

Overview

• A Brief History Lesson
• Fundamental Pre-Development Questions
• Establishing a Direction
• Examples: Extensibility & Forward Compatibility
• Alternate Delivery Mechanisms
• Crystal Ball Gazing...

A Little Browser History

Scriptable browser celebrating its 8th birthday.

• Browser Timeline
• Browsers with CSS
• Browsers with W3C DOM
• Browsers with XML Support

Pre-Development Checklist

• Browser Audience
• Accessibility
• Markup
• CSS
• Scripting

Checklist: Browser Audience

Know your targets early

• Intranet
• Today's deployment

Checklist: Browser Audience

Know your targets early

• Intranet
• Today's deployment
• Tomorrow's changes

Checklist: Browser Audience

Know your targets early

• Intranet
• Today's deployment
• Tomorrow's changes
• Public site for advanced users
• How much interactivity?
• How fast the connection?

Checklist: Browser Audience

Know your targets early

• Intranet
• Today's deployment
• Tomorrow's changes
• Public site for advanced users
• How much interactivity?
• How fast the connection?
• Public site for everyone

Checklist: Accessibility

• Easily overlooked by smaller companies

Checklist: Accessibility

• Easily overlooked by smaller companies
• Possible legal requirements, especially for intranet employees

Checklist: Accessibility

• Easily overlooked by smaller companies
• Possible legal requirements, especially for intranet employees
• www.w3.org/WAI/

Checklist: Markup Strategy

• HTML 4.01

Checklist: Markup Strategy

• HTML 4.01
• XHTML
• Transitional
• Strict

Checklist: Markup Strategy

• HTML 4.01
• XHTML
• Transitional
• Strict
• (Coding) Behavior modification

Checklist: Markup Strategy

• HTML 4.01
• XHTML
• Transitional
• Strict
• (Coding) Behavior modification
• Retrofitting legacy markup

Checklist: Markup Strategy

• HTML 4.01
• XHTML
• Transitional
• Strict
• (Coding) Behavior modification
• Retrofitting legacy markup
• Context, Context, Context!

Checklist: CSS

• Separate content from appearance

Checklist: CSS

• Separate content from appearance
• Relies strongly on contextual markup

Checklist: CSS

• Separate content from appearance
• Relies strongly on contextual markup
• The 'id' and 'class' as context makers
• Demo

Checklist: CSS

• Separate content from appearance
• Relies strongly on contextual markup
• The 'id' and 'class' as context makers
• Demo
• Bye-bye tables?
• Yes

Checklist: CSS

• Separate content from appearance
• Relies strongly on contextual markup
• The 'id' and 'class' as context makers
• Demo
• Bye-bye tables?
• Yes
• No

Checklist: CSS

• Separate content from appearance
• Relies strongly on contextual markup
• The 'id' and 'class' as context makers
• Demo
• Bye-bye tables?
• Yes
• No
• Tabular data = <table>

Checklist: DOM Scripting - 1

• Apply client-side scripting "for the good"

Checklist: DOM Scripting - 1

• Apply client-side scripting "for the good"
• Enhance the user experience
• Faster navigation

Checklist: DOM Scripting - 1

• Apply client-side scripting "for the good"
• Enhance the user experience
• Faster navigation
• More pleasing graphics

Checklist: DOM Scripting - 1

• Apply client-side scripting "for the good"
• Enhance the user experience
• Faster navigation
• More pleasing graphics
• Visual feedback to user actions

Checklist: DOM Scripting - 1

• Apply client-side scripting "for the good"
• Enhance the user experience
• Faster navigation
• More pleasing graphics
• Visual feedback to user actions
• Do not follow the bouncing ball; do not bounce the ball!

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone
• Painful transition for legacy apps

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone
• Painful transition for legacy apps
• Master the document node tree

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone
• Painful transition for legacy apps
• Master the document node tree
• DOM Level 0 OK for backward-compatible forms

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone
• Painful transition for legacy apps
• Master the document node tree
• DOM Level 0 OK for backward-compatible forms
• Avoid "browser version sniffing"

Checklist: DOM Scripting - 2

If you're doing Dynamic HTML (DHTML), it's time to move exclusively to the W3C DOM syntax for referencing elements.

• document.getElementById() rules!
• document.all is old (proprietary) hat
• document.layers is gone, gone, gone
• Painful transition for legacy apps
• Master the document node tree
• DOM Level 0 OK for backward-compatible forms
• Avoid "browser version sniffing"
• Object detection the path to the future (Demo)

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

• Rely on event models for element references

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

• Rely on event models for element references
• Equalize the IE and W3C DOM Event models
• Get element references from the event object (Demo)

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

• Rely on event models for element references
• Equalize the IE and W3C DOM Event models
• Get element references from the event object (Demo)
• Let your scripts get info from markup

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

• Rely on event models for element references
• Equalize the IE and W3C DOM Event models
• Get element references from the event object (Demo)
• Let your scripts get info from markup
• Change CSS classes (Demo)

Checklist: DOM Scripting - 3

Implement more and more generalizable code.

• Rely on event models for element references
• Equalize the IE and W3C DOM Event models
• Get element references from the event object (Demo)
• Let your scripts get info from markup
• Change CSS classes (Demo)
• Read parameters from (X)HTML markup attributes (Demo)

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

• XML-based Web Services
• Client-side features
• Keep within one domain and the security sandbox

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

• XML-based Web Services
• Client-side features
• Keep within one domain and the security sandbox
• SOAP and XML-RPC

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

• XML-based Web Services
• Client-side features
• Keep within one domain and the security sandbox
• SOAP and XML-RPC
• Embedding XML data
• IE XML data islands not always practical

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

• XML-based Web Services
• Client-side features
• Keep within one domain and the security sandbox
• SOAP and XML-RPC
• Embedding XML data
• IE XML data islands not always practical
• Better: XMLHttpRequest object
• Marcio Galli

Checklist: DOM Scripting - 4

Explore proprietary extensions and de facto standards to prepare for the future.

• XML-based Web Services
• Client-side features
• Keep within one domain and the security sandbox
• SOAP and XML-RPC
• Embedding XML data
• IE XML data islands not always practical
• Better: XMLHttpRequest object
• Marcio Galli
• Embedded client-side data vs. XSLT (Demo)

(X)HTML Alternatives

Keep your eyes open for alternative delivery mechanisms.

(X)HTML Alternatives

Keep your eyes open for alternative delivery mechanisms.

• Flash
• The Macromedia way
• Media Rich
• Perceived speed

(X)HTML Alternatives

Keep your eyes open for alternative delivery mechanisms.

• Flash
• The Macromedia way
• Media Rich
• Perceived speed
• Lazslo Systems
• Flash authoring with XML and JavaScript
• Demos

(X)HTML Alternatives

Keep your eyes open for alternative delivery mechanisms.

• Flash
• The Macromedia way
• Media Rich
• Perceived speed
• Lazslo Systems
• Flash authoring with XML and JavaScript
• Demos
• The plug-in patent swamp

Futures Issues

• Dominant browser-WinIE6

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)
• Opportunities for standards-based browsers

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)
• Opportunities for standards-based browsers
• Browser will remain predominant internet content delivery renderer

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)
• Opportunities for standards-based browsers
• Browser will remain predominant internet content delivery renderer
• Standalone

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)
• Opportunities for standards-based browsers
• Browser will remain predominant internet content delivery renderer
• Standalone
• As components of other apps

Futures Issues

• Dominant browser-WinIE6
• Pro: Stable platform until 2005 or later
• Con: (see Pro)
• Opportunities for standards-based browsers
• Browser will remain predominant internet content delivery renderer
• Standalone
• As components of other apps
• Free (or nearly-free) authoring environments

Summary

Summary

• Apply markup for context

Summary

• Apply markup for context
• Have CSS expertise on hand

Summary

• Apply markup for context
• Have CSS expertise on hand
• Script the W3C DOM where possible

Summary

• Apply markup for context
• Have CSS expertise on hand
• Script the W3C DOM where possible
• Let generalizable scripts derive context from markup

Summary

• Apply markup for context
• Have CSS expertise on hand
• Script the W3C DOM where possible
• Let generalizable scripts derive context from markup
• Know your nodes!

Summary

• Apply markup for context
• Have CSS expertise on hand
• Script the W3C DOM where possible
• Let generalizable scripts derive context from markup
• Know your nodes!
• Anticipate the XML-ization of the web

Q&A