This appears to be a fork of the Ninja Authoring Tool which was made by Motorola Mobility over a year ago as part of the Montage project. Now Google owns Motorola Mobility.
I think that makes sense -- a lot of Google's (paying) clients have been using Adobe (formerly Macromedia) Flash to make ads for years; if Google wants them to adopt HTML5 technology they need to make tools that are as easy to use as Flash was.
It's definitely an ad tool. The help section is entirely about making ads. If you look closely, the responsive layout is strictly for the ad, not the website.
Apple has a somewhat similar tool called iAd Producer.https://developer.apple.com/iad/iadproducer/ (I believe you might need the free developer account to view the page, however.) I know you can create iBooks Author widgets and other HTML5 components that aren't necessarily ads. Even if Google's goal is the same as Apple's (i.e. creating advertisements), I think that Google's branding makes their tool a bit more interesting for someone not expressly interested in creating ads.
We are glad you are trying out GWD. You are correct that it seems like a bit of overhead just to render a simple rectangle. However, as alphakappa astutely observed, there is some overhead to parse the JSON data which describes the various shapes and to render those shapes in canvas(es).
What you see is the entire canvas rendering library used by GWD. That code will be reused for additional shapes you create, including more complex shapes you can create with the Pen tool.
You bring up a great point though. In most cases, you probably don't need to draw shapes (and the overhead that comes with the runtime). If you want to rectangle elements on stage, a much better option is to use the Tag tool (the fourth tool from the top) and add HTML elements such as DIV and give them background colors and modify the border styles using the Properties panel.
We are working on our help documentation to educate our users in how to optimize their content in both size and performance.
Thanks,
Google Web Designer team - aka the ones tasked with making this application. ;o)
The amount of code it generates for a page containing just a rectangle is not a good way to judge the tool. They may have some finite overhead because of the expectation that most users will be using the tool to create more complex pages. If the tool is good for the average ad-page that's created, while maintaining cross-browser compatibility, and bad for extremely simple pages, then who is to judge?
Despite the poorly chosen name, this is a WYSIWYG tool for animation, not a site design tool. If all you care about is markup, use a text editor and make your animations by hand. Compared with Adobe Edge Animate (which is very similar), the markup is actually very clean (aside from the big script block, which is for ad functionality and also animation / drawing routines). You can see the animations defined as real keyframes in CSS, not overly reliant on javascript, which is good. It means there is a chance of taking those and using them independently of the JS runtime code, and also that execution will take advantage of native browser animation functions, rather than being bottlenecked by JS code.
It would be nice if there was some options for stripping out the Ad specific javascript. But even at ~55k this is a pretty slimmed down codebase considering what it does. Swiffy, which converts flash files to HTML/javascript has a 200k JS runtime.
A tool that designers can use to make animations in HTML5/CSS3 is desperately needed if we are ever going to move to a truly post-Flash world. We can't expect everyone to be an HTML developer, and achieving the same level of complexity and polish is extremely difficult when just working with code.
Ok, the war is on. Does anyone know of a good HTML5 ad blocker?
Flash was awesome. It made it really easy to block animated ads. My browsing experience had been wonderful ever since I installed a Flash blocker a few years ago. Also did wonders for my battery life.
Please, please help my browsing experience remain wonderful. Thanks.
Interesting that this is being released as a native app, rather than a web app.
It uses Chromium Embedded and a fairly custom UI, so it looks like it's all HTML anyway. Maybe they packed it up as an app to get better FS permissions (amoungst other things).
Think this is mostly an alternative for Flash in display ads (which still primarily use Flash for animation). Guess is based on it being announced through Doubleclick's twitter stream.
"Unable to open file due to the following error: The file was not created in Google Web Designer."
So, basically, Google is just creating their own proprietary format that's built on HTML. Even if you are just using it to construct ads you'll be somewhat locked-in to this toolchain. Since HTML is inherently open people will be able to build converters but it's still a bad precedent.
Hi,
Currently we do only support editing document created in GWD, but we are outputting HTML, CSS and JS. We only add some author time data in order to enhance the authoring experience but otherwise everything else is just plain HTML and CSS. Our minified JS is only added for the Ads use case and to support the rendering of Canvas shapes.
Also we are still in Beta and we are working on adding many more features for our 1.0 release. Feel free to submit any features request through our public forums.
>So, basically, Google is just creating their own proprietary format that's built on HTML. Even if you are just using it to construct ads you'll be somewhat locked-in to this toolchain. Since HTML is inherently open people will be able to build converters but it's still a bad precedent.
Adobe's Muse does a similar thing - if you publish to Business Catalyst using it it locks you into a proprietary "format" that forces you to stay on the platform and edit the site through Muse, or else it no longer 'compiles.'
Because of this it's worthless to me as is, a complete non-starter. What a ridiculous requirement, if I want to use this "web designer" I am supposed to rewrite or abandon all my previous work. Good luck getting anyone to use this.
Fantastic. I've been waiting for this to happen, and not the least bit surprised it's coming from Google.
I've been super excited for the HTML5/Canvas/JavaScript takeover of web interactivity from the grips of Flash, but the one thing I kept seeing in almost every single tutorial is that it's mostly - still - hand-coded stuff. That's cool for programmers, but the reality is that the "mass" market (among designers) isn't going to really adopt HTML5 until there are well-established visual tools.
Procedural graphic design is a fun exercise, intellectually interesting, and can have some amazing results, but the market for that type of design work is really limited.
This should help drive a real, solid, mass-designer-market adoption of the new standards. Cool.
Might be useful to let marketing department guys crank out ad banners without bothering any devs. I'm still waiting for http://macaw.co/ for responsive site & application prototyping.
As someone who's trying to get into web development (not professionally), apps like Macaw makes me want to buy a Mac. Windows is so limited compare to Mac in this regard.
You can color me skeptical until we see actual HTML5/CSS spit out by this - regardless of who writes it, I'm always doubtful of the efficacy of any automated/wizard-driven code generation in the general sense.
Edit: The down votes are warranted, but I would wager that there at least a few people who will take the 'I need a web designer; search for same; well maybe I'll try this' path. That's all.
Tumult Hype's exports are essentially 3 lines of HTML so it is easy to embed in other documents and output mostly takes the form of JSON animation data and a JavaScript runtime file. It isn't meant to be hand-edited or even read, since we minify heavily to keep file sizes extremely small.
While everything has its tradeoffs, we went with this approach because:
- Our app has a lot of animation and interactivity capabilities not meaningfully expressed through anything but JavaScript. For example, we don't use CSS3 Animations nor transitions because they aren't powerful enough (pausing, synchronization, etc.).
- We have better control over how we express the DOM to the browser. There's plenty of browser bugs or incompatibilities which sometimes require us to on-the-fly change the DOM structure or which properties we are using.
- The user could easily bork the output so it could not be read back in
- No tool will ever produce output that will appease everyone :)
We provide lots of hooks in and outside of the runtime for your own JavaScript and HTML so you can still customize quite a bit.
So it isn't that our output isn't very clean (in fact I'm quite proud of the runtime and how we've been able to add features without increasing bloat); it is that edits are meant to happen from the app itself.
It's surprising to me how many people are complaining about the lack of a Linux version.
A Linux version would be great! but let's put our idealogical hats aside, and think like a business.
The intersection between their target audience, and Linux is minute! Unless it came for free, investing in a Linux version of the app would have been a terrible use of resources
1. The Google web Designer is not bad.
2. It't more intuitive than Dreamweaver--by far.
3. I think they should deemphasize the Ad functionality.
4. They should offer a few basic templates--maybe be I missed them?
5. Templates were important in my learning curve. Trying
to memorize WC3 examples didn't work for me. Experimenting
with a template helped me a lot--plus I could put up rudimentary websites quick.
6. If anyone from Google stumbles upon this; remember you
have multiple generations of people out there that would
love to learn how to put up a web page.
7. Put up some video tutorials. You are hemoraging money,
but I've noticed you seem to depend on customers to post
"how to videos", or maybe hire some out of work 30-65 year
olds to produce the videos. Some of your older users know
how to communicate without using too much tech lingo--isn't
that the purpose of ths Editor? If their videos do the
trick pay them, and don't expect them to move to your campus-let them work at home. Working at home has some benefits.
[+] [-] tumultco|12 years ago|reply
http://arstechnica.com/information-technology/2012/07/ninja-...
[+] [-] ChikkaChiChi|12 years ago|reply
[+] [-] simonsarris|12 years ago|reply
It's the last point on the feature list page, but it's very telling that it's the first thing on the "Create New" screen.
https://support.google.com/webdesigner/answer/3261498?hl=en&...
[+] [-] cbhl|12 years ago|reply
[+] [-] gwdengineer|12 years ago|reply
Our ambition while building Google Web Designer is that it be a general-purpose, awesome HTML5 content builder.
Hence the name Web Designer & not Ad Designer.
We aim to learn from our users, iterate & push quickly to reach our ultimate goal of being a kick- general purpose HTML5 builder!
[+] [-] radley|12 years ago|reply
[+] [-] stevekinney|12 years ago|reply
[+] [-] dudus|12 years ago|reply
[+] [-] znowi|12 years ago|reply
There seem to be a hidden agenda in everything Google does these days.
[+] [-] austenallred|12 years ago|reply
[+] [-] pajju|12 years ago|reply
But its Branded as Google Web Designer. :)
[+] [-] JacksonGariety|12 years ago|reply
It spit this out:
https://gist.github.com/JacksonGariety/6766626
(after struggling and realizing CMD+S wasn't saving my file)
I feel sorry for whoever was tasked with making this application.
[+] [-] gwdengineer|12 years ago|reply
We are glad you are trying out GWD. You are correct that it seems like a bit of overhead just to render a simple rectangle. However, as alphakappa astutely observed, there is some overhead to parse the JSON data which describes the various shapes and to render those shapes in canvas(es).
What you see is the entire canvas rendering library used by GWD. That code will be reused for additional shapes you create, including more complex shapes you can create with the Pen tool.
You bring up a great point though. In most cases, you probably don't need to draw shapes (and the overhead that comes with the runtime). If you want to rectangle elements on stage, a much better option is to use the Tag tool (the fourth tool from the top) and add HTML elements such as DIV and give them background colors and modify the border styles using the Properties panel.
We are working on our help documentation to educate our users in how to optimize their content in both size and performance.
Thanks, Google Web Designer team - aka the ones tasked with making this application. ;o)
[+] [-] alphakappa|12 years ago|reply
[+] [-] WhiteNoiz3|12 years ago|reply
It would be nice if there was some options for stripping out the Ad specific javascript. But even at ~55k this is a pretty slimmed down codebase considering what it does. Swiffy, which converts flash files to HTML/javascript has a 200k JS runtime.
A tool that designers can use to make animations in HTML5/CSS3 is desperately needed if we are ever going to move to a truly post-Flash world. We can't expect everyone to be an HTML developer, and achieving the same level of complexity and polish is extremely difficult when just working with code.
[+] [-] abalone|12 years ago|reply
Flash was awesome. It made it really easy to block animated ads. My browsing experience had been wonderful ever since I installed a Flash blocker a few years ago. Also did wonders for my battery life.
Please, please help my browsing experience remain wonderful. Thanks.
[+] [-] madeofpalk|12 years ago|reply
It uses Chromium Embedded and a fairly custom UI, so it looks like it's all HTML anyway. Maybe they packed it up as an app to get better FS permissions (amoungst other things).
[+] [-] djim|12 years ago|reply
[+] [-] snide|12 years ago|reply
https://twitter.com/doubleclick_pub/status/38471531196005171...
[+] [-] mediascreen|12 years ago|reply
[+] [-] rjvir|12 years ago|reply
[+] [-] mason55|12 years ago|reply
"Unable to open file due to the following error: The file was not created in Google Web Designer."
So, basically, Google is just creating their own proprietary format that's built on HTML. Even if you are just using it to construct ads you'll be somewhat locked-in to this toolchain. Since HTML is inherently open people will be able to build converters but it's still a bad precedent.
[+] [-] gwdengineer|12 years ago|reply
Also we are still in Beta and we are working on adding many more features for our 1.0 release. Feel free to submit any features request through our public forums.
Thanks, Google Web Designer team.
[+] [-] krapp|12 years ago|reply
Adobe's Muse does a similar thing - if you publish to Business Catalyst using it it locks you into a proprietary "format" that forces you to stay on the platform and edit the site through Muse, or else it no longer 'compiles.'
[+] [-] SkyMarshal|12 years ago|reply
[+] [-] joenathan|12 years ago|reply
[+] [-] joseph_cooney|12 years ago|reply
[+] [-] radley|12 years ago|reply
http://arstechnica.com/information-technology/2012/07/ninja-...
via @ElliotGeno
[+] [-] nlh|12 years ago|reply
I've been super excited for the HTML5/Canvas/JavaScript takeover of web interactivity from the grips of Flash, but the one thing I kept seeing in almost every single tutorial is that it's mostly - still - hand-coded stuff. That's cool for programmers, but the reality is that the "mass" market (among designers) isn't going to really adopt HTML5 until there are well-established visual tools.
Procedural graphic design is a fun exercise, intellectually interesting, and can have some amazing results, but the market for that type of design work is really limited.
This should help drive a real, solid, mass-designer-market adoption of the new standards. Cool.
[+] [-] didgeoridoo|12 years ago|reply
[+] [-] choult|12 years ago|reply
[+] [-] dombili|12 years ago|reply
[+] [-] choult|12 years ago|reply
I'll lump this in with Dreamweaver for now.
[+] [-] danesparza|12 years ago|reply
[+] [-] mr_spothawk|12 years ago|reply
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] ferdo|12 years ago|reply
[+] [-] loceng|12 years ago|reply
[+] [-] TazeTSchnitzel|12 years ago|reply
[+] [-] rch|12 years ago|reply
Edit: The down votes are warranted, but I would wager that there at least a few people who will take the 'I need a web designer; search for same; well maybe I'll try this' path. That's all.
[+] [-] stekoz|12 years ago|reply
[+] [-] xSwag|12 years ago|reply
[+] [-] micampe|12 years ago|reply
[+] [-] wakkalakka|12 years ago|reply
http://tumult.com/hype
One of the primary complaints about Hype is that its HTML / CSS / JS output isn't very clean. I wonder if Google's tool produces better output.
EDIT: Looks like not: https://news.ycombinator.com/item?id=6470640
[+] [-] tumultco|12 years ago|reply
While everything has its tradeoffs, we went with this approach because:
- Our app has a lot of animation and interactivity capabilities not meaningfully expressed through anything but JavaScript. For example, we don't use CSS3 Animations nor transitions because they aren't powerful enough (pausing, synchronization, etc.).
- We have better control over how we express the DOM to the browser. There's plenty of browser bugs or incompatibilities which sometimes require us to on-the-fly change the DOM structure or which properties we are using.
- The user could easily bork the output so it could not be read back in
- No tool will ever produce output that will appease everyone :)
We provide lots of hooks in and outside of the runtime for your own JavaScript and HTML so you can still customize quite a bit.
So it isn't that our output isn't very clean (in fact I'm quite proud of the runtime and how we've been able to add features without increasing bloat); it is that edits are meant to happen from the app itself.
[+] [-] hiyou102|12 years ago|reply
[+] [-] wudf|12 years ago|reply
[+] [-] navpatel|12 years ago|reply
The intersection between their target audience, and Linux is minute! Unless it came for free, investing in a Linux version of the app would have been a terrible use of resources
[+] [-] marincounty|12 years ago|reply