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

Dynamic Webpages

80 Vues Download Presentation
Télécharger la présentation

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