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 | ||