presentation:ajax
Differences
This shows you the differences between two versions of the page.
|
presentation:ajax [2005/07/12 01:04] 67.64.218.143 Initial ideas (CMB) |
presentation:ajax [2005/07/12 01:45] 67.64.218.143 Fleshed out some more of the outline (CMB) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Modern Web Design: XHTML, CSS, Unobtrusive JavaScript, and AJAX ====== | ||
| - | |||
| - | NOTE: If you contribute, please leave your name next to your contributions, so I can credit you. | ||
| - | |||
| - | ===== Demo ===== | ||
| - | |||
| - | I want to demonstrate the creation of a web page. I want to start out with a basic HTML page, | ||
| - | then add CSS to make it look pretty. Then I want to add some (unobtrusive) JavaScript functionality, | ||
| - | such as form validation, navigation menus, tabs, tooltips, and maybe a WYSIWYG text area. | ||
| - | Then I want to add some AJAX. | ||
| - | |||
| - | I could use some ideas on what kind of page to use as a demo. Here are my ideas for consideration: | ||
| - | |||
| - | * Entry form for an CD database application | ||
| - | * HTML: Web form | ||
| - | * CSS: Make it look nice | ||
| - | * JS: Validation, menus, tabs, WYSIWYG, tooltips; show thumbnail of album art, full size pop-up on hover? | ||
| - | * AJAX: When barcode is entered, fetch/fill other info from web | ||
| - | |||
| - | |||
| - | ===== Outline ===== | ||
| - | |||
| - | * HTML page should work in any browser, without CSS, JS, or AJAX enabled. | ||
| - | * XHTML is a little easier for server-side and JS to process than HTML. | ||
| - | * Especially if transforming the document, like with XSLT. | ||
| - | * Or if translating from some other form of XML. | ||
| - | * No significant reason other than that to choose it over HTML 4.01. | ||
| - | * Emphasize why we separate markup from presentation. | ||
| - | * Google, search engines, screen readers for the blind. | ||
| - | * Zeldman's arguments are good to use. | ||
| - | * Semantic meaning. | ||
| - | * Semantic web. | ||
| - | * Little semantic web. | ||
| - | * Must use server-side validation, even if we have client side validation. | ||
| - | * Unobtrusive JavaScript. | ||
| - | * No JavaScript in the HTML page at all; only REL references. | ||
| - | * JavaScript adds handlers to page elements by ID, class, or type. | ||
| - | * Examples. | ||
| - | * Explain how the browser loads a page (conceptually). | ||
| - | * Loads the HTML. | ||
| - | * HTML headers say what CSS file(s) to load. | ||
| - | * CSS is loaded, applied to HTML to render. | ||
| - | * HTML headers say what JavaScript file(s) to load. | ||
| - | * JS files are loaded and run. | ||
| - | * One thing JS can do is register event handlers. | ||
| - | * When something happens, those JavaScript functions are run. | ||
| - | * Like a pop-up when a click happens. | ||
| - | * Like a pop-up or color change on hover. | ||
| - | * Event handlers can also be declared in the HTML. | ||
| - | * But it is not recommended. | ||
| - | * AJAX: Asynchronous JavaScript and XML. | ||
| - | * Means that the web page gets info from a server without reloading the page. | ||
| - | * The server usually sends XML. | ||
| - | * New name, not all that new an idea/technique. | ||
| - | * Started coming into common use/vogue recently, with many Google initiatives. | ||
| - | * Google Suggest - suggests completions according to what you type. | ||
| - | * Google Maps - can move around and zoom map without reload. | ||
presentation/ajax.txt ยท Last modified: 2005/07/12 01:45 by 67.64.218.143
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
