User Tools

Site Tools


presentation:ajax

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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)