Design

rubyonrails-talk
1

Hello;

I wonder what you guys out there are using to generate the extra html and css to make your web pages look great once you have the backbone of the app up and running with RoR ?

Agile web development with rails is great but the agility needs to continue when the time comes for make up.

I know there are a zillion tools out there but hey, I just wanted to find out what the community is doing about it.

I’ll let you know about my approach after I get some replies.

Thanx

K.Pince

2

Uh, a "text editor"? :slight_smile:

3

If you want to have fancy looking web pages (and customers do, by the way) it takes too long to get it together with a text editor.

4

If you want a performant, well structured and easy to maintain web application, you HAVE to put it together with some kind of text editor. And in fact, just using TextMate and it’s autocompletion and macros, everyone who has decent HTML+CSS knowledge will be able to assemble a well designed page very quickly, whether you start from a Photoshop mockup or not. Any dedicated and respected web agency these days “handcodes” their designs.

But hey, if table-based design or table-based design where is replaced with

is your kind of thing, go ahead and use Dreamweaver, Frontpage or Microsoft Word. You’re going to hit a concrete wall when you actually have to make those designs dynamic (with any web app language for that matter) and your pages will have more body than most ppl who had Thanksgiving yesterday.

5

Thanks for the insight.

6

If you want a performant, well structured and easy to maintain web application, you HAVE to put it together with some kind of text editor. And in fact, just using TextMate and it’s autocompletion and macros, everyone who has decent HTML+CSS knowledge will be able to assemble a well designed page very quickly, whether you start from a Photoshop mockup or not. Any dedicated and respected web agency these days “handcodes” their designs.

But hey, if table-based design or table-based design where is replaced with

is your kind of thing, go ahead and use Dreamweaver, Frontpage or Microsoft Word. You’re going to hit a concrete wall when you actually have to make those designs dynamic (with any web app language for that matter) and your pages will have more body than most ppl who had Thanksgiving yesterday.

Peter, I tend to use Fireworks CS4 to slice up the PSD to generate HTML, CSS, and images. This gives me the initial cut of the design in HTML and CSS. Then I’ll use both Dreamweaver CS4 and Textmate. Dreamweaver has embedded the WebKit engine so that I can see the changes to my site code without opening a browser. Thus, I tend to do most of the CSS and HTML in it. Next, I use Textmate mostly for the RoR and Ruby specific things because Dreamweaver provides the ability to invoke Textmate from DW.

In short, I use the best tool(s) for the job and I haven’t hit any walls but leveraged other toolsets.

-Conrad

7

Hello;

Great post from Conrad ! Thanks !

I have also been using textmate to do the HTML and CSS but started using the Adobe products lately which speeds things up quite a bit. Agile development turns non agile once you’re finished with the modeling and all the back end biz if you’re not using a good tool for the presentation layer.

I found out that there was an extension for DW once which enabled you to edit all ruby files within DW including code completion support but I couldn’t get it to work with the latest release.

K.Pince

8

Yes, but even then you are handcoding most of the page in Dreamweaver, aren’t you? It basically means you have a very expensive handcoding IDE (but the price of course justifies itself if it makes you more productive, it doesn’t for me, even though I had to use Dreamweaver for years, so I know my way around).

Depending on the project, I’m also using Fireworks to slice up the graphics. Most projects we do however tend to be about structure first, having to keep in mind how the data will flow in it and make sure either Rails or Javascript will easily be able to push the data in, i.e. the HTML needs to be very straightforward. Doesn’t mean the final result isn’t graphically impressive.

However, the code that Dreamweaver generates as a pure WYSIWYG editor is just horrendous, especially in the hands of a designer who doesn’t grasp HTML+CSS in the slightest. Yes, the result renders, but having to work with the generated code for creating dynamic pages is a real pain.

Hope this clears things up a bit.

Best regards

Peter De Berdt

9

If you know HTML and CSS a text editor *is* a "good tool"; personally I'd say it's the /best/ one :slight_smile:

YMMV,

10

Peter, I tend to use Fireworks CS4 to slice up the PSD to generate HTML, CSS, and images. This gives me the initial cut of the design in HTML and CSS. Then I’ll use both Dreamweaver CS4 and Textmate. Dreamweaver has embedded the WebKit engine so that I can see the changes to my site code without opening a browser. Thus, I tend to do most of the CSS and HTML in it. Next, I use Textmate mostly for the RoR and Ruby specific things because Dreamweaver provides the ability to invoke Textmate from DW.

In short, I use the best tool(s) for the job and I haven’t hit any walls but leveraged other toolsets.

Yes, but even then you are handcoding most of the page in Dreamweaver, aren’t you? It basically means you have a very expensive handcoding IDE (but the price of course justifies itself if it makes you more productive, it doesn’t for me, even though I had to use Dreamweaver for years, so I know my way around).

No, most of the hand coding is actually happening in Textmate. DW allows me to use Textmate as the code editor. Next, Web Developer Premium is part of my development toolbox and it has paid for itself many times over. Furthermore, CS4 suite of tools

is cheap compared to my license for Autodesk Maya and Mathematica. BTW, I work as a computer scientist in the areas of AI, Animation, VR, and Web.

Depending on the project, I’m also using Fireworks to slice up the graphics. Most projects we do however tend to be about structure first, having to keep in mind how the data will flow in it and make sure either Rails or Javascript will easily be able to push the data in, i.e. the HTML needs to be very straightforward. Doesn’t mean the final result isn’t graphically impressive.

I have learned how to generate a semantically structured HTML + CSS out of Firewroks and I can usually have a working prototype up in a short amount of time. I have learned a lot of tricks and shortcuts from some of the masters. It’s about

knowing how to properly use your tools and to apply the right tool for the job. Our goal is usually to get it working because

the our clients really do not care what use and how you use it. They simply want a solution. Some projects I have implemented the in Smalltalk or Lisp because it was much more productive in those languages to get the job done.

However, the code that Dreamweaver generates as a pure WYSIWYG editor is just horrendous, especially in the hands of a designer who doesn’t grasp HTML+CSS in the slightest. Yes, the result renders, but having to work with the generated code for creating dynamic pages is a real pain.

Yes, I agree with you 100% because the various Javascript generators within DW tend to place code in your well formed XHTML instead of a .js file or both. Thus, I tend to stay away from them most of the time within DW. However, the HTML + CSS export feature in Fireworks does exactly what you want it to do because if you slice your PSD in a structured manner, then the HTML + CSS looks very nice. In short, you should enjoy using the tools/technologies at your disposal and also try to learn about new ones when you can. It simply makes for a well rounded software developer in my opinion.

-Conrad

11

Thanks everyone for the positive input…

This is exactly why I love this group. If you’re not clear on something you post it, get your replies and it becomes clear.

K.Pince