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.
Related
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.
On most projects I've been one, designers has produced HTML code, then developers turned it into ASP.NET, including master-pages etc that should really be a part of design.
After it has become ASP.NET, designers could not work on the code with their tools.
I know that a lot of the design of ASP.NET is made with the purpose of separating code and design, and in principle designers should be able to work on design aspects with the Visual Web Developer, but I've never seen a designer using VWD.
How is cooperation done in practice, and what is about the best one can expect from a designer?
From someone who does both:
Most of the design should be done with CSS, so this isn't a problem.
The layout of the page, therefore, comes down to elements with IDs and classes (simplistically speaking).
I try to keep these IDs and classes as is, and place ContentPlaceHolders inside them as needed, when possible, and create controls or skins with the right classes.
Optimally, designers and programmers should work together, and know each others limitations and requirements (this cannot always be done, sometimes these are done by different companies). I think most of the responsibility here lies on the developers - they need the right controls to get the expected output.
Frankly, a web designer should care about HTML and CSS, not about what server-side technology is used to deliver them. The best I would expect from a web designer is to write flexible CSS, that can take a view changes to the HTML structure without breaking (that is - extra divs or tables, as ASP.NET tends to do).
A good ASP.NET developer will intelligently use the set of controls available. For example, in most cases, the ListView will do everything the GridView can, and produce clean, SEO-friendly markup.
In the ASP.NET environment, I would encourage the use of Expression by designers. Business owners can avail of the new deal from Microsoft and obtain VS, Expression, etc., for $100 for three years.
I think both developers and designers have to embrace each others world for anything to work.
We are still stuck with the old fashioned way of the designer producing PSD documents and hopefully rendering them into HTML.
Then we take them over and convert them to .Net, then the designer requests a change and we go in circles for a while before coming to an acceptable solution.
It would be nice if the designer could integrate into the HTML of .Net easier but I don't see that happening for a while, not while Microsoft advocates using scripting in your development..
I've found that using ASP.NET MVC will make the designer's job much easier. Especially if you stay away from using things like HTML.RenderImage, and instead place an IMG tag on the page with <%= ViewData["MyImage"] %> as the src. This will allow the designer to see the html they like and understand, while giving you the flexibility to set the source(which is all the developer should be doing). The goal being to stay away from ASP.NET controls, which would confuse a designer, while still keeping their flexibility to develop quickly.
Past, now irrelevant back story: I was trying to make some changes to BlueBand and get 'up and running pretty quickly' but after looking at it further this is no longer an option due to tables that a previous developer introduced into the layout. I'll have to live with this and make what tweaks I can.
So, looking towards future greenfields projects...
Are there any recommendations for CSS frameworks that work nicely with SharePoint publishing sites? (Examples are BluePrint, YUI.) They should not interfere with standard out-of-the-box controls such as the Site Actions menu, rich text editor, and publishing toolbar.
Real world experiences welcomed, please!
What would you like to use a CSS framework for? As far as I can tell you could use one for making a cross-browser reset but everything else just depends on your layout. If you're planning to throw out the standard SharePoint layout it means that you need to start from scratch. The good news is that it's not much different than creating a layout for any other website. There are some things you need (http://msdn.microsoft.com/en-us/library/aa660698.aspx) while working with SharePoint but as for CSS it's all up to you.
Heather Solomon has a great blog/guide on wiring up SharePoint CSS classes - take a look:
http://www.heathersolomon.com/content/sp07cssreference.htm
Cheers,
Adam
You will run into a lot of trouble trying to hack the blue band theme into a table less layout.
You may get some mileage from the free Accesibility Kit for Sharepoint.
It comes with layout pages, CSS and even control adapters for those who care about the HTML of thier site.
Still, getting rid of the tables produced by SharePoint is not really compatible with "up and running pretty quickly"
You should start with the minimal masterpage. That will be the masterpage that's connected to the publishing layouts. You can then add in all the html/css you desire to your masterpage and layouts to make them look like anything you want.
If the users who are browsing those same publishing pages also need access to your list forms (new,edit,display) you will have to edit those files and attach them to your masterpage (either through SP Designer or a Feature to do it automatically). Or, customize the application masterpage to be nearly the same as your publishing masterpage and deploy them both as a feature with an HTTP Handler that changes the masterpage for the application.master at runtime.
Also an FYI, there are many issues once you start customizing list form pages for a site accessible to anon users, so do your research first on that one if needed.
We have used 960.gs with some success. Just include it in your master page, and wrap the main content area with a - or use container_12/container_24. Then in your individual page layouts, you can leverage all the columns/push/pull/alpha/omega goodies that make 960 so great. This works in 2007 and 2010, just takes a bit more work in 2007.
You can use any framework you desire when working with Sharepoint, however, the primary concern is how much control you have over web parts. OOB web parts use table based layout. If you have full control over how the web parts use the markup they product then you are one step closer to using a framework with little headache.
To alleviate some of the table based layout used in web parts you can look at accessibility toolkits to convert the web parts appropriately.
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.
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.