WebProNews

Tag: HTML5

  • Atari Embraces HTML5 In Internet Explorer 10

    I know it may seem unreal, but Internet Explorer is actually a decent browser these days. The latest iteration – IE10 – is already available in preview form on Windows 8. Once it launches, it will be expose millions of Internet users to the power of HTML5. To show off that power, Microsoft has partnered with a legend in gaming.

    Microsoft announced today that they have entered into a partnership with Atari to bring the Atari Arcade to Internet Explorer 10. All the games will be built using HTML5 and feature Windows 8-specific features. The games can be played on any modern browser, but players on Internet Explorer will be granted an ad-free experience.

    “Atari and Microsoft have had a long and successful history on Xbox LIVE and in the digital space,” said Jim Wilson, CEO of Atari. “The reimagined Atari Arcade expands this partnership in a new direction, in keeping with our current digital strategy, making it easier than ever for gamers around the world to access our renowned franchises, through the power and flexibility of an HTML5 based platform.”

    The initial batch of games available in Atari Arcade include Centipede, Yars’ Revenge, Tempest, Millipede, Missile Command, Adventure, Asteroids, Asteroids Deluxe, Battlezone, Crystal Castles, Gravitar, Haunted House and Lunar Lander. The games have been updated with new graphics and gameplay including real-time multiplayer.

    “We were excited to work with a gaming legend, Atari, to bring their classic arcade games to life on the web with Internet Explorer,” adds Ryan Gavin, general manager, Internet Explorer. “Atari Arcade demonstrates what’s possible when you couple HTML5 along with a fast and fluid browser that is perfect for touch, which is precisely what you get with Internet Explorer 10. Now together with Internet Explorer and HTML5, we get to see some of our favorite games jump into the next generation of gaming on the web – which is pretty fantastic.”

    The Atari Arcade is not exclusive to the old classics of yesteryear. Atari is offering developers access to their Create.js tools so developers can create HTML5 cross browser titles. One game from a third party developer is already available on the service – Heroes of Neverwinter.

    The popularity of arcade games on mobile and Web make this partnership seem like a no brainer. I’m not sure if kids would play Atari games, but I’m sure adults will jump on the chance to relive their childhood. The only thing standing in its way is its reliance on HTML5.

    You can start playing games on Atari Arcade right now. You may have your favorite, but let me recommend Tempest. It’s still one of the best games ever made and nobody has ever really topped its unique barrel shmup design.

  • Firefox Update Brings Big Improvements To HTML5 Games

    Mozilla, like Google, has been investing heavily in HTML5 development. One of the best ways to show off the latest improvements in HTML5 and WebGL development is through the creation of games. With the latest release of Firefox, the browser is finally ready to tackle the holy grail of game development – the first person-shooter.

    Mozilla internally developed a game called BananaBread that aims to show off the latest technologies used in Firefox. It includes the latest updates to JavaScript and WebGL to produce a first-person shooter that’s fully playable in browser with all the bells and whistles that you have come to expect from stand-alone software.

    BananaBread was made possible by Mozilla’s Emscripten tool. It allows developers to port code written in C++ over to HTML5 with little to no rewrites required. It’s success with how smoothly BananaBread runs in Firefox 15 shows the versatility of Emscripten.

    Here are all the technologies that Firefox 15 is now using to bring quality games to browsers:

  • Game focused performance improvements to JavaScript, many inspired by games and demos that we saw on the Web or that developers sent to us for testing
  • Wide range of WebGL performance improvements
  • High precision timing
  • Compressed texture support on desktop
  • Smoother JavaScript execution on large code bases
  • Hardware acceleration of 2D canvas on desktop
  • FullScreen API
  • PointerLock API
  • OrientationLock

    • The launch of BananaBread is a big victory for the Firefox team. They have shown that Firefox can run the best HTML5 applications on the Web with no trouble at all. They’re now going to be shifting their focus to Android and mobile browsers for the next half of the year. They hope to have any HTML5 game be playable across any browser that supports all the necessary APIs.

    Browser game development is definitely becoming more exciting. Browser games are maturing rapidly and should soon reach the point where they can appeal to even the most jaded core gamer.

  • You Can Kind Of Play Quake 3 In Chrome Right Now

    HTML5 continues to expand as it aims to take over the entire Internet in the next few years. One major stumbling block, however, has been the development of core games in HTML5. It’s easy to create games like platformers and puzzle games because they rely on simple keyboard or mouse controls. Other genres like first-person shooters were much more difficult, but that’s quickly becoming a moot point.

    Google announced today that the Chrome beta has been updated to include the Lock JavaScript API. The API is better known as mouse lock and it prevents the cursor from leaving the game area when its implemented. It’s perfect for first-person shooters since they require that the cursor stay locked in the middle of the screen with mouse movements controlling the direction in which the player character looks.

    Games aren’t the only thing that will benefit from the implementation of mouse lock. Developers will be able to create 3D modeling apps with HTML5. Previously, users had to use proprietary software because Web browsers didn’t have the proper mouse controls for manipulating objects in a 3D space.

    To show off the new API, Google employee Brandon Jones has created a WebGL application that lets you explore a map from Quake 3. There’s no shooting or Strogg to be found, but it’s still an impressive showing for a still in development API. You will want to upgrade to the Chrome beta before you try the demo. It’s pretty horrid without it as you’ll be dragging your mouse inside the game window just to look around. It makes you appreciate how far HTML5 has come.

    For more details on the new Pointer Lock JavaScript API, check out Google’s documentation. I think we can all expect to see some great first-person shooters built with HTML5 in the near future.

  • Check Out Google’s New Game Show

    Check Out Google’s New Game Show

    Google has a new game show, and no, it’s not something like “Figure It Out.” It’s a show about games – video games to be exact. It’s nothing new for Google as they run a weekly show on their Android developers channel that discusses the latest games hitting the Android platform. The new show from Google, however, is more about games built for the Web in HTML5 and DART.

    Two episodes of the show are now out for your enjoyment. Gamers and game developers will both want to check it out. It’s interesting for gamers as the Google employees talk about the future of games and where things are doing in the digital and browser-based space. It’s definitely going to cause some arguments as these guys argue passionately for games moving away from traditional distribution to the Web.

    The second episode is a continuation of the first episode as the first ended abruptly. They continue talking about trends in gaming. They also discuss how developers can better optimize their games for the Web and online play.

    The Google Games Chat is brave new territory for Google as they push to bring gaming to the Web. The Internet is changing how we make and play games. It’s pretty exciting to see a major tech player like Google jumping into the foray. It proves that gaming has reached a point beyond mainstream acceptance into something that should be invested in by everybody.

  • Internet Explorer 10 Shows Off Its HTML5 Might With Pulse

    Microsoft is really pushing Internet Explorer 10 as we near the launch of Windows 8. The newest version of the infamous browser promises to be faster, more secure and just all around more awesome than any of its predecessors. Whether that is the case or not remains to be seen, but the recent announcements definitely make it sound more enticing.

    Microsoft announced today that popular news app, Pulse, is now available on the Web. If you’re unfamiliar with Pulse, it’s essentially a news aggregator or RSS feed that pulls news from the Web into a format that’s more visually appealing.

    Bringing Pulse to the Web is a great move for Microsoft since it allows them to flex IE10’s HTML5 muscle. It’s part of a movement, according to Microsoft, that sees popular apps moving to the Web without sacrificing what made the app great in the first place. They claim that Pulse is the same app as before, just on a larger scale.

    The Pulse site is also a chance for Microsoft to show off the improvements they’ve made to the HTML5 touch API. Since Windows 8 is heavily based on touch input, it only makes sense that IE10 would be the same. They achieved this through the creation of a new JavaScript Engine that allows the browser to act like a native part of the touch experience.

    Pulse CEO Akshay Kothari has only praise for IE10 and the experience it gives to users. He says that they were initially concerned over a drop in quality, but those concerns quickly vanished. He has nothing but praise now for IE10 and says that it allows some aspects of Pulse to be “more intuitive and beautiful” than other apps they have created.

    If you want to check out the new touch-friendly Pulse site, just hit up www.Pulse.me. It’s available on all major browsers, but they obviously want you to try it out on Internet Explorer 10.

  • Google Proves That HTML5 Can Be Just As Artsy As Flash

    I grew up watching a lot of flash animation on sites like Newgrounds. That experience is what turned me into such an animation fanatic and I love that we have the tools for amateur animators to share their creations with the world. Flash was the tool of choice for most short animated films, but HTML5 might be the new leader one day.

    To kickstart the HTML5 art and animation revolution, Google has partnered with the Tate Modern in London to create This Exquisite Forest. It’s a collaborative art project where users are encouraged to work together “to create animations and stories using a web-based drawing tool.”

    The project already features animation from seven well-known artists of the day including Bill Woodrow and Mark Titchner. They have created what Google is calling “short ‘seed’ animations” that anybody else can expand upon to continue the story started by them. It’s a concept that’s been done before, but never in this format. The really cool part is that as the stories continue, they branch out into trees with multiple paths that leaves each story with a different ending each time you view it.

    If you create anything for This Exquisite Forest, it has a chance of showing up at the Tate Modern on July 23. The gallery will be using large-scale projectors to show off the creations from the seven artists as well as those contributed by the public. If you visit the gallery in person, you can contribute your own animation on the spot at a drawing station.

    The technology behind this new art project is pretty impressive. It’s powered by Chrome’s HTML5 and JavaScript features that helps to emulate the kind of experience you would see in Flash. Potential artists can also use the Web Audio API to create music that will accompany their submission.

    If you want to contribute to the project, head on over to the This Exquisite Forest Web site. There are some stories that don’t have very many branches yet and could use some love.

  • Sit A Spell And Let Me Tell You The Tale Of HTML5 [Infographic]

    Sit A Spell And Let Me Tell You The Tale Of HTML5 [Infographic]

    Since its introduction in 2008, HTML5 has been heralded as the future of the Web. No longer would we be held back by individual plugins like Flash. The Web would be a free and open place with the many APIs provided by HTML5 leading the way. Where did the Web revolution start and where is it going? Let this lovely infographic from Wix lead the way.

    HTML5’s humble origins began in 2004 with the creation of “WHAT.” The organization gathered members from leading tech companies like Apple, Mozilla and Opera to develop what would become HTML5. Two years later in October 2006, the World Wide Web Consortium offered their expertise to further develop HTML5.

    The magic year was 2008 when Ian Hickson published the first draft of HTML5. It was pretty barebones at launch, but the best was yet to come. The best was only going to come with major adoption from the big players in the browser market with Mozilla leading the way by being the first to implement HTML5 capability into Firefox 3.

    What really kicked off the development of HTML5, however, was one Steve Jobs. He famously rejected Adobe’s Flash in an open letter back in 2010 by saying that it would not be allowed on any of Apple’s iOS devices. Adobe themselves would follow suit two years later by halting development of Flash for Android devices.

    Google made great strides at the end of 2010 by opening the Chrome Web Store in HTML5. Other companies like Pandora also began to experiment by switching over their applications to HTML5 to rave reviews. LinkedIn is the latest to join the HTML5 party by releasing a 95 percent HTML5 native iPad app.

    So where do we go from here? Research has indicated that there will be over 1 billion HTML5-enabled smartphones in people’s hands by the beginning of 2013. Couple that with the fact that people are increasingly relying on smartphones for Web browsing and you have the HTML5 revolution kicking off in full swing.

    We don’t know what the future holds, but HTML5 is sure to be a part of it. The relentless efforts of companies like Mozilla and Google are making sure that the Web is free and open for all to use.

    by Wix. Browse more data visualizations.

  • Johnny (HTML) 5: Google Introduces New Robot

    Johnny (HTML) 5: Google Introduces New Robot

    HTML5 was a big theme during today’s Google I/O keynote. Chrome was a big theme as well. It seems fitting then, that Google would unleash a lego robot, which talks to a Chrome app using Javascript and HTML code. It also seems fitting that it would be named Johnny(HTML)5.

    If you don’t get the reference, watch Short Circuit.

    This post appeared today on the Google Chrome Developers Google+ Page:

    Google Chrome Developers

    Google Chrome Developers49 minutes ago

    Introducing Johny (HTML) 5 a Lego NXT-Mindstorms (c) robot communicating to a Chrome packaged app (Serial over bluetooth), with only Javascript and HTML code. Come and see it in the Chrome Sandbox and learn how to build apps like this in the 1:30 session "The Next Evolution of Chrome Apps" (http://goo.gl/kVSNi)
    24    0 Powered by socialditto

    Google I/O seems to have a larger theme this year of robots combined with funky music, as evidenced by this dancing Droid, and this speaker dock robot, which appeared at the Day 1 after party.

  • Facebook’s Ringmark Goes Completely Open Source

    HTML5 and Open Source software are the future. Even if the old guard of software development don’t want to admit, it’s an inevitability. Facebook has helped move us along towards the future of Web and the power of the mobile Web with its Ringmark tool. Now the social network is giving Ringmark to the people.

    Facebook announced yesterday that they would be completely open sourcing the Ringmark tool. Previously, Ringmark had some of its core functionality, including its tests, go open source, but the entire software suite is now open source. Interesting developers can get the code on github right now. The rest of us can laugh at how our browsers still can’t pass the ring one test on rng.io.

    Speaking of not being able to pass the ring one test, Facebook has changed up the actual test to add in a benchmark for drawing performance. A browser that wants to pass the ring one test must be able to animate 50 sprites at 30 frames per second. A browser that wants to pass the ring two test must be able to animate 100 sprites at 30 FPS.

    One of the major problem areas right now lies in mobile browsers. They just aren’t fast enough to handle a lot of HTML5 games. Facebook, in their ongoing work with mobile, realizes this and will be implementing more tests in Ringmark soon to better test mobile browsers. Going open source also lets developers use Ringmark themselves and test for their own needs on mobile platforms.

    IDC also published an infographic last month that looks at how HTML5 is evolving the mobile platform. Facebook’s Coremob community along with Ringmark has contributed to the number of HTML5 mobile developers that are pushing the Web as the next big platform.

    Browse more Technology infographics.

  • What the Next Wave of Online Video Holds

    Do you remember when online video first began to take off? In its infancy, it was very simplistic and mostly consisted of marketing promotions. If you fast-forward to today, online video is a completely different story. Now, it is of very high value that is comparable to the quality of TV and movie content.

    Jeff Whatcott, Chief Marketing Officer at Brightcove While it’s exciting to see how technology has advanced and improved the online video experience, the changes have also brought many complexities. According to Jeff Whatcott, the Chief Marketing Officer at Brightcove, online video needs to be delivered in HD, it needs to be monetized through either paid models or better forms of advertising, and it needs to be protected.

    As a result, the game has changed drastically for media companies and all other publishers of content. They have to consider all the elements that Whatcott mentioned in addition to the challenge of delivering their content across multiple devices and in multiple formats.

    “Having all those different screens that you need to deliver content to creates incredible technical complexity for these organizations,” said Whatcott.

    These companies then must tackle the decision of whether to build an internal infrastructure to handle these processes or to outsource them to services such as Brightcove. Although an internal system allows for more control, the downside is the time and resources involved in developing it. Outsourcing, on the other hand, is often preferred since organizations can jump right into their efforts.

    “Rather than starting from just a blank sheet of paper and a long list of questions, they start with a code that’s actually already been written [and] that already integrates in with the right systems and the right ways,” said Whatcott.

    Going forward into the next wave of online video, Whatcott believes even more changes will take place. As he explained to us, fragmentation will increase as many more devices are introduced. Apple is reportedly scheduled to announce a new Apple TV platform later this year. If the trend continues as it did with the iPhone and iPad, such an announcement could produce a completely new way of thinking, which could drastically change the user experience and future technologies.

    Whatcott also believes we will begin to see more content coming online that is licensable and accessible even for those consumers who do not have a cable subscription.

    “There’s a whole new generation coming up with having never had a cable bill… or not preferring to consume their content through cable, and we see more and more companies wanting to service the desire of that class of people,” he explained.

    Although not directly related to video, Whatcott went on to say that apps would continue to play a big role going forward. Although there are questions about their sustainability, he said apps are here to stay.

    Despite the challenges that these developing areas will bring, many opportunities exist as well. Whatcott points out that organizations will not only be able to build upon their existing technologies, but they will also be able to develop new concepts.

    In other news regarding Brightcove, the company has had a very successful year after going public in February. In its first quarter earnings, the company reported $19.9 million in revenue. Whatcott told us that the company is “very excited” about its progress and that it would continue to focus on building its business.

    Whatcott also offered this advice to Facebook in light its recent IPO: “Everything around the IPO and funding, although there’s a lot of excitement around this, it really doesn’t change your relationship with customers – you just need to execute well.”

  • LinkedIn Shares HTML5 Infinite Scrolling Tips

    LinkedIn debuted their iPad app, while getting attacked by Syrian hackers, last week to praise for its clean presentation while taking advantage of the iPad’s strengths. One of the major features of the iPad app is its infinite scrolling through the use of HTML5. The engineering team went through a lot of variations to reach the end product and are now sharing their journey with other developers.

    The main hook of the LinkedIn iPad app is its “stream” for infinite content scrolling. This will allow users to have an “engaging content consumption experience.” The only problem with this approach is that mobile devices are not exactly the best when it comes to memory which an infinite scrolling list requires a lot of.

    To circumvent the lack of large pools of memory, the team went the extra mile by building their own solution to this problem. They could have used Apple’s solution that would have allowed for infinite scrolling, but the LinkedIn team apparently wanted the challenge of building their own in HTML5 which currently lacked such a technology. In the end, they obviously succeeded, but they also helped HTML5 developers everywhere by proving it could be done.

    The first technique in streaming large images via HTML5 was to replace the src attribute of the img tag with a small image when it was moved off screen. This allowed the large images to be displayed on screen while saving memory when said images were moved off screen.

    It turns out that making the images small didn’t save enough memory in the long run. To combat this, they bagan to hide pages so that they wouldn’t take up memory as well. They did this by setting the CSS visibility property of a page to hidden. This allowed more memory to be freed up as well as the app running smoother because the browser didn’t have to keep the invisible pages up.

    Apparently those first two techniques helped sove 80 percent of crashes. To help solve crashes for the other 20 percent, the team started to remove pages altogether. They only removed pages that were not required and replaced them with an empty page of equal height and width called a “stub.”

    All of this led to them creating a stream that would have the current page loaded with all images visible with the previous and next pages being fully loaded as well. After that, the second previous and next would be loaded up but didn’t have any images. The next after that would be an invisible page. Once it had gone beyond that, the pages would removed. It’s an ingenious method of keeping infinite scrolling in place without having to sacrifice anything.

    LinkedIn HTML5 Infinite Scrolling

    Now that they had this method in place, they only had to start working on improving the performance of the app. They helped this along by adding in some HTML/CSS optimizations. The first is to avoid client side image scaling. To avoid that, simply specify the width and height attributes of an image in HTML tags. The second is to simply not use CSS box shadow as it has a negative effect on performance.

    All of this work helped keep the app running, but they were still running into crashes now and again. To keep it perfectly stable, they would have to keep the DOM nodes to a minimum. Remember those stub nodes that replaced far off pages in the stream? They were able to combine those stubs into a single dummy node to prevent the app from crashing.

    For those who learn better with visual examples, here’s a video of the LinkedIn team showing off how the DOM changes when a user moves through the stream. Check it out to see some awesome HTML5 magic.

  • Facebook Updates Ringmark, Changes Coming To Coremob

    When someone says open source, the first company to pop in your mind is probably not Facebook. That would be a disservice to the company though as they are pushing open source just like the rest of them. The company started the Coremob W3C Community Group to push Web standards and they open sourced RIngmark, the company’s browser test suite for building apps on the mobile Web.

    The company open sourced Ringmark back at the beginning of April and they are already making loads of progress. They have changed the main page of Ringmark to now make it easier for developers to understand. When looking at the test results, it should be clear what use cases correlate with the tests.

    The bigger change coming to Ringmark is that it’s now integrated into Browserscope. This allows developers to see where each browser stands in regards to the three rings of Ringmark. The benefit here is that a new browser is added to the Web site’s stats every time a new browser hits up Ringmark.

    As for Facebook’s Coremob community, Robin Berjon, the co-chair of Coremob, will start to review the tests that Facebook has submitted. Once all the tests have been processed and added to Coremob’s Github, Ringmark will run off of these tests for its standards.

    Coremob will also continue to contribute to the development of Ringmark. Community suggestions like version numbers and moving certain standards to certain test rings have all come from community engagement. Continuing this kind of engagement will shape the future of the mobile Web, at least as far as Facebook is concerned.

    If you don’t really understand any of this, but still want to have an impact on the future of the mobile Web or just the Web in general, hit up rng.io in your browser. This will run the Ringmark test and send the results of your browser to Coremob. I ran the test on all three of my mobile browsers – Android, Firefox mobile and Opera Mini – and found that the default Android browser was the most advanced of the bunch in terms of adopting Web standards.

  • Google Details Web Workers Debug Tools

    Google Details Web Workers Debug Tools

    If you develop for any Web browser, especially if you code in HTML5, you might be familiar with Web Workers. If so, you also might realize that it can be pretty challenging to debug. Google has now introduced new support for Web Workers debugging in its Chrome Developer Tools.

    As part of the new tools, you can use the scripts, timeline, profiles and consoles panels to develop for Web Workers. As far as debugging goes, there is now full support for dedicated and shared workers. There is a difference between the two that the Chrome team discusses.

    First up is the dedicated worker. All of them will be listed in the scripts panel, under the workers section. From there, you can open a new Developer Tools window that’s attached to the worker URL. If you find that something is amiss, you can pause the workers on start. All starting dedicated workers will now suspend operation before they can start chugging away. From here, you can jump in and see what’s wrong if there’s a cause for concern.

    The other workers, known as shared workers, are independent in that they can be used more than once on several pages. You can find these workers by using the chrome://inspect page. Next to each worker listed is an inspect and terminate URL. Clicking on inspect will open the Developer Tools to start the debugging process. If you just want it gone, click terminate to kill the worker.

    Another option available is to debug a shared worker initialization. You can do this by terminating the current worker while leaving the debug tools open. From there, reload one of the worker clients. The Developer Tools window will automatically re-attach to the new client.

    Google has some documentation up on the matter that should help you get started on debugging some Web Workers. If you need Developer Tools, you can obtain them through the dev channel release of Chrome.

  • Mozilla Shows Off Click Highlighting

    In their tireless march to make every piece of premium software obsolete with free open source, HTML5 applications, Mozilla, alongside Google, has been been at the forefront of this endeavor. While some of the past examples have been really cool like WebRTC, the latest demo has a more practical purpose.

    On the Mozilla Hacks blog, HTML5 evangelist Chris Hellmann shows off click highlighting and how it can be easily created using Javascript. If you’re new to click highlighting, it’s essentially the generation of a brightly colored dot that appears when you click. The longer you hold in the mouse button, the larger the dot becomes.

    If you hold in the mouse button and move it around, the dot moves around with the mouse. This can be done with a little JavaScript magic where you generate a DIV element and move it with the mouse. Hellmann details the code for easy implementation:

    Mozilla Shows Off Click Highlighting

    The growing of the dot doesn’t use JavaScript, but rather CSS transitions. This is done by changing the scale of the dot from 0,0 to 1,1. Here’s the code for dot growth:

    Mozilla Shows Off Click Highlighting

    Hellmann says that it would be nice if they could keep everything in CSS, but that it’s impossible in some browsers. For those browsers, there is a method for changing CSS to JavaScript. It’s achieved through Clickhighlight.js with the source code currently available through Github.

    Here’s a video demo of the application if you need more of a visual element for learning. Hellmann says that he envisions adding touch support and turning this into a bookmark tool. What other uses can you see for click highlighting? Let us know in the comments.

  • Adobe CS6 Detailed, Embraces HTML5

    Adobe CS6 Detailed, Embraces HTML5

    Fans of Adobe have no doubt been waiting for the release of CS6 since it was first announced. The creative types have already got a small taste of what CS6 offers with the successful open beta for Photoshop CS6. The other software tools are now getting detailed in full.

    Adobe CS6 is going to be comprise of 14 CS6 applications and four Creative Suites. These includes Adobe CS6 Design and Web Premium, Design Standard, Production Premium and the Master Collection. The company is also launching the Adobe Creative Cloud with the release of CS6 which allows users to download and use all of the tools that come with CS6 for a monthly fee.

    “Creatives get a ton of innovation across CS6, with milestone releases of all our flagship products,” said David Wadhwani, senior vice president, Digital Media Business, Adobe. “With CS6 and Creative Cloud, we’re also introducing new products, new mobile workflows and advanced publishing capabilities that show we are laser-focused on ensuring design, Web and video pros have everything they need for the delivery of high-impact content and apps.”

    The flagship product of CS6 is obviously Photoshop. The key changes that are coming with CS6 is the Adobe Mercury Graphics engine that allows users to see instant results from common tools they use including Liquify, Puppet Warp, Transform and Lighting Effects. Photoshop also has new and improved content-aware features.

    Illustrator is getting a revamped interface and a new image tracing engine. It is powered by the Mercury Performance System for increased speed on 64-bit systems for Windows and Mac.

    InDesign promises to streamline the creation of multiple layouts from a single set of content. It’s powered by the new Adaptive Design Tools which include Alternate Layout, Liquid Layout, Content Collector Tools and Linked Content.

    Adobe has also revealed a new application called Adobe Muse. It promises to allow creators to make HTML5-powered Web sites without having to write any code.

    Speaking of HTML5, Adobe is fully embracing the Web technology to its fullest. Some of this is seen in creators being able to integrate HTML5 animations made with Adobe Edge into Dreamweaver projects. Dreamweaver is also being integrated with PhoneGap which allows developers to create native mobile applications across multiple platforms.

    In a surprising move that shows Adobe isn’t all about pushing their own platform, they have included an easy tool in their Flash Professional Toolkit that allows developers to convert Flash applications to HTML5 via CreateJS.

    Adobe Premiere CS6 is another tool that many creators are no doubt excited about. The excitement is warranted since Adobe is adding dozens of new features including the new Adobe Mercury Playback Engine which now supports OpenCL on MacBook Pros.

    The company thinks that creators are really going to like what they’ve done with After Effects calling it the most significant release in a decade. This is partially due to the new Global Performance Cache which saves previews instantly which cuts down the time you have to spend going between projects.

    Production Premium is also getting some new features from Adobe Prelude, which “streamlines logging and ingest workflows in post-production,” and SpeedGrade, which “contains powerful finishing tools for film finishing and color grading.”

    Adobe Audition is adding new features to help with audio post-production. These features include real-time clip stretching, which allows users to stretch clips to fit an edit, and Automatic Speech Alignment, a tool that enables automated dialogue analysis.

    Adobe is also announcing a third-party API called Adobe Mercury Transmit that allows “broadcast video monitoring to connect directly into the Mercury Playback Engine via third-party cards from AJA, Blackmagic Design and Matrox.

    Of course, the most important thing when it comes to new Adobe products is the price. These tools are usually pretty expensive and that is still the case here. Adobe CS6 Design and Web Premium will cost $1,899 with Adobe CS6 Design Standard costing $1,299. As for the other releases, Adobe CS6 Production Premium will cost $1,899 and Adobe CS6 Master Collection will go for $2,599. As always, previous customers can upgrade for a smaller fee.

    As mentioned above, Adobe is also introducing Adobe Creative Cloud with this release which allows users to have access to all of the above tools at a monthly rate. If you sign up for an annual membership, the use of CS6 will only run you $49.99 a month. If you just go by a month-to-month membership, the cost will be $74.99 a month.

    The retail and Creative Cloud release of CS6 is expected to happen with the next 30 days. If you so wish, you can preorder the software now. If you want to see all the new features for yourself, Adobe will be hosting a CS6 launch event livestream at 10 a.m. PDT (1 p.m. EST) on their Web site.

  • HTML5 Game Development Tips From Gamzee

    If Mozilla and Google are to be believed, HTML5 is the future of game development on the Web. While I still think that Flash is here to stay for at least a few more years, the arguments for HTML5 are getting harder to deflect. Gamzee, a new Facebook games developer, has made one of the best cases for HTML5 development yet.

    Gamzee is a small game development company focused on social games for Facebook and the Web. They saw a problem they didn’t like. Facebook games like CityVille weren’t truly cross platform. You couldn’t check on your city from Facebook on your phone. HTML5 can make that happen and that’s what Gamzee did.

    Their game is called Skyscraper City and it’s a “city building game that combines the gameplay of social builders with the fun of Lego-style blocks. You can stack almost any city unit on top of any other to build towers, elaborate structures, or whatever you want.”

    Sean Soria of Gamzee comes out of the experience of building a game via HTML5 with only one clear observation – HTML5 game development is hard. The good news is that they learned a lot about the process and want to share the information with the rest of the game development community.

    The first thing to consider, like with any game, is the platform. HTML5 allows you to make games cross platform with any device that can render HTML5 elements. This includes PCs, smartphones and tablets that are running the necessary browsers. Gamzee took that to mean that their game would played mostly on PC with the mobile version serving as back up. Makes perfect sense, but gamers never make sense. They found that the majority of players were using their mobile devices as the primary platform. First lesson is to spend a great deal more time on the mobile version of your game, maybe even make it the primary platform.

    The second lesson is in regards to the application you use to render your game. Much of the noise surrounding visual rendering in HTML5 has been for Canvas and for good reason, it’s powerful enough to render complex animations and even in browser video chat. Unfortunately, it turned out that Canvas doesn’t run very well on older iPhones. The key here is to make new rendering engines until you find one that fits.

    As Mozilla has pointed out, audio still sucks when it comes to HTML5. Gamzee found it to be no different. They compromised by including sound and music for the desktop version while only having music in the mobile version.

    The rest of the advice is all about designing for the mobile experience. If you truly want to be cross platform, you’re going to have to make sacrifices for the mobile versions. Smartphones still aren’t as powerful as a computer so there are going to be cuts. The issue is that you want to keep the experience largely the same across both platforms. They did this by limiting the size of the play area in both versions to make sure the mobile version would work. They also found that CSS makes up about 50 percent of all cross platform game development.

    In short, this is what Gamzee learned from the experience. I suggest any aspiring developers take this to heart if they’re interested in HTML5 development.

    We validated that you can make a cool, rich isometric game in HTML5 and have it be cross-platform.

    We learned that if people can play a game on any device, a lot of them are going to do it primarily on mobile or tablet.

    We learned that HTML5 cross-platform games require a lot of experimentation.

    We learned that as great as HTML5 is, some things still aren’t quite there yet;

    That designing a cross-platform experience means you need to think about the user experience on all devices from the ground up (in your game design);

    That you shouldn’t have a game on mobile that does a lot of stacking or overdrawing;

    And that you’d better love CSS and be good at it.

    To see the fruits of their labor, you can play Skyscraper City on Facebook or mobile right now. It’s an impressive HTML5 feat that developers could learn a lot from. HTML5 does have its drawbacks and Gamzee presented them well, but that shouldn’t dissuade developers from trying out new technologies.

  • Mozilla Talks Up HTML5 Inside Old Nuclear Reactor

    I always thought staying up all night hacking away at code during hackathons was crazy, but our friends in Sweden just took it up a notch. Mozilla recently attended the Moysnc Hackathon in Stockholm. The catch was that it took place inside of an old, disused nuclear reactor from the 50s.

    Why they chose a creepy place like that for a hackathon is beyond me, but Mozilla was on a mission. While the Mosync hackathon was focused on Wormhole and Reload, applications that let you build apps based on HTML5 or C++, Mozilla showed up to talk about HTML5 and the future of the Web.

    The talk is called, “HTML5 and the Near-Future of the Web.” It’s presented in slide format with audio commentary. Like always, Mozilla has a fascinating take on the the future of the Web via HTML5. If you aren’t in a position to watch 27 minutes of video, you can also view the slides here. It’s important to note that the slides are presented in HTML5 as well with links to all the demos in the video.

    One of the biggest talking points was Emscripten, a conversion software that converts C++ to Javascript. We covered this previously as it was used to port a simple flash game to open Web standards. Mozilla has much higher aspirations for Emscripten in the future.

    The other things you will see in the talk are CSS demos showing off 3D transformation that creates 3D environments akin to WebGL. They also discuss issues with HTML5 audio which were made apparent with the Emscripten conversion process.

    For something a bit more interesting for the person not interested in the code, they also go over HTML5 and how it will affect games. They bring up BrowswerQuest, the HTML5 powered MMO, as an example of what HTML5 wil do for gaming. They also bring show off demos of new HTML5 APIs for fullscreen, mouselock and gamepads. Here’s a video showing off the Gamepad API as it’s powering a “kitten cube” in browser:

    As for the rest of the talk, it goes into what they’re working on for mobile. This goes into talking about WebRTC and Boot to Gecko as main talking points. They also cover the mobile APIs that are currently available for testing.

    Mozilla is always one of the most fascinating companies when it comes to developments in HTML5. They always offer insightful commentary alongside witty banter that makes their talks so much more approachable to those of us who don’t have extensive experience in the field. Check out the video for yourself to see what Mozilla thinks is the future of the Web:

  • Google Chrome Updates Stable And Beta Channels

    Google is constantly busy hammering away at new updates to Chrome. The hope is to obviously make it the safest and fastest browser on the Web. While Chrome has multiple channels it updates through, the stable and beta channels receive the permanent updates that define the platform. Both channels received a small update today that provides a number of fixes.

    Detailing the updates on the Google Chrome Releases page, the team has notified users that an update has been rolled out to the stable and betat channels in Chrome for Windows, Mac, Linux and Chrome Frame. The updates made today fix a variety of small bugs related to HTML5 Canvas, CSS, etc. The fixes are:

    Black screen on Hybrid Graphics system with GPU accelerated compositing enabled
    CSS not applied to element
    Regression rendering a div with background gradient and borders
    Canvas 2D line drawing bug with GPU acceleration
    Multiple crashes
    Pop-up dialog is at wrong position
    HTML Canvas patterns are broken if you change the transformation matrix
    SSL interstitial error “proceed anyway” / “back to safety” buttons don’t work

    Google also found an issue with the Mac version of Chrome. It seems that HTML5 audio doesn’t work on some Mac computers. A fix for that will probably be coming sooner than later.

    The new release also includes a new version of Flash Player. Adobe issued a major security fix last week for Flash Player, but this release seems to be unrelated. The Adobe Web site says that the update “addresses memory corruption vulnerabilities in the Chrome Interface.”

    As per tradition, Google hands out cash rewards for security loopholes pointed out by members of the community. In all, Google handed out $6,000 in cash to three developers. One person in particular going by the screen name miaubiz took home $4,500 for pointing out five security flaws.

    It’s these kind of incentives that keeps Chrome on top of its game as being one of the most secure browsers on the Web. For full details on this release and more, check out the revision log.

  • How to Develop a Next-Generation Mobile Strategy

    According to an IDC forecast, by 2015 more U.S. Internet users will access the Internet through mobile devices than through PCs or other desktop devices. As smartphones begin to outsell simpler feature phones, and as tablet sales continue to explode, the number of mobile Internet users will grow by a compound annual growth rate of 16.6% by 2015.

    Supporting customers and staff on mobile is now a basic requirement for all organizations that currently have an online presence. Perfecting that strategy starts with getting the basics right and setting a strong mobile foundation to build upon.

    Be Comprehensive: Support on Mobile What you Support on the PC

    Since many Internet users are replacing their use of the PC with mobile, it is key for businesses to ensure that whatever users can do on their keyboard, they can do from the palm of their hand. Brands must make sure that every important feature of their website is also implemented on their mobile site and/or apps.

    However, the content and functionalities need to be optimized to properly fit the specific mobile device, rather than just offering a smaller version of the website. The user’s location, screen size, network speed and other key aspects unique to mobile need to be taken into account in the design and delivery of your mobile site or app. Productivity, speed, and simplicity are all essential to achieve maximum usability and customer satisfaction.

    The mobile site needs to support the site’s natural traffic coming from various sources, including SEO, email marketing and advertising. All of this inbound traffic should be redirected to a mobile comparable optimized experience. By getting this aspect right, brands will increase traffic, mobile ROI, and provide the groundwork to expand your mobile strategy.

    Staples mobileStaples.com has successfully achieved a consistent mobile experience on all sources of traffic by automatically directing customers to the mobile optimized view of its site regardless of entry point. If a user is searching for paper products via Google, for example, they will be led to an optimized mobile experience of that product page, despite coming from an outside source.

    Brands should also integrate mobile equivalent third party solutions that consumers trust, such as mobile payment provider PayPal and analytics platform Adobe. Integrating PayPal into your brand’s mobile strategy will make the checkout process that much easier, as users won’t be faced with the hassle of typing in their billing and shipping information for every purchase, or trying to remember their account log-in information for each site they access. Making the checkout process as simple as possible will result in more purchases and repeat visits.

    HTML5 Enhances the Mobile User Experience

    Leveraging HTML5 technology is a great way to improve the consumer’s experience with your brand in the mobile browser environment. By developing with next-generation HTML5 technologies, brands can deliver users a rich, app-like experience without having to develop downloadable apps for each specific mobile platform (iOS vs. Android and others). HTML5 enables brands to offer a consistent experience across all major mobile operating systems.

    Additionally, HTML5-based mobile sites enable users to take their mobile shopping experience to the next level with innovative features such as location-aware capabilities, high-resolution image galleries that enable you to zoom in to view products in detail, expandable navigation, collapsible menus, and advanced shopping carts that streamline and simplify the amount of steps users need to follow to complete a transaction.

    Travel giant Expedia.com is a brand dedicated to its innovative mobile strategy. The company’s HTML5-enabled mobile site, for example, takes “location-aware” to the next level by leveraging the device’s internal GPS to offer travelers the ability to search for nearby hotels with same day vacancies, as well as push notifications based on their location.

    Expedia mobile

    Scaling your Mobile Site to Reach an International Audience

    Rapid smartphone adoption is a global phenomenon, with more and more users around the world replacing their feature phones with smartphones. In fact, global smartphone sales grew 53.3% in 2011 and made up 34% of all mobile handsets sold in the year, according to Informa Telecoms research agency.

    Further, it is estimated that over a billion people would own a smartphone by 2013, reiterating the massive market potential. According to a recent PhoCusWright report, smartphone use now exceeds 50% in the U.S. and Europe. While Asia’s smartphone adoption has been a bit slower, the smartphone market there is expected to double its size by 2016, according to research firm Ovum.

    Because of this international smartphone surge, it is becoming more and more important for organizations to extend their mobile channel to match regional web channels in order to leverage worldwide smartphone adoption. It is vital to ensure that your company’s mobile site can adapt to regional differences in mobile user context and other key features.

    Engaging consumers on a worldwide scale has many benefits to both the company and the consumer. These include increased mobile channel revenues and maximized usage and repeat visits. Offering consumers access to online features and functionalities in their preferred language and currency will create a positive experience and encourage repeat visits.

    FedEx has implemented multiple language support to help reach its global user base. The shipping company’s site currently supports 242 regions and 25 languages worldwide, a number that signifies the importance FedEx places on scaling its mobile site for an international audience.

    Looking Forward

    In our new smartphone driven world, it is no longer enough for organizations to offer a simple optimized mobile site. Instead, brands must develop a strategy that leverages next-generation features and functionalities to make the customer experience just as comprehensive and easy to use as offered on the traditional website. By strategically implementing a well-executed mobile strategy, companies will see an increase in conversion, repeat visits, and overall positive brand awareness from users engaging with their brand via mobile devices.

  • Easily Port C++ To HTML5/JavaScript With Emscripten

    Mozilla turned some heads last week when they announced BrowserQuest, an HTML5 powered MMO that runs in any compatible browser. That was just the beginning of the potential for HTML5 to power games and other applications in-browser. Of course, BrowserQuest was built from the ground up for HTML5. What about games built in stand alone executable languages like C++?

    Games for the Web are usually built on an existing Web extension like Flash. To port to the Web, you would have to rebuild your game in Flash from whatever programming language you used. The same was once again true when it came to building games in HTML5 canvas and JavaScript. You had to rebuild your code in those languages to publish on the Web – not anymore.

    On the Mozilla Hacks blog, it details a new program called Emscripten. It’s an open source C++ to JavaScript compiler that uses LLVM. While the original game needs to be in C++, this cuts back on the development time on a port to almost no time at all.

    For this particular experiment, Alon Zakai of the Mozilla Emscripten team, used the open source game Me and My Shadow. It’s a puzzle/platformer game where the player controls two characters at once. The port created by using the Emscripten compiler “works almost exactly like the desktop version does on the machines and browswers” Zakai tested it on.

    The particular success of this port is due to the game’s use of the SDL API. For those unaware, the SDL API is a wrapper library for basic game functionality like getting input, loading images, and rendering text. Emscripten has SDL support through the use of native canvas calls, which allows the game to run as fast in browsers as it would natively on the desktop.

    There are a few problems, however, with this porting method that can be fixed by the browser creator themselves. The first problem is that typed arrays are needed to run C++ code quickly. Firefox, Chrome and Opera have the necessary typed arrays to make maximum compatibility possible. Zakai says that Safari should be fine ready soon and that Internet Explorer will be getting the capability in IE10.

    The other problem comes from the Blob constructor. This is necessary for decoding the visuals and the audio of the game. Most browsers should be able to decode the visuals in the game, but the audio is where things start to fail. Zakai claims that only Firefox is currently capable of decoding the audio, but says that there may be a workaround somewhere in Chrome.

    Emscripten isn’t perfect though as it still requires a bit of manual programming on the part of the person doing the port. Here’s how Zakai explained it:

    JavaScript main loops must be written in an asynchronous way: A callback for each frame. Thankfully, games are usually written in a way that the main loop can easily be refactored into a function that does one iteration, and that was the case here. Then that function that does one main loop iteration is called each frame from JavaScript. However, there are other cases of synchronous code that are more annoying, for example fadeouts that happen when a menu item is picked are done synchronously (draw, SDL_Delay, draw, etc.). This same problem turned up when I ported Doom, I guess it’s a common code pattern. So I just disabled those fadeouts for now; if you do want them in a game you port, you’d need to refactor them to be asynchronous.

    Regardless of the few kinks that need to be worked out, this looks like a quick and easy way for developers to bring their games to the Web. If you want to check out Me and My Shadow running on the Web, you can play the game here.

  • Developers Prefer Google Over Facebook … Do You?

    Developers Prefer Google Over Facebook … Do You?

    With Facebook’s nearly 900 million users and over 425 million mobile users, it seems pretty clear that it would be the leader in social mobile development, right? Wrong. A new study from Appcelerator and the International Data Corporation (IDC) found that developers are more interested in Google than Facebook.

    Do you prefer apps developed for Google platforms or for Facebook? Let us know in the comments.

    Also read: Does Google Deserve to be Labeled Evil?

    According to the report, 39 percent of the more than 2,000 mobile developers surveyed plan to focus more on Google initiatives than Facebook’s social graph this year. The reason this number is so significant is due to the fact that Facebook dominates the marketplace in most metrics.

    It’s important to consider that developers have a very strong sway over the use of any platform. They are, after all, the ones creating the apps that you use. Think about how much Zynga has helped Facebook, by providing users with games like Farmville, Cityville and Mafia Wars. These findings are very significant, and have major implications for Google’s social endeavors. Of course, the Google ecosystem is much larger than just Google+. Google’s Vic Gundotra recently talked about how Google counts users who sign into Google+, and use another Google product within a month, as users. Presumably, this includes Gmail, YouTube, a signed in Google search (complete with Search Plus Your World), Google Reader, etc. According to Gundotra, Google+ has 100 million “30-day active” users.

    Google put in a strong showing at the recent Game Developers Conference (granted, so did Facebook).

    Michael King, the principal mobile strategist at Appcelerator, told us that because these findings were “so different than what we expected,” they conducted a follow up study to make sure the results were accurate.

    “For us, it was extremely surprising. When we put together the survey, we actually thought Facebook would just crush Google in terms of social engagement, and quite frankly, we saw Google make a tremendous showing, given the fact that their social initiatives are pretty much dwarfed by Facebook in every measurable manner,” he said.

    They learned that developers are pursuing Google over Facebook for its position in social and mobile. They believe Google is better in terms of its network assets such as YouTube, search, maps, and Android. They also felt Google engages with them better and offers more guidance into how they should approach social applications.

    On the other hand, the developers feel that Facebook gives them a long list of what can be done with its API, but then doesn’t offer any direction for how to do it.

    “They [Facebook] really need to step up their engagement a little bit in order to get the developers excited about the platforms and to get the developers thinking about different ways to use social in their mobile apps,” said King.

    While this data is good news for Google, the study did find some less encouraging news for the search and advertising giant in terms of Android development. The study found that the interest in Android development has dipped more than 10 percent in the past 3 quarters. Incidentally, Mika Mobile announced that it was dropping support for Android earlier this month.

    The iOS platform has remained the steady leader, but in the 2nd quarter of last year, Android was within 2 percentage points of it, said King. According to him, Android is dropping due to continued fragmentation of the platform.

    “This is a very tough line for them to walk because, if you curtail fragmentation, then there’s no way that a developer can effectively write once and work across multiple Android devices,” King pointed out.

    He told us that Google could help to solve this issue by establishing itself as a “centralized authority.” King believes this could help both the distribution and discovery of apps.

    Other significant findings in the study pertained to HTML5 and cloud development. For starters, both areas are growing. Around 79 percent of developers said they planned to integrate HTML5 into the apps they build this year. But, only 6 percent of developers will write their entire apps in HTML5. Most developers plan to build hybrid apps using both HTML5 and traditional code.

    King told us these results were understandable since HTML5 is not always appropriate for the job.

    “HTML5 is only one tool in the bag,” he said. “Or, if you a golf fan, [it’s] one club in the bag to help you get to the PGA tour.”

    Additionally, developers expressed an increased interest in cloud development, especially in the areas of location and notification. However, King said developers still struggle with understanding how to utilize the cloud.

    So, what does all this research mean? Overall, King told us that the mobile/social wars have just begun. He believes that if companies want to succeed in this space, they have to engage with developers.

    Furthermore, he suggested that the deeper implications of the data could mean a shift toward Google+ over Facebook. In fact, when asked if Google+ could catch up to Facebook, nearly 70 percent of respondents said it could.

    Google+ to Overtake Facebook” class=”aligncenter” width=”543″ height=”567″ />

    “If Facebook decides to fall asleep at the wheel here and doesn’t begin to engage those developers, then absolutely Google+ and Google mobile may become the more de facto standard,” said King.

    He went on to say that he hopes both companies will respond to this report by building on their strengths and improving their weaknesses.

    An interesting thing about Google mobile, however, is that Google continues to tie many of its products and platforms together in more ways, making the larger ecosystem more unified. Think Android, YouTube, Google Play, and Google TV. If what co-founder Sergey Brin said holds up, Chrome and Android will likely merge sooner or later, as well.

    If this trend is happening with developers, will it soon transition to consumers too? Tell us what you think.

    WebProNews Senior Writer Chris Crum contributed to this report.