design @ IBM developerWorks
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...
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 manner.
Accessing the local file system from a web page has been greatly simplified in HTML5, using the File API. The File specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.
The File API includes:
How the demo works:
For my example, I have provided a palette from which to drag & drop into, or alternatively use the File chooser, to select image files off your local file system. For this example, please select image files only, as I have not built in any filtering or error detection for non-graphical files. Remember, with HTML5 not fully implemented in all browsers, this sample
will require an HTML5 compliant browser, such as Firefox 3.5 or above.
The key methods to implement the File APIs are basic and easily implemented as follows:
I chose the <
You can download the complete HTML of this example by
If you have a blog on a Lotus Connections instance, you may have noticed that the tag cloud widget for your blog entries is filtered by date. For example, on my developerWorks blog, the tag cloud only displays tags for my most recent blog entries. The experience that I would find ideal, is to allow my readership to navigate all of my blog entries from the tag cloud, from the beginning.. when I first started blogging here at developerWorks, right up to my latest blog entry.
The before and after results:
bobleah 270000CN12 Tags:  html5 localstorage featured code contenteditable 23 Comments 108,123 Views
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 on how a developer may actually implement the API in a useful and innovative manner.
In the mid 1990's, I submitted a patent for a "web sticky". The simplified description of this concept is the creation of a "yellow sticky note"... that is stuck digitally to a web page vs. a physical monitor in the real world. The contenteditable attribute and localStorage method make the creation of a web sticky quick and easy!
Mouse click within the area of the yellow sticky note.. and type your sticky message. The app stores each character as your typing... in localStorage (not a cookie). When you re-visit this blog entry, you sticky message is recalled. Remember, with HTML5 not fully implemented in all browsers, this sample will require an HTML5 compliant browser, such as Firefox 3.5 or above.
I used a <pre> element for my contenteditable attribute and onkeyup event:
You can download the complete HTML of this example by clicking here.
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 was missing. Sure it showcased the Geolocation API nicely... and the Google map implementation was a really nice touch.. but something was still missing. That it came to me! This API is really well suited for a mobile device. But how could I demonstrate this usage in a desktop browser? Bingo... I could wrapper the Google map implementation in an iPhone simulator. By doing this, my demonstration would really bring home a real world example of the value of this simple HTML5 method.
A couple of things you need to know: for this demo to work... you must agree to share your location. You do this by clicking the share location button that your browser window popped up when you first entered this blog post. Additionally, with HTML5 not fully implemented in all browsers, you will need an HTML5 compliant browser, such as Firefox 3.5 or above.
You can download the complete HTML of this "simulator" example by clicking here.
The iPhone & iPad implementation
I have also marked up an example that wraps the Geolocation iFrame with CSS3 media queries for running this example in a native iPhone or iPad browser. This implementation supports both landscape and portrait views. If you are viewing this blog post from an iPhone or iPad, click here to run this example.
Here is the code for the iPhone & iPad browser implementation
Now if I can ask my readers a favor:
I'm curious to how accurate the Geolocation API is. If you can take a minute and add a comment to this blog entry with your experience on how close the Google map zoomed to your current location... I would be thankful!
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.
The key methods to implement d&d are basic and easily implemented as follows:
I used table elements to provide both layout structure and as a target for ondrop events:
I chose the span element (wrapping an image) as my draggable object:
You can download the complete HTML of my d&d example by clicking here.
Update! - see my new blog entry: HTML5 - code example of Geolocation in an iPhone
Are you a student, summer hire, co-op, or intern? Are you a techie with something to share? Come join our own dW co-ops Christian and Richard and start your own blog today!
Getting started is simple!
My developerWorks: Hosting blogs for developers and IT professionals
developerWorks blogs are part of the broader My developerWorks community. We are happy to host your developerWorks blog, and will make every effort to be a gracious and courteous host. We ask that you treat IBM and developerWorks, the blog hosts, with courtesy and respect (just as if you were being a good guest at a party or visit with friends or family). Part of that courtesy is to understand and follow these guidelines.
Additionally, please be sure to read and understand the broader IBM guidelines for blogging and social computing, which can be found here: http://www.ibm.com/blogs/zz/en/guidelines.html
Expectations of the bloggers
The responsibility of the blogger is to keep the blog fresh and engaging and encourage people to come to the developerWorks Web site and learn about things that are important to developers and IT professionals. Remember that developerWorks is a community of developers and IT professionals, and address that audience and the topics and interests that they care about. Additionally, be genuine and personal. Your blog should be in your own unique voice, written in first person style. Don't turn your blog into a vehicle for blatant advertising and promotion of commercial products for your company or organization. Also, help us maintain usable blogs by doing such things as adhering to accessibility requirements (by for example including alt tags for any images) and preventing and correcting broken links.
Keep your blog fresh
Posting interesting content regularly is way of keeping your blog fresh. Regularly means more than once a month and even better, more than once a week. For best results, you should plan to post more than twice a week to keep your blog alive.Once you reach a total of 100 posts you'll have a cushion if you need to take a little time off to work on your real job, etc. But multiple posts lead to visits. Having posts with varied searchable words will bring visits from the search engines and keep your existing audience engaged. Once your blog is live your name is going to be on it; even if you don't post, someone Googling your name is going to find your blog. Thus, you'll want to continue keeping your blog alive and active. Please make sure you are committed to this, long-term, before launching a blog that may quickly become the #1 result for your name in the search engines.
Treat your blog as a dialogue
Certainly your blog is all about what you have to say, but it is also about what your audience has to say. If you get a comment, respond. Let the commenter know you appreciate what he/she has to say even if you don't agree with it, or have an answer to the question, etc. This will bring the commenter back and will show the casual visitor that your blog is a lively, discussion-friendly area. If you are going on vacation (after you have that 100 post cushion), let the audience know, or even better, bring in a guest blogger to keep the conversation alive.
Guidelines for your blog
Know who owns your blog
You are responsible as the author of your blog for all of its contents. That said, please be aware that content published on our site is available to IBM and IBM developerWorks to use as we see fit. Also be aware that anything published on the Web can live on forever in the public domain. If you want to reprint your blog, you have reprint rights under the IBM developerWorks standard reprint policy. If you want to know the specifics, please send a note to email@example.com requesting a copy of the current reprint policy.
Finally, If you are changing jobs or changing your focus or want to
blog on another site, we request that you write -- and leave in place
-- a final post stating you are discontinuing the blog, and that you
disable the comments. If you have another blog, you can refer readers
A few weeks back I added an interesting piece of technology to my blog. Since developerWorks has a world wide reach, I wanted a means to provide translation services to followers of my blog. I explored various Firefox tranlation plug-ins and the Google toolbar, but each of these solutions required a reader to install an add-on to use the translation service.
Update! We have started the pilot for bloggers. Please join the developerWorks n.Fluent Real-Time Translation Solution Group if you're interested in adding the n.Fluent transwidget to your blog.. or if you're just interested in Real-Time Translation technology!
While I'm not an expert on SEO (search engine optimization)... I have dabbled in optimizing the search ranking for my blog here on developerWorks. The first thing I did was Google "search engine optimization tips", and researched the various tips & techniques given to optimize a search return. Be warned, there is a ton of information, speculation, and conflicting perspectives on how to optimize a web page for search. While I will not comment on which techniques work best, I will share the mechanics of updating your Lotus Connections blog template with additional META data to improve your blogs search ranking.
Just follow these steps:
The META description is an important field, as it is the description displayed in the search engine search returns page. Make your description meaningful.. as SEO is worthless if the user doesn't feel compelled to click on your blogs returned link! Another critical META is your blogs title, which you set in the General Settings for your blog.
Additional SEO resources:
JohnMu posted these excellent resources on SEO:
iPhone users rejoice! We are getting very close to the availability of a My developerWorks iPhone application in the App Store!
The dW iPhone app back-end is powered by Lotus
Connections syndication Feed model.
In a previous blog entry, I shared the profile view of My dW on the iPhone, now lets take a quick peek at some additional features that will be available.
Today, let's explore dW Public updates on the iPhone:
Track dW members activity on the river of news: Blog entries, Comments, Downloads, Profile posts, Forum posts, Wiki updates, Shared Files, Group posts, Board posts... And many other activities.... all from your iPhone!
Update: the developerWorks iPhone app is now available!