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?