1 / 28

Dynamic Webpages

Dynamic Webpages. Jessica Meyerson March 1, 2011. A closer look . 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.

vernon
Download Presentation

Dynamic Webpages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DynamicWebpages Jessica Meyerson March 1, 2011 A closer look

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

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

  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 toolsfor site maintenance • not search engine friendly

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

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

  7. Server Side Scripting

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

  9. Client Side Scripting

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

  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 browsersbut 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 JSON 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) XML

  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 contentAND 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

  22. Adobe Flash • Multimedia platform used to create animation, video, and interactivity • Manipulates vector and raster graphics • Written using ActionScript • Compressed format

  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

  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.asphttp://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_RCmiOYdLUIwF5UNDcvTJ0aDhg 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=AFQjCNHb4ncqmKWEiLbBS4klfpibmtJvbA http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FComparison_of_HTML5_and_Flash&sa=D&sntz=1&usg=AFQjCNGx5Kcio4f1rt http://www.google.com/url?q=http%3A%2F%2Fgskinner.com%2Fblog%2Farchives%2F2010%2F02%2Fmy_thoughts_on_.html&sa=D&sntz=1&usg=AFQjCNGxU52w0AFtkJ63H2Mm_0lQDOIRkw_45rQlkQ65R33-Ww

  28. Questions

More Related