dynamic webpages n.
Skip this Video
Loading SlideShow in 5 Seconds..
Dynamic Webpages PowerPoint Presentation
Download Presentation
Dynamic Webpages

Dynamic Webpages

80 Views Download Presentation
Download Presentation

Dynamic Webpages

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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 Server-side scripting Javascript AJAX XMLHttpRequest Data Interchange Formats Flash DOM DHTML/ 5

  28. Questions