Transcript PowerPoint
An Idiosyncratic
History of Web-Page
Generation
Denise Draper
Dev Manager Webdata XML
Microsoft
Outline
First generation: scripting and stylesheets
Second generation: DHTML and Applets
Third generation(?): AJAX
Where next?
11/22/2005
2
In the beginning was HTML
Beginnings around 1990, derived from
SGML
<HTML>
<TITLE> A sample HTML instance </TITLE>
<H1> An Example of Structure </H1>
Here's a typical paragraph. <P>
<UL>
<LI> Item one has an
<A HREF="http://info.cern.ch/..."> anchor </A>
<LI> Here's item two. </UL>
</HTML>
11/22/2005
3
In the beginning was HTML
Key features:
Easier
than SGML to parse and render
Open format: run on any HW & OS
Text base made editing easy
HTTP for linking
Downsides:
Hard
to find stuff… Yahoo to the rescue
Pages are static: no interactivity
11/22/2005
4
Which quickly begat scripting
Server-side scripting was first:
CGI
scripts
Forms in HTML passed parameters via URL
query notation
Many languages used, especially Perl
Example: http://www.census.gov/cgi-bin/gazetteer
11/22/2005
5
Which quickly begat scripting
Key features:
Parameters
made it possible to generate
custom web pages
Downsides:
Downloading
the same boilerplate for all
pages started to get annoying.
11/22/2005
6
And Stylesheets
<p class="intro">…
Applies the “intro” style to the paragraph
<span STYLE="font-size: xlarge; color: #ffffff">…
Inline definition of styling attributes
<span STYLE="display:
none">…
Doesn’t show range of text at all
Originally designed to simplify web pages by separating
content from style
Separation of stylesheets allowed controlling common
formatting for a whole web site
The use of display=none was used as a way to separate
content from control
11/22/2005
7
Mimeviewer: a side-bar in history
Stylesheets taken to the limit:
as a transformation program (XSL)
Content is sent as XML
Stylesheet
Still used in some places, e.g. for
localization
11/22/2005
8
Checkpoint: what’s what
click=HTTP request url+params
HTTP Response=HTML
User
Browser:
experience:
Renders
Click HTML
= pagepages
load
Server:
Understands
some pagesstylesheets
customized
Serves static HTML pages
or creates w/ CGI scripts
(Approx 1995, Netscape 3, IE 3)
11/22/2005
9
Wouldn’t it be cool if
The page could really be a tiny program that ran
on the client?
Java
applets
Microsoft ActiveX controls
The page could be updated in place to change it’s
content?
Mimeviewer
+ Data Islands
DHTML = HTML 4.0/CSS + javascript
… And thus we have Netscape/IE 4
11/22/2005
10
Java Applets: run code in the
browser
<APPLET> tag introduces applet content
Applet
Runs
in its own sandboxed process
Keeps its own state
Has full rendering capabilities
Is fully interactive (responds to events and can
generate its own behavior)
11/22/2005
11
Applet Example
11/22/2005
12
ActiveX
Same idea, but:
Windows
specific
Uses components installed in OS
Execution not sandboxed
…thus both powerful and the source of many
security concerns
11/22/2005
13
Applets/ActiveX
Key features:
Arbitrary
code (java or windows)
Complete interactivity
Downsides:
Slow
to download
Have to write code
Programming model tricky (especially state
management)
11/22/2005
14
DHTML keeps the focus on HTML
The D stands for dynamic, which really means
self-modifying
In
memory representation (DOM) of page
Individual elements can be identified by id:
<p id="intro">…
DOM is modified by client-side scripts
<script language="JavaScript">
document.getElementbyID("intro").color=red
</script>
Scripts are triggered by events
Page
11/22/2005
is re-rendered as it changes
15
DHTML Example
11/22/2005
16
DHTML
Key features:
Modify
parts of pages without reload
Downsides:
Slow
Programming
model tricky (mixing server &
client-side scripting)
Hard to make it look good
11/22/2005
17
Advanced demo: OWA
11/22/2005
18
Checkpoint: what’s what
mouse action etc=event
HTTP request post
Response=HTML or download
User experience:
Browser:
interactivity;
Server:
RendersLocal
HTML
pages;
Some pages
“page-like” (DHTML)
Serves/creates
HTML pages
Understands
stylesheets;
Some pages
or regions
completely
“rich
client”;
containing
client-side
script;
Provides
execution
context
for
code;
Slow Serves
download
or activeX
Presents drawing
surfaceapplets
for times
code;
Manages in-memory DOM for pages;
Provides event management
(Approx 1997, Netscape 4, IE 4)
11/22/2005
19
Then nothing happened for awhile
Continuing innovation 1991-1997
Relative calm 1998-2003
In fact, lots of cool ideas fell by the
wayside
Why?
11/22/2005
20
Why?
Not enough bandwidth
New technologies not broadly supported; web
designers went for least common denominator
Change of focus
Push
technologies “channels” (sorta like RSS), died
Then Web services, J2EE, .NET and the .com
boom/bubble
11/22/2005
21
Then came AJAX
Asynchronous Javascript and XML
Mostly just putting the pieces together:
Client-side
script or code running in thread
This is the key
Manipulating the DHTML DOM
point!
And using HTTP request to get bits of data to feed
into page
Asynchronously: don’t wait for response
Google Suggest the quintessential example:
http://www.google.com/webhp?complete=1&hl=en
11/22/2005
22
AJAX Example
11/22/2005
23
Checkpoint: what’s what
mouse action etc=event
HTTP request post
Response=HTML or download
(Approx 2004)
11/22/2005
24
Why now?
Well somebody gave it a name…
Seriously:
Critical
capability (XMLHTTPRequest)
supported by all major browsers
Everybody has broadband
Web services re-applied to browser
applications
11/22/2005
25
So what’s next?
Factors:
Rich
media everywhere
Devices everywhere
Shared data “in the cloud”
In the home: personalization, sharing
In enterprise: manpower the dominant cost
11/22/2005
26
What’s next?
Blur the line between rich client and web
client
Interaction
models: indistinguishable
Deployment model: indistinguishable?
If the cloud is the master, and your device simply
caches some stuff…
Applies both to bits (the executable) and state (your
data)
Microsoft projects: Avalon
11/22/2005
27
So what’s next?
Creating the client application
Code
State management, multi-threading
Systems like Ruby on Rails make lots of built in assumptions to
simplify development
Many
11/22/2005
form factors
Separating data from presentation (again)
is still too complicated
web services for data
personalized & device-dependent styles
Support for development and debugging
28
Credits + References
Derek Denny-Brown
Saw
lots of history in Microsoft
Useful web pages for history:
http://www.livinginternet.com/
http://www.dejavu.org/
Useful web pages for AJAX
http://en.wikipedia.org/wiki/AJAX
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
Tutorial (JSP): http://www-128.ibm.com/developerworks/edu/wa-dwwa-ajax-i.html?S_TACT=105AGX59&S_CMP=HP&dgr-lnxw09AJAXapps
11/22/2005
29
The End
Questions?