A closer look Dynamic Webpages Jessica Meyerson March 1, 2011

Static vs. Dynamic Methods for Delivering Dynamic Content Server-side scripting Client Side scripting DOM DHTML/5 AJAX RIAs: Java Applets, Flash, Silverlight Overview:

"the same information for all users, from all contexts" Advantages… fast and efficient way to deliver content does not require any code or databases to be accessed (secure delivery) clean URLs (SEO considerations) cache-happy fully compatible Disadvantages… changes require republishing cannot display differently for different viewers difficult to maintain a large site of static pages Static

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

Server Side Scripting Client Side Scripting DHTML Ajax RIAs (Rich Internet Applications) Methods for Delivering Dynamic Content

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

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 XMLJSON Web standard Structured and hierarchical Human and machine readable Includes metadata about what the data represents XML->XSLT->HTML or XML->DOM->HTML 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 AdvantagesDisadvantages Cross platformJava plug-in required Works in a sandboxJVM 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 AdvantagesDisadvantages Cross platformAdobe Flash Player required Works in a sandboxProprietary 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 5DHTML 5 OVER Flash Strong Video SupportNo Plug-ins Required AnimationMobile Devices 3DEase of Development Consistent PresentationLightweight Legal Font UseAccessibility True Object Oriented Client Side Language SEO Rich Media AdvertisingMore “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 Server-side scripting Javascript AJAX XMLHttpRequest Data Interchange Formats Flash DcvTJ0aDhg dhtml.html&sa=D&sntz=1&usg=AFQjCNFL7acruh8f9X-0tOPMFI4YaAqQoA DOM dom.asp&sa=D&sntz=1&usg=AFQjCNHrpTMP2hLgyrV8cVYibXSe3R-PIg DHTML/ 5 pibmtJvbA 1rt CNGxU52w0AFtkJ63H2Mm_0lQDOIRkw_45rQlkQ65R33-Ww

Questions