The Web Timing Specification (draft) aims at providing a standard set of APIs which allow for true end-to-end instrumentation of page load times across browsers.
To quote the w3 spec: “This specification (Web Timing Specification) defines an interface for web applications to access timing information related to navigation and elements.” The API is based on the Navigation Timing and Resource Timing interfaces, respectively.
While I haven’t seen this specification mentioned as part of the HTML5 Family before, in many ways I would consider it to be a worthy candidate for membership as it provides a standards based API through which web applications can be tested for load efficiency. This is obviously something quite useful for any web application as, the ability to precisely measure page load times – and implement optimizations as needed – affords developers the opportunity to provide an improved user experience.
Historically, the ability to accurately measure page load times of web applications has been quite challenging for a number reasons. Just knowing when and where to begin is debatable and, determining the best means of doing so can be a challenge in of itself. Regardless of any current strategies being used, the result is never entirely accurate. With Web Timing developers need not be concerned with these specifics as the API provides the ability to truly measure page load times by encompassing the full scope of loading and parsing a page. This includes the time involved to request, receive and render an HTML document.
For more information, try out the examples in the current supported browsers; IE9, Chrome 6.
“If everyone is moving forward together, then success takes care of itself.” – Henry Ford
The HTML5 Family of Technologies has been receiving considerable coverage lately; and, rightfully so, as, many next generation browsers – specifically those in the Mobile space based on WebKit: Android, iPhone, iPad, Blackberry etc. are now beginning to implement it’s specification, or parts thereof. On the Desktop more HTML5 support is also being seen in the latest versions of Chrome, Firefox, Safari, IE9 and Opera.
The HTML5 Family of technologies will without question play a vital role in the future of the web; and currently, in the mobile Web space, that future is now.
A Brief Overview of the HTML5 Family
For anyone who is unfamiliar with what has been termed “The HTML5 Family“, allow me to provide succinct overview of the technologies which I feel encompass what has already become a rather overloaded term. In general, on a very high level, I would summarize the HTML5 Family simply as follows:
HTML5
CSS3
JavaScript
While the above could be considered the umbrella Technologies upon which The HTML5 Family is based, there are certainly more associated technologies which themselves further augment what could be considered the HTML5 Family, some of which are (based on current specification status at the time of this writing ):
Microdata
Geolocation API
Device APIs
Web Storage (localStorage, sessionStorage) APIs
Web SQL Database API
Web Workers API
Web Sockets API
HTML5
First, HTML5. HTML5 is the next major revision of HTML which aims to advance the open Web through web standards and semantically rich content. HTML5 defines an emphasis on semantic structure and meaning.
In general, HTML5 provides a content model which can be broadly defined into the following categories: Metadata content, Flow content, Sectioning content, Heading content, Phrasing content, Embedded content and Interactive content as well as form-associated elements etc.. HTML5 defines new tags such as canvas, audio, video, keygen, header, footer, nav, article, aside, datalist and more.
CSS3
CSS3 has been broken out into a collection of modules, each of which have their own specifications and are currently in various states of completion. These modules include such examples as Selectors, Transitions, Animations, Namespaces, Color, Fonts, Advanced Layout, Background and more. Some rather amazing designs can now be created purely in CSS3.
JavaScript
Explaining what JavaScript is may seem like a moot point as it is the language of the browser and therefore, the language of the web. However, it is important to outline some key underlying specifics of the language. In particular, JavaScript is a dynamic, prototypal, object-oriented scripting language. Its prototypal nature is quite different from the classical concepts of traditional object oriented languages. In order to get the most out of the language one needs to understand and embrace prototypalism and dynamism. Many of JavaScript’s true potential can be mistakenly overshadowed by it’s assumed design flaws; however, this needn’t be the case. As long as one understands the fundamental concepts of the language, it’s true potential can be realized to enrich development and allow for a level of expressiveness unmatched in type-safe languages.
Microdata
HTML5 Microdata provides a mechanism which allows machine-readable data to be embedded in HTML documents in the form of annotations, with an unambiguous parsing model. Microdata is compatible with numerous data formats such as JSON. Micro-data is intended to provide a standard to replace other similar concepts such as RDFa, from which browsers and other applications can discover relevant content based on the context of an applications markup. Such examples include markup for contact information, calendar events and more. This markup is understood by HTML5 compatible browsers which can then automatically offer to add the relevant content to the appropriate application. At an implementation level, microdata simply consists of a group of name-value pairs; with the groups being called items, and each name-value pair is a property.
Geolocation API
The HTML5 Geolocation API is rather straightforward; it simply provides a means by which the location of a device can be determined via a native API (as opposed to say, determining the clients IP address). The Geolocation spec is currently in last call status in the W3C.
Device APIs
Device APIs are client-side APIs which allow for direct interaction with native device services such as a device Camera, Calendar, Contacts etc.
Web Storage API
The Web Storage API allows for the persistence of local (permanent) and session based (browser session) data on the client. The API for Web Storage is extremely simple as it is based upon simple Key / Value pairs; with which Keys are simply Strings. Each site contains its own separate storage area.
Web SQL Database
While not a part of the actual HTML5 specification, the Web SQL Database presents some extremely interesting possibilities within Web Applications. The Web SQL Database provides a set of APIs which allow for the manipulation of client-side databases using SQL. The Web SQL Database is based upon SQLite (3.1.19) thus supporting the features as specified therein.
Web Workers API
Web Workers provide a mechanism by which web content can execute scripts in background threads. Web Workers allow for a much needed multi-threaded implementation for web based applications executing in a browser. While somewhat similar, Web Workers are different from threads in that they are primarily intended for executing long running, expensive computations and algorithms so as to facilitate non-blocking UI background processes. One specific aspect of Web Workers which has considerable positive implications for the web moving forward is that they run in native threads as opposed to Green Threads; as is the case in VM architectures. This is quite significant as it essentially means Web Workers can scale vertically. Considering the inevitable proliferation of multi-core desktop and mobile devices, this is certainly something that will prove advantageous.
Web Sockets API
Web Sockets provide native, full-duplex communications channels which operate over a single socket that enables HTML5 compliant browsers to use the WebSocket protocol (exposed via a JavaScript API) for two-way communication with a remote host.
If you are interested in learning more about each of these technologies I recommend the following resources:
Moving forward, I plan to go into further detail for each of these associated HTML5 Family technologies, providing working examples and detailed information as to how each can be utilized to create some very unique and interesting possibilities on the Web.
Adobe released the updated FAQ for Apollo last week. If you are not familiar with Apollo, it is a cross-operating system runtime being developed by Adobe. Apollo aplications can be developed using either the Flex framework, Flex Builder, Flash 9, or html and Javascript. It is a standalone runtime that dows not require a browser.
To learn more about this revolutionary runtime from Adobe read the FAQ: http://labs.adobe.com/
I wrote an API which allows interoperability between AJAX, Flash 8 and Flex 1.5. The FlashAJAXBridge API consists of a few simple ActionScript 2.0 methods which allow you to call javascript methods that target document elements and reset their dataProviders. The API also can invoke calls to an instance of the XMLHTTPRequest object which makes discreet calls to the server for loading external xml documents.
I made a simple example that demonstrates the methods that are available for registering javascript functions which can be invoked in Flash or Flex. A cool little extra that I added is the FlashObject instance is set using attributes from an xml-config document to embed the swf. The config document also specifies which div element to write the FlashObject to.
You can view an example of the API by clicking on the link below: FlashAJAXBridge.html
I used to build lots of .swf’s embedded in html pages and set the html page as my desktop as oppossed to just having an image set as my desktop. This was cool because the swf would read from an xml file and add links that I can access directly from my desktop. I also had various effects and what not as well as news aggregators, clocks and an mp3 player. The only problem that I couldn’t seem to solve is that when I would try to make a selection on my desktop focus was on the .swf and not the desktop. So this was a problem.
My solution was to do the same exact thing but in AJAX rather than flash this way focus would remain on the desktop. Below is a link to the working sample as well as a link to the source files for you to use as you wish. Simply add all of your favorite images in the images folder and then modify the ajax-desktop.js file and add your images as indexes of the ‘imagesArray’. Everytime you boot up you will have a different image load randomly as your desktop. You can add links to your executables allowing you to rid yourself of desktop icons as well as links to your favorite sites.
This week I have been building test applications using AJAX (Asynchronous JavaScript and XML). AJAX is very similar to Microsoft’s Remote Scripting, with the biggest feature being the XMLHttpRequest object in JavaScript which handles discreet communication between the client and server.
If you are still building Web Applications whereby the UI is rendered exclusively on the server, you will definitely want to check out some of the interesting UX improvements that can be achieved via AJAX implementations.
