An Idiosyncratic History of Web-Page Generation Denise Draper Dev Manager Webdata XML Microsoft.
Post on 28-Jan-2016
212 Views
Preview:
Transcript
An Idiosyncratic History of Web-Page GenerationDenise DraperDev Manager Webdata XMLMicrosoft
211/22/2005
Outline
First generation: scripting and stylesheets
Second generation: DHTML and Applets
Third generation(?): AJAX Where next?
311/22/2005
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>
411/22/2005
In the beginning was HTML
Key features:Easier than SGML to parse and renderOpen format: run on any HW & OSText base made editing easyHTTP for linking
Downsides:Hard to find stuff… Yahoo to the rescuePages are static: no interactivity
511/22/2005
Which quickly begat scripting Server-side scripting was first:
CGI scriptsForms in HTML passed parameters via
URL query notationMany languages used, especially Perl
Example: http://www.census.gov/cgi-bin/gazetteer
611/22/2005
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.
711/22/2005
And Stylesheets
<p class="intro">… Applies the “intro” style to the paragraph
<span STYLE="font-size: x-large; 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
811/22/2005
Mimeviewer: a side-bar in history Stylesheets taken to the limit:
Stylesheet as a transformation program (XSL)
Content is sent as XML Still used in some places, e.g. for
localization
911/22/2005
Checkpoint: what’s what
Server:Serves static HTML
pagesor creates w/ CGI scripts
click=HTTP request url+paramsHTTP Response=HTML
User experience:Click = page load
some pages customized
Browser:Renders HTML pages
Understands stylesheets
(Approx 1995, Netscape 3, IE 3)
1011/22/2005
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
1111/22/2005
Java Applets: run code in the browser <APPLET> tag introduces applet
content Applet
Runs in its own sandboxed processKeeps its own stateHas full rendering capabilities Is fully interactive (responds to events
and can generate its own behavior)
1211/22/2005
Applet Example
1311/22/2005
ActiveX
Same idea, but:Windows specificUses components installed in OSExecution not sandboxed…thus both powerful and the source of
many security concerns
1411/22/2005
Applets/ActiveX
Key features:Arbitrary code (java or windows)Complete interactivity
Downsides:Slow to downloadHave to write codeProgramming model tricky (especially
state management)
1511/22/2005
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 is re-rendered as it changes
1611/22/2005
DHTML Example
1711/22/2005
DHTML
Key features:Modify parts of pages without reload
Downsides:SlowProgramming model tricky (mixing
server & client-side scripting)Hard to make it look good
1811/22/2005
Advanced demo: OWA
1911/22/2005
Checkpoint: what’s what
Server:Serves/creates HTML
pages containing client-side script;
Serves applets or activeX
HTTP request postResponse=HTML or download
Browser:Renders HTML pages;
Understands stylesheets;Provides execution context for
code; Presents drawing surface for
code;Manages in-memory DOM for
pages;Provides event management
User experience:Local interactivity;
Some pages “page-like” (DHTML)Some pages or regions completely “rich
client”;Slow download times
(Approx 1997, Netscape 4, IE 4)
mouse action etc=event
2011/22/2005
Then nothing happened for awhile Continuing innovation 1991-1997 Relative calm 1998-2003 In fact, lots of cool ideas fell by the
wayside Why?
2111/22/2005
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
2211/22/2005
Then came AJAX
Asynchronous Javascript and XML Mostly just putting the pieces together:
Client-side script or code running in thread Manipulating the DHTML DOM 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
This is the key point!
2311/22/2005
AJAX Example
2411/22/2005
Checkpoint: what’s what
HTTP request postResponse=HTML or download
(Approx 2004)
mouse action etc=event
2511/22/2005
Why now?
Well somebody gave it a name… Seriously:
Critical capability (XMLHTTPRequest) supported by all major browsers
Everybody has broadbandWeb services re-applied to browser
applications
2611/22/2005
So what’s next?
Factors:Rich media everywhereDevices everywhereShared data “in the cloud” In the home: personalization, sharing In enterprise: manpower the dominant
cost
2711/22/2005
What’s next?
Blur the line between rich client and web client Interaction models: indistinguishableDeployment 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
2811/22/2005
So what’s next?
Creating the client application Code is still too complicated
State management, multi-threading Systems like Ruby on Rails make lots of built in
assumptions to simplify development Many form factors
Separating data from presentation (again) web services for data personalized & device-dependent styles
Support for development and debugging
2911/22/2005
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-dw-wa-ajax-i.html?S_TACT=105AGX59&S_CMP=HP&dgr-lnxw09AJAXapps
The End
Questions?
top related