I wonder whether there is any good WYSIWYG editor when it comes to editing complex HTML pages generated from ASP.NET, PHP, GWT or anything else. I've tried a lot of WYSIWYG tools, but after a certain point I always end up with manually editing the HTML source code or CSS to fix different issues. The editors I've tried are never compatible with the ASP.NET/PHP/etc code I'm writing.
Edit: I have used Visual Studio for a few years to do ASP.NET development. After a while, it always comes to the point where I can't even open the pages and user controls because they rely on so many things which aren't available in debug time.
You're not going to get anything that is perfect. You're almost always going to have to tweak the mark-up by hand at least a little bit.
Your best bet would probably be Adobe Dreamweaver for PHP and Visual Studio (Visual Studio Web Developer Express is free) for ASP.NET.
I love VS, but I'd rather make sweet love to a hedgehog than use the HTML editor. Expression Web does a much better job editing HTML.
Personally I think that Visual Studio is the best for ASP.NET, although Expression Web also seems to be pretty good.
But I personally I think it's the best for you to start writing more code and using the WYSIWYG part less and less.
With Web applications it's all about the way they're displayed in the browser and I think that the browser is the tool which should be used for testing the GUI.
I agree, I have Expression Web right now and it works well. You can move stuff around in design view but will of course, as stated above, have to render the code manually. But it works if you wanna see the changes you have made. I would always of course view it in the browser and not just rely on the design view. Also W3Schools is a great tool.
WYSIWYG editors for complex web site/applications just never measure up IMHO.
The problem comes down to wanting control of the HTML/CSS markup, yet also the flexibility to create a GUI via drag-n-drop. (the 2 are almost polar opposites)
Take a very simple example.
In WYSIWYG mode, I type/create (pretend that World is on the line right after Hello (the Markdown editor forces me to add an extra line break)):
Hello
World
What HTML should the editor create?
Hello<br/>
<b>World</b>
<p>Hello</p>
<p><strong>World</strong></p>
<div>Hello</div>
<div><span style="font-weight:bold;">World</span></div>
<span class="abcNormal">Hello</span>
<br/>
<span class="abcBold">World</span>
(and a zillion more possibilities)
I still think the best thing you can have is an editor/IDE that understands your component/tags and provides auto-completion and code-assist/intellisense - paired up with a very quick deploy option to test changes ASAP in real browser(s)
Take a look at BBCode Editor
http://richtexteditor.com/demo/bbcode.aspx
This example shows a simple BBCode formatter for the Editor.
Related
I've got a prospect whose site was just built, but the forms don't work. The forms seem to be using a DW Extension. We don't build in DW, so I'm not familiar with how it works. If a site is built in DW, is it limited to only DW-related fixes/solutions?
Dreamweaver is just a GUI for designing and developing HTML (etc;) pages, sites.
Many devs actually utilize nothing more than an enhanced Notepad application (like Notepad++). Personally I consider Dreamweaver a crutch for people that develop in it from day 1, you take it away and they don't know anything because they rely on the program. Which is fine for most work until they run into issue where they have to solve a problem themselves.
I don't hate dreamweaver, I just don't use it as my Notepad++ is sufficient for all my PHP, HTML, CSS, JSP, etc dev
Extension
You probably mean, a javascript library of some sort to validate the forms? If so you could gut those out (or keep them) and use jQuery, or anything you are comfy with.
Yes, absolutely. Once Dreamweaver generates the code anyone who is familiar with whatever language it is in can work on the file. Dreamweaver itself is not required for anything, but if you do use it you can take advantage of the wizards and what not.
But any text editor can edit pages generated by WP.
One note of caution: DW uses regular expressions to check its code and look for patterns that correspond to the various wizards. If you edit the code, it may break that check and the behavior will no longer appear in the appropriate panel. Everything will still work fine but you will no longer be able to edit via wizards.
I still find myself hand coding Visual Studio projects more than using the variety of UI-driven menus and dialogs. For example:
web projects: hand code html/css in Source View vs dealing with the Design View / Properties Window
flushing out class files: code by hand using stuff like the prop-TAB-TAB Create Property keyboard shortcut and good ole Ctrl+[X|C|V] instead of the Class Diagram feature
Do I need to give the dialogs and menus another shot, or is this the current state of IDEs? Intellisense is the best thing since sliced bread IMO.
Steve
I'd be quite content to have Microsoft remove the design view from Visual Studio. I find myself cursing it every time I accidentally hit the button and wait ages for the broken rendering engine to kick in. This is from the perspective of a web developer mind you - I'm sure it's essential for developing windows apps.
Generally I think most of the RAD tools are not particularly useful, and in the long run end up being problematic as they're not very flexible. When developing web forms asp.net applications the listview and repeater are generally the only controls that I use. Hand coding html/css would be the preference for most designers anyway. Tools like Dreamweaver are nice initially when you're learning, but you do get to a stage where you realise you're using them as a glorified text editor.
Intellisense as you mention is utterly bad arse, and the one thing that I would miss if I switched to something like e or Textmate.
I am not a .NET programmer, and I understand Visual Studio does provide a lot of nifty code generation tools. However, I think it's rather important that a developer knows the code in his application. If you feel comfortable hand-coding it because you feel more in control that way, I don't think that should bother you at all.
Also, as someone who writes a lot of HTML/CSS by hand, I know that Visual Studio's Design View does not churn out 'quality' front end code a lot of the time.
I personally hand code html/css as well as my class definitions 99% of the time. Exceptions would be things that would be hard to hand-code otherwise (does anyone hand-code WCF proxies?)
It's all about YOU. What makes YOU more productive. What makes more scenes for YOU.
It's good to know and learn alternative ways to achieve your goal. You can give it try but if it slows you down return to the way YOU used to code.
I certainly find the the UI designer only works for the simplest of pages, and even for them only for a few design iterations. I find this for two reasons
1) When laying out a page, there are often several legitimate choices, and I don't like the choices VS makes. For instance, it will set the width of tables using pixel sizes, while for most fluid pages percentages make more sense. Nothing wrong with what it does, but for whatever reason I find myself fighting it more often than not.
2) It hard-codes a lot of style information, and even creates synthetic styles in an in-page style sheet. I'd rather have a concise and comprehensive CSS for the site as a whole, minimizing overrides on each page (or in each element!). Again, I fight it more often than not.
Well the designer for WPF/Silverlight is pretty cumbersome to use. So I pretty much hand code xaml and C#. At the moment I do not do much asp but with MVC, I would assume I would hand code that.
With visual studio having intellisense for a lot different syntaxes now, it is easier then ever to hand code, well, code. :) I mean intellisense works for C#, CSS, javascript, asp, and XML (if set up right). It is pretty easy to code now days. The youngsters have it so easy now days. They do not know how hard it was to code back in the day.
I'd say it absolutely, 100% depends on what you're writing.
If it's a basic CRUD interface for a simple database, then I'd say yes, 80% is way too much.
If it's a Web Application with plenty of JQuery UI and no persistent data source, then 80% is probably less than I'd expect.
As Vadium said, it also depends on what makes you more productive. Personally, I fly along with Intellisense, but I'm not too good on using UI tools to build an app.
I always feel dumber using Visual Studio, but I have to finish my project sometime this century to get paid.
Our organization has dedicated designers who design the page and cut it up in Dreamweaver. That's worked well in the past with ASP and PHP sites. Now we're trying to make it work with .NET, but are struggling because of the structure of a project in ASP.NET. How does everybody collaborate with developers? The specific points I am looking for are:
-Transferring Dreamweaver content to Visual Studio
-Changing HTML inputs to server controls
-Giving designer access to finished Visual Studio product so they can tweak layout
Thanks!
Obviously, there will be a slight learning curve for your designers. But with that said, I have worked quite often with designers (none of whom used Dreamweaver, btw, so that may be part of the problem) on asp.net sites. Usually, they will create the HTML exactly how they want it on the server like a static HTML page, then I will go in and replace form fields manually with asp.net controls.
On an aside, I have found that I have the best chance of matching the design using controls that spit out the least HTML, such as Repeaters instead of DataGrids.
Once the site is up on the server and programmed, they can go back in an tweak things if need be.
Also, just like we have to adapt to them a bit (making our server controls spit out html how they like it) they also have to adapt to us a bit and not rely as heavily on id attributes in their stylesheets as some items id attributes will be controlled by hte .net runtime since they are controls.
MOre often than not, a designer new to asp.net will feel very threatened by this new way of doing things, specially with user controls instad of include files, but its really not that different than classic asp/php development is.
The key to the solution of all your problems in this matter is quite simple, and yet so hard to fulfill: it's usually called semantic markup. If you can make sure that the designers to start with make their html semantic, and that the .Net programmers keep rendering the same markup but with their server controls where needed, the tweaking won't be a problem - the markup is the same.
So what is semantic html, then? you may ask. Well, it's not always as simple as one would like it to be. A good start is to make every page pass XHTML validation.
In my experience, designer-created HTML almost always needs to be at least refactored, if not rewritten. So, open a browser with the original HTML on the left, and try to match it as closely as possible in VS on the right screen.
Giving designers access to ASP markup is not a good idea, imho. Too much can go wrong if you only understand half of the tags you are manipulating.
How about using one of Microsoft Expressions line of products? I've heard they are to .NET what dreamweaver is to PHP/ASP.
I thought the web page designer screen in 2005 was mediocre until I used the one in 2008 which I think is bad. There is an interesting white paper here:
http://www.west-wind.com/weblog/posts/484172.aspx
I've gotten very used to these WYSIWYG designers over the years, but I am looking now for a new way.
I make business web apps which call for data entry forms. I don't need anything particularly artistic, but I do need to be able to line up text boxes etc on input forms so that they lkook orderly and are convenient for the user. I use Telerik controls, and my skills with CSS are approaching passable.
People often mention that they don't use the designer, but they rarely state what approach they DO use.
What are some of the alternatives to using the VS designer?
I don't use any WYSIWYG editor for WebForms. I've found that there are no good WYSIWYG editors for HTML, let alone ASP.net.
My suggestion is to learn enough HTML/CSS/ASP.net that you care code entirely without the WYSIWYG editor. If you can't or don't want to do this, then you'll just have to put up with a marginal editor.
I think a lot of the time when people say they don't use the designer they just use the source view the majority of the time. The reason for this is the designer often generates extra HTML code you don't need or it can even be a hindrance such as adding extra css styles directly to your page, I have also had it create technically invalid html by putting bold tags in the wrong places inside a table (Although it displayed ok in most browsers).
If you are not comfortable with just the source yet, I suggest split view then at least when you are using the designer you can see what it is creating and edit to get it perfect.
Don't trust the designer over seeing your website in a few different browsers.
I know Microsoft has made efforts in the direction of semantic and cross-browser compliant XHTML and CSS, but it still seems like a PitA to pull off elegant markup. I've downloaded and tweaked the CSS Friendly Adapters and all that. But I still find myself frustrated with bloated and unattractive code.
Is elegant, semantic CSS with ASP.Net still a pipe dream? Or is it finally possible, I just need more practice?
The easiest way to generate elegant HTML and CSS is to use MVC framework, where you have much more control over HTML generation than with Web Forms.
See this question for more discussion, including use of MVC. This site uses ASP.NET and the markup is pretty clean. Check out the HTML/CSS on MicrosoftPDC.com (a site I'm working on) - it uses ASP.NET webforms, but we're designing with clean markup as a priority.
As long as you use the Visual Studio designer, it's probably a pipe dream. I write all of my ASP.NET code (all markup, and CSS) by hand, simply to avoid the designer. Later versions of Visual Studio have gotten much better at not mangling your .aspx/.ascx files, but they're still far from perfect.
A better question is: is it really worth it? I write web applications and rarely does the elegance of the resulting HTML/CSS/JavaScript add anything to the end goal. If your end goal is to have people do a "view source" on your stuff and admire it, then maybe this is important and worth all of the effort, but I doubt it.
If you need the semantics, use XML for your data. I do believe in the idea of the semantic web, but my applications don't need to have anything to do with it.
As DannySmurf said, hand building is the way to go.
That said, you might look at Expression Web. At least it is pretty accurate in how it renders the pages.
#JasonBunting - Yes, it's absolutely worth it. Semantic and cross-browser markup means that search engines have an easier (and thus higher rankings) time with your content, that browsers have an easier (and thus less error-prone) time parsing your content for display, and that future developers have an easier time maintaining your code.
Yes - it's a pipe dream. Since working with a professional web designer on a joint project who HATED the output of ASP.net server side controls I stopped using them. I essentially had to write ASP.net apps like you would write a modern PHP app. If you have a heavy business layer then your page or UI code can be minimal.
I've never looked back since. The extra time spent writing everything custom has saved me a great deal of time trying to make Visual Studio / ASP.net play nice with CSS/XHTML.
i can't believe nobody has mentioned css adapters. many of the common controls used in asp.net (gridview and treeview for example) can be processed through an adapter to change the resulting html that is outputted to the browser.
if going the mvc route isn't a viable option, it is possible to write your own adapters for any of the built in asp.net controls.
http://www.asp.net/CssAdapters/