Experience Ajax - Workshop For Designers
19 likes1,423 views
The document discusses the concepts of Web 2.0 and AJAX (Asynchronous JavaScript and XML). It describes how AJAX enables a more responsive and dynamic web experience. Key points of Web 2.0 include user-generated content, data sharing, and continuous updates. The document also covers AJAX design considerations and resources for further information.
![Slides, demo files and resources are available at http://www.usability.in/ajax Contact us Ravi Shankar, Oracle [email_address] Sreedhar Gunduboina, ADP [email_address]](https://image.slidesharecdn.com/experience-ajax-workshop-for-designers2218/85/Experience-Ajax-Workshop-For-Designers-22-320.jpg)
Experience Ajax - Workshop For Designers
- 1. Experience AJAX Workshop for Designers June 20, 2006 Ravi Shankar, Oracle Sreedhar Gunduboina, ADP
- 2. What is Web 2.0? Lot of current technologies have been around for sometime.. Web Services API.. Around since 1998 Web Syndication- since 1997 AJAX- 1998 Services on the web (payment, information, ..) - 1990s Blogs.. As web diaries/journals around for a long time Online music around since mp3.com Encyclopedias & info databases since Yahoo & Britannica… Then what is next generation internet & Web 2.0? Is it Buzz, Marketing Hype? or Changing attitude ?
- 3. Attitude shift from Web 1.0 to Web 2.0 Publisher (Powerful) Users (Humble, Grateful) Publisher (Still in Control) Users (Sharing Information, Demanding More) Publisher (Humble, Sharing content) Users (Empowered, Interacting, Creating) Enablers, Brokers , Networks, Search Engines
- 4. Defining Web 2.0 “Web 2.0 is made of people” Key Aspects of Web 2.0 The Web and all its connected devices as one global platform of reusable data and services Data consumption and remixing from all sources, particularly user generated data Continuous and seamless update of software and data, often very rapidly Rich and interactive user interfaces Architecture of participation that encourages user contribution user ownership of data Web 2.0 is an attitude not a technology.
- 5. You are part of web 2.0 You are part of web 2.0 Every time you search, you make google better You are Blogging, Commenting, tagging, Digging, Wikiing People talk about you - Technocrati, coComment, Flickr System Changes Single idea = New business Build in smaller parts Add to the ecosystem Offshore; Small teams; Designers/Developer Blend; Agile; Short turn around
- 6. A confluence of a number of trends Shaking up the page Desktop metaphors; Cinematic visual behaviors The RIA model will evolve to greater heights Focus on User, rich usable interfaces Letting it go free Traditional software needs to be redefined Access to content and services – RSS, APIs The Mashup phenomenon will mature Playing with others The economy of mediating participation & consumption An increasing attention scarcity Online social communities Semantic web, Interactive web, Social Web
- 7. Key Technology Constituents Unobtrusive RIA techniques such as Ajax Semantically valid XHTML, CSS or Microformats Advanced UI languages such as XUL and SVG Syndication and Aggregation of data in RSS/Atom Clean and meaningful URLs Weblog publishing Flash Remoting REST or XML Webservice APIs Semantic Web (Tagging) Some social networking aspects
- 9. Need for AJAX Is it for Developers or Designers? Issues with web applications Page based High level of granularity Almost all processing on the server High latency Not responsive To take web applications to desktop interaction To increase Web's interactivity, speed & usability Enhance usability & User Interaction
- 10. Defining AJAX - Asynchronous JavaScript And XML What it is NOT Ajax is not a new technology. What it is is a Web development technique What has enabled AJAX The de-facto standard XMLHttpRequest Ajax incorporates standards-based presentation using XHTML and CSS; dynamic display and interaction using the DOM; data interchange and manipulation using XML and XSLT; asynchronous data retrieval using XMLHttpRequest; and JavaScript binding everything together.
- 11. How is AJAX different Jesse James Garrett – Adaptive Path
- 12. Who is using it Google Google Maps Gmail Google suggest Yahoo! Flickr del.ici.ous 37signals Backpackit Basecamp Tadalist Amazon –A9, Thousand's of businesses
- 13. Layers of AJAX Framework Communication libraries DWR, JSON-RPC, DOJO.io.bind() User Interface Toolkits DOJO, RICO, Yahoo UI Ajax based RIA Frameworks Bindows, Smart client, Backbase Web Application frameworks with AJAX Extensions Shale, Echo2, Ruby on Rails XMLHTTP Iframe ……. Utilities & tools
- 14. What’s wrong with AJAX Breaking the back button Not giving immediate visual cues for interaction Not using links I can pass to friends or bookmark A big problem for spidering and search engines Too much code makes the browser slow Blinking and changing parts of the page unexpectedly Leaving offline (poor connectivity) people behind Asynchronously performing batch operations Changing state with links (Get Requests) Non obvious navigation to drive non obvious result
- 15. What’s wrong with us… Let user to adopt to new UI Conventions Not cascading local changes across the page Mimicking browser page navigation imperfectly AJAX everywhere – overdoing like FLASH Using Ajax for the sake of Ajax Have clear idea about ROI for RIA Finally - Ajax is just another tool
- 16. Design Concepts and Concerns Desktop application metaphor Responsive Specific metaphors (i.e. WIMP) Cinematic interaction with animation What about ubiquitous Web metaphors? Back-button Hyperlink No windows (?) Understand web application vs website Meat is in the details And the details are behavioral And compartmental (no longer are we purely interested in the whole)
- 17. Design Concepts and Concerns There is no page; only pathways Shaking up the page - Desktop metaphors Cinematic visual behaviors Time is now our driving axis Key design parameter to be explored Think in terms of time and context Designing for different States In classic web, design decisions are built into the browser. In Ajax, they are explicit choices by the designer dataflow analysis (State chart diagram) Understand what user wants Do not break what the user is focusing on Manage attention effectively
- 18. Design Concepts and Concerns Letting it go free Access to content and services -- RSS, APIs Build in reusable blocks, visualize big picture Encourage participation Rate Review Comment Tag Blog Feed Re-mixing & Mashing Combining different content sources Letting people use your content source Enabling content and services to be mixed
- 19. Design Concepts and Concerns Innovate process, methods & tools Design Validate Document Communicate Changing our approach Prototyping and Documenting New patterns for people designing for the web Know the tech, work closely with development Breaking down interaction > structure > presentation Can’t test for use in the context without interaction Understand the big picture, design for the user
- 20. Rich Internet Apps & Alternatives Plug-in based Flex, SVG Browser Based XUL XAML UIML Laszlo XML Big Tickets Adobe Apollo / AIR Microsoft Silverlite / WPF/E Sun JavaFX Google Gears
- 21. Resources O’Reilly - Web 2.0 - http://www.oreillynet.com Jesse James Garrett – AJAX - http://blog.jjg.net/ AJAX Patterns - http://ajaxpatterns.org/ AJAXIAN - http://ajaxian.com/ AJAX Matters - http://ajaxmatters.com/ AJAX info - http://ajaxinfo.com/ AJAX Lessons - http://www.ajaxlessons.com/ Functioning Form - http://functioningform.com/
- 22. Slides, demo files and resources are available at http://www.usability.in/ajax Contact us Ravi Shankar, Oracle [email_address] Sreedhar Gunduboina, ADP [email_address]