presentation:ajax
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
presentation:ajax [2005/07/12 01:04] 67.64.218.143 Initial ideas (CMB) |
presentation:ajax [2005/07/12 01:45] (current) 67.64.218.143 Fleshed out some more of the outline (CMB) |
||
|---|---|---|---|
| Line 21: | Line 21: | ||
| ===== Outline ===== | ===== Outline ===== | ||
| - | * HTML page should work in any browser, without CSS, JS, or AJAX enabled. | + | * Intro |
| - | * XHTML is a little easier for server-side and JS to process than HTML. | + | * This is a high-level overview of web design |
| - | * Especially if transforming the document, like with XSLT. | + | * Please keep the questions at a high level |
| - | * Or if translating from some other form of XML. | + | * I don't want to get bogged down in low-level details for this presentation |
| - | * No significant reason other than that to choose it over HTML 4.01. | + | * We can do that in follow-up presentations, if desired |
| - | * Emphasize why we separate markup from presentation. | + | * What is the goal of a web page? |
| - | * Google, search engines, screen readers for the blind. | + | * To present information to the user |
| - | * Zeldman's arguments are good to use. | + | * Gets the info to them quickly |
| - | * Semantic meaning. | + | * Looks nice |
| - | * Semantic web. | + | * Easily accessible |
| - | * Little semantic web. | + | * Search engines can find it |
| - | * Must use server-side validation, even if we have client side validation. | + | * Easy to navigate within the site |
| - | * Unobtrusive JavaScript. | + | * Users with different technologies can access it |
| - | * No JavaScript in the HTML page at all; only REL references. | + | * Various browsers |
| - | * JavaScript adds handlers to page elements by ID, class, or type. | + | * Why limit yourself? That's not what the web is about |
| - | * Examples. | + | * Various operating systems |
| - | * Explain how the browser loads a page (conceptually). | + | * No Windows executables, no ActiveX |
| - | * Loads the HTML. | + | * Mobile devices |
| - | * HTML headers say what CSS file(s) to load. | + | * Limited input |
| - | * CSS is loaded, applied to HTML to render. | + | * Small screens |
| - | * HTML headers say what JavaScript file(s) to load. | + | * Limited plug-ins |
| - | * JS files are loaded and run. | + | * Flash |
| - | * One thing JS can do is register event handlers. | + | * Audio |
| - | * When something happens, those JavaScript functions are run. | + | * Java |
| - | * Like a pop-up when a click happens. | + | * Users with different abilities can access it |
| - | * Like a pop-up or color change on hover. | + | * Visual considerations |
| - | * Event handlers can also be declared in the HTML. | + | * Color blindness |
| - | * But it is not recommended. | + | * Font sizes |
| - | * AJAX: Asynchronous JavaScript and XML. | + | * High contrast |
| - | * Means that the web page gets info from a server without reloading the page. | + | * Screen readers |
| - | * The server usually sends XML. | + | * Other considerations |
| - | * New name, not all that new an idea/technique. | + | * Hearing difficulty (or no audio available) |
| - | * Started coming into common use/vogue recently, with many Google initiatives. | + | * Epilepsy (no fast flashing items) |
| - | * Google Suggest - suggests completions according to what you type. | + | * Limited range/speed of motion |
| - | * Google Maps - can move around and zoom map without reload. | + | * Limited input capabilities |
| + | * HTML page should work in any browser, without CSS, JS, or AJAX enabled | ||
| + | * Don't assume **anything** about the browser | ||
| + | * HTML 4.01 is about all you should rely on | ||
| + | * Everything else is an optional improvement to the info presented by the HTML | ||
| + | * Page should work on any size display | ||
| + | * Browser might even claim to be one browser/version, but actually be another | ||
| + | * Check browser capabilities, not browser name/version | ||
| + | * Always have fall-back functionality | ||
| + | * XHTML vs. HTML | ||
| + | * 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 | ||
| + | * When I refer to HTML, I generally mean either XHTML or HTML | ||
| + | * 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 | ||
| + | * CSS | ||
| + | * Selectors | ||
| + | * Specificity | ||
| + | * Attributes/values | ||
| + | * How the browser loads a page (conceptually) | ||
| + | * Loads the HTML from the URL requested | ||
| + | * 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 | ||
| + | * Unobtrusive JavaScript | ||
| + | * There are several ways to add JavaScript to a page | ||
| + | * on//event// tags in HTML elements | ||
| + | * SCRIPT tags in HTML header | ||
| + | * external scripts | ||
| + | * No JavaScript in the HTML page at all; only REL references | ||
| + | * TODO: Why? | ||
| + | * JavaScript adds handlers to page elements by ID, class, or type | ||
| + | * TODO: Examples | ||
| + | * Uses for JavaScript | ||
| + | * Form validation | ||
| + | * Still **must** use server-side validation, even if we have client side validation | ||
| + | * Because we can't gurantee that the JavaScript will run | ||
| + | * Because someone will write HTTP directly to the server, bypassing the browser altogether | ||
| + | * Pop-up items | ||
| + | * Menus | ||
| + | * Tooltips | ||
| + | * Alerts | ||
| + | * Dialog boxes | ||
| + | * Selection boxes | ||
| + | * Hiding/showing elements | ||
| + | * Tabs | ||
| + | * Collapsable trees | ||
| + | * WYSIWYG text editing | ||
| + | * Drag-n-Drop | ||
| + | * Sortable lists | ||
| + | * Re-order table columns | ||
| + | * Sortable tables | ||
| + | * Hover effects (most can be done with CSS these days) | ||
| + | * Roll-overs | ||
| + | * Tooltips | ||
| + | * Menus | ||
| + | * Dynamically generated content (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 | ||
| + | * Did we meet our goals? | ||
| + | * HTML presents info to users quickly | ||
| + | * HTML ensures **all** readers can access the info | ||
| + | * HTML makes it searchable | ||
| + | * CSS makes it look nice | ||
| + | * CSS can help navigation | ||
| + | * JS menus can help navigation | ||
| + | * JS adds optional functionality | ||
| + | * AJAX adds some optional functionality | ||
| + | * BONUS: | ||
| + | * Less bandwidth used | ||
| + | * Separation of duties/concerns/expertise | ||
| + | * References | ||
| + | * Zeldman book, web sites | ||
| + | * Unobtrusive JS | ||
| + | * JS libraries | ||
| + | * AJAX info | ||
presentation/ajax.1121148282.txt.gz · Last modified: 2005/07/12 01:45 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
