There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also:

• Tips and Tricks for Better HTML5 Canvas Animations
• Play Pac-Man in HTML5
• Take a Peek Into Rumpetroll’s HTML5 Pond

Internet Explorer 9 Beta on the Windows 7 desktop

Microsoft will release the first beta version of its new Internet Explorer web browser Wednesday morning.

Internet Explorer 9 Beta will be made available for download shortly after it is announced at a launch event in San Francisco, around 10:00am Pacific time. We’ll post a download link for Windows Vista and Windows 7 users as soon as we have one.

The final version of IE9 is still some months off — Microsoft wouldn’t commit to a definite time frame for the browser’s release when we asked. But we’ve spent a few days in IE9 Beta’s company, and so far, it has proven to be a thoroughly modern machine. The world’s most-sed browser is getting a new look, much expanded support for HTML5 and other 21st century web technologies, and a big speed boost.

Quite a change. Microsoft has a reputation for being an also-ran when it comes to browser innovation. When IE8 arrived in March 2009, we found it rich in features, but lacking in support for the emerging standards powering the shiny apps that make the web exciting. IE8 was faster and more secure than its predecessor, but when it came to speed and productivity, it wasn’t up to snuff with its peers — Chrome, Firefox, Safari and Opera. In fact, it was a bit of a snooze.

A year and a half on, Microsoft has smelled the coffee and is wide awake at the wheel. IE is fit to play in the same league as the other browsers.

Keep in mind, IE9 Beta is still pre-release code, so it may not run perfectly. But there’s enough new going on here — especially that speed boost — to make the download a must for the curious who want a taste of IE’s future.

A new look

The most striking difference between this browser release and the IEs of old is the new user interface. It’s sleek and minimal, and — what are those? — it now has the inverted top-tabs, which are quickly becoming common.

We first caught wind of this design change when a screenshot of the new IE9 leaked onto the web. It decreases the amount of real estate the browser consumes on screen and makes way for more content.

Another shot of IE9 Beta. Click for larger.

Freeing up those extra pixels with a minimal top bar is a path others in the industry are taking. Chrome shipped with the tabs-on-top look two years ago, Mozilla has adopted it for Firefox 4, and Safari has flirted with in the past. Opera offers a few different choices for where to put your tabs.

Other notable details: a unified search and URL bar (a la Google Chrome) where you can get search suggestions as you type. Bing is the default, but you can add Google, Wikipedia or a host of other engines. There’s also an enlarged back button, (a la Firefox) and a noticeable lack of menu items in the main bar. Something else new in IE9 is the New Tab window with thumbnails of your most commonly-visited sites, which looks much like what you’ll find in Safari, Chrome and Opera. A nice addition here is a little bar in each thumbnail that shows how much time you’ve spent on each site.

The reason these same design themes (top-tabs, unified URL bar) keep showing up in all the browsers is that they just make sense from a usability standpoint. Designers use a constantly evolving visual language to suggest interactions. It’s no different than the way advertisers, filmmakers and visual artists borrow ideas from each other to trigger certain emotions and reactions in an audience.

So we can’t cry “copycat.” Plus, IE9 does offer some unique UI enhancements you won’t find elsewhere.

One is the new notification system — instead of a pop-up in the middle of the screen or at the top (“You need to install Flash!”), you see only a slim notification about as tall as your index finger slide up from the bottom of the screen.

But the coolest new innovation is the ability to “pin” a web page to your Windows taskbar.

Pinned sites

Instead of bookmarking a site, clicking the “favorite” star or dragging a favicon to the bookmarks bar — all of which you can still do, of course — you can drag the favicon to the Windows taskbar at the bottom of the screen. Once it’s there, the browser’s buttons will change color to match the color of the favicon, making the browser feel more like a site-specific tool than just an all-purpose piece of software.

“We’re saying ‘Look at the site!’ instead of ‘Look at the app,’” Hachamovitch says.

Something else happens in the taskbar that enhances this effect.

It works sort of like a Fluid app or a Prism app. Click on the favicon in the taskbar and the site launches in a new, single-tabbed window. Right-click on it and you get a jump list — a list of actions specific to that website like “Top Stories” or “Latest Photos”.

Hachamovitch says Microsoft is responding to users’ desire to go directly to a website from the desktop. He cites internal Microsoft data that shows only about ten percent of IE users actually launch sites from the bookmark bar. The rest type URLs or click a link somewhere on the deskop.

“We’ve spent fifteen years developing a browser UI, and nobody’s using it,” he says. “What actually gets used is the landscape around the browser.”

These action inside the jump lists can be defined by site developers, who can add whatever they want by adding some markup to their pages (We weren’t supplied with examples of this markup in time for Wednesday’s launch, but we’ll provide details as soon as we can). There are also default actions to close the window and to start an In-Private browsing session, so if there’s no special markup added to the page, at least those will appear.

Performance

As we noted in the most recent preview releases, IE9 earns big points for performance improvements. It’s the same story with Wednesday’s beta.

IE9 Beta owes much of its speed boost to the new hardware acceleration features inside the browser. It passes off the most complex rendering tasks — animations, video, and heavily-styled text — to the graphics processor, and its new JavaScript engine (which Microsoft calls “Chakra”) is capable of using your PC’s extra processing cores to execute scripts on pages.

We first saw these hardware acceleration enhancements in the third preview release of IE9, and we’ve seen other browsers incorporating similar features recently, as well. Firefox 4, now in the beta stage but due in a month or two, has similar hardware acceleration features that tap into the same Windows 7 APIs that IE uses (Firefox’s extra hardware sauce is only available on Windows builds for now). Also, Google Chrome has begun including hardware acceleration for compositing in both Chrome 6 and Chrome 7 builds for Windows.

Since this is still a beta, we’re likely to see very close to the same level of performance when the browser ships. Between now and then, you may encounter some quirks and bugs.

The enhancements to the JavaScript engine were evident when I ran some of Microsoft’s official demos on its test drive site, as well as in the SunSpider benchmark suite. In real-world applications, like Gmail and Facebook, the browser’s speed and behavior was very close to what I normally see in Chrome and Firefox. There were a few things that didn’t work as advertised, like the chat windows in Gmail. They failed to minimize properly, preferring to dumbly blink when I clicked on them.

Developer’s tools are built in (just hit F12) if you want to dig into the DOM or measure performance.

Web standards

Internet Explorer 9′s support for both established and emerging web standards is sure to be sharply scrutinized. It’s an area where previous versions of IE have lagged considerably. For years, Microsoft was loathe to adopt support for unratified standards, considering them a moving target and thus a waste of time. As such, IE8 contained only partial support for HTML5 and newer CSS 3 components.

With IE9 Beta, we see a reversal of that stance. IE9 supports much of HTML5, and there’s a new parser to handle the new markup language. There’s support for native playback of audio and video files, and the Canvas element, with support for animated 2D polygons and text. HTML5 selection is supported, but not drag-and-drop or Microdata.

The Scalable Vector Graphics (SVG) standard is supported, and like other animation and media features in the browser, it can take advantage of hardware acceleration.

There’s finally real support for CSS 3 in this release — media queries, borders and backgrounds, selectors, the fonts module and the Web Open Font Format (WOFF) rich type standard, among other things.

Web standards support in IE9 isn’t perfect (who can claim that?), but it’s certainly admirable. Most importantly, IE9 is likely to be a boon for the web when the final version ships sometime in the coming months.

Once all the Windows 7 and Vista users out there update to the final version of IE9 — either manually or automatically — the web will begin its shift to a new era where the large majority of browsers can handle more complex graphics, behaviors and markup. Which is not to say the web won’t still be fractured and forked in various ways (vendor-specific capabilities will probably always be around), but the browser’s arrival will signal a much-needed step forward.

What’s next?

Internet Explorer 9 will arrive either later this year or early 2011 — Microsoft isn’t saying. And that brings up a danger point.

The number two and three browser vendors have all sped up their development cycles. Chrome is releasing new code every six to eight weeks, and Mozilla is committed to pushing out new Firefox releases every six months. Microsoft has made no mention of its intent to speed up its own browser release schedule, so it’s likely Internet Explorer 10 is a year or two off. Meanwhile, the competition will continue to deliver improvements at a pace that far outstrips Microsoft.

See Also:

• Leaked Screenshot Shows a Cleaner, Simpler IE9
• New Hardware-Accelerated IE9 Preview Arrives
• A Guide to Hardware Acceleration in Modern Browsers
• New IE9 Preview Features More Speed, Standards Support

Microsoft is deeply invested in two key technologies for building web apps: its Silverlight runtime, which requires a plug-in to work in web browsers, and HTML5, which has many of the same key capabilities, but is plug-in-free, is friendlier to mobile devices and will be heavily supported in the next version of Internet Explorer.

Tech blogger Tim Anderson has written a couple of posts Thursday speculating how Microsoft should “sell” the Sliverlight story to developers who are excited about HTML5 and the coming advancements in Internet Explorer 9.

The first post has some candid remarks from former Microsoft Silverlight product manager Scott Barnes, where he says, in some cryptic tweets, that there’s “a faction war” happening inside Microsoft over HTML5 and Silverlight.

According the Anderson, Microsoft is having an increasingly hard time positioning Silverlight as an attractive option for developers who see that HTML5 can do much of the same stuff. IE9 beta is due this month. It will offer hardware acceleration and direct access to the Windows 7 desktop, plus all of the other capabilities of a modern browser, like super-fast JavaScript performance. So, it’s not going to get any easier.

The Silverlight team has been on the defensive recently, with Microsoft’s head of developer platforms Brad Becker arguing last week that Silverlight does indeed have a place on the HTML5-powered web, where it’s used to power rich apps like games, teleconferencing apps, and DVR-like streaming apps. There is no doubt, though, that the web is catching up.

In Anderson’s second post, there’s this nugget:

Despite Microsoft’s efforts to distinguish them, there is considerable overlap between what Silverlight does, and what HTML5 in IE9 does, especially when in the browser. There is also the Apple problem: HTML applications will run on iPhone and iPad, but Silverlight will not. What if Microsoft focused on the new IE engine instead of Silverlight, supporting it properly in Visual Studio, and providing ways for developers to create out-of-browser apps that run with full trust and have access to local system APIs? This would be along the same lines as the Palm WebOS and Google’s Chrome OS.

So, where does it make the most sense for Microsoft to play its chips?

See Also:

• Leaked Screenshot Shows a Cleaner, Simpler IE9
• Get to Know Your New User Agent Strings
• Apple Updates Safari, Turns on Extensions

You can now turn on a special layer in Bing Maps that displays maps from OpenStreetMap, Microsoft has announced.

OpenStreetMap is an open source mapping project that keeps an editable map of the entire globe. Anyone can make edits to the map — it’s been nicknamed the “Wikipedia of maps.” The open source model has proven especially effective in regions of the developing world where very little solid map data exists, and in areas where highly detailed, editable maps are critical for natural-disaster response efforts, like the recent Haiti earthquake.

Microsoft’s adoption of the open source mapping project follows a similar move by MapQuest, which began adding OSM layers last month.

To run layers in Bing Maps, you’ll need the latest version of Microsoft Silverlight and a supported browser. It doesn’t work properly in Google Chrome (at least on the Mac), but IE8, Firefox and Safari had no problems. If you’re using the Ajax controls to view Bing Maps (instead of Silverlight), then you won’t be able to see the OpenStreetMaps layer, but Microsoft says this is something that may make its way into the non-Silverlight version eventually.

Use the map view switcher at the bottom to change layers.

To add OpenStreetMaps to your Bing, go to the App Gallery. Look for the new OpenStreetMaps app in the gallery. Click on it, and your alternative OpenStreetMaps view should launch within Bing Maps.

You can switch back to any of the other standard views in Bing Maps by clicking on the layer control at the bottom of the map window. You’ll notice Bing Maps is using the Mapnik build of OpenStreetMaps for its map layer. You can switch back and forth between the OSM layer and any of the other standard Bing maps layers using the same control.

Microsoft has been quickly adding some innovative features to Bing, especially on its Maps website. In June, Bing Maps added the ability to browse parts of the world in 3-D, and in February it demonstrated indoor panorama views and location-specific videos that are accessible within Bing’s street-side imagery.

Microsoft also ran its King of Bing maps challenge for developers last month, asking them to create innovative apps for the mapping platform. For the contest, a developer named Ricky Brundritt built an app for Bing Maps that estimates your taxi fare within most major U.S. cities.

However, Bing’s reliance on Microsoft’s proprietary Silverlight technology to power these innovations is seen by some as an alienating factor — and an unnecessary one at that, since other mapping platforms like Google Maps accomplish much of the same functionality using JavaScript and other web standards. This is especially important on mobile devices, where the most popular browsers don’t allow for plug-ins like SIlverlight.

Still, it’s heartening to see Bing adding to the momentum OpenStreetMaps is currently enjoying. Anyone can edit the OSM maps, and now that the project is getting some attention — thanks mostly to its efforts in Haiti — edits are coming in more quickly.

According to the latest stats, the project has over a quarter of a million participants and over 1.8 billion uploaded GPS points. Dedicated users are getting creative and finding ways to add even more detail to the existing maps by doing offbeat things like tagging wheelchair ramps, mailboxes and trees in their neighborhoods.

Taxi Fare Calculator link courtesy Mashable

See Also:

• MapQuest U.K Teams Up With OpenStreetMap
• Google Maps Adds More Detail, Takes a Cue From OpenStreetMap
• Disaster Relief 2.0: Tech Tools Help Focus Haiti Resources
• Bing Maps Takes Panoramas Indoors

Microsoft has unveiled a new all-in-one web development suite called WebMatrix.

It’s more than an IDE or a framework, it’s a whole suite — a web server, a SQL database, and a database-ready framework, all wrapped up into a single development environment that makes it easy to build, test and deploy some fairly complex web apps.

WebMatrix is free, and it’s available for Windows users as a beta download.

The new suite is especially geared towards developers building web apps that require local data storage. It’s pretty flexible, and you can also use it to build simple websites, then scale up to something mid-weight or incorporate a full-scale app that you could run a business on top of.

The WebMatrix suite is made up of three components: the lightweight Windows-based web server called IIS Express, SQL Server Compact Edition, a simple database server, and Razor, a new templating language based on ASP.NET. The beta version you can download today actually doesn’t have Razor, but it will be included in a future release “later this month,” according to Microsoft.

The three key technologies were previously announced by Scott Guthrie, Microsoft’s VP of its Developer Division. Now, with the launch of WebMatrix, Guthrie has introduced a few new components.

Central to the WebMatrix experience is the Workspace. It’s is basically a singular dashboard inside the app where you develop your site, deploy files, perform various admin tasks, run SEO tests and generate analytics reports.

There’s a web apps gallery that attaches to Microsoft’s Web Platform Installer, so you can browse and install all sorts of open source packages or content management systems like Drupal, Joomla and WordPress. There are also several templates and frameworks included, so if you need some CSS behaviors or you want to include JQuery interactions, all of those elements can be integrated into your workflow. The ones that aren’t included can be downloaded. You can test your app by automatically launching any of the browsers you have installed on your system.

WebMatrix has been built to let you start out very simply — you can just use it to run a WordPress site if you really wanted to — and then scale up to database-driven web apps. If you install something that requires a MySQL database, WebMatrix will even download and install MySQL for you.

It’s probably not going to eat into the user base of Visual Studio, Microsoft’s full-featured IDE for building apps across the entire Windows platform. But it’s so simple and fluid, it could very well draw some Windows-based developers from the LAMP stack over to the Windows IIS stack. Since everything is integrated — the dev environment, the frameworks, the app gallery and the web server — it’s really meant as a one-stop shop for building a site from scratch.

As a bonus, the files generated by WebMatrix are all just simple text files — HTML, CSS, JavaScript, MySQL and ASP code. So if you want to take all the work you do within WebMatrix and move it over into a different IDE of your choosing, or even a text editor, you won’t end up unnecessarily confused. Anything generated by WebMatrix can also easily be imported into Visual Studio or Visual Web Developer Express 2010, one of Microsoft’s other free tools for building web apps.

See Also

• New Hardware-Accelerated IE9 Preview Arrives
• Bing Maps Gets a Developer SDK
• Microsoft to Double Down on HTML5 With Internet Explorer 9

Google has released a significant update to its controversial Chrome Frame, an Internet Explorer plug-in that replaces the default IE rendering engine with the engine that powers Google’s Chrome browser.

Chrome Frame essentially embeds Google’s browser inside any tab or window within Internet Explorer. It forces IE to load a website using the same WebKit rendering engine as Google Chrome, complete with its enhanced JavaScript rendering and support for HTML5 technologies like embedded audio and video.

Previously only available as a “developer preview,” the new version of Chrome Frame has been updated to beta status. Chrome Frame’s underlying code has also been updated to match the Chrome 5 browser, which means Chrome Frame can now handle more HTML5 features like better audio and video playback, Canvas animations, geolocation, Web Workers, WebSocket connections and offline databases.

Chrome Frame now also integrates with IE more closely, meaning that the add-on now works with IE’s InPrivate browsing mode, and that clearing cookies and cache in IE will now also clear out the same elements in Chrome Frame.

If you’re stuck with IE 6 at work, but you want to see the latest and greatest the web has to offer, Chrome Frame makes for a decent solution. The only downside to Chrome Frame is that it will only be triggered on websites that have explicitly enabled it using a special meta tag. Of course, all of Google’s sites are on that short list, so you can at least experience some cool cutting-edge stuff like drag-and-drop in Gmail, geolocation in Google Maps, or real-time communication in Google Wave.

Despite the fact that Chrome Frame does not just take over IE, Google’s add-on is not without some degree of controversy. Back when Chrome Frame was first announced, Mozilla’s vice president of engineering, Mike Shaver, warned against the idea, arguing that the Chrome plug-in for IE muddles the user’s understanding of browser security, and in the end will create more confusion and little benefit.

So far those fears haven’t come to pass, but now that Chrome Frame is a beta release, it may begin to see wider use.

Shaver’s main argument — that simply telling users to switch browsers is far better strategy — is still undeniably the best solution. After all, if you’re savvy enough to know about and install Chrome Frame, you’re most likely savvy enough to just upgrade IE or switch to a better browser. But even the most recent version of Internet Explorer, version 8, doesn’t have the same level of capability as Chrome, and Chrome Frame gives IE users an opportunity to play around on the bleeding edge.

Also, there’s a subset of users who need IE 6 for legacy corporate intranets and applications, but also need to interact with today’s web. Given that several Google services — like Google Apps and Google Reader — no longer support IE 6, the day is fast approaching where Chrome Frame will be the only option for those still locked into IE 6 who want to use the newest web apps.

If you’re one of those people, head over to grab the latest version of Chrome Frame.

See Also:

• Mozilla VP on Why Google Chrome Frame Is a Bad Idea
• New Google Plug-in Embeds Chrome Inside Internet Explorer
• Microsoft to Double Down on HTML5 With Internet Explorer 9