close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Standards Complient / Clean Code

Thread began 6/04/2009 4:27 pm by robert222776 | Last modified 5/26/2010 5:25 pm by Eric Mittman | 4643 views | 11 replies |

robert222776

Standards Complient / Clean Code

I noticed that the demo inserted a lot of span tags and inline (class) styles when viewed in source view. Since I always use code view in Dreamweaver, I do not typically use extra tags like this.

1. I am not that familiar with CMS in general, but is this typical?

2. If the site as launched meets W3C standards, and is semantically correct with clean code, and styled with multiple, browser specific external style sheets, is the integration with EM CSS Sculptor tight enough not to allow the generation of a lot of non-standard, cluttered code?

3. I also noticed in the demo, going between source and page views, that the code collapses and wraps making it harder to read in source view. If I open the page in Dreamweaver after editing in PowerCMS, is that how the code will look?

Sign in to reply to this post

Joe Lowery

I think you're right. We should have paid more attention to the underlying code in PowerCMS; we definitely should have avoided the inline styles and probably a number of the span tags. Although it's all proper HTML/CSS, it's not best practice and we'll do a more throrough code review in the next releasees.

That being said, keep in mind that the pages included in PowerCMS and on view in the demo are administrative in nature and not public-facing that need to be crawled by SEO, etc. You won't run into any problems with loading or cross-browser compatibility. Not to excuse the overuse of inline styles, but with any coded solution, any power coder is going to find sections that are not done the way he/she would have done it.

As for Dreamweaver representation in code view, it looks pretty standard to me. I'm not sure what you're referring to as "code collapses and wraps", but I don't see any of that outside of the normal word wrap (when toggled on). Naturally, you can always hit the Apply Source Formatting option in the Coding toolbar to reformat according to your preferences.

Best - Joe

Sign in to reply to this post

robert222776

Thanks Joe.

With regard to "code collapse" I did not mean in the Dreamweaver sense where the code can be made to "disappear". What I meant by code "collapses and wraps" was that when I was in source view in the demo, I added some space/blank lines between div tags, put the heading tags on their own line, etc. to make it easier to read in source view, all while not changing how the design or preview page appears. Going from my "readable" source to design view back to source view undid all my spacing, and returned the code to it's original, less readable state. Granted clients will probably never do this, but I was just curious how PowerCMS would deal with my changes.

Are you saying that there is a "Source Formatting option in the Coding toolbar" of PCMS, that gives control similar to the code format preference in Dreamweaver? I did not see any reference to that in the PCMS toolbar. If that is the case, that this control exists somewhere within PCMS, then I as the developer can exert some control over how the code will appear after the client edits the page in PCMS.

I also noticed that when I change text color to red (or any non-black color) using the color picker on the PCMS toolbar, that rgb values were used in the code instead of the more common (in my opinion) hex number (that Dreamweaver uses when doing the same thing). Nothing wrong with that, but what was the thinking there? I know that Eric Meyer uses both formats interchangeably in his books.

Allso, if you could, please elaborate on the point Mark Fletcher made in the feature tour about PowerCMS integration with EM CSS Sculptur.

Thanks!
Robert

Sign in to reply to this post

Joe Lowery

Hey Robert -

Re: code collapse - no, you won't see anything like that with PowerCMS. We're not doing anything out of the ordinary on the code side. It should retain its readability.

Re: source formatting - I was referring to the Dreamweaver option that is on the Coding toolbar in CS3 and up. Same as in the menu, but quicker access.

Re: color picker. We use our iRite product to provide the HTML formatting capability in PowerCMS and iRite uses the FCKeditor 2.6 codebase. Evidently using the RGB values is a bug in that version and was fixed in a more recent version. We'll be updating to the latest FCKeditor code when we rev iRite (no time frame as yet, but it's in the queue).

Best - Joe

Sign in to reply to this post

Larry

I find that in Power CMS 2 the code is never in a readable state as Joe mentions in his post. I can go in to source view,(code view) format the code so it is readable just like in Dreamweaver, then switch the source view back Design view, and again switch back to source view, and the code is a big jumbled up mess again.

I also find that many times if I enter code in source view, switch to design view, and again back to source view, the code I entered is messed up and will never work.

I feel this could be a bug. Any comments on this?

Larry

Originally Said By: Joe Lowery
  Hey Robert -

Re: code collapse - no, you won't see anything like that with PowerCMS. We're not doing anything out of the ordinary on the code side. It should retain its readability.

Best - Joe  
Sign in to reply to this post

Eric Mittman

There are two setting within the CKeditor that control the formatting of the source. They are:

FCKConfig.FormatSource
FCKConfig.FormatOutput

By default these are set to false, you will need to udpate them to be true to get the source code to be properly formatted.

You will find these settings in several of the files, you can update it with a global find and replace. If you just want to update the formatting of the source code then you only need to update the FormatSource setting, if you would like to update how the output is formatted then you can update the FormatOutput setting.

for FormatSource, do a site wide find and replace with these values:

find:
FCKConfig.FormatSource = false

replace with:
FCKConfig.FormatSource = true

for FormatOutput do the same but look for these values:

find:
FCKConfig.FormatOutput = false

replace with:
FCKConfig.FormatOutput = true

Sign in to reply to this post

Larry

Hi Eric,

I seem to have answered my own dumb question, I did the global find and replace, it seemed that there were only 2 files that were involved with this, contents_update_ContentValue1.php
contents_insert_ContentValue1.php
After performing the global find and replace, I uploaded them to my live server and I must say, I was quite surprised to finally view formatted source code.

Thank you
Larry



Originally Said By: Eric Mittman
  There are two setting within the CKeditor that control the formatting of the source. They are:

FCKConfig.FormatSource
FCKConfig.FormatOutput

By default these are set to false, you will need to udpate them to be true to get the source code to be properly formatted.

You will find these settings in several of the files, you can update it with a global find and replace. If you just want to update the formatting of the source code then you only need to update the FormatSource setting, if you would like to update how the output is formatted then you can update the FormatOutput setting.

for FormatSource, do a site wide find and replace with these values:

find:
FCKConfig.FormatSource = false

replace with:
FCKConfig.FormatSource = true

for FormatOutput do the same but look for these values:

find:
FCKConfig.FormatOutput = false

replace with:
FCKConfig.FormatOutput = true  
Sign in to reply to this post

Joe Lowery

Whoops - forgot the PowerCMS / CSS Sculptor integration question. Basically, the thought was just that you could use CSS Sculptor to generate the front end pages for PowerCMS.

Best - Joe

Sign in to reply to this post

robert222776

Thanks Joe!

Sign in to reply to this post

robert222776

This issue has come up for me again in PCMS2. I notice that that image <img> tags for inserted images are not closed (i.e no..../>). Also, there appears to be <p> tags that are added surrounding the image tag, which are unnecessary, likely the result of using the enter key (not the mouse) to place the cursor where the image is to be inserted. The unclosed image tags are of course causing errors with the W3C validator. Can anything be done about this? Are these tag addition "instructions" coming from somewhere in the CMS code files that can be edited?

It seems a shame to work hard to write clean, standards complient code throughout the page/site, only to have the CMS add non-complient code. As a web developer, with my business identity at the bottom of every page, there is a presumption that I do not know what I am doing (by those who are familiar with web standards). In my opinion, in this competitive industry, one cannot afford to overlook anything that reflects poorly on the quality of one's work. Any thoughts (other than not putting my identity at the bottom of the page)?

Thanks,
Robert

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...