Introduction To HTML5

Tzafrir Rehan

@TzafrirR

Content is CC-BY-SA Tzafrir Rehan 2010

HTML5 Is The Future

To know your future you have to know your past

1958 - ARPA

Advanced Research Projects Agency

DARPA’s original mission, established in 1958, was to prevent technological surprise like the launch of Sputnik

- Wikipedia

1965 - Packet Switching Network

1969 - Two nodes connected

1973 - Email

Early email addresses included routing information for the mail relays

Example address: utzoo!decvax!harpo!eagle!mhtsa!ihnss!ihuxp!grg

1974 - TCP

Vint Cerf and Bob Kahn publish "A Protocol for Packet Network Interconnection" describing the TCP protocol

"TCP provides reliable, ordered delivery of a stream of bytes from a program on one computer to another program on another computer"

- Wikipedia

1974 - Telenet

First commercial public network (a version of ARPANET)

1982 - Arpanet fully on TCP

1986 - Usenet

1983 - DNS

Domain Name Resolution

$ host technion.ac.il
technion.ac.il has address 132.68.1.192

1988 - First worm, named Morris

1989

Tim Berners-Lee is a physicist working in CERN

Where physicists think about what happens to miniature particles.

That might exist.

1989

That leads to a lot of documents

1989

World Wide Web - Use Cases

  • Share documents with researchers in remote sites
  • Allow easy access to cross referenced citations
  • Hypertext

1989

HTML

HyperText Markup Language

SGML Based

Example markup:

<html>
 <head>
  <title>Hello World</title>
 </head>
 <body>
  <h1>My First Webpage!</h1>
 </body>
</html>

1990

WorldWideWeb Browser

By Tim Berners-Lee, runs on the NeXTSTEP platform

1990

The world now has:

  • A browser
  • DNS
  • HTTP
  • SGML Based HTML

1991

WWW-talk mailing list is created

The concept of a world wide web reaches the scientific community. Discussions about the technology begin.

1992 - NCSA Mosaic

National Center for Supercomputing Applications releases Mosaic 0.5

1993 - Mosaic 1.0

Partially supports HTML spec.

Also supports some features not in the spec

  • * Nested
    • * Lists
  • The <IMG> tag

10/1994

First advertisement banner

12/1994

Netscape Navigator 1.0 released

5/1995

Java released as a language targeted for the web

A Java applet can access remote information asynchronously without reloading the web page.

8/1995

Microsoft releases Internet Explorer 1.0

A licensed version of Spyglass Mosaic, in turn licensed from NCSA Mosaic

9/1995

Netscape 2.0B released (beta)

Comes with LiveScript - a dynamic weakly typed prototyped interpreted object oriented language that supports first class functions

Has access to the document through a Document Object Model

11/1995

Internet Explorer 2.0 released

12/1995

Netscape 2.0B3 released

LiveScript renamed JavaScript

JavaScript 

<input id="input1" type="text" size="3" value="1" />
<script>
function inc() {
  var input1 = document.getElementById("input1");
  input1.value = parseInt(input1.value) + 1;
}
</script>
<input type="button" value="Increase" onclick="inc()" />

8/1996

Microsoft releases Internet Explorer 3.0

Supports CSS - Cascaded Style Sheets

CSS 

<style>
  #red_and_big {
    font-size: 200%;
    color: red;
  }
</style>
<p id="red_and_big">In Style</p>

In Style

CSS & JavaScript 

<script>
  function colorize() {
    var paragraph = document.getElementById("not_red_yet");
    paragraph.style.color = "red";
  }
</script>
<p id="not_red_yet"><em>See beyond the color</em></p>
<input type="button" value="Paint It Red" onclick="colorize()"/>

See beyond the color

1996-1999

Adoption

The web is surviving through its youth, facing tough issues such as the browser wars, standard incompatibility and complete lack of interoperability.

Web sites choose a browser and stick to it, warning users of other browsers that they cannot view said website.

The basic toolchain does not change.

1996-1999

Websites of the time are not much to remember

Portals, forums, personal pages, large databases.

Definitely not web apps.

1996-1999

While the web is dormant, there is a rise of desktop applications

  • ICQ
  • mIRC
  • Games
  • Winamp
  • …

The web does not provide a cross platform application solution. Desktop applications strengthen the dominancy of Microsoft's Windows platform.

3/1999

Microsoft releases Internet Explorer 5.0

Supports the XMLHttpRequest ActiveX controller.

Created by the Outlook Web Access team.

Quickly implemented by Mozilla, Opera, Apple as a JavaScript object.

1/2000

XHTML

Defines how to create HTML webpages inside well formed XML.

Becomes the leading standard for modern web development

2000-

The set of technologies presented so far converge and web applications form

  • Outlook web access (2000)
  • Oddpost (later became Yahoo! Mail) (2002)
  • Gmail (2004)
  • Google Maps (2005)

These technologies will eventually be named Ajax

Asynchronous JavaScript and XML

XHTML 2

The W3C is considering abandoning HTML in favor of XML

XHTML 2 was not to be backwards compatible.

XHTML 2 would not be displayed unless the document is strictly validated and well formed.

It would have been a disaster.

6/2004

The Web Hypertext Application Technology Working Group is formed

a.k.a. The WHATWG

Created by browser vendors from Apple, Mozilla and Opera

Create HTML5 and additional APIs.

HTML5 Is Huge

The spec defines, among else:

  • New tags
  • Changes to old tags
  • Parsing algorithm
  • JavaScript APIs
  • Implementation details

HTML5 For You!

HTML5 has features for:

  • Web page authors
  • Web application makers
  • Security
  • Designers
  • The semantic web
  • Interoperability between browsers and OSes
  • Backwards compatibility

Resources

Offline Demo

State: