Recently I was exploring lazy load techniques as a method to improve perceived page load times.   There are a number of methods to lazy load web artifacts, which enable a web developer to delay or load page elements on demand.  Typically these methods are used to control and prioritize the rendering of primary web page elements to the benefit of the overall user experience.  My interest was focused on loading page artifacts, including intelligently and selectively storing web page Images.  As part of my research, I thought it might be... [More]

Tags:  code localstorage html5

In my previous blog entries, I shared HTML5 code examples for drag & drop and Geolocation .  In this blog entry I will explore two new HTML5 offerings:  contenteditable and localStorage .  While exploring HTML5, and reading the W3C specification, I instantly decided on the sample app I would create to demonstrate these new offerings.  As you can see by my previous HTML5 examples, I'm seeking to create simple but useful demonstrations that exercise HTML5 in a novel way.  My goal is to not only demonstrate the HTML5 API, but to give examples... [More]

Tags:  html5 featured localstorage code contenteditable

In previous blog entries, I shared HTML5 code examples for drag & drop , Geolocation , contenteditable and localStorage .  Today, I will share a simple app that provides a code example of FileReader , which is part of the File API specification of HTML5.  As in my previous HTML5 examples, I'm seeking to create a simple but useful demonstration that exercises HTML5 in a novel way.  My goal is to not only demonstrate the HTML5 API, but to give examples on how a developer may actually implement the API in a useful and innovative... [More]

Tags:  code featured html5 file

In my previous blog entry, I shared an HTML5 code example of implementing the drag & drop interface.  Today, I decided to explore the Geolocation API by coding up an example of its usage.   The Geolocation method returns a number of values... which by themselves make for a fairly boring demonstration.  I wanted to combine my example exercising the Geolocation API with a real world scenario, and decided that Google maps offered a slick way to truly showcase this new HTML5 offering.  After I completed my app, I again realized that something... [More]

Tags:  code geolocation featured html5

I have recently attended a couple of analysts meetings where the subject of HTML5 was a recurring theme.  With my curiosity peeked, I decided to explore what HTML5 has to offer today.  Of particular interest is the drag and drop (d&d) API... as this has always been the holy grail of early HTML practitioners.  What I discovered was very cool... as d&d is now a simple matter of implementing a few effortless method calls.   For my example of d&d, I created a simple network configuration demo that illustrates an administrator UI to... [More]

Tags:  code html5

While the current web browser support matrix has not fully caught up with the promise of the HTML5 Form specification, we are seeing additional adoption of various HTML5 Form elements in some recent browser deployments.   This post will cover a few basic Form elements and visual treatments, to demonstrate how simple and effective the new Form validators are going to be.    At one time or another, all of us have likely relied on Javascript to validate Form input.  While client side Form validation is not a replacement for bullet proof... [More]

Tags:  code form html5 css css3

As in past conferences, Impact2011 offers a web based social aggregator , which pulls together conversations and artifacts from Twitter, YouTube, Flickr, Facebook, and other social destinations, into a single web page.  While this page is available to mobile devices, it does not offer an optimal mobile experience.  A few of us here at developerWorks thought it would be a cool project to offer an aggregator that is optimized for viewing on a mobile device.  Rather than invest in the creation of multiple native device applications, we decided to... [More]

Tags:  html5 qrcode javascript ibmimpact code css3 sencha css

The HTML5 Canvas element is a 2D drawing interface supported by most modern web browsers. Canvas enables a web developer to draw anything directly into a web browser natively, without the need for Java or Flash plugins. While the Canvas API is fairly simple and straight forward, it is very robust.  Given its flexibility and freedom from plugins, I predict that Canvas is likely to become  the base building block of choice, that developers will leverage in constructing future web applications on desktop, tablet, and mobile devices. To demonstrate... [More]

Tags:  canvas html5 featured qrcode code

Shadow effects have always been very cool.  What started out as Photoshop junkies attaching them to background images is now in the domain of any programmer, thanks to CSS!.    The CSS3 box-shadow property allows designers and developers to easily implement drop shadows on any boxed elements. You can specify values for size, color, offset, and blur.    By casting a drop shadow from a image, you can add dimension without the need to create specialized web images.    Let’s explore how to create a basic outer shadow, and then dive into a neat... [More]

Tags:  code css3 html5 css