October 26, 2010

Adobe demos new HTML5 authoring tool

Things are starting to roll in a more serious way. More to come.

Posted by John Nack at 1:23 PM on October 26, 2010

Comments

  • Jesper — 1:30 PM on October 26, 2010

    Nice. Really nice.

    Also, it cracks me up how many times he mentions “HTML5″ only to show the source view, complete (replete?) with XHTML 1 DTD.

  • Mario — 1:39 PM on October 26, 2010

    Great initiative but the UI looks very old/cumbersome and definitely not Mac like. What if that App was a WebApp…?

    • Peter — 2:22 PM on October 26, 2010

      I basically agree, the concept looks great, but a platform-native interface would be very nice. I appreciate the effort to provide a consistent user experience across platforms, but I’d rather have native widgets that behave the way I expect them to than forced consistency between platforms (as favored by many tools that use Java, Flash or something like QT for their interface).

      That being said, I am aware that this is a prototype and that the interface is by no means finalized and will change significantly anyway. Apart from my issues with the non-native interface, this is a product that I am very much looking forward to. Congratulations!

      • imajez — 3:56 PM on October 26, 2010

        So which particular variation of the numerous Apple UIs that are present in different Apple programmes should Adobe adopt?

        • Mario — 7:06 AM on October 27, 2010

          It doesn’t necessarily has to be the default Cocoa UI, just take a look at what Panic and a lot of Mac Devs are doing. To what I know they do inherit from Cocoa’s base objects and then modify them instead of creating a new framework. And about Apple’s different UI’s I only hate the new iTunes UI, all the other ones are good or great.

        • Peter — 2:31 AM on October 28, 2010

          @imajez: I think you are under the impression that these posts are only referring to a potential Mac version. The problem also exists on Windows, even though users of that platform are much more used to bad non-standard UIs, simply because there are more products that ignore conventions and fewer that use them to produce great interfaces. Same goes for Linux.

          Mac users have seen many incredibly well thought-out interfaces that take advantage of the conventions (CSSEdit, Versions, NetNewsWire, Transmission, Pixelmator, Checkout …), but all take certain liberties with them, sometimes even major ones (like Pixelmator), but never to an extent that is alienating to the user, like the Flash-based UI elements in Photoshop are for example (File Info, Photomerge, etc.), or AIR applications (like Adobe Extension Manager). There are a few examples of excellent non-standard interfaces on Windows, too by the way (Microsoft Visual Studio comes to mind, or programs like Cue Cards for example).

          This is NOT about slavishly keeping to specs from Apple or Microsoft, it is about not creating completely different interfaces from scratch. The panel system in Photoshop/InDesign/Illustrator is absolutely fine. The non-standard flash-based panels with non-native look and behavior in Fireworks are not for example.

          All I ask for is to take advantage of native Widgets on both platforms. That way it can be ensured that the UIs always behave in the way the should (i.e. text editing shortcuts all work, scroll wheels always work, and very importantly, long learned visual cues (like default buttons and selected check boxes being blue on OS X) can be applied etc.). It also reduces the chances that an update from Microsoft or Apple will break the behavior (for instance the recent inertial scrolling update for MacBook (Pro) touchpads from Apple broke scrolling on a large portion of Flash-based interfaces, browser-based or otherwise).

          Hope that clarifies a bit. By the way, I am having the same problems with Adobe TV as everyone else is (crashes, double sound when switching to full screen, buffering and navigation issues).

          • imajez — 4:21 AM on October 28, 2010

            Peter – my post post was more more in response to Mario’s asking the programme to be more Mac like. But as Apple [& PC] software is anything but consistent when it comes to the UI – that’s not so straightforward. Not to mention Apple may at any time change anything they want to with informing software developers such as with the sudden Caron/Cocoa switch around a few years back derailing many software updates.
            Adobe software is designed for both platforms so should be more consistent between both of them, rather than be like than the constantly varying flavours of either platform. Don’t forget that people may not be using the latest OS or may keep their apps whilst upgrading their OS.

            Personally, I’d rather a programme was developed to best suit its own specific role and not adhere to a vague + generalised OS design ethos [Mac or PC] Some programmes are nothing like the UI standard – Traktor and Ableton Live for example and are are much better for it in my view as they are not compromising their design to be like other Mac or PC software.Not to mention both Apple and MS have varying interfaces for their own products. Though being different for the sake of it is not good design, such as some of LR’s quirks attest to.
            The example you gave of ‘good’ designs for the are the sort of Mac programme UI I dislike, as they either copy the simplistic and crippled Finder or add trendy + stupid things like translucent elements to the interface.

            Not sure why you think FW’s panels are non standard and PS’s are, as PS panels have also been Flash based for a while. Nor have I’ve not noticed any difference between their behaviour, but I’m not a big user of FW.
            As for a Mac update breaking Flash panel interfaces – seeing as Apple are trying to kill off Flash, I wouldn’t be at all surprised if this was another part of that childish strategy.

  • Ben Hansen — 1:42 PM on October 26, 2010

    hells yeah! how long have we been waiting on this one?

  • Daniel — 2:53 PM on October 26, 2010

    Will it be possible to enable touch gestures?

  • SBG — 3:10 PM on October 26, 2010

    Sorry, but Catalyst has given me an extremely strong instinctive aversion to anything that looks like it or brings back the memory of using it. I’m sure that, to the more code oriented people, it seems silly but if I have a strong negative reaction to the user interface of a product, there’s not much chance I would ever use it. I really hope you guys abandon these visual design conventions sometime soon.

  • TJ Downes — 3:47 PM on October 26, 2010

    Looks very much like Flash Professional. Our course, that is probably expected since this seems geared toward those same users rather than hardcore programmers.

    I am certain this is a good step for Adobe to target those users and allowing them to use those same skills to create HTML5 content.

    I would be hesitant to say that the timing is good. It seems very premature given that the HTML5 spec wont be complete for some time and isn’t recommended for production use. To me, it seems like it will encourage users to implement production code that doesn’t yet meet the criteria for standard code.

  • Thomas — 4:03 PM on October 26, 2010

    Goodbye Flash … not at all.
    “Create Symbol” sounds familiar :)
    Really, Adobe please, i cannot see these interfaces anymore. Buttons, Panels, Timeline … What is so bad about the HUD concept? They even use it in cars, so information/navigation/tools, everything is right there: in front of your eyes.
    Save working space instead stuffing it with tiny buttons and Adobe fashioned tiny sliders.
    I’m full of those panels.

    Even Flash still looks like Macromedia Director and i’m afraid that Adobe is afraid to take new ways of innovative and ergonomical UI redesing because they still think that their invented UI design is bulletproof.

    With every day I’m getting more and more tired using PS, Ai, Ae and Lightroom especially working on hi-res dual screens for long hours.

    http://7tattoo.files.wordpress.com/2010/04/4271592658_bcb4a97ef0_o.png

    • imajez — 5:23 PM on October 27, 2010

      HUD – used as marketing BS for floating palettes cluttering up workspace, a bit last century in my view.
      And overlaying stuff by using transparency as done in some OS/programme chrome is not really a good idea outside of movie/TV art directors fancy tech bling. Would you read a newspaper or magazine printed on acetate as opposed to an opaque material?

      As for the symbol concept – it’s not exactly unique to Flash and when it comes to the web it’s a really handy way of reducing file size as well as being a useful tool.

      • Thomas — 9:30 AM on October 28, 2010

        cannot agree.
        if you work with apple motion you can clearly see the benefits of HUDs (floating palletes as you call them).
        It does not necessary has somthing to do with “Apple Like Design” so many are moaning about. Its about usability and ergonomy having the tools and commands right there just when i need them and not residing permanently on the workspace open or collapsed.
        The graphic with the visualized cursor paths i have linked shows exactly the problem where you spend most of the time fiddling around – in PS it’s the Layer Panel.
        However, i do not work for Adobe and they will do what they think it’s best anyway.
        As i have said long ago, Adobe need some “real world users” sitting in their headquarters for quality control, so they can watch them over their shoulders and see exactly what works and what not. Working out new perspectives of usability and ergonomical UI.

        [If you like HUDs, see the just-launched Project Rome. It’s all HUDs, all the time. –J.]

        • Thomas — 8:05 PM on October 29, 2010

          [If you like HUDs, see the just-launched Project Rome. It’s all HUDs, all the time. –J.]

          Great! Now Port Photoshop in the same way online (the old idea from the drawer) and I’ll never again have to worry about my settings and workflow if working on alien desktop machines :)

          Time will tell, because: Rome wasn’t built in a day.

  • JP — 6:01 PM on October 26, 2010

    Ummm. Wish I could watch this but the video freezes my browser.

  • JP — 6:10 PM on October 26, 2010

    Please post text transcript or upload to YouTube. This particular Flash instance freezes my browser.

  • anonymous coward — 6:25 PM on October 26, 2010

    what a piece of shit — looks like the old timelines in dreamweaver that was yanked and put back in. another tool in the suite that does a tiny, tiny thing while the rest of the suite gets worse and worse and more and more bloated. sorry john. i hate adobe more and more every day.

  • James — 6:34 PM on October 26, 2010

    anonymous coward…your English suck like EDWM language.

  • Rich Morey — 7:54 PM on October 26, 2010

    Will this become part of Dreamweaver and/or Flash?

  • JC — 9:17 PM on October 26, 2010

    I’m with JP. Adobe TV videos always… ALWAYS crash my browser! The only videos that I come across that do it.

    I use Firefox, but I just tested it in Safari and instant beach ball there as well.

    Please Adobe, fix this… it is just sad.

    [I’ll ask the Adobe TV team to investigate. –J.]

  • Christopher Anderton — 11:15 PM on October 26, 2010

    Geeez. It’s a PROTOTYPE to show some core tech guys! Having problems with your hearing?

    • Thomas — 1:22 PM on October 27, 2010

      Yes, everything started with a prototype and 80% ended up in the final product.
      See what SBG wrote about Catalyst, and its 100% true.
      Adobe claimed an still claims to keep UI and usability consistent trough products from which (at least) expected Adobe graphics applications (PS, AI, ID, FW, …) will be consistent throughout which they aren’t.
      Let alone After Effects, which is one of the worst UI crash if spoken in terms of ergonomy and usability.

      I can only guess why this happens at Adobe. Maybe because the teams are terribly stuffed and focused on their particular product – now even more if production cycles get shorter and shorter – that they get everything else around out of focus.
      Actually here comes the Product Manager into play to pay attention to the environment of his product, to talk to ALL the teams in its company worldwide, listen to their ideas, giving alternatives room and to keep in focus what the consumer/user out there really needs and wants.

      Lightroom is maybe the best example of a new born, young product out on the market which is still unripe and it proves that a failed ergonomic UI design and usability has nothing to do with “working on existing UI design on “Veteran Software” is difficult” because they have to keep “consistency” since version 1 so that “old users” won’t get confused with a “brand new” UI!?
      I think that the UI designers are getting “old”.

      Don’t get me wrong, I’m not ranting about the technology or the engine itself, quite the converse, i respect the core work, it’s just regarding to UI and usability because it feels a bit like someone is trying to reinvent the wheel but creating cubic tires in the end.
      That’s no vehicle for a ride into the future for someone who really cares about content AND character.

      • Adobe UI Gripes — 2:28 AM on October 28, 2010

        “Let alone After Effects, which is one of the worst UI crash if spoken in terms of ergonomy and usability.”

        I’d have to disagree, it might not look native at all but the interface is the most solid of the lot. Compare the timeline and filter controls in AE to Flash… makes Flash look like a horrible cruel joke on the user.

        Also After Effects is the most stable Adobe app ever and even tries to rescue your file when it notices its crashing.

        • Thomas — 9:45 AM on October 28, 2010

          It’s not about the “native” LOOK.
          It’s all about usability and ergonomic issues including the views, tools, 3D gizmos, mask vertices, et cetera.
          If you’re sitting for 12 Hours (Probably longer) in front of Ae, single or dual screen, mouse or tablet, doesn’t matter, you’re pretty f***ed afterwards. Physically as mentally.
          It feels like nothing is on the right place there. Very unflexible custom UI configuration that fit a users personal needs.

          And for the crashing: i expect a software which is properly installed on well configured machine NOT TO CRASH. Especially a sopftware which has 17 years on it’s back.
          Rewind to the earlier versions back to the very end of the ninetees (that’s slightly over 10 Years for now). The Look might has changed, but I don’t think that the core concept of the UI has changed at all.
          That’s why people never think of complaining about UI, because the don’t know better.

  • JP — 4:22 AM on October 27, 2010

    Right. Details. Safari 4.0.3 here on PPC G5 dual 2.0 10.4.11

    Not a new set-up, but not old enough to warrant proper Flash video support, either.

    No problems viewing Flash videos on YouTube or on other blogs and sites.

  • Franco — 6:04 AM on October 27, 2010

    This video does not playback in Explorer 8. Shame, I’d really like to see it.

  • PeterK. — 7:18 AM on October 27, 2010

    Using firefox 3.0.19 under Mac OS 10.4.11 and it crashes firefox after I click to play the video

  • Pedro Estarque — 8:08 AM on October 27, 2010

    AdobeTV doesn’t crash here, but it has serious problems with buffering, playing, stopping, advancing, etc.

    I was unable to watch this video embedded because there were two audios of the guy’s voice overlapped. One of them keeps playing even if you hit “pause”.

    I managed to watch it in its original page though.

  • Hellen T — 11:53 AM on October 27, 2010

    Why not just work on Flash Pro so that when it comes to package your project you can choose to have it create an HTML 5 project or a Flash Project. No new anything to learn on the user side – the engineers just figure out how to make it happen (like magic!)

  • FataL — 12:53 PM on October 27, 2010

    This is prototype of CSS3 authoring tool, it has nothing to do with HTML5 (just yet?).

    HTML 5 is new Web 2.0?

  • Kindergarden Satan — 1:03 PM on October 27, 2010

    Hey, I’m also having a problem with video, once I hit play button I somehow have two audio tracks going simultaniously, with, say, 5 seconds lag.

    Safari 4 on Mac.

    • Rob R — 2:08 PM on October 27, 2010

      Same audio doubling problem here on Safari 4.

      • imajez — 5:25 PM on October 27, 2010

        It also happened to me whilst using Chrome 7.0.517.41 in OSX 10.6.3. A reload of page cured it.

  • Moises — 10:54 AM on October 29, 2010

    same here! I hear 2 tracks! imposible to listen…

  • George Horst — 8:39 AM on October 31, 2010

    Leave AE interface alone. Everyone seems to think they can do better – post it here first and let us tell you how bad your ideas are!

  • Nathan — 8:38 AM on November 05, 2010

    Would this be slated to replace the Timeline features in Dreamweaver (if/when it rolls out)?

    It is interesting how the ideas from Flash are being reused: timelines, symbols, etc. How much research is being done to see if these ideas map cleanly without MovieClips, Sprites, and the like?

  • Don Earl — 1:34 PM on February 10, 2011

    Video plays just fine for me. Of course, I’m not using a Mac though. Firefox and Winows 7. I agree with Hellen T about just making it so Flash can output to either Flash or HTML5. Author once, publish for all platforms.

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)