design @ IBM developerWorks
With our latest revision to My dW, we have added some slick features for developerWorks members who also activity participate in Facebook. I see a lot of affinity between Facebook and developerWorks... with an overlapping network of colleagues. Let's explore a new feature that links our social sites.
Broadcast your developerWorks Activity to your Facebook friends network:
In this iPhone example, you can see 2 of my developerWorks activities (bookmarking a dW article and commenting on a dW blog) syndicated out to my Facebook friends. You can easily configure your My dW profile to set this up:
Navigate to Profile -> My Profile -> Settings : and within the Facebook Connect section choose the activities that you would like to syndicate out to your Facebook friends network!
That is all there is to it!
Wow... developerWorks has turned 10! And what an incredible 10 years it has been for myself and our industry. In 1999 I was working as an architect on an IBM WebSphere Small Business Suite offering. In those days, I used dW and aW all the time as a developer / architect to get answers and keep current on technology.
After moving to Tivoli, I was named the UI architect for a common tookit to be used to construct all the web GUIs for our product offerings. Again I found myself turning to dW and aW, as the resource not only to solve my current challenges, but as a means to keep current on technology, and remain well positioned for new growth opportunities that I knew would arise.
In 2007, an opportunity presented itself that would forever change my relationship with developerWorks. No longer would I look to dW as a resource center to assist me in my day to day job... as I made a move into the developerWorks organization itself! Working within dW has been AWESOME! Finally, after using the resources at dW for all those years as a developer and architect, I could give something back!
So developerWorks... thank you for all those years when you assisted me to be a better programmer.. and a smarter architect. And thank you today, for allowing me the privilege of working on the "inside" of our industry's leading IT professional network!
Members ask: is there a vanity link (URL) to my developerWorks profile? You bet! When you create your developerWorks profile... we create a vanity link for you!
What is the advantage of a vanity link?
So what is your vanity link? All of our membership share this common root URL:
Simply add your Display name to the root URL for your developerWorks profile vanity link...
developerWorks on your iPhone?
Your profile is your electronic
persona on developerWorks!
Its often the first step and the lowest common
denominator of the community experience, but undoubtedly, the profile
plays the most important role in a successful social network. The
more information we, as the community managers, acquire about our users,
the more we learn and this is the kind of knowledge that can pay huge
dividends to our community. But not only do we realize the benefits,
but the more that users reveal about themselves, the easier it is for
them to find others and start communicating on a one-to-one level. It
represents the most granular level of interaction.
A well thought-out profile showcases who you are, what your technical interests are, and why you have joined the developerWorks community, and this information is invaluable for everyone with a stake in the community. As a community leader, contributor, and member of our community, you should definitely encourage your peers to fill out their profiles completely.
While the actual creation of a profile is simple, you should carefully consider the information you would like to reveal about yourself. A completed profile is only as good as the quality of the information it contains. As the fields are populated, you should be cognizant of how others will use this information. Its critical to recognize that the profile is the primary vehicle that members of the community will use to find and reach out to you. Your profile should be thought of as an electronic business card. How do users want others to view you?
The first time you register with developerWorks your basic profile is created using the information collected by the registration process. You can update your profile at anytime, by clicking the Profiles link or Edit my Profile link found on various pages on our site.
This blog entry is the first in a series of "Members ask...?" I will be adding a number of blog entries to aid users in creating a robust Profile, starting a Group, and participating in Activities... so please stay tuned!
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 the basic capabilities of the Canvas API, I have created a simple QR code widget, which can be used on websites, or printed out and placed on marketing materials. To learn more about QR codes, please visit my two previous posts: Create a Quick Response Code (QR Code) image using Google Chart and Branding a Quick Response Code (QR Code) with a custom logo.
This blog post will introduce you to the following Canvas concepts
Creating the context
On the page load, we first verify that the browser supports the HTML5 Canvas element, then we get the context of the Canvas, to be used for all subsequent drawing operations.
Before we begin to draw text on the context, let's first set a nice background color and fill the Canvas by drawing a rectangle over the top of the entire Canvas surface. Next we will set the color and font of the text, set it's position, and finally draw this text onto the context. In my example, I have written out the URL to my blog. We use the fillText API to draw my blog's URL string onto the context.
We will be using Google Chart to dynamically create and return the QR code image, and also brand the experience with a small developerWorks icon, which we will load as a traditional web resource. We use the drawImage API to add each image to the context.
Shadow and rotation treatments
Since Canvas is a two dimensional drawing service, I've added a shadow treatment to make the QR code "pop out" at the user. I also twisted the images ever so slightly, using the rotate API, simply for artistic flair.
The compete code
You can run my example online by clicking here. This blog post has only scratched the surface on the capabilities and promise of the Canvas API. To learn more on Canvas, I would suggest you begin by reading the complete HTML Canvas 2D Context specification at W3C. To download my example, please click here.
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 support various device display properties. As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
Code example of a responsive web page
@media (min-width: 481px) and (max-width: 768px)
Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)
Portrait smart phone
@media (max-width: 320px)
Start by creating the standard CSS classes and setting default properties. I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.
The media queries
Next create the media queries for each screen dimension your interested in supporting (responding to). Media queries are exactly like any other CSS element, you are simply providing an alternative set of CSS properties for the existing elements on your web page. The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window. Here are the three media queries I added support for:
Media queries enable my example to support landscape and portrait mode cleanly
Hints and Tips
Important! Set the following META keyword to force the device viewport to maintain the correct scale. Failure to include this META will result in your UI being pinched:
You can optionally configure webpages saved to the iphone's home screen to launch using WebKit directly. This will remove the Safari web browsers address bar & bookmarks bar giving your web page a native appearance:
Optionally provide a thumbnail image to represent bookmarked pages in iPhone:
You can run this example by clicking here. As you resize your browser window to different widths you will see the media queries adapt and flow the web page. You can download the complete HTML and CSS of this example by clicking here.
Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design. Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.
However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website. The key is careful thought to page elements, image sizes, and overall copy content.
For the entire definition and specifications on media queries, please visit the W3C Media Queries module.
IBM today launched the first developerWorks mobile application for the Apple iPhone, providing developers around the world with mobile access to build skills and network with colleagues using the professional social networking platform, My developerWorks, built on IBM Lotus Connections. Read the entire IBM press release...
The dW iPhone app back-end is powered by Lotus
Connections syndication Feed model.
Find a members profile - view their board - add a comment - toggle to view interests and skills...
Go to your own profile -update your status - view your comments - edit your profile - and a whole lot more! Download the free developerWorks app from iTunes!
Track dW members activity on the river of news: Blog entries, Comments, Downloads, Profile posts, Forum posts, Wiki updates, Shared Files, Group activity, and many other activities.... all from your iPhone!
Are you interested in developing your own Lotus Connections based iPhone app? Nick Poore and Ami Dewar share their experience creating the developerWorks iPhone app in the article: Developing a social networking iPhone application based on IBM Lotus Connections 2.5.
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!
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