html5
Latest
Mac App of the Week: Hype 2.0 is a solid WYSIWYG tool for HTML5 animation and interactive graphics
When I made the transition from print designer to web producer in January, I wanted to make my graphic designing skills with me. PennLive.com, my day job, utilizes HTML5 to make the site desktop- and mobile-friendly and steers clear of Flash. While I knew some coding, I didn't know enough to create some of the elaborate interactive projects that other newspapers have done, such as the New York Times' Snow Fall and reshaping New York projects. In addition to custom components, the staff utilized jQuery and HTML5. Nothing beats a good, solid foundation in writing code, but as someone making the transition from designing full-time in InDesign, I wanted to work with a WYSIWYG editor. Adobe came out with Edge in 2011, but it requires a Creative Cloud subscription. Sencha Animator is available as well, but the US$99 price tag might be a deterrent. Then there's Hype. Created by two former Apple engineers, it is a low-cost, yet powerful tool for creating keyframe-based animation in HTML 5. Version 1 made its debut in May 2011, and 2.0 was released on August 20. Some impressive work has been done with Hype, including this graphic from the Los Angeles Times, and I was eager to try it. Design If you've ever used Flash, Hype will look very familiar. Most of the program centers around the stage, with timeline and properties bars beneath it. On the stage, you can expand various panels for adding scenes to your content or various elements. The preview button allows you to toggle among your browser of choice to view your project. Additional panels include an inspector, where you do the majority of your tweaking, a list of project resources, colors and fonts. Hype lets you bring your own fonts into the system through custom CSS or browsing popular open-source Google fonts, which is a really nice touch. In addition to the stage, you'll spend most of your time with the Inspector panel. The Swiss Army knife of Hype controls document settings, scene settings, metrics, elements, text, actions, and identity. There's a number of pre-set canvas sizes you can use based off standard monitors, iPhone and iPad screens. You can change stage sizes on the fly, which is good for when a project's demands suddenly change on you and you don't want to start over from scratch. Hype's Jonathan Deutsch equipped me with a copy of Hype and pointed me to the site's extensive documentation and YouTube tutorials. A lot of the newest tutorials addresses the features of Hype 2.0 -- the biggest being the ability to preview your work on iOS using the free Hype Reflect. To go along with this, Hype lets you build the ability to add touch and swipe events so your project is desktop- and mobile-friendly at the same time. Other new features include the aforementioned web fonts, audio actions, curved motion paths and more. Use I had a bit of Flash training about six years ago, and a lot of it came back to me as I played around with Hype. If you understand the concept of key frames and animating elements between those frames, you won't have an issue with Hype. You can bring in all sorts of material to Hype: images, video, HTML widgets and more. A lot of Hype's power comes from using the record button. In the timeline, either click where you want your key frame to be, or type in the time on the timeline. Hit the record button and either drag the object where you want it to go next or use the inspector panel to control things such as changing color, shape or opacity. You can establish different key frames for elements in the properties bar: movement can have one set of key frames, while opacity and color can have their own key frames. Creating some of the graphic elements is where my frustrations came in. I really wish there was an easy way to create something as simple as a triangle in Hype without having to mask part of another shape or bring it in as an image. Food for thought for a future release. Some of the keyboard shortcuts were a bit perplexing as well. I'd like to see a switch to using the standard zoom keyboard shortcuts (⌘+ and ⌘-) rather than the ones built into the app (⌘> and ⌘<), which didn't even work when I tried using them because they conflict with bringing up the preference panel. (Update: Deutsch explained that the keyboard shortcut match those for Keynote, which makes sense. Part of it was user error on my end as well. To zoom, I needed to press the shift key while doing ⌘> and ⌘<.) One of my favorite Hype features is an ongoing tracking of browser and mobile compatibility. I learned that no matter what I did, the animation I was developing was not going to be Opera-friendly. Internet Explorer hated my attempt at using background gradients. My test project concerned homicides in Harrisburg in 2013, and each new discovery in Hype added to our excitement for the project. We figured out we could link to our site's video player in Hype, letting us integrate previously posted videos into the graphic. You can see a version of the test graphic (note only one button is active) here. After creating the graphic, I added a couple of swipe gestures and did a preview through Hype Reflect. If on the same network as the Hype desktop client, your iOS device will show up as an available preview option. In Hype Reflect, you have the option to test your animation in mobile Safari, access console messages and utilize a mirroring option that lets you make changes on the Mac and see them instantly on Hype. Using Hype Reflect, I was able to see that the video link didn't work on mobile, and that the text rendered a bit differently than from the desktop version. Ah, well, back to the drawing board! Another feature I really like is the ability to export to Dropbox, in addition to exporting to a folder. That made it very easy for me to share the test animation with a couple co-workers. You can also export your project as a widget for use in iBooks or Dashboard. Conclusion If you're wanting to transition from doing Flash-based animation to HTML 5-based, Hype is a fantastic tool to start with if the thought of hand-coding interactive graphics sends a chill down your spine. I'm looking forward to using this more. The 2.0 release addresses a lot of issues reviewers had with the initial release two years ago, and the support system is excellent. Tumult features work being done with Hype on its site and is experimenting with doing live tutorials through Google+. Hype retails for $59.99 through the Mac App Store or Tumult, but is on sale for $29.99 until September 10. Those who purchased Hype 1.6 after July 20 are eligible for a free upgrade, and volume licensing is available. A 15-day trial is on site for those who want to give it a try.
GlassFrogger makes Glass wearers hop in real life to brave simulated streets (update: code and video)
Google may keep a tight lid on Glass development, but that hasn't stopped coders at the Breaking Glass Hackathon from building some clever wearable apps. Take the event's winning entry, GlassFrogger, as an example: the HTML5-based game recreates Frogger on Google's eyepiece by making players hop in the real world to cross virtual roads. It's a multi-platform title, too, with support for any device sporting a modern web browser. GlassFrogger is free to use today, but try to avoid playing while you're out on the street -- there's enough roadkill inside the game, thank you. Update: We've since been in touch with co-author Adam Singer, who has posted both source code and the GlassFrogger pitch; you can see his team demonstrating the game after the break.
Nintendo's Wii U Web Framework now allows for eShop purchases like DLC
Nintendo's Web Framework for Wii U now includes eCommerce support, manager of developer relations Martin Buchholz revealed at GDC Europe. When using the updated framework, developers can monetize their games after launch with items such as DLC. The Nintendo Web Framework allows developers to craft and prototype apps for the console using HTML5, JavaScript and CSS. The framework was announced at GDC in March, along with Unity support for Wii U.
Wii U now allows eShop purchases from within indie games and ported apps
Nintendo first shared details of its Wii U Web Framework at GDC in March, which it hoped would encourage more apps and games to be ported over, and facilitate quicker Wii U game prototyping. Fast-forward to GDC Europe and Martin Buchholz, manager of developer relations at Nintendo, confirmed that the framework has now been updated to include eCommerce support -- such as DLC purchases. Something of a significant lure for those with existing games that have yet to be convinced to move them over to Wii U. It's not quite in-app purchases, but it will certainly ease the worries of those game makers who prefer to monetize their titles after the initial transaction.
First Impressions of RuneScape 3 from a returning player
Over a decade ago, two brothers working out of their parents' house in Nottingham set themselves the impossible task of building their own graphical multi-user dungeon, a genre that later evolved into the MMOs we know today. RuneScape launched to the public in 2001 as a low-res browser game with only a few hundred players and 2-D sprites for monsters, but several years later it boasted over a million paying monthly subscribers. The 2007 Sunday Times Rich List even estimated the Gower brothers' business empire to be worth over £113,000,000, due almost entirely to RuneScape. The secret behind RuneScape's success is that it's been continually updated throughout its lifetime, not just with regular infusions of new content but also with several major graphical and gameplay overhauls. The game was recently reincarnated as RuneScape 3, which is as far as it gets from the primitive game many of us grew up with. It now boasts a visually improved HTML 5 client with graphics acceleration, orchestral music, some voice-acted quests with cutscenes, and a fully customisable UI. This combines with last year's Evolution of Combat update and over a decade of new quests and zones to produce an MMO with more depth and character than many other AAA titles. In this hands-on opinion piece, I put RuneScape's three major versions side by side and look at how far RuneScape 3 has come since those early days of punching 2-D goblins and mining for fish.
Amazon Appstore now accepts web apps
The Amazon Appstore is no longer just for native Android apps -- starting now, the retailer will also take HTML5-based web apps. Developers can build content using any off-the-shelf tools; Amazon wraps whatever they create in a format that's friendly to those using the Kindle Fire or other Android devices. Publishers who want to integrate more closely with Amazon can also integrate the retailer's in-app purchasing through JavaScript code. Only a handful of web apps are available at launch, including TreSensa's Happy Tree Friends: Run & Bun, an IGN video game news app and Spil Games' Dream Pet Link, but web app developers who want to bolster Amazon's catalog can visit the source link.
Free for All: RuneScape 3's UI changes would be welcome in any MMO
Jagex just keeps surprising me with its flagship title, RuneScape. Almost every time I sit down to get some time in the world of Gielinor, I find something new. This time around, I want to talk about how the newest version of the game brings not only a fantastic world event and tweaks to all sorts of systems but offers options to the UI that are surprising and wonderfully innovative. The first thing I thought when I played around with the new UI options was, "Wow, why isn't this happening in more MMOs?" Another thought occurred to me as I slid, snapped and joined parts of my UI: This feels suspiciously like a tablet-friendly change. Jagex has mentioned the possibility of a tablet version of RuneScape, thanks to the new HTML5 client (which is still in beta), so could this new UI be the first of many steps to playing on our portable computers? I'll wait and see what happens with that, but in the meanwhile I wanted to show you the most impressive parts of the UI redesign.
RuneScape 3 goes live
This ain't your slightly-older-brother's RuneScape, folks; RuneScape 3 is hip, happening, and live right now. The latest iteration of Jagex's browser behemoth is now available to play, and it looks better than ever. RuneScape 3 isn't just about a graphical overhaul, although it would be sad to dismiss its visual improvements. The new version includes a customizable interface, six hours of new music, and lots of technical improvements. Jagex is kicking off RuneScape 3 with the Battle of Lumbridge and the Sixth Age, so get in and start kicking butt from minute one! This event will take place over the span of two months, during which players can ally with a faction and collect divine tears to contribute to their side's ranking. The studio recommends that players experience it with the Java client and not the still-in-testing HTML5 version. The team's also posted a comprehensive FAQ if you have any specific questions about the changes.
MMObility: RuneScape, HTML5, and plenty of bacon
RuneScape, as always, is moving forward with killer new content and additions to the game. I was so excited this week to get a chance to play through the Bringing Home the Bacon questline and scout out the open beta of the HTML5 version. I was initially eager to see just how much better the HTML5 version looked and played, but I didn't want to dive in until any issues had been worked out. Boy, does it impress. Sure, it might not seem like much to someone who is used to the graphics from games like Guild Wars 2, but this browser game that is over a decade old looks great not only for a browser game but for any type of game. It's still a bit of an acquired taste, but once you try it, you'll be smitten. I also had fun playing through the bacon-flavored quest line that is featured this month. I'll tell you about both... how's that?
RuneScape 3 launches July 22nd
If you're a RuneScape fan, go ahead and mark July 22nd on your calendar. That's the date that Jagex is unveiling RuneScape 3, which the company says is "the biggest upgrade in the game's acclaimed 12-year history." The browser-based game client will transition to HTML 5, enabling players to avoid Java or any additional plugins. The new client will also boast improved graphics, longer draw distances, an upgraded camera system, and superior audio, according to a Jagex press release. RuneScape 3 will also usher in a new era of user-generated content, with the future of Gielinor's inhabitants and scenery now resting in players' hands. The Battle for Lumbridge, a community-focused world event, kicks things off on July 22nd. [Source: Jagex press release]
Smart TV manufacturers subjected to 'coercive sales tactics' by Google, says ETNews
Smart TV providers who wish to use HTML5 for their streaming ecosystems have been running into a wall with YouTube, according to Korea's ETNews. It said Google has insisted TV makers place the app on their systems' main page and pass a Smart TV "browser conformity test" at its US headquarters, too. As a result, companies like Samsung have had to wait up to three months for YouTube certification. A key part of this allegation is that that TV makers who opted for Mountain View's Android-based Google TV instead of HTML5 wouldn't face such problems, but meanwhile, we've contacted Google for its take on the matter.
IE 11 on Windows 8.1 preview supports HTML5 Netflix streaming right now
Netflix recently detailed some of the technological developments needed to transition from Silverlight to HTML5 streaming video in the browser, and in a notable turn one of the first companies on board is Microsoft. It's not that surprising since Microsoft has made it clear it's pushing other technologies going forward, but it's still a stark example of how much things have changed in recent years. Netflix's Tech Blog announced today that anyone running Internet Explorer 11 in the Windows 8.1 preview can visit Netflix.com today and try out HTML5-powered video streaming right now. Already available on ARM Chromebooks (pictured above), Netflix says Microsoft has implemented the Premium video extensions it's been working on to provide support for GPU-accelerated 1080p video, DRM and encryption without proprietary plugins.
Google set to launch HTML5 development tool with ad integration in coming months
That little ol' company down in Mountain View is cooking up a new HTML5 design tool, according to a recent blog post by the Goog's advertising arm, DoubleClick. Simply dubbed Google Web Designer, it's ostensibly designed for creative professionals to create "engaging web content" and is integrated with DoubleClick Studio and AdMob right out of the gate. Its advertising roots aside however, it looks like anyone with the proper knowhow could use it to create a web page, similar to the much-neglected Google Sites. Of course, we won't know much more about the tool until it launches, which is said to be "in the coming months."
Mozilla inks deal with Foxconn to co-develop Firefox OS devices, shows off its first-ever tablet
In between the packed schedule at Computex earlier today, our brethren over at Engadget Chinese managed to sneak into the joint event held by Foxconn and Mozilla. As you may have already heard, the former company has signed on to become the 19th member of the latter's Firefox OS alliance, and it's already working on at least five devices. That said, it's unclear whether these include the first-ever Firefox OS tablet (pictured above) that was present at the event. And no, we weren't allowed to touch this mysterious device. The two groups will also cooperate on the software side, and Mozilla took the opportunity to indicate the healthy growth in its app ecosystem, with well-known apps like AccuWeather and SoundCloud jumping on board. But will that be enough? We'll see how the developing countries react to the first Firefox OS phones when they come out in the summer. Press release after the break.
Mozilla offering free phones in hopes of bolstering Firefox OS app development
Attention HTML5 virtuosos: Mozilla is thirsty for your talents. So much, in fact, that the outfit is baiting developers with a free smartphone in the hopes they'll return the favor with fresh Firefox OS apps. In order to qualify for a device, you'll need to submit a proposal to Mozilla outlining the app you wish to build or port to its new mobile platform. If your pitch is accepted, the company will hook you up with a free Geeksphone Keon to thank you for your labor. Sure, the device's 3.5-inch HVGA display, 1GHz Snapdragon S1 processor, 512MB of RAM and 3-megapixel rear-facing camera are entry-level at best, but remember you're getting this handset gratis. The program is set to close at the end of the month or when supplies run out, whichever comes first. So, if you're interested in adding "Firefox OS developer" to your resume, hit up the source link to apply.
Box buys Crocodoc, gains HTML5 document converter and viewer
It's time to re-imagine your documents, apparently. Cloud storage service Box just acquired document embedding startup Crocodoc, which specializes in taking Word, PowerPoint and PDF documents and rendering them as HTML5 content inside web browsers and mobile apps. Crocodoc's technology will allow Box to seamlessly integrate document conversion and viewing into its products. The companies also plan on rolling out more features over the next year, including secure viewing, mobile collaboration, form filling and real-time presentation -- sounds like a win-win for all.
Spotify's web player exploited by Chrome extension to download songs as MP3s
This is why we can't have nice things. Spotify's web player has been rolling out to more users since its closed beta launch late last year, but today an extension popped up in the Google Chrome store (it's already been pulled) allowing users to download songs as MP3 files. According to the notes left by its author, the company wasn't using any encryption on its HTML5 player, making it a pretty simple project to put together. We're waiting to hear back from Spotify about the breach, and while Google appears to have been quick on the ball to remove the extension -- in a similar manner to how it's treated YouTube download tools in the Chrome Web Store -- hopefully this won't give others pause on distributing premium content using HTML5.
Unreal Engine 3-powered Epic Citadel now playable in browsers
Epic Games has released an HTML5 version of its Unreal Engine tech demo Epic Citadel. Currently, the project is optimized for Firefox Nightly version 23 or above, so make sure your browser is up to spec before you check it out. Collaborating with an engineering team at Mozilla, Epic developed a web-capable port of Unreal Engine 3 in just four days. A combination of the JavaScript subset asm.js and Emscripten drove the port's creation, and the result should be playable in any standards-based browser that implements HTML5, WebGL and JavaScript. While Epic Citadel currently crashes in Chrome, Google's developers are looking into a fix. Internet Explorer does not support current versions of WebGL. Epic Citadel launched as a free download for iOS devices back in 2010, paving the way for Chair's release of the hit Unreal-powered action game Infinity Blade later that year.
Apple kills AppGratis' push notifications
What? You thought you were going to be able to make it through another day without an update on what's going on with AppGratis? Sorry to disappoint you -- Apple has now added insult to injury by killing push notifications for AppGratis. The company let subscribers know this morning in an emailed newsletter that Apple had killed notifications. TUAW sister site TechCrunch received a copy of an email sent to Italian AppGratis subscribers, which told them why they hadn't received a push notification from the app and notes that AppGratis plans to launch a daily special offers newsletter to inform subscribers of the app offers it is famous for. Simon Dawlat, the outspoken CEO of AppGratis, was back on the blog soapbox this morning noting that the company is planning on going back to its roots in circumventing the app ban by sending out the newsletter to its estimated 12 million users and also putting together an HTML5 web app. As TechCrunch's Natasha Lomas points out, "Going forward, AppGratis will have to rely on emailing its subscribers (and no one likes to be spammed via email too often) to inform them of offers." Asking those subscribers to migrate to the web app once it is working, with no way to send push notifications to them to generate the clicks that launch an app to top rankings in the App Store, might be nigh impossible.
Play+: A YouTube viewing and discovery app for Mac OS X
Developer Saied Ghaffari of It's About Time was perplexed by something recently; while there are good dedicated YouTube apps for iOS, there's nothing similar for OS X. Instead of a clean, fast app for discovering and viewing YouTube videos, Mac users must rely on web browsers and the YouTube site. The result isn't that great -- you can't type or read comments if you put the video in full-screen mode; scrubbing doesn't work very well; and the video pages have a lot of wasted white space. Seeing an opportunity for a better way to discover and view YouTube video on a Mac, It's About Time is releasing Play+ (US$1.99 introductory price, $4.99 regular) today. The app launches and loads in a heartbeat, opening on a screenful of trending most viewed videos. Also along the bottom are buttons for different genres of videos: music, comedy, trailers and tech news. As you'd expect with a video-discovery tool, Play+ also features a search tool, and the app launches with focus on the search field. There are also locations to view your favorite videos and a history of what you've viewed. %Gallery-186081% Clicking on any of the video thumbnails begins play in a window that displays comments on one side and related videos below. During play, it's possible to literally scrub most videos frame by frame, making it possible to analyze video closely. Where Play+ is so phenomenal is in full-screen mode on a 27-inch iMac, showing up to 50 thumbnails at a time. Most of the videos play in HTML5 rather than Flash, so there are far fewer ads and annotations are hidden by defaults. For fans of YouTube, Play+ is an absolute must. It's fast; it makes great use of your screen real estate; and video quality is phenomenal. Be sure to get the app during the introductory $1.99 pricing for a real bargain.
