Archive by Author

Rapid Reaction: iPad 2 announcement

If you haven’t been glued to your tech twitter feed, blog feed, live stream from engadget or Macworld, Apple released details of the iPad 2 starting at noon CST. While the next 9 days until the March 11 release date will be covering all the great new tech specs, a couple things stood out to us.

The numbers
Apple usually starts these presentations with a hearty pat on the back for themselves where they state numbers, tell you how magical the products are, and occasionally diss the competition (there was more than one dig at Android tablets). A couple telling stats were that 100 million iPhones have been sold and 15 million iPads have been sold. Add that to the fall 2010 estimate that 45 million iPod touches have been sold and you have over 160 million iOS devices in the hands of consumers. Regardless of your opinion Flash, an audience of 160 million is too big to ignore. You don’t have to abandon Flash – it adds a lot of great value to websites – but it’d be wise to start having alternative content for those without it.

Android phone sales have been no slouch either, and Google is doing great things. This begs the question, “Does your website work on these mobile devices?” Here at The Nerdery we are well equipped to do HTML5 targeted websites and mobile targeted websites, and we want to help.

The iPad 2
The iPad 2 is 33% thinner, has a dual core processor that is twice as fast, 9x faster graphics performance, and has video cameras. You can read up on all the tech specs at http://www.apple.com/iPad. One of the things that really stood out is the HDMI out and video mirroring. We’ve done presentation apps here at The Nerdery which allowed sales representatives to give very interactive presentations at conference booths or even in smaller settings. Getting video out has always been difficult to say the least. Now, with the iPad 2, you can have a monitor mirroring everything for you so potential customers can ooo and ahhhh at your next great app that is displayed on a projector or HDTV.

In terms of utilizing the full, unbridled power of the iPad 2, we’ve  got your back. When The Nerdery went to WWDC in 2010 and the Apple engineers said, “You should really adopt these certain programming practices. We can’t say why, but just do it.” We listened. We always follow the best and recommended practices in programming, and we’re ready to hit the ground running. Apps we’ve built in the past should run faster, and apps going forwards will be faster as well.

iOS 4.3
Apple also rolled out a peek of iOS 4.3. We’ve had several devices running iOS 4.3 here for what seems like ages. We’re ready for the new iOS and are comfortable with all the new changes and fixes in this build. One thing to note is Airplay. Take the scenario where, on your new, important, client site, you have a HTML5 video embedded. A user comes along, sees the video, and wants to AirPlay it to their HDTV to show off your cool important client site video to their friends and family. We have the know-how to make this happen.

While the iPad 2 is cool, and lots of new things are coming, it doesn’t flap us unflappable, unstumpable Nerds. We’re always on the cutting edge and we’re ready to help you out.

Filed under Technology

Tech Tuesday: Optimizing for mobile websites

I've been getting a lot of questions around how to optimize mobile websites (not native applications) for the iPhone 4's Retina Display. It's a little known fact that almost all the Android phones here also have really great screens that would also want some optimization lovin'. So I'll break this down into "What does this mean for non-developers" and "What this means for developers" section. Developers should probably read the sales section too.

What this means for non-developers (or the Sales & Marketing people in your organization)
First, what does it even mean to optimize a website for a specific phone? Well, I'm glad you asked. The iPhone 4 has 2 times the resolution in the same space that the original iPhone had the same amount of space. Android phones generally have 1.5 times the resolution the original iPhone had. Here's an image of what happens when we don't optimize for these devices (click the image to embiggen and see what I'm talking about).
degradationExamplesmall

You'll notice in the unoptimized version, the iPhone 4 and Android phones bills are much much fuzzier than the original iPhone images. In the optimized section, the images actually get shaper as you go to the Android and iPhone 4 device.

"Great," you say. "Clearly all of our clients are going to want to optimize all their sites!"

In order to do this, however, it requires developers to slice and dice things three times instead of once. It also requires a little bit more coding. (read: it's more expensive to optimize for these devices). So when you sell mobile websites you need to start delivering this as an option to optimize the site. If the optimization is refused, you need to specify in the assumption that "We will only optimize images for devices with a pixel-ratio of 1."

If you are optimizing the site for devices, we should specify that PSDs should have as many assets in vector format as possible.

Non-developers, you can probably stop reading now.

What this means for Developers
So sales has successfully sold a device optimized mobile site and it has landed on your plate. Congratulations. How on earth do you do this? First, slice the asset three times. One at normal resolution, one at 150%, and one at 200%. Put these in folders named 15 and 20 for Android and iPhone4 respectively.

Next, you need a new CSS for each device (sucky, I know). The only thing that you really need to specify in these is the background-image: assets, not anything else.

Then in the file you need to specify to use the CSS

Android

CSS:
  1. <link
  2.     rel="stylesheet"
  3.     type="text/css"
  4.     href="/css/screen-15.css"
  5.     media="only screen and (-webkit-min-device-pixel-ratio: 1.5)"
  6. />

iPhone 4

CSS:
  1. <link
  2.     rel="stylesheet"
  3.     type="text/css"
  4.     href="/css/screen-20.css"
  5.     media="only screen and (-webkit-min-device-pixel-ratio: 2)"
  6. />

Almost there!

In our html we have:

So in our main CSS file say we have

CSS:
  1. .dollarImage
  2. {
  3.     background-size: 800px 349px;
  4.     background-repeat: no-repeat;
  5. }
  6.  
  7. #dollar
  8. {
  9.     background-image: url(images/dollar.jpg);
  10. }

The CSS for Android would be:

CSS:
  1. #dollar
  2. {
  3.     background-image: url(images/15/dollar.jpg);
  4. }

The CSS for iPhone 4 would be:

CSS:
  1. #dollar
  2. {
  3.     background-image: url(images/20/dollar.jpg);
  4. }

For img tags, just explicitly set the width and height and always use the highest res image so:

HTML:
  1. <img width="800" height="349" src="images/20/dollar.jpg" alt="it's a dollar"/>.

Happy Coding!

Filed under Technology

Tech Tuesday: Development for (and getting our Nerdery hands on) the Apple iPad

By now, you've read all about the Apple's new tablet, the iPad. You've watched the videos. You've maybe giggled about the product name; let's be honest though, the Nintendo Wii's name hasn't hurt its popularity. You've either dismissed it as a big iPod Touch that won't go anywhere, or, you've already smashed your piggy bank and have money in hand. Regardless, Apple has a pretty good track record with their latest products (iPod, iTunes, iPhone) and we don't want our ad and marketing agency partners to be the last ones to the party.

First, the iPad debut doesn't mean that our agency partners should stop making iPhone applications. All iPhone applications will work on the iPad out of the box.

But how does the iPad affect our agency partners who have already created applications for iPhone and now also want to take advantage of the bigger screen of the iPad? Unfortunately, it's not as simple as hitting an Easy button (trust me, I have one) and magically all your applications are reformatted for the iPad. The user interface will have to be redesigned to support multiple resolutions. It's also not just relaying out the design for the larger screen; it's also understanding what the iPad is, and designing an amazing user interface to take advantage of the new user interface features.

When looking at creating a new iPad application, our agency partners really have two options: target just the iPad or target the iPhone and the iPad.  Targeting the only the iPad should have a similar development cycle and cost as developing an application just for the iPhone. If the choice is to target both devices, there will be some design layout changes, but the core of the application will stay the same. There will also be some additional time for our crack Quality Assurance team to make sure we release a great application.

If you don't think the iPad is going anywhere, I present Steve Ballmer.

Then again, if you think Apple is infallible, I present the iPod Hi-Fi.

Either way, The Nerdery is ready to help you create great applications, no matter the platform.

Emerging Tech: WebGL and you

When Google announced in July that they were creating an operating system (Chrome OS) that was essentially a browser, I'll admit I was pretty skeptical. Then I started to think about what we nerds use our computers for and wondered, does this move by Google actually make sense?

First, we like to browse the web, something we typically do with a browser. We like being social with instant messaging... and Google has GTalk in the browser - you can also chat on Facebook in the browser, and you can connect to AIM or Yahoo with services like Meebo.com. Occasionally, we nerds use Microsoft Office-like programs to get work done. Google has Google Docs that does all that in the browser, too. The solution then dawned on me. We also like to play 3D games like Crysis or Batman: Arkham Asylum, Half-Life 2, etc. Flash can't pump the polygons to make these quality games and there really isn't anything else out there that can. The browser can't do 3D gaming!

"Clearly", I thought, "Google is making a mistake with this Chrome OS business because they can't satisfy the 3D gaming market. Chrome OS won't go anywhere." I then smugly went about my business knowing that I had out-thought Google and my skepticism was well met. Google 0, Rex 1.

Much to my dismay, I saw this YouTube video showing of a technology called WebGL.

3D graphics...in a web browser?

I decided to look further into this technology and see how it worked. WebGL is a JavaScript binding to OpenGL ES 2.0. This allows for hardware-accelerated 3D graphics in the browser without any additional plug-ins. This means that future games may not be shipped on a CD or be installed at all, just point your browser to a website and enjoy. Game releases could be essentially the same thing as a website launch. This kind of technology could go beyond games. What if your kids could open a webpage and see a rich 3D version of SpongeBob Squarepants's world? Could you take a car for a test drive in the browser with 3D graphics and real physics data similar to the racing games of today? How about viewing consumer products in 3D before you buy? The possibilities seem endless.

When will this be available? It's tough to say a hard release date, but this is already showing up in the nightly builds of Webkit (the technology that drives Chrome, Safari, and Palm Pre browsers, among others) and Firefox. I'd speculate advanced browsers will incorporate WebGL technology in 2010.

And as to the viability of Google's Chrome OS...  Well played, Google.  Well played.

Filed under Technology

Flash Apps on iPhone! The Good, the Bad, and the Ugly.

Yesterday at Adobe MAX, Adobe dropped a bombshell. In the upcoming version of the Flash Pro (Flash CS5), developers will now be able to export directly to iPhone. This isn't an Adobe Flash Player on the iPhone, but rather full applications being exported to native iPhone byte-code. For a place like The Nerdery, it turns our army of Flash Developers into a potential army of iPhone developers. This has really energized the Flash developer community, but some of the iPhone pundits are starting to harrumph about the downsides as well. This also comes on the heels of the announcement of a product called MonoTouch that allows .Net developers to write native iPhone applications as well. It seems like everyone is finding ways to get their favorite programming language to work on an iPhone.

Personally, I've spent my first amount of time here at The Nerdery as a Flash/Flex developer until I moved to become one of our senior-most mobile developers. I have the unique position of spending *a lot* of time in both environments. Being in this position, I have some thoughts on the whole situation:

First off, the positives. It is much, much easier to write code in Actionscript (the language that drives Flash applications) than it is to write Objective-C (the language that drives iPhone applications). Ted Patrick, the Platform Evangelist at Adobe, released source code and a applications that, in my estimation, would take 3-4 times longer to write natively in Objective-C. Flash is king at animation and ease of development which will allow for people to make potentially great looking games very quickly.

Also, as hinted at before, the developer pool just grew exponentially. Before, iPhone applications were the realm of developers who wanted to climb the steep learning curve of Objective-C and it's wonky syntax. Apple announced in late September that there were 125,000 registered iPhone developers. This number could easily grow into the millions now. This will drive down the cost of developing iPhone applications and make this space much more competitive.

So, if it's faster and cheaper what could be the downside? Just like the old saying in project triangle - "Fast, good, and cheap -- pick two," this comes at the cost of quality. iPhone applications aren't easy to make and there are a lot of nuances to getting an application just right. In the previously mentioned samples from Ted Patrick, a simple app of putting four circles on the stage and spinning them comes in at a whopping 3.7 MB. Adobe also pointed at seven applications that were developed in Flash Pro CS5 that averaged in size of 10 MB. This is in contrast to the size of the apps developed The Nerdery that average 2.3 MB. . . and I'd wager our apps are just as graphically rich as theirs and as full featured. Why is this important? At 10 MB, your application can no longer be installed over AT&T's wireless network and your iPhone user needs to find a wifi hotspot or go back to their computer to download the app on iTunes.

It may be that file size is acceptable since your application is going to be large anyway. Using my personal iPhone, and handing it around to our other developers at The Nerdery, performance on these apps has been uniformly been described to as "less than ideal" and "there clearly needs to be some optimization here."

Then there is the ugly. Apple isn't the type of company that sits back and lets people circumnavigate the rules that they have laid out. Apple likes having the keys to the development kingdom and don't like other companies playing around in it. One can see this in the fact that Apple creates new versions of iTunes seemingly just to break the ability of the Palm Pre to sync music with iTunes.

In the iPhone SDK agreement, Apple mentions that you may not "decompile, reverse engineer, disassemble, attempt to derive the source code of, modify, decrypt, or create derivative works of the SDK." So how will Apple react to this potential violation of the SDK? They have pulled apps that had Google Voice support, so it wouldn't be unprecedented for Apple to pull these apps. Also, what happens if Apple creates a new firmware update that is incompatible with Flash apps? How responsive will Adobe be to changes in the firmware and releasing patches to Flash Pro?

It should be noted this is all speculation as well. Apple may have blessed this whole process and those concerns are moot. It just seems strange that Apple wouldn't have been announced as a partner in all of this if they hadn't.

This is very exciting new for Flash developers. If this is an approved way of developing apps, sign me up. However, until a release date for Flash Pro is announced or Apple comes out and says they endorse or disapprove of this method of creating iPhone applications, I think the only thing that we here at The Nerdery can say for creating iPhone apps in Flash Pro is "caveat emptor."

Filed under Technology