Tag HTML5

First Look at Adobe Edge


On Monday, Adobe opened up their beta trial of Adobe Edge, their latest tool for creating animations for the web. Being that they are getting hammered on all sides about Flash, instead Edge uses HTML5/CSS/JavaScript as it animation engine. HTML based animation has gotten dramatically better, my test animation ran surprisingly well across browsers and mobile devices. Whether this is Adobe’s little white flag on the end of Flash is yet to be seen but for now we options.

At first glance Edge seems closer in structure to After Effects then to Flash which could be a nod to where Adobe is heading or a way to separate the apps, again we’ll have to wait and see. The application is laid out in four sections: Properties, Timeline, Elements, and the editor window, which is Webkit based. The basic premise application is the simple, add items to a stage and then animate them via keyframes along a timeline. There are no interactions or ability to add scripts with this version of the application. Nor can you create new objects/shapes outside of rectangles, so all your assets will need to be created externally.

The timeline offers auto-keyframing and each attribute can be animated separately. Edge supports the standard set of easing which can be applied individually or to a group via multi-select. Each object/layer is a different color and their attribute list can be contracted/expanded to maximize work space. Attribute values are displayed both in the properties panel and inline within the timeline. Similar to After Effects, you can filter the timeline by typing within the timeline’s search field. Another nice AE style feature is the ability to scale the timeline and manipulate your existing keyframes in bulk.

Since the main editor is Webkit based text is true HTML text as are the CSS styles connected to it. Adobe’s handling of object positioning within the stage has a few quirks. The biggest being an object’s Zero Point being based on where it was initially introduced to the stage and not to top-left or other standard. This make is difficult to quickly create animations or layouts based on numerical coordinates from either external applications (Fireworks) or from object-to-object. For now you’ll need a PNG/JPG to create your gradients. I’m not sure if this is due to the complicated CSS to support gradients between browsers or just something missing from this release. There’s also a few glitches revolving around scaling images but text and divs work as expected.

Code wise, Adobe hides most of the magic in pre-minimized JavaScript files with the external CSS file only defining the initial elements. As long as you keep the stage and associate includes untouched you can edit the rest of the page at will. Which will only help Adobe gain support of this among larger web shops. Despite this flexibility HTML based animations still lack the self-contained nature of Flash’s SWF, which means to view my sample animation you’ll need to click to a page outside of WordPress’s CMS.

Overall, I think this is a great example of where I think web content creation apps need to go. Live HTML in the editor means there is no guessing on how things will look when it hits a browser. I hope they follow this thinking with the next version of Fireworks allowing less web savvy designers to get a better feel for what how their designs will really look outside the false perfection of the current design tools present.

Though Edge is only in its first beta release it’s pretty solid app and could easily be used to create complex animations for websites, banners and other strongholds of Flash. You can view the my test animation I created for this review. Future versions promise support for increased support SVG and the Canvas tag which will only make this more powerful tool for web animators. Will HTML5 really be the death of Flash? If so, Edge is a smart bet for Adobe to keep relevant in this new world.

All is Not Lost – OK Go’s Viral Tribute to Japan

Once again OK Go has created a great viral video experience. This time they’ve teamed up with Google Japan, director Trish Sie and Pilobolus (a modern dance troupe) to create All Is Not Lost a tribute/message to post tsunami Japan.

The entire video is shot from below making for some interesting visuals all on it’s own, but add the multi-window tiling of video and you get a crazy kaleidoscope effect. If that wasn’t enough there is the viral/personalization feature where you type a message and OK Go and Pilobolus will write it out with their bodies. Simple concept, great execution.

Technically speaking, the use of HTML for syncing multiple videos is still pretty impressive. Be forewarned that this may be taxing on older computers as I know last year’s video/experience for The Arcade Fire’s The Wilderness Downtown gave my laptop a bit of a work out. For more about how they made the video check out Google’s blog. Regardless of the technology used the most impressive thing is how this all came about as a tribute to a post tsunami Japan.

- – – – -

Links:
All Is Not Lost (video)
OK Go
Pilobolus
Google’s blog
The Arcade Fire’s The Wilderness Downtown

Weekly Rewind: Friendships, Mayorships and the social monster

Two little changes that have a big effect.

This week Facebook added a new feature, called Friendships, that allows you to see the activity between friends. For many this will be a great way to reminisce, and be a nice addition to Facebook’s features. On the other hand it’s a privacy nightmare scarier then a Halloween horror flick.  How can this feature be bad…think of  jealous partner, this feature could easily be miss used to stalk their mate and easily read into any/all cross communications they’ve had with others. To make matters worse, it shows you activity between someone you know and people they are friends with, even when you are not. I wouldn’t have such a complaint if it was just me and one of my friends, but the friend to friend and especially the friend to stranger friendships cross the (privacy) line for me. If it does for you, check out Opt Out of the FB Friendship Feature.

The other little change this week took place on FourSquare, where they now allow venue owners to revoke mayorships. It make sense now that becoming a Mayor may come with incentives FourSquare has too crack down on the false posts. Still, this little change is going to have repercussions, no doubt someone will try to use this to oust a legit mayor for whatever their reason be it prize or ego. On a lighter note, FourSquare also allows check-ins from space.

- – - – -

Personally I don’t participate in Foursquare, Gowalla or Facebook’s Places as they give me nothing I value in return for my participation. Though there are a number of crossover (online to local) services I do use like Groupon (and similar services), Yelp (for reviews) and Google’s mobile search. I also post my photos to Flickr and Pegshot with their location data turned on as location seems to be a vital part in the story that picture has to tell. More an more this cross over between the real world (local) our online one is going to become seamless. David Marcus’s editorial on TechCrunch talks about how these services need come together to really provide something useful in our day-to-day lives.

- – - – -

Another buzz word these days is HTML5, this time it’s Microsoft that’s doing the talking. Seems as though Microsoft has decided to back off on the development of their Silverlight platform and focus on using HTML5 for creating online apps. This is a genius move on their part. HTML5 is the only cross platform supported technology. For those developing native mobile apps you’re now looking at supporting a growing number of iOS devices, all the flavors of Android (see more here), Symbian OS and now WinMo7. With WinMo7 being the newest of the group the quickest way to get developers to support your platform is for them to support all platforms. Joe Wilcox goes into greater detail about Microsoft’s David and Goliath strategy.

- – - – -

We use our smartphones for just about everything filling it with tons of personal data but how often do we think about all that data and how secure it is. Last week there were postings on how simple it was to gain access to one’s contact list on a locked iPhone. So far Apple hasn’t acknowledged it but the method works and is simple enough for just about anyone to do. Sorry, intentionally not providing link.

- – - – -

Zynga, the creators of FarmVille etc., are now worth more then EA, the second largest game publisher and makers of every sports franchise game there is. The reasons…virtual goods, lower overhead, and of course social networking. Still, both are smaller then Activision Blizzard but Zynga has only been around for four years, so who knows how long that will last. Get more of the details at Bloomberg Businessweek.

- – - – -

Two lengthy reads from the NY Times

Week in Links: Apps, Ideas and Reality

Top 10 Twitter AppsApple’s “there’s an app for that” marketing has been causing companies to go app crazy and forget that a websites are still the primary point of interaction for users.  A few weeks back the folks at Twitter reminded people that despite the fact that the heavy users all use 3rd party apps (desktop or mobile) the majority of users (78%) use Twitter.com. This week the folks at Twitter launched a new version of Twitter.com that features a number of elements that were previously only available in the app world.  They added a dynamic side panel to showcase user profiles and conversation view all while not disturbing the core of what Twitter.com was.  They’ve brought the sophistication of the external apps to the masses and with this they may have inadvertently signaled the return to web apps. For those that haven’t gotten the (rolling) invite to the new site check out TechCrunch’s overview “Best subtle things about new Twitter“.

- – - – -

A week doesn’t go by without Google making an announcement about something or other. This week they get their Google Voice app back on the iPhone. MacRumors gives a detailed run through of the app. Looks like Google has cleaned up their UI a bit with this version and offers just about everything the phone could do with the addition feature of translating your voice-mails into text. The one thing it can’t do at the moment is MMS, otherwise for $2.99 you can double the number of phones in your pocket without the bulk.

Also Google related is the steady growth of their Android platform, which is now 17% of the smartphone market. To put that in perspective the iPhone is at 24% and RIM’s BlackBerry commands 39%. Also note that the overall smartphone market has grown and these numbers are percentages of that growing market (data from Wired).

Part of Android’s success is it promotion from Verizon not having the iPhone to promote and instead needing to compete with it. Now Verizon wants a bigger cut of the action and has opened their own app marketplace. They say it’s for improved customer choice, but I’ll go with control and money.

While Android is growing into the third largest smartphone platform Nokia held it’s Nokia World 2010 event. They boasted that Nokia has a larger market penetration then Apple and Android combined, the threat is clear (as in they’re threatened). They followed their showcase of facts with info on their latest models, the N8 being the darling of the bunch. They flaunted “they perform day in and day out no matter how you hold them,” an obvious dig on the iPhone4. Then went into talking about the latest advances in Symbian and coding for it. Sadly, for US customers as nice as Nokia’s equipment is, if no carrier picks them up they don’t exist.

Final reference to Google (for this week) is their recent site/blog conveniently called Google New where they are posting all their latest products/projects. And by the looks of it they’ve been busy.

- – - – -

FCC is looking at opening up some radio frequencies, one of the selling points for opening these frequencies is the potential for Super WiFi. The are suggesting that this new Super WiFi would be able to travel farther and through buildings due to the longer wavelengths.

- – - – -

“Flash is dead, long live HTML5/CSS3.” Ever since Steve Job’s BS’ed his reasons why he didn’t want Flash on the iPhone this mantra of many front-end developers had some indisputable logic in regards to the mobile market. Now Android 2.1 supports Flash inside a browser as well as HTML5 true comparisons can finally be made. Based on the finding of Christopher Black’s tests (the video below) and a number of others Steve’s claims are no longer valid, if they ever truly were. So once again, developers have a choice as to what the right tool for the job.

Based on how the two technologies work it’s of little surprise, to me, that Flash (a platform based around animation) out performs HTML (which is designed around static structured layouts. Don’t get me wrong HTML/JavaScript have come a long way and in many ways fulfills the need that once only Flash could fill.

I’m impressed with how far HTML and JavaScript have come but structurally it’s not meant to do the animations etc. that Flash is specifically designed for. For me it’s about picking the right tool for the job and there are many factors that go into that choice, but jumping on a bandwagon shouldn’t be one of them…but I digress.

- – - – -

Pencil Vs Camera - 24It’s so easy in the world of technology and tight time frames to skip some seemingly tangential steps in order get the product or design out in time. Sometimes we just need to be reminded that we need to get back to the basics. I know that one thing that often gets skipped are the rough little sketches, Spyrestudios has done a nice write up to remind us of the benefits of sketching (and wireframes) in fleshing out ideas and saving time. It’s also a great way to look back and see the progress of ideas and inspire new ones.

A different way to look back and see how things progressed is BookTwo‘s 12 book collection displaying the changes to the “facts” of the Iraq War over the course of 5 years. The concept is simple enough, collect all the changes to the Wikipedia page on the Iraq War in one place. What it reveals is anything but simple, more of antithesis of the Orwellian nightmare 1984, where news/history was rewritten with no trace of what was.  Then again, out side of BookTwo’s project how many people are looking into trail of changes that make today’s truth.

Returning to the temporal life where now is everything, context-aware computers will be a welcomed addition to the ever growing overflow of information. For years this has been an “up and coming” technology, now (read: once again) the researchers at IBM (and many others) are hoping the power of smartphones will provide the always on, GPS info and increased processing needed to make context-aware computers a reality. What’s interesting about all this technology and it’s promise still echoes some of the thoughts of Marshall McLuhan and Norman Mailer from the late 60′s. Beyond theory and technical abilities data sensitivity will also have to be addressed before the masses should be adopting little brother to guide them through life.

- – - – -

The value of ideas is one that seems to fluctuate depending on personal circumstance. If you’re the creator of the idea, then the idea is everything. If you’re the producer of ideas (production) then it’s the implementation of the idea that matters most. So which is it? As someone that straddles both sides it’s not any simpler to define. Like most things in life the truth lies in the gray area between the extremes. Recently, my buddy Arpit delivered his take on this topic and I think he’s on to something…iteration. A back and forth between pure concept and implementation. Love the connection to dogfighting as a example of idea->action proving iteration is the actual key to success (courtesy of Jeff Atwood’s own post on the subject).