Techniques For A Modern Web UI (Original Slides)
Download as PPT, PDF0 likes496 views
The document discusses modern web UI techniques, highlighting the transition from traditional web interfaces to AJAX for dynamic page updates. It features various design patterns and tools that enhance user experience, such as transparent messages and AJAX validation. Additionally, it cites influential figures and resources in the web development community.
Techniques For A Modern Web UI (Original Slides)
- 1. Techniques for a Modern Web UI Patrick Joyce May 23, 2007
- 2. As far as the customer is concerned, the interface is the product.” - Jef Raskin, Designer of the Original Mac UI “
- 3. Traditional Web Interfaces The user acts (Clicks a link, button, etc) A request is then sent to the server… And, eventually, a COMPLETE PAGE is returned
- 4. The New Way: AJAX
- 5. The New Way: AJAX The New Way: AJAX Dynamically update PART of the page. Which allows for more responsive UI, but introduces some new problems. http://www.wisc.edu/directories
- 6. Web UI Patterns
- 7. Yellow Fade Technique http://basecamphq.com
- 8. Death to Monolog Boxes
- 10. Faded Background Modal / Inline Popup http://www.yarncountry.com/categories.aspx?catid=189
- 11. Hiding Extra Information http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle
- 12. Show Progress with Spinners http://www.napyfab.com/ajax-indicators/
- 13. Prevent User Errors with AJAX Validation https://www.blinksale.com/firms/new?plan=Free
- 14. Good artists copy. Great artists steal.” - Pablo Picasso (Most likely apocryphal) “
- 15. Yahoo! UI Library Libraries
- 16. new Effect.Highlight( $ ( ‘id’ ), {duration: 2} ); Yellow Fade Script.aculo.us Code
- 17. ASP.Net AJAX Faded Background Modal < ajaxToolkit:ModalPopupExtender ID ="MPE" runat ="server" TargetControlID ="LinkButton1" PopupControlID ="Panel1" BackgroundCssClass ="modalBackground" DropShadow ="true" OkControlID ="OkButton" OnOkScript ="onOk()" CancelControlID ="CancelButton" PopupDragHandleControlID ="Panel3" />
- 18. Tools Internet Explorer Developer Toolbar
- 19. Quality Is Free