Well I have officially coded my design comp for my first sharepoint demo site.

The Photoshop Comp

The Results of my HTML Coding.

Seeing that I am doing this for SharePoint I decided to tackle my HTML with SharePoint Designer.

The official blurb from Microsoft.com wraps it up nice and vaguely =)

Office SharePoint Designer 2007 provides you with tools to automate your business processes, build efficient applications on top of the Microsoft SharePoint platform, and tailor your SharePoint site to your needs, all in an IT-managed environment.

I know that SharePoint Designer is a full solution for SharePoint development and content editing, but at this point in the game I’m using her strictly for HTML development.

When coding in HTML i believe in doing it the right way. Unfortunately (Or fortunately as I see it) this means WYSIWYG is out of the picture. I hand code everything. In the past I have used DreamWeaver, but today that’s not in the bag. As you can see. The Demo Site I coded is XHTML 1.0 Strict! (valid HTML).

It’s also important to take note that I assumed SharePoint Designer was Visual Studio 2008’s HTML editor stripped and stuck into Another App, but it’s not. It looks the same but there is subtle and extreme differences. Don’t be fooled!

The first look and comparison.

As you can see. Both look simple enough.

Each have

• Syntax Coloring
• Line Numbers
• File Navigation
• Code hints
• Auto Completion
• WYSIWYG (Never used it, don’t ask)

Everything else is over and above the features I would use in a typical hand coding session. I don’t like the buttons you push that sticks in pre made tags.  Any part of the IDE that inserts or alters my code in any way is risking my page and it’s chances of passing validation. Microsoft products are notorious for this. Especially in WYSIWYG and the ASP.Net HTML controls.

Off the top of my head. Things that Microsoft loves that aren’t valid.

• Uppercase tags (<DIV></DIV>)
• No quotes on attributes (<div id=tom rocks></div>)
• HTML tags aren’t properly constructed (<br> instead of <br />)
• Tags are grandfathered (<b> instead of <strong>)

The Verdict?

CSS Inteli Sense

Intelisense is something I have always loved in ASP.Net coding. Any developer would agree that it’s one of their favorite features in Visual Studio. It’s partly the reason the I fell in love with DreamWeaver when it first came out. It’s code completion for HTML and CSS was astounding. I loved it.

Typical code completion.

SharePoint                      DreamWeaver

but I found that SharePoint Desinger had great intuition in a couple of other situations. Take CSS for example. If I was coding CSS to alter a specific Child Element of a parent with an ID. SharePoint Designer would give me a list of all child elements of that parent element. VERY COOL!

See how all the child elements are listed? So useful!

Validation Tips!

You can’t put nested Style tags in HTML for XHTML strict? THANKS!

Don’t get me wrong. DreamWeaver has validation. but it’s a tool you run every once and a while. The results are shown in a list. I never use it. This just adds error lines under the wrong tags (Just like when coding in Visual Studio).

Tag Erros!

As you are typing along there is always checks going on behind. Have a look here. Because one <ul> tag is broken the IDE tells you multiple spots this affects other tags.

The Error Messages

Conclusion

I was really surprised with my results. I like HTML coding. I find it to be challenging. I never use cross browser hacks. I never use IE if cases. My CSS is solid across Firefox, IE, Safari and Chrome. I guess the point I’m trying to make it this… I’m a solid HTML coder that sticks to his tools and knows what’s useful and what’s not when it comes to advanced coding in an IDE.

When I was recommend to try SharePoint Designer 2007 I laughed hearing that it was the new front page, but what I got was a rock solid HTML coding textpad with perks. Just the way I like it.  I’m astonished to see the amount of work gone into just the source code editing.

If you take home anything… I hope that maybe I’ve opened your eyes, or maybe make you second guess your preconceptions on SharePoint designer.

… A couple ‘hope to have improvements’ in the future from my perspective

Taking what I love from each of the IDEs I use on a weekly basis (VS 2008, DreamWeaver, SQL Manager) here are some things I think would really put SharePoint Designer on the top as far as hand coding goes.

• Intuitive tag closing. In DreamWeaver if you make a <div> opening tag. It won’t auto make the closing tag (It does in SPD2007 but you can turn it off). You can type in content and then just type “<” and the IDE will know what tag to close it with.
• Javascript Debugging. It’s in VS 2008. Would be nice to have it in SPD.
• Integrated Development Server. I know this might be a big one, but sometimes URL’s break when testing on a local file system because of root pathing.. EX “/css/file.css”
• jQuery (or other frameworks) and Javascript intellisense. Would be awesome.
• CSS intellisense in EXTERNAL css files. Not just header style tags.
• I miss my code collapse. and i would nice to have it intuitive to the closing tag of my current element.
• I like how some IDE’s will bold or highlight the closing tag of your current tag.
• Code bookmarks and maybe something like Region tags in VS.
• The Tabbed interface in SharePoint Designer is nice. but you can’t reorder tabs. The are stuck in the order you opened them in.
• Cascade your tabs to open side by side.

This entry was posted on Tuesday, September 30th, 2008 at 3:46 pm and is filed under CSS, JavaScript, SharePoint 2007, html. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.