a j ax rich user experience initiative l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
A j ax - Rich User Experience Initiative - PowerPoint Presentation
Download Presentation
A j ax - Rich User Experience Initiative -

Loading in 2 Seconds...

play fullscreen
1 / 31

A j ax - Rich User Experience Initiative - - PowerPoint PPT Presentation


  • 293 Views
  • Uploaded on

A j ax - Rich User Experience Initiative -. Dec. 7. 2005 Inseok Hwang. Outline. Web as Application Limitation of Conventional HTML & HTTP Rich User Experience Initiatives “Interaction” and I/O models Ajax = Asynchronous Javascript & XML Javascript CSS DOM XMLHttpRequest References.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'A j ax - Rich User Experience Initiative -' - MartaAdara


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
outline
Outline
  • Web as Application
  • Limitation of Conventional HTML & HTTP
  • Rich User Experience Initiatives
  • “Interaction” and I/O models
  • Ajax = Asynchronous Javascript & XML
    • Javascript
    • CSS
    • DOM
    • XMLHttpRequest
  • References

Case Study

http://nclab.kaist.ac.kr/soccer

web as application
Web as Application
  • The Web was to read and write.
web as application4
Web as Application
  • The Web is turning into a place to do something
web as application5
Web as Application
  • It is becoming more and more application.
    • Transient application vs. Sovereign application (by Alan Cooper)
    • Transient: might be used everyday, but in short bursts and mostly for secondary activities
      • Dictionary, emailer, instant messenger, etc.
    • Sovereign: Gets user’s full attention for a long time
      • Word processor, Eclipse, Photoshop, etc.
    • Many of currently established web-hosted applications are transient.
      • Shopping malls, Search engines, eBanking, etc.
      • Solutions based on web-pages are not enough for sovereign uses.
limitation of conventional html http
Limitation of Conventional HTML & HTTP
  • HTML is basically for presenting documents.
  • HTTP is basically for requesting & delivering documents.
  • The “Units” of documents are “pages”. (so is HTTP)
  • Documents are static.
  • HTML is declarative.
  • HTTP is synchronous.
rich user experience initiatives
Rich User Experience Initiatives
  • ActiveX
  • Macromedia Flash
  • Java Applets
  • More upcoming..
    • Ajax:
      • www.zimbra.com
      • http://reader.google.com
      • www.live.com
      • www.meebo.com
      • http://panic.com/goods/
      • www.writely.com
    • OpenLaszlo: http://www.laszlosystems.com/lps/sample-apps/amazon/amazon2.lzx?lzt=html
    • Macromedia Flex
interaction and i o models
Interaction and I/O models
  • Interaction in Real Worlds
    • Action  Reaction
  • “A successful computer UI needs to mimic our expectations of the real world at the very basic level.”
    • We expect “immediate response” when we push, pull, touch, etc.
    • Slight delays can be annoying, distracting user’s attention.
interaction and i o models9
Interaction and I/O models
  • A typical remote procedure call (HTTP, too)

Local Model

Serialization

App. protocol

Phy. transport

App. protocol

Serialization

Local Model

Calling

function

interaction and i o models10
Interaction and I/O models
  • Blocking I/O
  • Non-blocking I/O
interaction and i o models11
Interaction and I/O models
  • Multiplexed I/O
  • Signal-driven I/O
ajax asynchronous javascript and xml
Ajax: Asynchronous Javascript and XML
  • Ajax is not a new technology, but a synergy of existing technology.
  • Ajax =
    • Asynchronous I/O between server and client (XMLHttpRequest)
    • Client-side dynamicity by DHTML (Javascript, CSS, DOM)
    • XML-formatted data delivery
  • Two Self-developed Ajax Examples
    • http://nclab.kaist.ac.kr/soccer
    • http://www.saberang.net/tt/index.php?pl=255
ajax asynchronous javascript and xml14
Ajax: Asynchronous Javascript and XML
  • Four defining principles of Ajax
    • 1. The browser hosts an Application, not Content.

Web Browser

Server

Business

Logic

User

Session

Web

Page

User’s

Data

Model

Web

Page

Web

Page

Shared

Data

Model

Exit

Page

ajax asynchronous javascript and xml15
Ajax: Asynchronous Javascript and XML
  • Four defining principles of Ajax
    • 1. The browser hosts an Application, not Content. (cont’d)

Web Browser

Server

Business

Logic

User

Session

Client

App.

Deliver Application

User’s

Partial

Data

Model

User’s

Data

Model

Shared

Data

Model

Exit

Page

ajax asynchronous javascript and xml16
Ajax: Asynchronous Javascript and XML
  • Four defining principles of Ajax (cont’d)
    • 2. The server delivers data, not content

Data

Data

Data

Presentation

Branding

Logic

Content

New Page

New Page

New Page

New Page

Time

Data

New Page

Time

ajax asynchronous javascript and xml17
Ajax: Asynchronous Javascript and XML
  • Four defining principles of Ajax (cont’d)
    • 3. User interaction with the application can be fluid and continuous
    • 4. This is real coding and requires discipline
ajax asynchronous javascript and xml18
Ajax: Asynchronous Javascript and XML
  • CSS (Cascading Style Sheet)

style.css

Defines Look & Feel

index.html

Defines Structure

ajax asynchronous javascript and xml19
Ajax: Asynchronous Javascript and XML
  • CSS (Cascading Style Sheet)
    • Advantages
      • Cleaner, Compacter HTML
      • High Reusability of HTML codes
      • More Program-friendly
      • Easy maintenance and upgrades
      • Higher readability, intuitive HTML
    • Examples
      • Classic Example (mixed HTML & styles, table as layout, etc.)
        • http://nclab.kaist.ac.kr/google
      • Separated CSS & HTML Example
        • http://nclab.kaist.ac.kr/soccer
        • My own blog
ajax asynchronous javascript and xml20
Ajax: Asynchronous Javascript and XML
  • DOM (Document Object Model)
    • A structural representation of a document
    • document
      • html
        • head
          • title
          • meta
        • body
          • div
          • text
          • div
ajax asynchronous javascript and xml21
Ajax: Asynchronous Javascript and XML
  • DOM (Document Object Model)
ajax asynchronous javascript and xml22
Ajax: Asynchronous Javascript and XML
  • DOM (Document Object Model)
    • DOM manipulation by Javascript
      • document.getElementById(“id”)
      • document.getElementByTagName(“tag”)
      • something.childNodes
      • something.parentNode
      • document.createElement(“...”)
      • document.createTextNode(“…”)
      • something.appendChild()
      • something.className
      • something.style
      • (Dark Side ^-_-^)something.innerHTML
    • Example: http://nclab.kaist.ac.kr/soccer
ajax asynchronous javascript and xml23
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • Enabler of asynchronous request & response
    • An API member of XMLHTTP object
      • History
        • Originally designed by M$ as an ActiveX object since IE 5.0, enabled with Javascript, Vbscript, etc.
        • Others followed: Mozilla 1.0, Safari 1.2, Opera 8.0
    • General step:
      • 1. Create an XMLHttpRequest object
      • 2. Register a callback handler
      • 3. Make a asynchronous request to server
      • 4. When completed, the callback handler is invoked.
ajax asynchronous javascript and xml24
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • Example Code:
      • http://nclab.kaist.ac.kr/soccer
      • Fun with Google Map API
    • More Formally,

function getXMLHTTPRequest(){

var xRequest = null;

if (window.XMLHttpRequest){

xRequest = new XMLHttpRequest(); // Mozilla, Safari

}else if (typeof ActiveXObject != “undefined”){

xRequest = new ActiveXObject(“Microsoft.XMLHTTP”); // IE

}

return xRequest;

}

ajax asynchronous javascript and xml25
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • More Formally,

var READY_STATE_UNINITIALIZED=0;

var READY_STATE_LOADING=1;

var READY_STATE_LOADED=2;

var READY_STATE_INTERACTIVE=3;

var READY_STATE_COMPLETE=4;

var req;

function sendRequest(url, params, HttpMethod){

if (!HttpRequest){ HttpRequest=“Get”; }

req = getXMLHTTPRequest();

if (req){

req.onreadystatechange = onReadyStateChange;

req.oepn(HttpMethod, url, true);

req.setRequestHeader(“Content-Type”,

“application/x-www-form-urlencoded”);

req.send(params);

}

}

ajax asynchronous javascript and xml26
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • More Formally,
    • In NIFA example, we do presentation of the received information by visualizing hidden layer.

function onReadyStateChange(){

var ready=req.readyState;

var data=null;

if (ready==READY_STATE_COMPLETE){

data=req.responseText;

}else{

data=“loading…[“ + ready + “]”;

}

// do something with the data

}

ajax asynchronous javascript and xml27
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • Server-side program
      • Little difference from conventional server program
    • Example
      • NIFA
ajax asynchronous javascript and xml28
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • Is this something special??
    • It’s nothing more than HTTP itself!!!
ajax asynchronous javascript and xml29
Ajax: Asynchronous Javascript and XML
  • XMLHttpRequest
    • Common Mistakes
      • XMLHttpRequest is “Asynchronous”.
      • XMLHttpRequest receives “XML”-formatted response.
bonus
Bonus
  • RSS (Really Simple Syndication)
    • “Push” has been a dream in web technology community for a long time.
    • However, HTTP is basically “Pull” technology.
    • RSS is a trick to implement push technology as conventional HTTP.
    • http://nclab.kaist.ac.kr/soccer/index.xml
    • Marine Blues
    • http://blogs.law.harvard.edu/tech/rss
references
References
  • http://www.devguru.com
  • http://www.w3schools.com/
  • http://del.icio.us/saber97/ajax
  • http://del.icio.us/saber97/css
  • http://del.icio.us/saber97/javascript
  • “Ajax in Action”