(Translated by https://www.hiragana.jp/)
Html5 -- Download Squad
The Wayback Machine - https://web.archive.org/web/20101005041509/http://www.downloadsquad.com:80/tag/html5/

Skip to Content

Everything iPad on TUAW
AOL Tech

html5 posts

Filed under: Games, Mozilla, Browsers

Mozilla Labs launches its first Open Web Games competition: Game On 2010

After teasing us earlier this month, Mozilla Labs has now opened its doors on the Game On 2010 competition.

Other than the stipulation that the front-end of the game uses only Open Web technologies -- HTML, CSS, and JavaScript -- anything goes. No plug-ins or add-ons can be used, but the back-end server-side portion, if the game requires it, can be written in any language.

Games will be judged both by the community, and "many, many awesome Web and gaming" experts (Mozilla gives no names, however). Entries will be measured against six metrics: technology, Open Web-iness (!), Aesthetics, Originality, Polish and Fun.

Entrants have until 11 January 2011 to submit their games, but Mozilla plans to throw in "mini-competitions, events and other surprises" to spice things up. Each of the six categories will have a winner, but the overall winner will be flown, with all expenses paid, to attend both the Games Developer Conference and Independent Games Festival in San Francisco -- and they'll get to visit the Mozilla headquarters in Mountain View!

It goes without saying, really: if you have any inclination towards games, or programming, or website development: enter the competition!

Filed under: Fun, Games, Time-Wasters

Defend Yourself is a quick HTML5-powered Time-Waster

defendyourself

Defend Yourself is a basic tower defense style game. You have a cannon at the bottom of the screen, and balls are dropping from the top of the screen -- blast away and deflect the oncoming balls in order to keep them from touching down at the base of the screen.

You don't have infinite ammo. There's an ammunition bar that runs out as you fire, and you need to pause every now and then to let it recharge (recharging is actually fairly speedy). As with any tower defense game, the oncoming enemies get quicker and tougher until you lose.

What's interesting to me is that there are no explosions or fancy graphics, but the game is still fun to play and it ran incredibly smoothly on my Chrome Canary. My score isn't all that impressive, so feel free to show off in the comments by posting screenshots of your final score!

ed note: iPad users: Does this game work for you? Is it fun to play on an iPad?

Filed under: Developer, Education

Periodic Table of the Elements is a quick, slick HTML5 cheat sheet

periodictableoftheelements

HTML5 is here, which means Web developers now have a whole bunch of new tags and elements to play with. The Periodic Table of the Elements is an effective visual map of what the "new HTML" looks like. It's a comprehensive table, too; it contains both existing elements (such as the hyperlink tag, a) and elements that were just introduced in HTML5.

Elements are sorted by their function (root elements, metadata and scripting, text-level elements, forms, etc.), and when you hover over an element, you get a short description and a couple of links to further reference material (W3C Developer's Guide and W3Schools).

The whole thing feels very slick and is indeed implemented as an HTML table. One awesome feature is the How are they used? box. For example, you can punch in reddit.com and get a colorized map that shows exactly what HTML5 elements Reddit currently employs. It's not just a binary thing, either (uses/doesn't use). The more an element is used, the brighter it shines on the table. There's even a small instance count when you hover over it; I can tell you that Reddit uses seven input tags and 192 span elements on its main page. That's pretty slick!

Filed under: Microsoft, Browsers

This is why you should use Internet Explorer 9

It's a little bit ironic: I was in San Francisco for the launch of IE9, yet I still haven't written anything about it. A lot has already been covered by Lee, but there are still a few hidden gems and neat details that you might not know about. In an effort to continue our exhaustive and unrivalled coverage of Web browsers, I'm going to give you my take on Microsoft's new, prospective champion.

It's hard to describe just what makes Internet Explorer 9 such joy to use. It would be easy to say 'it just works,' but that would be a cop-out. IE9 is like a simple, beautifully elegant dress -- sleek lines, no frills, but masterfully designed with a singular purpose in mind: Web browsing.

Read more →

Filed under: Developer, Utilities, Google, Browsers

Google Chrome Frame leaves beta, brings HTML5 to legacy browsers

Google Chrome Frame, Google's plug-in for bringing HTML5 and the latest Web apps to IE 6, 7, and 8, has reached stable status and left beta. Chrome Frame lets developers of modern sites and Web apps support legacy browsers, with the plug-in handling the HTML5 rendering when a user's old browser -- OK, old version of IE -- can't get the job done.

Chrome Frame is an alternative to more complex hacks that tend to slow sites down, but the beta tag probably scared some developers away. Well, now Chrome Frame is stable, so load times and crashes are way down. Some fairly big-name sites like DeviantART, HootSuite and github have already jumped on the Chrome Frame bandwagon, and I'm sure more will follow their lead.

If you're already using the Chrome Frame beta, you'll be automatically updated to the stable version, and future updates will happen on the same update schedule as Chrome itself. If you're just getting started with Chrome Frame, you can check out Google's handy intro video after the jump.



Read more →

Filed under: Developer, Adobe, Browsers

Adobe Illustrator HTML5 add-on pack released, lets you export CSS3, SVG and HTML directly

A new beta 'Labs' add-on from Adobe adds a ton of HTML5-specific features to Adobe Illustrator CS5. This follows the release of an HTML5 add-on for Dreamweaver CS5 that shipped at the end of August.

This add-on actually allows users of Illustrator to export their designs directly into HTML5 code. Instead of shipping off finished designs to be re-rendered in HTML and CSS by a Web designer, Illustrator can now export images as a combination of SVG and CSS3. The exported Web resource, according to Adobe, will be compatible with Chrome, Firefox, Safari and hopefully IE9.

Technologizer, presumably extrapolating from the add-on's download page, says that the HTML5 code produced by Illustrator will work seamlessly across the platforms; on PCs, tablets and smartphones. I guess that has something to do with the infinite scalability of vector graphics, but as I don't have a copy of Illustrator I can't confirm it.

This marks a major deviation for Illustrator, and it definitely shows that Adobe, despite its huge investment in Flash, is trying its best to stay contemporary -- or at the very least, ensuring the customers of its Creative Studio cash cow stay happy.

Filed under: Internet, News, Open Source, Social Software, Browsers

Boxee eyes HTML5 goodness, ditches Gecko for WebKit

Boxee, everyone's favorite open-source underdog in the emerging entertainment-center-in-a-box market, has been using Gecko for its on-board browser for years now. That's all about to change, according to Boxee's Lead Apps Developer Rob Spectre, who told GigaOM that the team was looking to make good use of HTML5, and saw a shift to WebKit as the best way to get there. Boxee users should expect to see the shift sometime soon, with the release of the anticipated update to version 1.0 -- a milestone that's sure to be somewhat of a momentous occasion all on its own.

Boxee's performance while browsing is expected to "dramatically improve" after the shift, and when the long-awaited Boxee Box finally releases this coming November, it'll be shipping with WebKit firmly in place.

Interesting to note, the Boxee team is so impressed with WebKit, even after so many years of Gecko-use, that Spectre went on to state that it "absolutely should be the future for the browsers you use on your TV." Between Google TV and Boxee, it looks as though a great many living rooms are set to be equipped with WebKit this coming holiday season.

Filed under: Internet, Mozilla, Browsers

Firefox Friday: can Firefox hold off Internet Explorer 9 and Chrome?

Happy Firefox Friday, friends! In the lead up to an exciting winter, things have been heating up at Mozilla.

There's strong competition from all sides. The IE9 beta launches next week and we'll soon see whether Microsoft can transform its excellent developer previews into something which can make the end-user salivate. Chrome's hardware acceleration currently leads the pack, and will presumably find its way to the beta build very soon. Does Firefox 4 have what it takes to hold onto its wavering market share?

This war, kicked off by Google's intent to push Chrome from nerdy obscurity into the mainstream, has forced Mozilla to roll with the blows. After almost completely avoiding innovation with Firefox 3.6 -- yay, Personas! -- we're now seeing a delicious glut of additions rolling out with each and every beta build of Firefox 4.

These past two weeks have been the busiest I've ever seen Mozilla, in terms of bug fixes, new features, and new out-reach and research projects. Let's tuck in!

Firefox debuts new JagerMonkey JavaScript engine, now on the tail of Chrome and IE9

JavaScript has long been a weakness of Firefox -- or rather, it became a sore point after the initial release of Chrome showed the world just how fast JavaScript can be. With JagerMonkey, Firefox 4's JS performance will be very close to the competition.

From conversations with developers at Mozilla, I also get the feeling that raw JavaScript performance isn't their prime concern. Benchmarks are notoriously bad at depicting real-world applications -- and JavaScript can still only perform as fast as the layout engine lets it.

It's safe to say that FF4 will run your JavaScript-intensive games and Web apps just fine.

Read more →

Filed under: Mozilla, Browsers

Firefox 4 Beta 5 released: hardware acceleration turned on by default, HTML 5 audio, and more

Last night, Firefox 4 Beta 5 was officially released. Nightly builds have now moved on to beta 6.

We've actually covered the two main additions in beta 5 already: hardware acceleration (check my three-way browser showdown!) and the new HTML5 Audio Data API. Apparently, the Firefox button (yes, that ugly orange thing) now has a new look on Windows Vista and 7, but I can't see much of a difference (and according to some commenters, the CSS hack to move or remove the button also no longer works).

There's also the inclusion of a new feature called HTTP Strict Transport Security (HSTS), which allows websites to force SSL-encrypted connections.

Grab a copy, or read the full release notes for more information. (There's a ton of new features in Firefox 4!)

Filed under: Audio, Mozilla, Browsers

Check out some awesome HTML5 audio demos with Firefox 4 (video)


With so much continued competition surrounding the HTML5 video and canvas tags, one of the other major additions to the HTML5 specification has been all but forgotten by the media: HTML5 audio. Fortunately, the bearded magicians at Mozilla have slightly more foresight than we blood-seeking bloggers, and as a result Firefox 4 has a very cool new addition: the Audio Data API.

If you don't have Firefox 4 installed, or if you just want a quick overview of what you can expect from the next generation of HTML5 Web apps, watch the video above. If you have a nightly build of Firefox 4, play with the demos yourself! The 'beat detectors' require WebGL, which is easy enough to install.

As I discuss in the video, HTML5 audio has some really exciting applications. Combined with WebGL, in-the-browser, standards-compliant (cross-browser!) games become a reality. We'll soon see a YouTube Web app that lets you edit both video and audio -- you'll be able to normalize sound, play with individual channels, cut, splice and so on. How about TV-to-the-browser, with the end-user retaining complete control over the audio stream and its playback? Or, best of all, volume normalization -- imagine an HTML5 add-on that simply turns down the volume on really noisy pages. Bliss.

Finally, if you're a developer, or if you just want to play around with HTML5 audio, Mozilla already has some JavaScript libraries that make the development process both easy and fast. If you need proof, right click and view the source code behind the demos -- most of them use just a few lines of code!

I can't believe we're now able to write music with JavaScript... what a crazy and wonderful world we live in.

Filed under: Browsers

3-way hardware-accelerated browser shoot-out: Chrome on top, IE9 just behind and Firefox brings up the rear (video)

After yesterday's announcement that Chrome 7 is now hardware accelerated, I instantly wanted to get the major browsers back into the ring for another screencasted deathmatch. Back when I did the 4-way speed test, only Firefox and Internet Explorer 9 featured hardware acceleration, and as a result Opera and Chrome were many orders of magnitude slower. If you watch the video, however, you'll see that's definitely no longer the case: Chrome is now the fastest of the three major browsers.

That speed comes at a price! As I discuss in the video, Chrome might be faster, but it uses significantly more resources than either IE9 or Firefox 4. Firefox is some 30% slower, but at the same time seems to use less CPU and GPU time. IE9 seems to utilize the same amount of CPU time as Chrome, but a little less of the GPU -- and it's marginally slower as a result.

What I don't know is whether this is by design or not. You'll notice that the GPU never went far above 50% -- why, with three browsers open, does it not get closer to 100%? The resources are there to be used -- why not use them?! Likewise, my CPU is still only half-used even when all three browsers are drawing 1000 frantic fishes at the same time. If you're curious, the other IE9 test drive samples all provided similar results. I wanted to try Google's 'HTML5 rocks' sample gallery, but they intentionally used elements of CSS and HTML5 that aren't yet supported in Internet Explorer 9 or Firefox 4.

In the name of science, here's some more information about my process: the screen capture does slow down each browser by a few frames per second, but relatively the figures are still accurate. I saw a small deviation in FPS when I was only running one browser at a time (probably because my CPU has multiple cores). There are a few unknown variables too, like whether the CPU core usage is defined by the app, or by the operating system (but with Chrome using more resources than IE9, you can only assume that Windows isn't unfairly biasing its own-brand browser).

If you'd like to recreate my test, you'll need to enable hardware acceleration in Firefox 4 and Chrome -- IE9 has it turned on by default:
  • Firefox 4 -- grab a nightly build, navigate to about:config and add gfx.font_rendering.directwrite.enabled -- set it to 'true'
  • Chrome 7 -- grab a nightly build and add the following flags to the shortcut before opening it: --enable-accelerated-compositing --enable-gpu-plugin --enable-gpu-rendering --enable-accelerated-2d-canvas

Filed under: Video, Google

Google, Arcade Fire deliver amazing, HTML5-powered music video from the future

It takes a lot for a music video to grab my attention anymore. Arcade Fire's HTML5 collaboration with Google, however, does a pretty damn good job.

Head over to The Wilderness Downtown, punch in the address of the home where you grew up, and watch the magic unfold. The "experience" is definitely one of the most interesting demos to come out of Google's Chrome Experiments thus far. It's a fantastic showcase of what HTML5 and modern browsers bring to the table.

As director Chris Milk told Wired, "[HTML5] is in its infancy right now, but I think the browser will be the next widely recognized artistic medium." He continues by adding "It allows such a larger dialog with the viewer. There's actual two-way communication going on between the art and the observer."

One parting note: is it just me, or was that HTML5 progress indicator every bit as annoying as the ones we've grown accustomed to with Flash preloaders? Yeah, that's what I thought.

[via Wired]

Filed under: Google, Browsers

Chrome now has hardware acceleration, brings phenomenally faster fishes

I'm not sure when the changes actually landed, but Google has announced that an early implementation of hardware acceleration is now available in developer versions of Chrome 7.

Early testing suggests that performance is still worse than Internet Explorer 9, but the gap has definitely been closed a bit. The '1000 fish test' now clocks in at about 10 frames per second, which is definitely an improvement from last time -- but still some way short of IE9's 45 FPS.

The Chromium blog post says that only some content is being accelerated, so the Fish Tank might not be a fair comparison of the browsers. I'll try to find a better test or benchmark and share my findings later today. You can enable hardware acceleration in Chrome with the --enable-accelerated-compositing flag -- and if you discover anything interesting, please share your findings in the comments!

Update: you might need a nightly build of Chromium to take advantage of this hardware acceleration. It would be nice if Google could explicitly state when the changes were made...

Filed under: Fun, Games, Time-Wasters

Onslaught is a fast-paced, HTML5 Time-Waster

onslaught

Onslaught is a fairly simple "defence" style game, but it's very fast-paced and lots of fun. You're a blocky Viking-looking dude in a dungeon. Waves of enemies enter, and you have to kill them all with a variety of weapons.

You use the arrows to move, and Space to shoot. You can just keep Space pressed down permanently, too. You can use Z and X to switch weapons, and you don't have to stop firing to make the switch. That's pretty neat.

As your enemies die, they leave all sorts of fun bonuses. My favorite weapon so far is the "fireballs." You get a whole bunch of fireballs that provide 360 degree fire all around you; they provide perfect coverage.

Some of the levels have "bosses" that fire at you. (The other enemies only come at you; they don't have any projectile weapons.) One of those bosses is what killed me and ended the game that you see in the screenshot. It's quite a neat little distraction!

Filed under: Google, Browsers

HTML5 Studio is yet another HTML5 showcase, this time by Google

Groan, I thought. Not another HTML5 showcase. We get it, ... we really get it! HTML5 is cool! It's awesome, it's the next big thing, and it's going to make us all insanely rich and handsome!

But what's different about HTML5 Studio (and its main saving grace, if you ask me) is that it's made by Google. Yup! Straight from the big G come nine HTML5 examples, including such favorites as the Slider Carousel, Drag n Drop Photos, and more.

Some examples are not customizable, which means that what you see is what you get. You can download the whole demo, though, or you can view the source.

Other demos (like the Newspaper Columns one) are more customizable, and they have a few sliders that you can move around in order to see how they affect the layout.

The resulting CSS is complex. To be honest, the whole thing feels so unlike Google that, if it didn't have that "Made by Google" text at the bottom and the Twitter link that leads to ChromiumDev, I would never have thought it was a Google product; I nearly skipped it before I noticed the label.

Another disclaimer that appears on the site says, "This site contains information on APIs that are not part of the current W3C HTML5 specification." So, I guess that you can mainly count on these examples to work in Chrome (and the ones that I've tried do), but don't push your luck with other browsers.

Featured Time Waster

Give Up, Robot is an awesome platformer -- Time Waster

I literally had to tear myself away from this one just to write about it: Give Up, Robot is so much fun. It's a low-fi platformer with very engaging gameplay. You're a robot (I know, you never would've guessed that on your own) and you can run, jump, and hook onto things with your grapple (using Z to shoot it out). Once you've attached the grapple to anything, you can swing yourself using the left and right keys, and extend or shorten the rope using up/down. As soon as you let go of the Z key, the grapple ...

View more Time Wasters


Featured Galleries

A tour around the Google campus in Mountain View, California
A tour of the Mozilla offices in Mountain View, California
Inside Rdio, the new on-demand music streaming service
Livescribe Store
Chromium Pre-Alpha on CrunchBang Linux
10 Firefox themes that don't suck
Comodo Internet Security
Photoshop Express Beta

 

Follow us on Twitter!

Download Squad bloggers (30 days)

#BloggerPostsCmts
1Lee Mathews11526
2Erez Zukerman654
3Sebastian Anthony5698
4Jay Hathaway510
5Samuel Gibbs64
6Jason Clarke40
7Matthew Rogers30
8Victor Agreda, Jr.11

More Tech Coverage

Joystiq

TUAW

DailyFinance

Autoblog

Urlesque

Engadget

WoW

Switched.com

FanHouse