with Tags:
html5
X
X
HTML5 Canvas example - an introduction to the basics: create a branded QR code Canvas widget!
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 |
CSS3 box-shadow property: use CSS to liven up your web images!
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 |
HTML5 - Example Form validation and styling Form elements
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: form code html5 css css3 |
Using Sencha Touch HTML5 library to build a mobile application
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 javascript qrcode ibmimpact code css3 css sencha |
HTML5 code example: Intelligently store Images in localStorage for faster page loads!
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 |
Year in Review - my most popular blog posts in 2010
With the year wrapping up, this is a good time to reflect back on 2010. I was kept busy in the first half of 2010 assisting with the deploy of developerWorks community applications on Lotus Connections 2.5, and expanding the developer community to fully support our local sites. I spent the remainder of the year working closely with my design team, and the IBM.com web and executive teams on a new developerWorks site wide redesign, which we plan on debuting in early 2011. In between supporting the community in general, including assisting... [More]
Tags: 2010 html5 css3 |
HTML5 - code example of Notifications API
In my previous blog series on HTML5 code examples , I covered ContentEditable, FileReader, LocalStorage, Geolocation, Drag & Drop, and other API's, demonstrating the usage of these HTML5 interfaces. As the spec matures, HTML5 interfaces are becoming more widely available in a variety of web browsers, however today I will be demonstrating an API that at this time is limited to the Google Chrome browser. This blog entry will discuss what I consider to be a base interface required for mobile computing: Notifications . A key advantage of... [More]
Tags: html5 code notifications |
HTML5 - The Wilderness Downtown...
The Wilderness Downtown... To show case HTML5 (and Chrome), Google created " The Wilderness Downtown "
a cool music video with interactive animations and of course, Google
Maps integration. Most up-to-date browsers can run the site, but it is optimized for Chrome. Check it out, pretty impressive...
Tags: google html5 chrome |
HTML5 - code example of File API - drag and drop hard drive files to a webpage!
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 |
HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!
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 localstorage featured code contenteditable |
HTML5 - code example of Geolocation in an iPhone
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 |
HTML5 - code example of drag and drop on a web page
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 |
