1. A closer look Dynamic Webpages Jessica Meyerson March 1, 2011

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

3. "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

4. 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

5. Dynamic Elements (defining 'rich user experience') Navigation Applications Personalization Syndication Animation Validation

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

7. Server Side Scripting

8. 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

9. Client Side Scripting

10. 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

11. Getting Specific: DOM DHTML/5 AJAX RIAs: Flash, Silverlight

12. Document Object Model

13. 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

14. 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

15. 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)

16. 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)

17. 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

18. AJAX

19. 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

20. 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

21. 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

22. 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

23. 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!

24. 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

25. Microsoft Silverlight Features and purposes similar to Adobe Flash Written in.NET programming language Not compressed More searchable and indexable

26. 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

27. 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-html5- dhtml.html&sa=D&sntz=1&usg=AFQjCNFL7acruh8f9X-0tOPMFI4YaAqQoA DOM http://www.google.com/url?q=http%3A%2F%2Fwww.academictutorials.com%2Fdhtml%2Fdhtml- dom.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

28. Questions