How To: Take Advantage of HTML5 Trends and Tools

HTML5 is already making its mark on today’s internet era by overcoming the limitations of its Flash and HMTL predecessors. The unification of HTML and XHTML syntax and the introduction of application programming interfaces (APIs) are good examples. HTML5 also simplified multimedia and graphical content management without having to rely on proprietary plugins and APIs. Simply put, the videos and photo apps that we enjoy using today are predominantly being supported by this platform.

Created by Opera Software, HTML has been a core technology of the internet. The 5th revision, or HTML5, has made multimedia more readable by humans and understandable to devices and computers.  The benefits of using the tool include faster image downloads, improved SEO, refined animation effects and easier web and mobile app development. We’ve been following improvements, controversies and news related to HTML5 for some time and  today we offer a few pieces of expert advice, target markets for developers, users and designers, and top tools currently supporting the technology.

Experts unanimously approve HTML5 development

HTML5 is already big. It was big in Apple’s camp years back, and is now gaining more attention from all dimensions of web development and mobility. Different approaches have been cited for effectively employing HTML5 for specific businesses, and here are some notable ideas from the experts.

One approach is a hybrid take for mobile apps and site development, leveraging HTML5 for a uniform, cross-device experience.  “If you create your site in HTML5, there are a variety of both open source and commercial tools that will wrap that site with all of the code necessary to run natively, and be submitted to application stores such as iTunes and the Android marketplace,” writes Eric Savitz of Forbes.  “There are also HTML5 authoring tools that allow you to create sites using drag-and-drop interfaces with little to no programming involved. As with all authoring tools, there are going to be some limitations over custom development, but these tools are progressing fast.”

“Further, with an HTML5-based app, as long as the wrapper stays the same, many product updates no longer require app store approval or customer downloads. These updates become as portable as an update to an HTML        5 site. This is especially useful for companies who need to be able to make frequent changes to their app without bugging customers with endless product updates. Netflix, for example, performs constant A/B testing, adding and refining recommendations on an ongoing basis.”

In lieu of the release of Marmalade 6.0, the company’s CTO Tim Closs agrees that hybrid is the future of apps development. “We believe hybrid apps combining web and native technologies are the future, but not as they’ve been known up to this point,” says Tim Closs, CTO at Marmalade.

“With Marmalade 6.0, we’re starting to redefine what hybrid apps can achieve with native API breadth and power. Marmalade has always been about open standards, so HTML5 and PhoneGap are natural choices for us. But with our unparalleled experience of cross-platform native apps, and our patented single-binary architecture, we’re creating for web developers a brand new opportunity – use existing HTML5 technologies and frameworks, but access all the power of cross-platform native code.”

Marmalade is famed for a powerful cross-platform SDK for native apps. The update unlocks creating opportunities to exploit the dual strengths of HTML5 and cross-platform native code.

An HTML/CSS expert and author, Eric A. Meyer sheds light on why HTML5, CSS and JavaScript are the “classic three” for developers and designers in an interview with O’Reilly Radar. Meyer also pushes past the HTML5 vs. Flash bombast to offer a rational and much-needed assessment of the two.

When asked what are the pivotal details that developers need to know about HTML5, he dropped a one liner: “Developers need to know HTML5. They need to know JavaScript and they need to know CSS. That’s the classic three.”

On the other hand, here are what he thinks designers should decipher with the tool: “Designers need to know mark-up. They need to know HTML5. They need to be able to write CSS and understand web layout. And they need to have at least a decent grasp of what JavaScript does. I don’t necessarily insist that everyone who ever touches the web be able to write their own web app by hand, but designers should understand how JavaScript works.”

He also commented on the heated Flash versus HTML5 debate saying, “HTML5 itself and Flash are vastly different. They have different things that they’re trying to do. But the HTML5 plus CSS plus JavaScript package is more. I think that’s an easier comparison to make to Flash because Flash is supposed to be this total environment. You can put things on the screen and you can script it and you can define interaction. And HTML5-CSS-JavaScript lets you do that as well.

“We got to the point a couple of years ago where the HTML-CSS-JavaScript stack can technically do just about anything that the Flash environment makes possible. It’s just a lot harder at the moment to do that in HTML5-CSS-JavaScript because Flash has about a decade’s head start on authoring environments.”

But arguably, the most notable of all opinions is that of an HTML5 champion and ultimate innovator, the late, great Steve Jobs.  Adobe’s decision to pull the plug on Flash for mobile was an exclamation point to Jobs’ claim that HTML is the future. It was in 2010 that he banned the use of Flash technology in iOS, a move that earned him a number of enemies. It was a big risk, but it paid off big time.

“Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.”

“The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 250,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.”

“New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”

HTML5 & mobile app development

The booming mobile industry is perhaps the biggest proponent of HTML5’s recent ascension. With app development becoming one of the biggest factions of mobility, the platform has steadily amassed loyal followers.

A leading SaaS-based enterprise, Workday Inc., revealed advanced user experience features across all solutions and their commitment to HTML5, starting with the mobile version. The mobile update gave the website a significant upgrade for a sharper look and sophisticated navigation in iPad, iPhone and other connected devices. Workday is involved in various enterprise sectors such as financial and contract management and human resources tools. The upgrade to HTML5 will now allow them to penetrate Blackberry, Symbian, Android and Windows Phone devices. This is how the company is trying to step it up a notch as mobile competition gets stiffer every minute.

Another leader, this time in the news and media business, Financial Times has ventured into HTML5 about 10 months ago. In this short time they created a phenomenon that allowed them to attract over 2 million users, with their iPad and iPhone apps becoming huge contributors towards this feat. The positive response over FT’s web app gives other news publishers the validation needed to invest in HTML5 support over native apps.

Gaming has also been a lucrative arena for HTML5 developers.  A few weeks ago, HTML5-ready mobile gaming creation platform Spaceport.io received millions in funding from BBC Worldwide and YouWeb to extend services globally, hire more staff and improve its current HTML5 and Flash-compatible native performance portfolio. One of the clauses in the deal is that BBC Worldwide will be using Spaceport.io’s technology to engineer games and apps like pure games, edutainment apps, and pure entertainment apps.

HTML5 Tools

The Flash versus HTML5 matchup has been a hot issue with experts siding with current web standards, while others see no competition between the two.   Many developers today are ready to ditch Flash in favor of HTML5.  Adobe recognizes the industry-wide shift and finds itself creating a project that would make way for a smooth Flash-to-HTML conversion by means of CreateJS.

Senior Product Manager for Flash Professional at Adobe Video, Tom Barclay briefly explains how this new undertaking will work. He said, “It allows Flash Professional users to be able to design their assets and create their animations in Flash Professional but to be able to export those to HTML5, enabling them to translate and transition their skills over to HTML5.”

Appcelerator is another mobile development platform that’s supportive of HTML5’s budding standards, even taking in a couple Adobe veterans for their expertise.  With Titanium in particular, Appcelerator’s focused on providing a platform that lets you build around native APIs across mobile operating systems, and creating a uniform experience often means incorporating HTML5 for managing one’s mobile app and web presence.

Exploring the magazine apps building, TapEdition introduced their HTML5 magazine apps building capabilities. The integration hopes to enable users to develop fully functional HTML5-based magazines for smartphones and tablets.

Another HTML5 tool emerges from Sencha’s lineup. The innovator has now enabled mobile and desktop application developers to collaborate around the creation of web apps that will unleash full HTML5 capabilities via Sencha Architect 2. Together with Sencha Touch 2 and Ext JS 4, this new tool boasts a visual canvass and editing facility that help maximizes developer productivity, drives best practices in application design patterns, facilitates collaboration within the group and ensures the generation of high-quality code.