Overview:
• Static vs. Dynamic
• Methods for Delivering Dynamic Content
• Server-side scripting
• Client Side scripting
• DOM
• DHTML/5
• AJAX
• RIAs: Java Applets, Flash, Silverlight
Static
"the same information for all users, from all contexts"
Advantages…
•
•
fast and efficient way to deliver content
•
•
•
clean URLs (SEO considerations)
does not require any code or databases to be accessed
(secure delivery)
cache-happy
fully compatible
Disadvantages…
•
•
•
changes require republishing
cannot display differently for different viewers
difficult to maintain a large site of static pages
Dynamic
“Dynamic web pages are web sites that are generated at the
time of access by a user or change as a result of interaction with
the user.”
Advantages…
•
•
•
rich user experience/customization and short response time
easier to maintain sites with lots of content
low error tolernce
Disadvantages…
• learning curve for dynamic languages/scripts and database
servers.
• greater chance of errors occurring if content is not handled
properly (security)
• use of additional tools for site maintenance
• not search engine friendly
Dynamic Elements
(defining 'rich user experience')
•
•
•
•
•
•
Navigation
Applications
Personalization
Syndication
Animation
Validation
Methods for Delivering
Dynamic Content
• Server Side Scripting
• Client Side Scripting
• DHTML
• Ajax
• RIAs (Rich Internet Applications)
Server Side Scripting
Server Side Scripting
Advantages…
• dynamically edit, change, or add content
• access data or databases and return the result
to the browser
• provide security (server code can not be
viewed in the browser)
• the user’s browser doesn’t have to support
scripting
Disadvantages…
• slow response times
Client Side Scripting
Client Side Scripting
Advantages…
• fast response times
• form verification
Disadvantages…
• can NOT write to files or access databases
• successful execution depends on the user’s
hardware and software*
• security vulnerabilities (client code CAN be seen in
the browser)
*KNOW YOUR AUDIENCE
Getting Specific:
• DOM
• DHTML/5
• AJAX
• RIAs: Flash, Silverlight
Document Object Model
DHTML
Dynamic HTML
• coined during the Browser Wars of the late 90s
• a mix of standards that help the designer
create dynamic webpages
• HTML
• Javascript
• DOM
• CSS
DHTML/5
Advantages…
• reduces the need for external plugins
• better error handling
• more markup to replace scripting
• device independent
• transparency
• no more frames
Disadvantages…
• not yet an official standard; still buggy in most browsers but
Chrome
AJAX
(asynchronous Javascript and XML)
Standards based presentation (XHTML and CSS)
+
Document Object Model (DOM)
+
Data interchange format (XML or JSON)
+
Asynchronous data retrieval (XMLHttpRequest)
+
Javascript
--------------------------------------------------------------------------------AJAX (Asynchronous Javascript and XML)
Data Interchange Formats
XML
• Web standard
• Structured and
hierarchical
• Human and
machine readable
• Includes metadata
about what the data
represents
• XML->XSLT->HTML
or
XML->DOM->HTML
JSON
• More lightweight, no
metadata
• Only one version
• Text string
representation of
Javascript objects
(which come in
key:value pairs)
XMLHttpRequest
(the ‘A’ in AJAX)
• Invented by Microsoft
• It’s an API available in client side scripting
languages
• Sends HTTP or HTTPS requests to the web server
and loads the server response directly back
into the script
AJAX
AJAX
(asynchronous Javascript and XML)
Advantages…
• Allows apps to send and retrieve data from the server in the
background without reloading the existing page
Disadvantages…
• Doesn’t work in all web browsers
• Requires more development to provide non-AJAX alternatives
• Confusion for the user
• Screenreaders may miss new content
• Heavy reliance on user hardware and software can make other
application on the user’s machine run slower
IA Recommendations…
• Alert the user that a change has occurred
• Allow direct access to new content AND THEN allow continued
functionality of the application
Rich Internet Applications
• like a desktop application...on the web
• users have to install a software framework using the
computer’s operating system before launching
• Most common platforms:
• Java Applets
• Flash
• Microsoft Silverlight
Web-based Applets
• Written in a programming language (usually
Java) that compiles to Java bytecode
• Little program that performs a specific task
• Can be included in an HTML page
Advantages
Disadvantages
Cross platform
Java plug-in required
Works in a sandbox
JVM requirement =
significant startup time
Cached in most browsers
– quick reload time
If not already cached,
must be downloaded =
time
Adobe Flash
• Multimedia platform used to create animation,
video, and interactivity
• Manipulates vector and raster graphics
• Written using ActionScript
• Compressed format
Advantages
Disadvantages
Cross platform
Adobe Flash Player
required
Works in a sandbox
Proprietary
Cached in most browsers
– quick reload time
If not already cached,
must be downloaded =
time
Flash Advice
• Unless it adds to the user experience in a
meaningful way – avoid it
• If you do use it: avoid using it in mission critical
paths (Ex. Navigation and checkout)
• If you do use it on mission critical paths, create
an HTML version (resource intensive)
• Flash should not be used to build an entire
website!
Flash vs. DHTML 5
Flash OVER DHTML 5
DHTML 5 OVER Flash
Strong Video Support
No Plug-ins Required
Animation
Mobile Devices
3D
Ease of Development
Consistent Presentation
Lightweight
Legal Font Use
Accessibility
True Object Oriented Client
Side Language
SEO
Rich Media Advertising
More “Web-y”
Separation of Content and
Presentation
Microsoft Silverlight
• Features and purposes similar to Adobe Flash
• Written in .NET programming language
• Not compressed
• More searchable and indexable
Take-Aways
• Know your audience
• Make sure you provide HTML alternatives to
your client-reliant, dynamic websites
• Some understanding of the underlying
technologies + a thorough understanding your
users = choosing the best option for your clients
A few of my references
Dynamic Webpages
http://www.seomoz.org/beginners-guide-to-seo/basics-of-search-engine-friendly-design-and-development
Server-side scripting
http://en.wikipedia.org/wiki/Dynamic_web_page
http://www.w3schools.com/web/web_scripting.asp
http://www.scribd.com/doc/3095639/ClientSide-vs-ServerSide-Scripting-5
Javascript
http://www.webia.info/articles/javascript-articles/javascript-dos-and-donts-complete-with-17-examples-from-real-web/
http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
AJAX
http://www.careerride.com/Ajax-Overview-Advantages-Disadvantages.aspx
http://knol.google.com/k/ajax#
XMLHttpRequest
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
Data Interchange Formats
http://keelypavan.blogspot.com/2006/04/data-interchange-formats-for-ajax.html
Flash
http://www.google.com/url?q=http%3A%2F%2Fwww.adobe.com%2Fproducts%2Fflashplayer%2F&sa=D&sntz=1&usg=AFQjCNFD_RCmiOYdLUIwF5UN
DcvTJ0aDhg
http://www.google.com/url?q=http%3A%2F%2Ffitandfinish.ironworks.com%2F2010%2F06%2Fflash-or-html5dhtml.html&sa=D&sntz=1&usg=AFQjCNFL7acruh8f9X-0tOPMFI4YaAqQoA
DOM
http://www.google.com/url?q=http%3A%2F%2Fwww.academictutorials.com%2Fdhtml%2Fdhtmldom.asp&sa=D&sntz=1&usg=AFQjCNHrpTMP2hLgyrV8cVYibXSe3R-PIg
DHTML/ 5
http://www.google.com/url?q=http%3A%2F%2Fwww.w3schools.com%2Fhtml5%2Fhtml5_intro.asp&sa=D&sntz=1&usg=AFQjCNHb4ncqmKWEiLbBS4klf
pibmtJvbA
http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FComparison_of_HTML5_and_Flash&sa=D&sntz=1&usg=AFQjCNGx5Kcio4f
1rt
http://www.google.com/url?q=http%3A%2F%2Fgskinner.com%2Fblog%2Farchives%2F2010%2F02%2Fmy_thoughts_on_.html&sa=D&sntz=1&usg=AFQj
CNGxU52w0AFtkJ63H2Mm_0lQDOIRkw_45rQlkQ65R33-Ww
Questions