Big Blue has taken the top spot for intellectual property development for 18 straight years, according to IFI Claims Patent Services... and local IBMers here at Research Triangle Park, NC, contributed to over 500 of those patents!
design @ IBM developerWorks
IBM, with a big boost from researchers at its campus in Research Triangle Park, set a record of patents in a single year with 5,896 in 2010.
Big Blue has taken the top spot for intellectual property development for 18 straight years, according to IFI Claims Patent Services... and local IBMers here at Research Triangle Park, NC, contributed to over 500 of those patents!
The game of Jeopardy! makes great demands on its players – from the range of topical knowledge covered to the nuances in language employed in the clues. Can the analytical power of a computer system – normally accustomed to executing precise requests – overcome these obstacles?
View Watson during the sparring matches leading up to the final championship match... and take a peak behind the scenes of the making of a Jeopardy champion!
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 interesting to explore the use of the HTML5 localStorage API.
The corresponding HTML Image element:
You can download the complete HTML of this example by clicking here.
In order to demonstrate the significant improvement in page render time of locally stored artifacts, I have uploaded an online working example. In this example, I render the first image from your browsers local storage, while the second identical image is retrieved from a web server. After you load the example page, perform a few (F5) page refreshes and observe the difference in Image load time. Please note: For demonstration purposes, I have kept this illustration scoped to storing an Image. The realization of page performance is derived by the number, size, and complexity of the stored elements, and in the exercise of intelligent control the server application has on these elements.
This brings us to one of the the key differences between between localStorage cached artifacts vs. browser cached artifacts, which is in the level of fidelity and point of control of the cache itself, I.E. application vs. client. Setting HTTP server-side headers which instruct browsers to keep the content in its local cache is standard fare. But the caching policy remains with the browser. Setting HTTP headers doesn't give applications the fidelity of control or insight to what is truly happening on the client.
Some of the challenges with standard browser caching are:
In addition to intelligent caching where the application can tune and control the client cache for quicker page load times, I can think of a number of examples where this technique can be very useful. For example, if you are developing offline applications, or applications for smart devices where there may not be a persistent connection to your application server. For the complete specification of the HTML5 localStorage API, visit the W3C specification page for Web Storage. Enjoy!
You have likely seen Quick Response codes (QR codes) popping up on packages, magazine pages, even some web pages, and in 2011, you are going to be seeing a lot more of them. Quick Response codes are poised to achieve widespread adoption this year, and for some very obvious reasons. We all want information... we even demand it! And a QR code provides it, through immediate access to what’s relevant about the artifact it represents. And with the advent of smart phones, we all carry the required tool to interpret all that information neatly tucked away within that postage stamp sized image!
What are QR codes?
In case you haven't had the opportunity to encounter a QR code in person, they’re similar to the familiar barcode that has been in use for years to track and price products. The key difference between the two dimensional QR code and the single dimensional barcode is the amount of data they contain. Quick Response codes are also known as hardlinks or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example, a URL, contact information, a telephone number, even a blog post! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones.
By scanning a QR code with your iPhone or other camera enabled smart device, you activate any number of phone functions, including linking your phones web browser to a web page destination. In this blog post, I will demonstrate how to use the Google Chart API to generate a QR code that references a destination on the web. This can be especially useful for linking to smart device specific down-loadable content. For example: if your website has a corresponding iPhone app, you could provide a QR code in lieu of an iTunes destination URL. Another good example would be using QR code images on a web page, that point to podcasts or videos that are hosted on iTunes.
There are a number of websites that can generate a QR code image. These sites provide a Form to enter a URL or a message, then generate the QR code image for you to download and later place on your web page. While this is a convenient method, I wanted a means to generate a QR code image on demand. Authoring this type of application would be no simple matter. Fortunately, Google has done all of the work for me! Google Charts provides a simple means to generate a QR Code image as a service.
Here is an example of generating a QR code image for the My developerWorks iphone app on iTunes:
QR codes have a different set of required parameters from any other chart:
The usage of QR codes is growing rapidly since they are tailor made for quickly and easily linking content to smart phones. From basic magazine pages, business cards, or advertisements, digital linkages can be established to websites or any other destination URL. With our growing reliance on mobile phones... QR codes removes the barrier of typing out long URL strings on tiny keyboards. By supplementing a destination URL with a users physical location (via a geolocation service), QR code images can provide even greater value. As smart device applications expand and grow in sophistication, I believe we will see an explosive usage of these "physical world hyperlinks"!
In a previous blog post, I discussed using Google Charts to quickly and efficiently create QR code images. A QR code or Quick Response code is a two-dimensional bar-code that is readable by QR bar-code readers and smart phones. You can use QR codes to represent display text , open a URL, or compose an email or SMS. Quick Response codes are also known as
As I explored the Google Chart API for generating QR code images, I noted a particular parameter - CHLD, where you can configure the error correction level for the generated QR code. Setting this parameter to "H" allows for data recovery up to 30% of loss rate. Given the intent of QR codes being used in the physical world, this level of redundancy is critical, to account for wear & tear on the physical QR code image. This peaked my interest. What if I were to deliberately cause data loss... by digitally applying a branding logo over my QR code images?
Branding a QR Code
I have seen minor revisions or "branding" of QR codes, mostly where individuals have added a rather small logo to the center of a QR Code. It occurred to me that using the Google Charts CHLD parameter in conjunction with a URL shortening service (to minimize my payload size), may allow for me to brand a much larger surface area of a QR code image. Using bit.ly and Google Charts, I placed a logo over the center portion (data portion) on a number of QR code images, implemented with the CSS position property. By doing this, I discovered that I was able to cover up a significant portion of the QR code with my own branding, while maintaining the data integrity of the QR code image itself.
Tips and Tricks
I created three branded QR code images. The first is a QR code that represents my dW profile, which I branded with my profile picture. Additionally, you will notice I also added an ICON treatment into the lower left corner, as your branding does not necessarily have to be contiguous across the QR code image. Next, I created a QR code image for the developerWorks web site. Finally, I experimented with a single merged image, with a QR code base color palette update to create a purposely branded logo for developerWorks (displayed at the start of this blog post).
I discovered that there is not a direct formula to determine to what degree a brand logo can overlay a QR code image. As pointed out, there are areas within the QR code image that are out of bounds, and cannot be manipulated or overlapped. However, you can change the base color palette and overlay a large percentage of the QR code if you follow my tips. Contrast is also a critical factor, if you elect to change the palette colors. Finally, I can not stress enough to test your branded QR code images. My personal recommendation is to test with a lower quality camera phone, and size your branding based on the lowest common denominator of QR-code software and smart device to ensure your branded image works for the largest possible audience segment.
To view an HTML example of my branded QR code images... click here.
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 explore some of the new web libraries that have been created expressly for displaying web applications on mobile devices. We chose Sencha Touch for this example.
If your going to Impact2011, or just want to give our app a test drive, you can access it by pointing your smart phone at the branded QR Code to the left, or you can directly load the app by clicking http://bit.ly/1mpact. This app will also load in your desktop web browser, if you would just like to give it a quick look, or download the source code.
Here is a code sniplet:
Additionally, you will likely have your own inline CSS to style various elements that you include as part of your application. In particular, you will want to account for landscape mode in addition to portrait mode. You do this by creating some conditional CSS. In our case, if the screen width is greater than 479px, we use the first set of CSS (iPhone landscape orientation); whereas, if the screen width is less than or equal to 320px. we use the second set of CSS (iPhone portrait orientation) :
Finally we include our own js file (index.js) which implements the Sencha components. Sencha uses the Ext.js framework (For more information on this framework, you can visit http://dev.sencha.com/deploy/dev/docs/).
To create this type of app, there are a few things to consider:
Let's examine each of these considerations more closely:
We extended the Sencha ExtJS Panel component to include a toolbar and a list view. In the toolbar, we have a back button, a refresh button and a title. The layout of the panel is set to 'card' layout to enable us to support multiple cards. A card, in this case, is a list view of each of our media types. The panel is set to full screen to take up the entire browser view port:
Remote retrieval of data / storage in a NestedList:
Every time the Blog, YouTube, Flickr, or Twitter icon is clicked. A remote Ajax call is invoked to retrieve the data back in JSON format. The data is then inserted into a Ext.NestedList component data store.
Since we don't want to keep making calls to the same blog data, video data, etc, we want a memory structure to save the data we have already retrieved. In the initComponent function, we added the following hashmap:
The states are the actual keys to retrieve the data. For example, impact.storeMap[impact.state] returns the data. However, instead of storing the raw data which would require parsing again. We store the NestedList component which contains the retrieved data:
A couple of tips:
There are certainly a lot of components Sencha provides in additional to those we have covered. To see a demo of the capabilities of the Sencha libraries, you can visit http://www.sencha.com/products/touch/demos/
Extjs provides a lightbox feature called mask. Since a server side round trip to retrieve data can take substantial time, consider using Ext.getBody().mask('Loading...', 'x-mask-loading', false); to put up a nice lightbox until the data is returned. Then call Ext.getBody().unmask() to take down the lightbox.
In an iPhone, you can create an app icon using the Add to Home Screen feature in Safari, so that an app icon is created on your iPhone as a shortcut. With the Sencha CSS mimicking the iPhone look & feel so closely, this is a nice touch, and one of the reasons we chose to use Sencha,
If your attending Impact2011, please give this app a try, and if you could, please leave your feedback as a comment on this blog post. If you have any questions on the creation of this app, please don't hesitate to contact Daryl Pereira, Peter Yim, or myself. Thanks!
Are you a hot shot Lotus or WebSphere developer? A System z or Power Systems guru? Do you bleed yellow? Do you blog, author articles, are active in forums, or in general a strong advocate of IBM capabilities? Do you know someone who is? Nominations are open for you or a worthy candidate you may know! Just what is a IBM Champion, and what does it take to be one?
What is a IBM Champion?
The IBM Champion program recognizes exceptional contributors to the technical community, who are
non-IBMers that work alongside IBM to build solutions for a smarter planet.
An IBM Champion is a developer or IT professional who leads and mentors his or her peers
and motivates them toward IBM solutions and services. Champions can be found
running user groups, managing websites, speaking at conferences, answering questions in online forums,
and writing blogs, how-to articles, and technical books. The IBM Champion program recognizes and thanks these innovative thought leaders,
amplifying their voice and increasing their sphere of influence in the technical
What are the benefits of being a IBM Champion?
IBM Champions may receive:
- Visibility & networking opportunities at events and conferences
- Participation in exclusive IBM online communities
- Exclusive access to IBM product development teams
- Invitations and discounts to events and conferences
- Special recognition on their developerWorks profile
Do you have the right stuff?
IBM Champions will collectively represent a spectrum of IBM products and capabilities, including: Business Analytics, Information Management, Lotus, Power Systems, Rational, Storage, System x, System z, Systems Software, Tivoli, and WebSphere. Why not explore the IBM Champion program or jump right to the nomination form!
Alice Chou, Director IBM developerWorks, introduces the IBM Champion program at Impact
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.
One welcomed improvement HTML5 brings to Forms is the placeholder attribute. You have likely encountered this treatment in Forms today, as the text displayed inside of empty input fields. When you click or tab to the
input field, the placeholder text is removed. Placeholder text allows us to provide a cleaner and more compact Form experience, and is especially useful for mobile applications, where physical space is at a premium.
Basic Form validation
Use the required attribute to indicate an input field must contain a value before form submission. This attribute works with the following <input> types: date, email, checkbox, file, number, password, radio, telephone, text, search, and url.
All browsers support input type email. However, be aware that older browsers may simply treat this field as plain text. One nice treatment of the email type is seen on smart phones, where the keyboard associated with this field elevates the "@" and "." key buttons to the same level as the space bar.
You can use the pattern attribute to specify a pattern to validate an input field. The pattern is a regular expression and this attribute works with the following <input> types: email, password, telephone, text, search, and url.
Rather than use the default visual treatment to indicate valid input data for each of these examples, I marked up some CSS to apply a background image for each input field. This technique allows me to control the visual feedback of the Form experience, instead of relying on the default browser Form experience, which can vary from one browser implementation to the next. I used a simple red "x" background image to indicate that the validation for each field has not completed successfully.
As each validator is run (per user keystroke) the CSS will style the appropriate state of the background image. When the validation has passed, the background image will update to a green "check". Additionally, I have base64 encoded my background images, rather than use a traditional web image resource. This does not have any impact on the users experience, but does allow for the CSS to completely contain the validation in a single file versus three web resources (CSS, and two images).
If you have one of the newer generation browsers from Firefox or Chrome, you can experience a working example by clicking here. You can also download the complete HTML example by clicking here. This post has just scratched the surface on what is coming in the way of HTML5 Form validation. For the complete specification on HTML5 web Form elements, refer to the W3C web Form working draft.
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 trick on defining a deep shadow that can really liven up a flat web image.
Start with an image:
The first thing you will need is an image without any borders, as we will be applying our own border using CSS. Wrap the image within a <div> element, which we will later apply our style classes against.
Create the border:
First we create a basic box shadow class. This class will provide a nice outline around the image, and begins to give us the three dimensional look we are after. You can adjust the size of the shadow border around the image by adding additional pixels to the box-shadow element properties.
Create the deep shadow:
Next we create a deep shadow class for our image. This enhanced shadow will give us the deep three dimensional look we are after. We do this by creating a separate CSS class and applying it to our image <div> element. Yes, the shadow is over the image, but we will correct the CSS in the next step.
Adjust your z-order:
Finally, we change the z-order of the deep shadow CSS class, to position it behind our original image. This completes the look we are after. As you can see, we have given our original flat image a three dimensional look and feel, by simply applying CSS classes to the <div> element containing our original image.
Apply the CSS to the <div> element:
Now all you need to do is apply your css-box-shadow and css-deep-shadow classes to the <div> element that wraps your original flat image as follows:
bobleah 270000CN12 Tags:  blog_template blog template developerworks 30 Comments 41,300 Views
Having developed a
First, a quick overview of the Minimal Theme: In addition to a number of new widgets that our bloggers and their readers may find useful, this template provides full support for smart phone and tablet views. The goal of the theme is to provide an exceptional experience that your blog followers will find intuitive, in addition to making your blog easier to read, find, and follow, regardless of platform.
The Minimal theme template does not require any customization or updating, and is completely functional once applied, with no additional editing required. However, there are a number of best practices that will maximize the new features of this theme. Additionally, the theme can be further customized for bloggers who desire unique visual treatments or require more fidelity and control over the widgets provided within the theme.
SEO (Search Engine Optimization) for your blog home page
SEO for each blog post you author
Tagging blog posts
As covered above in SEO, tagging is a critical factor in the find-ability of your blog posts. Sit down and create a tagging strategy for your blog. Carefully and consistently choose your post's tags, as tags form the relationship between the currently displayed blog post and posts displayed in the Related Posts widget. Use short meaningful tags. If you must use a tag that consists of more than a single word, then you will need to bridge the words to form a complete keyword. To do this, use a hyphen or underscore to bridge multiple words into a single tag keyword, for example: smart_device or smart-device. Don't use your name as a tag, or a common term, such as IBM or developerworks, unless these keywords are truly meaningful to the post itself. Try not to saturate a tag by repeatably using it, as it will no longer be meaningful or useful to form relationships between your blog posts.
Featuring blog posts
The Minimal theme supports a design treatment to feature blog posts. You must have a minimum of 2 or more blog posts tagged with the featured tag keyword for the widget to display. You can alternatively choose any tag keyword to feature, by updating the $template-featured-tag property located in the _options template. The featured widget can be configured to display on your blog home page or both home page and blog post page, by updating the $template-featured property located in the _options template.
Using video and images in your blog posts
Images and video are popular ways to share content with readers of your blog. The Minimal theme will automatically size both images and video embedded into a blog post to fit devices from phones up to desktop browsers. When embedding an image, take a moment to reduce the picture size (and weight) to keep the total page weight as low as possible. For video, please use the embed option of <iFrame> or <embed>, in lieu of <object>. At this time, there is no way to scale a video that has been embedded as an object.
Use the Links dialog to configure and display related or meaningful links on your blog. You can add links to other social networks that you are a member of, or possibly display links to other areas within developerWorks, such as software downloads that are related to your blogs topic. Links can be an image, text, or both. The links dialog can be found by navigating to your Blog -> New Entry -> Links page.
About this blog
The text displayed in the About this blog (BIO widget) is authored from your blogs Settings dialog. This is also your blogs search META description. The total amount of text in this field is limited to 250 characters. You can also add an image to your BIO, by setting the $template-bio-image-url property located in the _options template. This image can contain an anchor, so you can link the image to another web page. Many bloggers choose to use their developerWorks profile picture, and also link this picture to their developerWorks profile.
Number of entries to display on blog home
Set the number of entries to be displayed on your blog home page from the blog Settings dialog. Take into consideration blog readers accessing your blog from a phone or tablet. I limit the number on my blog to 10.
Blog lead space image
The Minimal theme template offers the blogger the ability to brand their blog via a lead space image (hero image). You configure your lead space image by setting the $template-blog-header property in the _options template. The template will scale your image across various screen widths to support tablet and smart phone views. For best results, create your space image with the following dimensions: 1150 pixels horizontally and 250 pixels vertically. If you decide to deviate from this size, you will likely need to adjust the #hero-img img property located in _css template to account for how your hero graphic scales from tablets down to hand held smart devices.
Many bloggers also use a twitter account from which they promote their blog posts. This is an excellent practice, and I highly recommend it. To associate your blog with your twitter account, configure the $template-twitter-account-name property found in the _options template. If you want to display your 5 most recent tweets on your blog, configure the $template-twitter property found in the _options template.
Facebook and Youtube widget
If you have a Facebook account, and want to associate your Facebook profile with your blog, you can configure the $template-facebook-account-name property found in the _options template. To add your Youtube account, configure the $template-youtube-account-name property found in the _options template.
Facebook Fan widget
If your blog has an associated Facebook Fan page, you can display a Fan widget directly on your blog by setting $template-facebook-fan-account-name with the Fan ID. You can optionally display the Fan widget on your blogs home page or blog posts by configuring the $template-facebook-fan setting in the _options template.
The trending topics widget uses popular and recurring tags on your blog posts to display a simple and easy graph for your users to explore your blog by topic. This widgets fidelity is fully customizable by setting the following properties found in the _options template:
Displaying tags in a cloud widget is a popular means to allow your readers to navigate your blog by tag topic. While I personally think the experience offered by the trending topics widget is superior, the Minimal theme does offer both a popular tags widget (for blog post view) and a full tag cloud widget (home page view). The fidelity of these widgets are fully customizable by setting the following properties found in the _options template:
Tag cloud in the Hero area
You can optionally set $tagCloudHeroTreatment to 0, to place a tag cloud into the hero area of your blog. If you plan to use a hero graphic with this cloud widget treatment, you should limit the width of your graphic to make horizontal space for the tags. You can also limit the number of tags that display in this cloud treatment by configuring $tagCloudMaxHero to the total number of tags you desire to display. Both of these properties are located in the _options template.
Pinning a post to the top of your blog home page
Optionally pin one of your blog posts to the top of your blog's home page. This is a great way to introduce the general subject matter of your blog. by creating a special blog post, or simply pin a post that contains a video or photo slide show. You create this sticky post the same as any other blog post, then simply give it a unique tag. Then set $template-home-tag within the _options template to this unique tag.
Syntax highlighting code sniplets
If you include code sniplets in you blog posts, simply go into <h> mode in the blog editor, and surround your sniplet with HTML code elements: <code>YOUR CODE SNIPLET</code>. The minimal theme will automatically apply highlighting to the code syntax.
Adding a poll
To add a poll to your blog, first go to http://www.ibm.com/developerworks/polls/main and create your poll. Next, set $dwpoll to your poll number, within the _options template. Due to the fixed width of the right hand column, the minimal theme only supports the standard poll, not the wider "voting" polls.
Advanced Settings and Post thumbnails
Found directly under your blog editor, you can toggle open the Advanced Settings dialog to specify a custom URL for your blog entry, or correct a blog entry URL, in the case where you edited the title of a blog post and you now want the URL to match up again. This is also where you can specify an image to be used as the thumbnail to represent a blog post. You do this by setting the URL of the thumbnail image in the External media URL field. After I create a thumbnail image for my blog, I typically store it within my blog by using my blogs File uploads dialog, located on the blog editor page. The thumbnail image will display on your blogs home page if you have configured the $template-bloghome-thumbnail property to 0.
Using Google Analytics is a popular choice with our bloggers who are interested in investigating traffic, trends, keywords, or other patterns related to their blog posts. Once you have signed up for Google Analytics, you can update the META google-site-verification and set your tracking code by updating the $google-gaq-tracking-code property, both located in the _options template.