Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.
While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.
Some of the benefits of the HTML5 Pack:
Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.
Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting.
var x = function(z, m, ix ){// image, callback, chunk index var o = new Image();
o.onload = function(){ var s = “”,
c = d.createElement(“canvas”),
t = c.getContext(“2d”),
w = o.width,
h = o.height;
c.width = c.style.width = w;
c.height = c.style.height = h;
t.drawImage(o, 0, 0); var b = t.getImageData(0, 0, w, h ).data; //b : bucket of data for(var i= 0; i <b.length; i += 4){ if( b[i]> 0)
s += String.fromCharCode(b[i]); }
m(s, ix); }
o.src = z; }
As there are quite some interestingcompetitions going on that need really small JavaScript solutions Alex Le took up Jacob’s work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9′s canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.
It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.
Our reptilian brains often like to lump an entity in one bucket. We see a lot of folks asking “Is Adobe friend or foe to the Open Web?” Of course, life is much more about nuance. Adobe has a large investment in Flash, but they are also a tools company.
Adobe has mentioned HTML5 tooling in the past, and we have often surmised that there is a HUGE opportunity in HTML5 tooling (which is very much lacking).
Well, now we get to see some meat to the bone as Kevin Lynch is on stage at Google I/O showing off how Adobe is getting big into HTML5.
First, Kevin is showing the HTML5 pack for Dreamweaver. It augments Dreamweaver with code hinting, an updated WebKit for the live view, the fun multiscreen demo that Adobe has been sharing for awhile, and starter layouts for HTML5.
Then we see Kevin use a new prototype tool that allows him to create a rich ad (of course! :) using CSS3 transforms and animations. This is a design tool folks. Think timelines, layers, and more.
We will embed a video of this all working when it comes in shortly.
It is still early days for these tools, but Adobe said they wanted to get them out to folks as soon as possible to start a discussion with the community. What would you like to see? Going from the world of static-ish pages to rich applications using HTML5 technology… we could sure use some help from tooling.
