Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Dynamic Web Pages - University of Texas at Austin
Transcript
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 "the same information for all users, from all contexts" Advantages… • • fast and efficient way to deliver content • • • clean URLs (SEO considerations) does not require any code or databases to be accessed (secure delivery) cache-happy fully compatible Disadvantages… • • • changes require republishing cannot display differently for different viewers difficult to maintain a large site of static pages 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 Methods for Delivering Dynamic Content • Server Side Scripting • Client Side Scripting • DHTML • Ajax • RIAs (Rich Internet Applications) Server Side Scripting 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 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 XML • Web standard • Structured and hierarchical • Human and machine readable • Includes metadata about what the data represents • XML->XSLT->HTML or XML->DOM->HTML JSON • 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 Advantages Disadvantages Cross platform Java plug-in required Works in a sandbox JVM 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 Advantages Disadvantages Cross platform Adobe Flash Player required Works in a sandbox Proprietary 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 5 DHTML 5 OVER Flash Strong Video Support No Plug-ins Required Animation Mobile Devices 3D Ease of Development Consistent Presentation Lightweight Legal Font Use Accessibility True Object Oriented Client Side Language SEO Rich Media Advertising More “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 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-html5dhtml.html&sa=D&sntz=1&usg=AFQjCNFL7acruh8f9X-0tOPMFI4YaAqQoA DOM http://www.google.com/url?q=http%3A%2F%2Fwww.academictutorials.com%2Fdhtml%2Fdhtmldom.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 Questions
