with Tags:
code
X

Code example of Responsive web design using CSS3 Media Queries
With the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it. Creating a responsive design, one where elements on the web page are fluid, has never been simpler. If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design. The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to... [More]
Tags:  media_queries code css3 |
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 |
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 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 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 |
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 qrcode javascript ibmimpact code css3 sencha css |
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 |