I'm struggling with a few in-house developers that are creating some web apps in VS 2008 using C#.
It appears that the native tools and components in VS 2008 are not being nice about creating Web Standard code.
For example, the navigation component creates items in its own table structure.
Is there anyway to make a web project from Visual Studio create nice, clean, browser friendly code?
You can use CSS Friendly Control Adapters to alter the output of the current ASP.NET controls. It's easy to set up and you don't have to change any existing source code.
If you're bound to ASP.NET WinForms, you could create you own set of controls or use 3rd party controls. There is also a XHTML configuration setting you could set to Strict, so that the controls try to render more valid core.
When you really want to write nice, clean, browser friendly code, you could take a look at ASP.NET MVC. ASP.NET MVC gives you complete control of the output, but that means you have to do all the things WinForms currently does for you, yourself...
Certainly. If a component doesn't produce markup you like, then you don't use it. It's just that simple.
Having said that, be sure to check out Visual Studio 2010 beta 1 to see if your issues have been addressed. If they haven't, then you get to complain about them in a way that might get them fixed.
VS 2008 web projects don't do anything web-standards-unfriendly. The standard ASP.NET controls (like the menu control you mentioned)? That's another story -- some use a mess of tables and javascript to do their thing.
The good news? You can use what you want of ASP.NET without having to use those controls if you don't want to.
Go MVC !!! you will have complete controle over your UI
My two cents: machine-generated code is almost never as standards-compliant as the code I write by hand, especially when you get into fancy widgets and whatnot. The obvious trade off is that writing code by hand can be tedious and time-consuming.
We've come a long ways since the dark ages of code-junk that frontpage or dreamweaver used to spit out, but even still...
In the end, your code is only ever as good as your programmers.
The Web Projects themselves are simply containers for the code that you create and a mechanism for managing and building the compiled project.
Based on my experience, the controls generated by VS comply to web standards ... that being said, browsers differ on which standards they do or do not enforce and how they enforce them. For the most part, you have a high level of control of the HTML that is output from your page. The table structure generted by the navigation control id valid HTML - you may be wanting to avoid the use of tables in which case, that particular control might not be for you.
For the most part, when you have a complex control you will need to take what you get - the HTML that is generated may not be intuitive to you and your team but that is often the price paid for the time savings gained by using a pre-built control, particularly one that is intended to service the needs of a wide variety of uses. (The same can be said for most code/script libraries you use/buy/find)
Many controls offer templating that provides you with the ability to define a template for how the resultant HTML is generated.
If you want cleaner markup, you have a few options:
a) Check out the CSS Friendly control adapters from codeplex. They help alot with certain controls.
b) Avoid the more complex server controls. There is very little one can't do nearly as effectively with a repeater and some user controls that one can't do with most any databound control for instance.
c) Try ASP.NET MVC. No neato server controls to do UI lifting, but it will let you make very, very clean UIs.
Related
I'm using a Windows Form Application in Visual Studio 2013 to design a prototype for a software. I'm not a software-developer, the only purpose of the project is to communicate with the dev-team to let them know what the end-product is supposed to look like.
There is not really much flexibility when it comes to designing control, like buttons, textboxes, etc. so I was wondering if it is possible to attach stylesheets to VB.NET projects? Thank you
There is not really much flexibility when it comes to designing
control, like buttons, textboxes, etc.
NO. winforms is a really old technology that basically has no amount of built-in support for custom UIs. It is not recommended for any new projects (only to maintain legacy applications) and it will be completely useless if you're not a developer, since any sort of custom look and feel needs to be done with an ugly procedural code technique called "owner draw", which requires too much code for anything, and is unable to provide professional-looking UIs due to the lack of hardware acceleration and lack of support for pixel-independent UIs.
If you're doing a prototype (as opposed to a real application), as others have recommended, you should use design tools such as Photoshop, or maybe a quick HTML + CSS kind of approach.
Otherwise, you can easily create a modern-looking application using a technology that is the replacement of winforms, called Windows Presentation Foundation, or WPF, for short.
There's also a design tool made specifically for this technology, called Expression Blend, which is bundled with recent versions of Visual Studio, and offers a very designer-centric approach to building UIs:
To summarize: winforms is useless. Use proper, relevant, current technology instead.
There are no such things as stylesheets in WinForms applications. You can change the appareance on a form and control basis by changing the Appearance properties.
You can create base controls and forms that have your appearance changes and then use those to create other forms to make things easier to design out the screen.
There are also 3rd party control sets that do have skins/themes, which maybe what you want but you have to purchase them first then you are limited to that control suite.
I'm feeling a bit lost with my question about HTML5 code generation, and despite having put some efforts into my research I don't really feel much wiser.
I use VS2010 for the creation of ASP.NET pages, and I do know that there is an (unofficial) "Web Standards Update" for VS2010 SP1. Using this update I can change the settings of the "Target Schema for Validation" in the ASPX editor window to HTML5. The new elements / tags and semantics are then available via Intellisense, and I can nicely code away manually using all the fancy new stuff.
What I don't understand is how to get something like the ASP.NET controls to generate HTML5 code (where it makes sense). Is this at all possible or am I completely going in the wrong direction here? I would have expected that I do not have to "hand code" HTML5 as long as I use the existing controls (which tend to generate a lot of JavaScript in the background when the page is delivered to the client's browser).
Thanks in advance for a clarifying answer
G.
Some controls generate slightly different dialects of HTML based on the particular User-Agent. However, not all of them know about HTML 5 yet, and there's no specific property to enable HTML 5 generation, just as there isn't a property to enable other dialects of HTML.
If you want to generate HTML 5, you can do one of three things:
Create a new control that overrides the existing one, and either use it directly or replace the original with it everywhere in your app with tag mapping
Create a control adapter and modify the control's output as it's generated
Create a custom control
The controls you are referring in ASP.NET are what is commonly known as "webforms". They are basically server side controls that generates the javascript code needed to postback the data to the server, mantain the state of the controls between postbacks, and stuff like that. As you said, those controls generate too much code and a excessive number of roundtrips to the server, so it is not very recommended to use webforms.
HTML5 is mainly client side, so it has very little to do with the webforms server controls. It's a different approach than the old ASP.NET webforms. Because of this, ASP.NET is including on its newer versions the MVC framework, the razor engine, JQuery and another javascriprt libraries. MVC includes some helper classes and templates that helps you generating the client code, and many other features to support HTML5 enabled webs. So, I would recommend to start reading about it.
Anyway, now that jquery is fully integrated in Visual Studio, javascript coding is not so difficult.
I'm a new comer to the asp.net world. I hear a lot about asp.net mvc and it's advantage over webforms about the ability to customize the markup and css. I also heard that asp.net is much easier to learn than asp.net mvc so I decided to go for asp.net and webforms. My question is: what's the level of customization a web developer/designer can get with webforms concerning the markup and css?
You can have as much customisation as you like in the html output! You can customise everything in web forms. However, with customisation brings time, effort and room for error. All of these things is what web forms is trying to save you.
However, since you are just starting out I wouldn't worry. Just make your web forms how you want and forget the customisation of output (it is much better with ASP.NET 4 anyway). In a few years when you are more experienced then worry.
If you were going to customise everything then you should have gone with ASP.NET MVC - it is one of its main arguments. But there is nothing wrong with web forms. Particularly if you are beginning with asp.net in general I'd say it is better.
Standard ASP.NET WebForms uses server controls that generate the markup for you, so the level of customization is limited to what the controls you are using provide. There are techniques that allow you to override what is rendered by the controls and thus customize the markup and also write your own controls but it requires some coding. It is possible to achieve almost complete customization of the markup but it IMHO requires more efforts than a web developer should need to put into something like this.
While it is definitely possible to have a SEO friendly, unit-testable, maintanable, standards compliant application using classic ASP.NET WebForms, the efforts it requires will be significant compared to ASP.NET MVC. But if you don't care about those things you will be able to pretty quickly develop web applications.
ASP.NET comes with a set of built in user controls - things like text areas, buttons etc. These mimic winforms in how they are supposed to work (events etc), however this is a rather leaky abstraction (you must always remember you are working with HTML and HTTP).
The user controls allow reuse and when a page is built they emit HTML - you have little control over the emitted HTML (unless you override the rendering, which kinda defeats the point), hence the perception that they are harder to customize. It is not easy to get right either and requires more work than I think is worth.
There are also different compromises in the way pages are rendered out (ids for example end up as a long string of concatenated container control names) which make MVC a better choice if you are looking for control over your HTML.
Microsoft suggests that you pick the technology based on your needs:
While ASP.NET offers rich controls and produces quick results without great control over the markup (as mentioned: it can be done but somehow beats the idea behind ASP.NET and creates a lot of additional code), it suffers from the flaws mentioned by the other posters.
In MVC, there is a limited set of "out-of-the-box" controls and you'll have to code more on your own (including clientside JavaScript) but you do have more control over the rendered markup of your controls. In addition to that, your project will generally have a clean separation of concerns which benefits (unit) testing and maintainance.
Another aspect that hasn't been mentioned yet: In ASP.NET a page undergoes the so-called "ASP.NET Lifecycle" every time the client communicates with the server. The Lifecycle consists of several events that are fired in a special (and sometimes confusing) order. Handling those event in the right order in complex web applications is one of the biggest difficulties in ASP.NET and often leads beginners to forfeit. In MVC you don't have to deal with that kind of problem.
Therefore I strongly recommend that you take a look at the ASP.NET architecture before you start to code. Here is a very basic start: http://www.asp.net/learn/videos/video-6558.aspx
Personally, I started with WebForms and am now moving to MVC after I worked with the similar MVVM pattern in Silverlight and WPF for my bachelor thesis. This kind of did it for me so that I now understand the benefits and ideas behind MVC a lot better. Once you are used to WebForms, switching won't be that easy though.
Recently our newest web designer asked me why we use ASP.NET for our website. Reading through his question to the real one, I started thinking about it myself. Why are we using ASP.NET for web development?
The problem we find so far is colaboration between the design team and developers. Typically our designers create some snazzy cool look crayon laced web pages, then show them off for approval in all their glory. Once approved, the developers rip the HTML out and shove it in to ASP master and detail pages, and huzzah! out comes pretty website.
Since Dreamweaver doesn't play nice with Visual Studio, this is the same process for even small tweaks and changes. I would prefer to just write the backend and let the designers draw the pretty pictures and fancy CSS. Our current websites have plenty of reason to use ASP on nearly every page, so I can't do half in HTML, the other half in ASP.
I have no aversion to doing something else, another language, CMS platform, some other random buzzword, etc...
What are your experiences with this design situation? Are we doing it the hard way? Should we consider alternate platforms and languages? Are there any good, proven ways to allow designers to work on ASP (while still using Dreamweaver)?
Start learning Asp.net MVC as soon as possible. Designers will love you for that. :) And you'll be up to date with new development technologies that will also make your solutions much more robust and less complicated.
But otherwise. Designers should be able to read XHTML fluently. Learning asp.net semantics shouldn't be too hard. Then give then Visual Studio where they can manipulate content. As long as they know how asp.net web forms work things should be fine. They'll probably be able to do majority of things using just CSS. I know I can. Sometimes I do have to check resulting HTML, but it works.
Aside from Wicket (a java web framework), I don't know of any framework or language that would allow designers to continue to work on the design once developers have started to add logic to it.
I would suggest two things though:
Use a MVC framework - ASP.NET MVC, Ruby on Rails, Django, etc since this allows for far more separation of presentation and logic
Keep your presentation layer as stupid as possible and use helpers as much as possible or even better, put the logic in the domain objects. The view should only show or get data with absolutely no logic for processing data, this will keep the pages much more designer friendly.
I find your question very interesting because no matter what kind of technology the project uses the interfaces between the different roles will always cause some friction. I am not sure if there is a technological solution to this communication issue because the designer and developer speak literally different languages.
Depending on the skillset of your designers and developers an additional layer might help you out. I do not know how ASPX works but i am sure there will equivalents to the concepts of other technologies.
In case you have mainly static content which can be expressed in XML than you could provide the backend which delivers the content in XML with a defined Schema and your designers could describe the transformation in XHTML and CSS via XSLT. Given that your designer are capable using XHTML and CSS the addtional effort to learn XML and XSLT is not that huge. I find this solution much powerful than template languages which try to emulate the richness of the serverside scripting language in their own limited constructs. In case you have dynamic elements on the clientside like DHTML, AJAX or you name it you could define your own xml tags which are transformed to richer client side objects after the designer did their work. I guess the designer will understand the usage of these special tags and you provide the proper translation into client side objects.
I used this approach with some coworkes based on PHP. PHP was only the driver for the transformation. The content was assembled into xml with special tags which were transformed into XHTML and CSS via XSLT. Once the objects and the transformation for the different objects is defined you build up a library which can help to shorten the developement cycle of new pages of you webapplication. The benefit of the extra work is, that you designer can change the layout of the page without ever touching you server side code.
Maybe this helps.
Consider using either Expression Web or SharePoint Designer. The latter is now free.
I know you specify dreamweaver, but have you looked at Blend? It plays very nice with Visual Studio and is quite a nice app. to work with.
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.