With attention on Android, Google’s other OS is often forgotten. Google released Chrome OS in 2010 during the peak of the netbook boom. The concept was to sell an entirely web-centric operating system with all apps and data hosted in the cloud. As interest in netbooks waned in favor tablets, so did interest Chrome OS. Google never stopped production of Chrome OS and on April 12, 2012 they released an update which has some interesting new features: windowed apps and touch screen support. It’s very likely that the people at Google understand the potential of tablet computers as Microsoft does. Chrome OS could be the next evolution in Google tablets, breaking it free of the confines of present-day Android. That would mean two major competitors in the desktop-class tablet market, which begs the question: Where does this leave Apple?

As current leader in the tablet market, Apple is making no obvious move to compete with this new generation of tablets. The New iPad is only 2 months old. A Newer iPad is months, if not years, away. Apple’s recent dividend payout indicates no serious R&D investment. iOS6 rumors circle around Google Maps and Siri. There’s no indication of any major shift in Apple’s strategy. The iPad, for the foreseeable future, will remain a content consuming device. It’s designed for movie watching, book reading, game playing, web browsing and not much else. There’s no concern for writing, designing and other content producing tasks that people will begin to associate with tablet computers.

As Windows 8, and potentially Chrome OS, change the concept of a tablet. People will begin to consider a Windows tablet as a replacement for their Windows computer. Google can offer a compelling alternative, with its linux base and growing suite of web-based apps. Windows 8 and Chrome OS both have compelling smart phone counterparts in Windows Phone and Android. These offerings will make the iPad feel more like an e-reader, on par with the Kindle and the Nook. There’s certainly a place for such devices on the periphery of the computer market. But they will not hold the same status of “tablet” in the minds of consumers. Whatever future holds, it’s clear that Microsoft and Google will offer us many interesting choices. Very soon you’ll be carrying your entire computer setup with you, no bigger than a tablet.

It’s important to know that the App Center will replace app profile pages, which where recently deprecated. When a user searches for your app, or clicks on the app profile link in a post, they will go to the App Center. It’s also important to know that the App Center only displays submitted, and approved, apps. You will have to go through a process much like the iTunes Store to get your profile in the App Center. You’re still free to publish facebook apps without submitting to the App Center. But there is much in the way of exposure that the App Center will provide.

Submitting your app to the App Center

App developers will find a new “App Center” tab in their app settings. Submitting your app is as simple as filling out the form. However, the form requires quite a bit of information. In addition to the usual title & description, you’ll need a subtitle and detailed description (both required). Get your copy/paste keys ready because you’ll also have to provide privacy policy and terms of service documents. But the most time consuming part will be gathering all of the required images. Unlike the app profile itself, where the image you upload is sized automatically, the app store requires no less than 18 individual images; all sized to exact specification. Below is a list of all the required information:

• Title
• Subtitle
• Description
• Detailed Description
• Privacy Policy URL
• Terms of Service URL
• Image: 16 x 16
• Image: 64 x 64
• Image: 96 x 96
• Image: 128 x 128
• Image: Web Banner (155 x 100 )
• Image: Small Mobile Banner (136 x 88)
• Image: Medium Mobile Banner (204 x 132)
• Image: Large Mobile Banner (272×176)
• Image: Cover Image (800 x 150)
• At least 3 screenshots for Website
• At least 3 screenshots for App on Facebook
• At least 3 screenshots for Mobile Web

I created an artist friendly reference sheet of all the required App Center images, download the pdf here.

As an input source, touch screens excel only in a limited set of scenarios. They lack the typing speed of a hardware keyboard, the accuracy of a mouse, and they make clumsy controllers for button mashing games. Apple’s iPad and iOS operating system do very little to acknowledge this issue and have limited set of 3rd party add-on keyboards. The Android operating system, while touch based, does support keyboard, mouse and other human interface devices as input. Manufacturers are taking advantage of this at a hardware level, such as the Asus Transformer tablets. However little is done at the software level to put Android and iOS on par with desktop operating systems. Apps, such as PhotoShop Touch and Google Docs give you a limited sub-set of the features you get on a desktop computer. This is where Windows 8 blows away the competition.

Windows 8 is the only tablet operating system which equals desktop computers in functionality. In its core Windows 8 is an operating system for all environments, from desktop to tablet to smartphone. This inadvertently brings the power of the desktop environment directly into the tablet space. It will foster the next step in the evolution of the tablet, turning it into the personal computer that you bring with you to use in every situation. Through this evolution, the tablet’s touch interface will begin to augment the traditional desktop experience, creating something completely new.


Consider this scenario:

You’ve been away from your desk, casually reading a web site with your tablet. When you return to your desk, you plug your tablet into its keyboard dock. Suddenly, your large LCD springs to life with a traditional looking desktop and windows of all your open apps. The browser window automatically comes to the front, displaying the same screen you were viewing on your tablet just a moment ago. The tablet screen is now part of your browser’s interface providing navigation, bookmarks, tabs, and other app-specific UI tasks. You use your mouse to navigate the desktop on the big screen. Clicking on another app window prompts the tablet to display the interface for that app.

Windows 8 brings both desktop (aero) and tablet (metro) interfaces to existing hardware models. What we will see next is hardware using Windows 8’s metro/aero duality to create tablets which rival current desktop and laptop computers. A whole new class of app will begin to emerge, taking full advantage of this new environment. Imagine the Microsoft Office ribbon, or Adobe Photoshop palettes, as touch interface elements. Video games could use the touch screen as a HUD/Weapon Selector. We may see the web browser evolve to display content on the big screen and interactive elements on the touch screen. Entirely new genres of software may begin to evolve. The potential is limited only by hardware and software makers imaginations.

In her thorough and concise essay, “Why We Have to Go Back to a 40-Hour Work Week to Keep Our Sanity”, AlterNet’s Sara Robinson Explains the evolution of the 40 hour work week and why it is so relevant today. Robinson illustrates how lessons learned from the industrial work force are more significant with information workers:

Research shows that knowledge workers actually have fewer good hours in a day than manual laborers do — on average, about six hours, as opposed to eight … The other thing about knowledge workers is that they’re exquisitely sensitive to even minor sleep loss. Research by the US military has shown that losing just one hour of sleep per night for a week will cause a level of cognitive degradation equivalent to a .10 blood alcohol level. Worse: most people who’ve fallen into this state typically have no idea of just how impaired they are. It’s only when you look at the dramatically lower quality of their output that it shows up.

I’ve worked in many types of office environments, ranging from tightly managed to chaotic. My own experience has taught me, as Robinson explains, the correlation between effective management and overtime hours. Rarely is a programmer able to work optimally beyond a 10 hour stretch. I’ve personally witnessed teams reach the “negative-progress” mode Robinson describes where “they’re so mentally exhausted that they’re making more errors than they can fix”.

I highly recommend this essay to not only managers and workers, but to customers as well. It’s worth inquiring about the average overtime a team works. Many will wear their hours like a badge of honor. However, an overworked team only leads to a poor quality product. Successful managers account for the 40 hour week and set expectations accordingly. Their results speak for itself as well as the success of their business.

Like the old joke “cut it in half, and double it”, The New iPad’s high resolution is crammed into the same size screen. The quality of standard resolution images should be identical. It appears that Apple has made a mistake. Whether this is an accidental or deliberate mistake we’ll never know, but it is a mistake.

A Look At Image Interpolation

Below is an enlarged image of a circle rendered at 75dpi. To double its resolution for The New iPad we multiply the pixel height and width by two, creating an image with four times as many pixels. To fill up those extra pixels the computer interpolates, creating new pixels based on the colors of the existing pixels. There are many different forms of interpolation, each with its advantages and disadvantages. The three most common forms of interpolation are called Nearest-Neighbor, Bilinear and Bicubic. With simple nearest-neighbor interpolation, each of the original pixels is doubled in size, filling the adjacent space. When you’re doubling the size of an image for a larger display, nearest-neighbor produces a poor quality image that appears aliased or “pixelated”. To solve this problem other interpolation techniques, such as bicubic, are used to smooth out the rough edges. The larger you up-scale, the blurrier your image appears.

Let’s assume The New iPad uses bicubic interpolation to upscale old 75dpi images to 150dpi. It makes perfect sense that an image would appear blurry. After all, you’re filling up four times as many pixels. There’s only one problem with this. The New iPad’s screen isn’t any larger. You have four times as many pixels, but each of them is one quarter the size. Meaning any up-scaling should be negated by the downscaling of the physical pixels on the screen. If The New iPad instead used nearest-neighbor interpolation, a 72 dpi image on The New iPad would not look any better or worse than it did on an iPad2. This is not the case with The New iPad, 72dpi images are very noticeably blurry.

So What Does This Mean For Web Development?

This screenshot of my trademark GreenZeta, at multiple resolutions, was taken on The New iPad. The blurriness in the screenshot itself indicates this is in fact a software issue. You can see how the 72dpi image becomes blurry around the edges while the 150dpi image maintains its sharpness. Parts of the image with low contrast edges or very thin lines are affected the most.

The New iPad renders the page as if it were 1024×768 at 72dpi. This makes sense, at full resolution pages would appear twice as small on the screen. As a result, simply placing 150dpi images on the page will render then at twice the desired size. Height and width properties of the image need to be set as if it were standard 72dpi. Setting the height and width to “50%” is acceptable in most cases.

Before you start upgrading your website graphics to 150dpi, there are some drawbacks to consider:

• You need a higher resolution image to begin with. Upscaling an image designed for a 72dpi screen will have little benefit.
• Many browsers, including mobile safari on the iPad2, do not downscale images well. A 150dpi image looks worse in these cases.
• The image file size will double, meaning twice the download time and twice the bandwidth costs.

For the ideal solution, create a secondary set of high resolution images and control their display via CSS. This will allow you to detect The New iPad and attach the high resolution stylesheet when required.

Having a high resolution alternative for your web site graphics is a good idea; even if it’s simply held in reserve. Large, high resolution, displays are coming and it is on those screens where low resolution blurriness is unavoidable. It is possible that Apple has chosen to interpolate graphics poorly for The New iPad, just to prove this point. For now, bandwidth and low-res displays dictate 72dpi, but having a 150dpi alternative certainly doesn’t hurt.

https://plus.google.com/share?url=https://mywebsiteurl.com

Using that url you can easily make a quick share popup with just a few lines of javascript:

function GPlusShare(pUrl){
// Set up the window attrubutes
var attributes = "toolbar=0,location=0,height=450,width=550";
// Format the share url
var url = "https://plus.google.com/share?url="+escape(pUrl);
// Open the window
window.open(url,'',attributes);
}

This function can be called from anything that can access the javascript, including Flash. In this example, I used the red g+ button image:

The Google+ share uses facebook’s open graph meta-tags to derive the title, description, and image. Add these to the page you’re sharing to further customize the post. You can view the button in its own page to see the source, as well as some extra code to center the window on screen.

There are a myriad of articles listing the new timeline features. Here is a list of additional things I’ve learned while playing with the timeline layout on my brand page:

• Publish content that is unique and relevant to your target audience.
• Write clean html. Use CSS to lay out your page.
• Get links to your site in other high ranking pages.
• Do not hide your content in images, Flash, Silverlight, Java, etc.

It’s this final rule which brings me to the subject of this post. From 2007 to 2009 I managed, and eventually rebuilt, the geographic information powerhouse for Prince George County, Maryland known as PG Atlas. When I inherited the site, it was built with ActiveX, worked only in Internet Explorer, and had an interface that made the original Mapquest look like the slickest thing ever. During my work on the site, I re-built it on an ajax framework, introduced it to the non-IE world and redesigned the mapping interface.

A natural side-effect of this web-standards based approach was a web site easily indexed by search engines. I left that job not long after the new site went live and it grew and prospered on google, with no active human intervention. Google was able to use the site map to index a sitelinks listing for PGAtlas. With some human intervention, this could have been further cultivated with their Webmaster Tools.

Earlier this year, I learned that PGAtlas had been redesigned once again. Soon it would be released as a Microsoft Silverlight site. The new site had no significant new features. It simply was the “old” site, redone in a Silverlight interface. This seemed like an odd choice as Silverlight would severely restrict the availability of the site. The ajax site ran on nearly any device with a browser, from IE6 to iPad. For users that don’t or can’t have Silverlight: mobile phones, tablets & Linux computers, what once looked like this:

Now looks like this:

So what does this mean for SEO?

I had the opportunity to observe the effect of this new web site on PG Atlas’ Google ranking. In the days following the release of the Silverlight site, I tracked the Google results for the query:

“prince george county gis”

Pre Launch

This screenshot was the search result for what is now the “old” site. There are prominent sitelinks for the three main sub-sections of the site: Mapping, Parks & Recreation, Development Activities. The page descriptions are appropriately taken from the introduction copy in the respective pages. The main page description was indexed from the “Announcements” section of the home page. Note the page snapshot feature of google gives a concise preview of the page.

5 Days After Launch

Google re-indexes the new Silverlight home page. The page description now says only “Get Microsoft Silverlight”. At this point the sub-pages return 404 errors. Google has already dropped the three main sub-sections from the listing and replaced them with other, less relevant, sub-pages which also return 404 errors. Note that the page snapshot now displays only a graphic about installing Silverlight.

7 Days After Launch

Nearly all of the sub-section links have been dropped. The remaining links point to a random blank page which is still live, and to a page which redirects to the pgatlas.com home.

11 Days After Launch

The site overall has dropped from first to third in the results. It has completely lost its sub-page sitelinks. The page title and a message to “Get Silverlight” are now the only information available when searching.

Conclusions

When maintaining a Flash/Silverlight only web site, the importance of the non-technology alternate page is critical to SEO. These technologies lock your content in a box ignored by all search engines. Equal attention must be paid to the non-Flash/non-Silverlight page as it becomes a guessing game of which elements in the site are most important. Every element which does not have a counterpart on the alternate page is one less search result for which the site qualifies.

If we play the above scenario in reverse, we get a detailed illustration of the advantages in replacing a Flash/Silverlight site. Following established web standards provides not only the benefits of SEO, but also expanded audience. Tablets and Smart Phones are becoming ubiquitous. Their limited support for Flash is waning and their support for Silverlight is non-existent. Even without HTML5, creative CSS and JavaScript can produce much in terms of animated intros and transitions and will be supported on any device with a browser.

If SEO is at all a concern for the current maintainers of PGAtlas, they have a long road ahead of them. The site’s ranking will only continue to drop until the non-Silverlight alternate page is re-designed. The deep linking which once existed in the site will never return. The growing tablet market it is now completely cut off from PGAtlas. It will be interesting to see what actions are taken to address these issues. For now, as far as search engines are concerned, the site remains locked inside a shiny silver box.

Paper.js has an impressive set of features. It begins by wrapping all of the canvas drawing commands into simple objects such as Rectangle, Circle, Arc, and even Star. All objects have a common set of properties that are easy to manipulate. Animating a shape across the screen is as simple as changing its position property. A Group object combines many simple shapes into complex artwork which can be manipulated as one.

More advanced features of Paper.js include event handling, shape debugging and collision detection. This brings it into the realm of game development. For decades Flash has been the dominant web-based gaming platform. There are many reasons to look at html5 for game development <cough>iOS</cough>. <canvas> has much of the capability of Flash and paper.js brings this out in a programming style very similar to Flash ActionScript.

Using one of the provided demos as a starting point, I was able to create this interactive flying saucer animation in less than an hour.