3 ms·

I didn't realise styling a website is difficult? Are you saying you couldn't style a website to look like cappacinnos given firebug and a few hours?

by trapper 17y ago

midnightmonster 17y ago
Quite possibly not. We're not talking about styling the marketing website, but the UI of a web app. There probably won't be the right HTML hooks generated for starters, and then making it look like a cappuccino app in one state is well and good, but there are highlights, slides, toggles, and likely a subtly different style of interaction as well.
- trapper 17y ago
  Well, I've at least styled a gwt app to be very similar in a short period of time. Usability was left to the developers. I think I might have to post a tutorial.
  - trapper 17y ago
    Proof: http://tinypic.com/r/2uym3is/5 http://tinypic.com/r/2uym3is/5 Of the two hours it took to create that, most was spent making a video, learning gwt 1.6 and downloading images from 280north (they make it hard).
    - midnightmonster 17y ago
      Wrote this before you posted your demo: -------------- 280slides has such a polished theme that I think it would take some significant time to duplicate. It's not one thing--it's every thing. You might be able to get something close quicker, but I suspect it would look like I-wish-I-was-280slides. Still, from what I know of GWT (no direct experience) and cappuccino (tried it out, seemed to make lower-level DOM wrangling very hard, which was absolutely essential to the project), you're working at a higher level of UI abstraction than I yet have. With jQuery UI, I'd have to add tons of markup to my dialogs (e.g.) to implement the 280slides look, and there's no one place to do it. So, post a link to your 280slides-like GWT app and/or write that tutorial, and I may well have to admit that you are faster than I and/or have more powerful tools (likely both). And now I have to say: ----------------------------- Well no kidding it doesn't take long to borrow someone's images and arrange a few in a way that more or less looks like the original. But (not to put too fine a point on it) your demo looks very, very rough, and 280slides looks like the best-looking app you've ever used. Your buttons aren't spaced right; they look wrong in hover state; they look wrong in active state. The dialog doesn't really look anything like a 280slides one apart from having a shadow (nor does it look very good on its own merits). And that's just what I can see in a tiny, compressed video of the little bit that you built. You might still be faster than me and have better tools, but you didn't prove it here. OTOH, if you could produce something with the polish 280slides in two hours you'd be more than fast--you'd be able to rewrite the matrix from within.
      - trapper 17y ago
        The demo may have looked rough because it was recorded in some weird format. The images used were the same as 280, so it can't have looked too much different - here, take a look at this comparison: http://i42.tinypic.com/2rqmx3o.jpg http://i42.tinypic.com/2rqmx3o.jpg Here is another version done with some different images I hacked up quickly: http://i43.tinypic.com/x5wjdt.jpg http://i43.tinypic.com/x5wjdt.jpg Obviously I could spend another hour fixing pixels. But that wasn't the point. The point is that GWT can be styled just like every other browser application/website, and it's trivial to do, just like it is for any other framework. If I can do this in a few hours everyone else can too.
        boucher 17y ago
        This is incredibly naive. If you think all of 280 Slides is two toolbars and a dozen or so icons, then you have missed the point. Even the point you are trying to make is invalid, because this is perhaps 2% of the layout involved in 280 Slides completely ignoring all the interaction.
        trapper 17y ago
        I never said that. The claim was that styling a gwt app is simple. "GWT is just html.Taking cappaccinos style and porting it to gwt would only be a couple of days work, if that." I never claimed that their interaction was easy to clone.
        tolmasky 17y ago
        I find it hard to believe that this point even has to be made, but there is a difference between designing something and implementing a design. There is also a difference between UI look and UI behavior. By replicating the 280 Slides look (by copying its existing design and images), the best you could do is prove that GWT makes it easy to implement a design, but I do not believe that even this was done in the demo you made. 1. I'm not sure what exactly is impressive about this demo, you have a couple buttons which pop up a window that has dummy content in it, and then expect people to think that it proves that making something that looks and behaves like 280 Slides is easy. For starters, this is the least impressive portion of 280 Slides. I don't for example see a slide navigator which shows a tiny version of the working area, and I also don't see a working area that has vector properties that works in all browsers. These are the components which would be hardest to build without Cappuccino in my opinion. I'm not sure even the toolbar works like the one in 280 Slides. For example, when you make the window too small does it auto place the items that aren't visible into a menu on the right based on their priority of importance? If your point was simply that you can make buttons with custom images in GWT, then I guess you've succeeded. 2. Beyond this, designing itself is also quite difficult, which I hope is not something we have to argue about, since to say otherwise would be to invalidate the designing profession as a whole. One thing we are trying to do with Cappuccino is provide a good set of base artwork and a HIG that will make this easier for people who can't afford a real designer. Large portions of this work will of course be usable outside of Cappuccino since we are making them open source, but others will be much easier as they will be built into Cappuccino.
- trapper 17y ago
  Sorry to reply again, but this bugs me. Go to 280slides.com and tell me: what would you say is the hardest part about replicating the style of that site? Keep it specific (e.g. dialog borders or listbox), I'd like to know. I'm obviously missing something.
  - jojule 17y ago
    Take a look of Vaadin Reindeer theme: http://dev.vaadin.com/svn/versions/6.0/WebContent/VAADIN/themes/reindeer/ http://dev.vaadin.com/svn/versions/6.0/WebContent/VAADIN/the... You just can not write something line that in few hours...

I didn't realise styling a website is difficult? Are you saying you couldn't style a website to look like cappacinnos given firebug and a few hours?

by trapper 17y ago

I didn't realise styling a website is difficult? Are you saying you couldn't style a website to look like cappacinnos given firebug and a few hours?

midnightmonster 17y ago

Quite possibly not. We're not talking about styling the marketing website, but the UI of a web app. There probably won't be the right HTML hooks generated for starters, and then making it look like a cappuccino app in one state is well and good, but there are highlights, slides, toggles, and likely a subtly different style of interaction as well.

trapper 17y ago
Well, I've at least styled a gwt app to be very similar in a short period of time. Usability was left to the developers. I think I might have to post a tutorial.
- trapper 17y ago
  Proof: http://tinypic.com/r/2uym3is/5 http://tinypic.com/r/2uym3is/5 Of the two hours it took to create that, most was spent making a video, learning gwt 1.6 and downloading images from 280north (they make it hard).
  - midnightmonster 17y ago
    Wrote this before you posted your demo: -------------- 280slides has such a polished theme that I think it would take some significant time to duplicate. It's not one thing--it's every thing. You might be able to get something close quicker, but I suspect it would look like I-wish-I-was-280slides. Still, from what I know of GWT (no direct experience) and cappuccino (tried it out, seemed to make lower-level DOM wrangling very hard, which was absolutely essential to the project), you're working at a higher level of UI abstraction than I yet have. With jQuery UI, I'd have to add tons of markup to my dialogs (e.g.) to implement the 280slides look, and there's no one place to do it. So, post a link to your 280slides-like GWT app and/or write that tutorial, and I may well have to admit that you are faster than I and/or have more powerful tools (likely both). And now I have to say: ----------------------------- Well no kidding it doesn't take long to borrow someone's images and arrange a few in a way that more or less looks like the original. But (not to put too fine a point on it) your demo looks very, very rough, and 280slides looks like the best-looking app you've ever used. Your buttons aren't spaced right; they look wrong in hover state; they look wrong in active state. The dialog doesn't really look anything like a 280slides one apart from having a shadow (nor does it look very good on its own merits). And that's just what I can see in a tiny, compressed video of the little bit that you built. You might still be faster than me and have better tools, but you didn't prove it here. OTOH, if you could produce something with the polish 280slides in two hours you'd be more than fast--you'd be able to rewrite the matrix from within.
    - trapper 17y ago
      The demo may have looked rough because it was recorded in some weird format. The images used were the same as 280, so it can't have looked too much different - here, take a look at this comparison: http://i42.tinypic.com/2rqmx3o.jpg http://i42.tinypic.com/2rqmx3o.jpg Here is another version done with some different images I hacked up quickly: http://i43.tinypic.com/x5wjdt.jpg http://i43.tinypic.com/x5wjdt.jpg Obviously I could spend another hour fixing pixels. But that wasn't the point. The point is that GWT can be styled just like every other browser application/website, and it's trivial to do, just like it is for any other framework. If I can do this in a few hours everyone else can too.
      - boucher 17y ago
        This is incredibly naive. If you think all of 280 Slides is two toolbars and a dozen or so icons, then you have missed the point. Even the point you are trying to make is invalid, because this is perhaps 2% of the layout involved in 280 Slides completely ignoring all the interaction.
        trapper 17y ago
        I never said that. The claim was that styling a gwt app is simple. "GWT is just html.Taking cappaccinos style and porting it to gwt would only be a couple of days work, if that." I never claimed that their interaction was easy to clone.
      - tolmasky 17y ago
        I find it hard to believe that this point even has to be made, but there is a difference between designing something and implementing a design. There is also a difference between UI look and UI behavior. By replicating the 280 Slides look (by copying its existing design and images), the best you could do is prove that GWT makes it easy to implement a design, but I do not believe that even this was done in the demo you made. 1. I'm not sure what exactly is impressive about this demo, you have a couple buttons which pop up a window that has dummy content in it, and then expect people to think that it proves that making something that looks and behaves like 280 Slides is easy. For starters, this is the least impressive portion of 280 Slides. I don't for example see a slide navigator which shows a tiny version of the working area, and I also don't see a working area that has vector properties that works in all browsers. These are the components which would be hardest to build without Cappuccino in my opinion. I'm not sure even the toolbar works like the one in 280 Slides. For example, when you make the window too small does it auto place the items that aren't visible into a menu on the right based on their priority of importance? If your point was simply that you can make buttons with custom images in GWT, then I guess you've succeeded. 2. Beyond this, designing itself is also quite difficult, which I hope is not something we have to argue about, since to say otherwise would be to invalidate the designing profession as a whole. One thing we are trying to do with Cappuccino is provide a good set of base artwork and a HIG that will make this easier for people who can't afford a real designer. Large portions of this work will of course be usable outside of Cappuccino since we are making them open source, but others will be much easier as they will be built into Cappuccino.
trapper 17y ago
Sorry to reply again, but this bugs me. Go to 280slides.com and tell me: what would you say is the hardest part about replicating the style of that site? Keep it specific (e.g. dialog borders or listbox), I'd like to know. I'm obviously missing something.
- jojule 17y ago
  Take a look of Vaadin Reindeer theme: http://dev.vaadin.com/svn/versions/6.0/WebContent/VAADIN/themes/reindeer/ http://dev.vaadin.com/svn/versions/6.0/WebContent/VAADIN/the... You just can not write something line that in few hours...