Editing ViolaWWW (section)

== History of ViolaWWW ==

After graduating, Pei developed Viola further while working with the XCF and startups.<ref name="GilliesCailliau2000"/><ref>{{cite web|title=WWW people|url=http://www.w3.org/History/19921103-hypertext/hypertext/WWW/People.html|publisher=[[World Wide Web Consortium]]|access-date=28 July 2010}}</ref> Later, he would be funded by [[O'Reilly Books]], the technical publisher, which used the software to help demonstrate its [[Global Network Navigator]] site.<ref>{{cite news| url=https://www.forbes.com/2009/02/22/kindle-oreilly-ebooks-technology-breakthroughs_oreilly.html | work=Forbes | first=Tim | last=O'Reilly | title=Why Kindle Should Be An Open Book | date=23 February 2009}}</ref> His major goal was to create a version of Viola for the Internet:

{{blockquote|X-Window ''[sic]'' was a Unix-based system so it had [[TCP/IP]] built in and the Internet was a logical step.  The question was how to transport his Viola pages across the Internet.  He was on the verge of an independent invention of networked hypertext. 'And that's when I read [[Tim Berners-Lee|Tim's]] [[e-mail]] about the [[World Wide Web]]' he explains. 'The [[URL]] was very, very clever, it was perfectly what I needed. He dropped Tim a line saying that he was thinking of writing a browser for X. 'Sounds like a good idea,' said Tim in a reply posted to www-talk on 9 December [1991]. Four days later, Pei Wei told www-talk that he had made a browser.|Gillies and Cailliau<ref name="GilliesCailliau2000"/>}}

Released in 1992, ViolaWWW was the first browser to add extended functionality such as embedded scriptable objects, stylesheets, and tables. Early versions were received well at [[CERN]].<ref name="GilliesCailliau2000"/> [[Ed Krol]] also highlighted the browser in his popular 1992 text, ''[[Whole Internet User's Guide and Catalog]]''.

As ViolaWWW developed, it began to look more like HyperCard:

{{blockquote|It had a [[Bookmark (digital)|bookmark]] facility so that you could keep track of your favourite pages. It had buttons for going backwards and forwards and a history feature to keep track of the places you had been. As time went on, it acquired tables and graphics and by May 1993 it could even run programs.|Gillies and Cailliau<ref name="GilliesCailliau2000"/>}}

ViolaWWW was based on the Viola toolkit, which is a tool for the development and support of visual interactive media applications, with a multimedia web browser being a possible application. Viola ran under the [[X Window System]] and could be used to build complex [[hypermedia]] applications with features like applets and other interactive content as early as 1992.<ref>{{cite web| url=http://assets.en.oreilly.com/1/event/51/webexny2010_what-is-web-20.pdf |archive-url=https://web.archive.org/web/20120215100147/http://assets.en.oreilly.com/1/event/51/webexny2010_what-is-web-20.pdf |archive-date=2012-02-15 | title=What is Web 2.0? - Design Patterns and Business Models for the Next Generation of Software | author=Tim O’Reilly | publisher=O'Reilly Media}}</ref>

===Firsts===
Viola was the first web browser to have the following features:<ref name="timblhistory">{{cite web|last=Berners-Lee|first=Tim|title=A Brief History of the Web|url=http://www.w3.org/DesignIssues/TimBook-old/History.html|publisher=[[World Wide Web Consortium]]|access-date=17 August 2010|author-link=Tim Berners-Lee|orig-year=c.1993|date=9 August 1997}}</ref>

* client-side document insertion, predating [[Framing (World Wide Web)|frames]], or syndication via JavaScript output writing, which are used commonly today.

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left"
! Viola-style document embedding
! Object method
|- valign="top" align="left"
| style="text-align:left" | <syntaxhighlight lang="xml">
<INSERT SRC="a_quote.html">
</syntaxhighlight>
| style="text-align:left" |<syntaxhighlight lang="html">
<object type="text/html" data="a_quote.html">
<p>This text will appear
for browsers that don't
support OBJECTs</p>
</object>
</syntaxhighlight>
|}

* a simple stylesheet mechanism used for inserting style information such as fonts, color and alignments into a document.<ref>{{Cite web |title=Chapter 14, Stylesheet |url=http://viola.org/viola/book/chp14.html |url-status=dead |archive-url=https://web.archive.org/web/20220118233304/http://viola.org/viola/book/chp14.html |archive-date=2022-01-18 |website=Viola in a Nutshell}}</ref> This was implemented in Viola well before [[Cascading Style Sheets|CSS]] was developed in 1996:

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left"
! A viola-style stylesheet
! A CSS stylesheet
|- valign="top" align="left"
| style="text-align:left" | <pre><nowiki>
 (BODY,INPUT,P   FGColor=black
                 BGColor=grey70
                 BDColor=grey70
                 align=left

 (H1             FGColor=white
                 BGColor=red
                 BDColor=black
                 align=center

</nowiki></pre>
| style="text-align:left" | <syntaxhighlight lang="css">
 body, input, p {
  color: black;
  background-color: #707070;
  text-align: left;
}

 h1 {
  color: white;
  background-color: red;
  border: solid 1px black;
  text-align: center;
}
</syntaxhighlight>
|}

* a sidebar panel used for displaying "meta" information, intra document navigational links, and other information, similar to (but not as sophisticated as) features found in several modern browsers.
* a [[scripting language]] that can be accessed from an [[HTML]] document,<ref>{{Cite web |title=Chapter 13, Extensibility |url=http://viola.org/viola/book/chp13.html |archive-url=https://web.archive.org/web/20220118223211/http://viola.org/viola/book/chp13.html |archive-date=2022-01-18 |website=Viola in a Nutshell}}</ref> such that an HTML document can embed highly interactive scripts/applets.  This can be seen as the precursor to [[JavaScript]] and embedded objects.

{| class="wikitable" style="width: 100%;"
|- valign="top" align="left" style="font-size: 90%"
!
! style="width:40%" | ViolaWWW method
! style="width:60%" | [[JavaScript]] equivalent
|- valign="top" align="left" style="font-size: 90%"
! Scripting
| style="text-align:left" |<syntaxhighlight lang="javascript">
\class {txtDisp}
\name {showTime}
\script { switch (arg[0]) {
  case "tick":
    set("content"), date());
    after(1000, self(), "tick");
    return; break;
  case "init":
    after(1000, self(), "tick");
    break;
  }
  usual();
}
\width {100}
\height {50} \
</syntaxhighlight>
| style="text-align:left" |<syntaxhighlight lang="javascript">
function showTimeInDoc() {
  var theTime = document.getElementById('theTime');
  var date = new Date();
  theTime.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
  setTimeout(showTimeInDoc, 1000);
}
</syntaxhighlight>
|- align="left" valign="top" style="font-size: 90%"
! Embedding a script into a web page
| style="text-align:left" | <syntaxhighlight lang="html">
<HTML>
<HEAD>
</HEAD>
<BODY>
And, the time now is:
<LINK REL="viola"
HREF="showTime.v">
</BODY>
</HTML>

</syntaxhighlight>
| style="text-align:left" | <syntaxhighlight lang="html">
<html>
  <head>
    <script type="text/javascript" src="showTime.js"></script>
  </head>
  <body onload="showTimeInDoc()">
    <p id="theTime">&nbsp;</p>
  </body>
</html>
</syntaxhighlight>
|}

* Forms<ref>{{cite web |title=ViolaWWW |url=https://www.webdesignmuseum.org/web-design-history/violawww-1992 |website=webdesignmuseum.org |publisher=Web Design Museum |access-date=17 February 2022}}</ref>