Visual Designer for Asp.net - asp.net

Well guys I have a simple question which may seem stupid - so forgive me.
My client has just asked me (as a favor) to design a single web page that has a header, 2-3 buttons, and 10-15 textboxes and is connected to SQL. Now I know I can do this (the behind-page code) but the problem is that I have no idea on how to actually design the asp page. I have very basic knowledge of html and no knowledge of CSS so I cant "code" the design.
What I require is WYSIWYG designer for asp, so I can drag and drop (kind of win forms in VS) buttons, textboxes and headings. The visual designer in VS for asp is no good for me. So is there any software (free or not) out there that can help me out? I need to do this in a day or two so I don't really have time to learn CSS/HTML.

Visual Web Developer is probably your best bet. It's free and provided by Microsoft, so it'll work and play nicely with the standard .NET control set. It's not as full featured as Visual Studio is, but for a free tool I don't think you're going to get any better than this.
That being said, you really need to learn the client end of developing ASP.NET, since there's only so far any WYSIWYG editor is going to go.

Related

Learning Web Design as a Form Designer

I am trying to learn ASP.NET (C#) and the biggest struggle I am having is the design aspects of it. I have primarily been a windows form designer. All of the projects I have worked on have used windows forms and it was much more intuitive and cleaner to design in than HTML/CSS. I am trying to learn how to design web pages, but it seems all "design" needs to be done in CSS. How do you design something you don't see and just use pixels and references to other objects? I don't see how you design anything that way.
What is the best way for me to be able to effectively design for websites using CSS and ASP.NET coming from a more visual approach of windows forms? I have read 3 books on ASP.NET and it makes sense but all of the design is done is source views and CSS sheets. Is there another method or approach I should be aware of? I am using VS 2015 BTW as my IDE.
Please and thanks
CSS and HTML are the building blocks of the Web. Like you, I used to struggle moving from the Drag and Drop world of VS 2003 after initially starting out with just Netscape and Notepad in college. Drag and Drop, like Web Forms, is an unhealthy layer of abstraction in that it removes us from a true understanding of how the Web works.
Just accept that this is the nature of things and stop fighting it. Back in the days of VS 2003, our team would set up VS so as to never default to the designer panel when starting or opening projects. Besides, the tool was totally undependable and created a tangled Frontpage-style mess of so-called HTML.
Make the switch to pure, semantic markup and CSS. Download a good template from a site like Creative Market (I usually search using "Bootstrap 3") to learn from. Study HTML5, CSS3 and RWD (Responsive Web Design) and let yourself have some fun. Yes, it really CAN be fun.
Work by switching from your IDE to the browser and back again.

Do I need AJAX and ASP.NET for what I'm doing?

Easy question. I used to develop websites back in the days of "classic" ASP, and when I'm asked to do a quick and dirty website for family or friends now, I still resort to direct HTML/ASP and some basic CSS and Javascript - I can get the sites up pretty quickly this way. However, I've had a few requests to design and develop some sites for pay, and thought I should catch up on my web skills. I have been using .NET 3.5, XAML/WPF, etc. for Windows apps, so I'm up on .NET, I'm just behind on the web end.
To the question: If I want to design/code a site that looks identical on all (at least somewhat recent) browsers and platforms, should I be using ASP.NET and AJAX? There might be a little database activity on the site, but not much, so I don't need an enterprise level, multi-tier extendable architecture... just something that looks good and works on multiple platforms without having to code all variations for each browser. After looking at all the ASP.NET books at the bookstore, it seems they all focus mostly on data and postback stuff. Is it still a legit option to use some basic, boring html and javascript with some Flash embedded where needed?
Let me know if I need to clarify the question. Thanks for your advice in advance!
Your question is more loaded than you think, but let me try to address a few points that I think are relevant.
First, how a site looks is almost completely dependent on the HTML/CSS you use and how you code the front end of the site and only slightly dependent on the server technology. So if you want your site to function across browsers and platforms, learn to code following web standards, with semantic markup. (Search on those terms for more info).
Also, ASP.NET comes in two flavors now: ASP.NET MVC and normal ASP.NET. I highly recommend, if you are going to get into ASP.NET, that you follow the MVC platform. It closely follows similar technologies (like Ruby on Rails) and will make the transition to other MVC platforms easier on you. Also, the MVC platform doesn't try to output as much pre-made HTML as straight ASP.NET will when you use their "drag and drop" controls.
Secondly, it really depends on the sites you are building, but straight JS (or JS + jQuery), CSS, and HTML -- and please don't use Flash unless you are embedding a video -- will actually work for a number of basic sites. If you need some things to happen on the server, PHP makes for a great platform. If you are working with advanced database access, and program flow, and since you are already familiar with .NET, then stick with it... MS has some great tools and resources to help you out.
Finally, a lot of developers use a favorite CMS or blogging platform as the backend of simple sites that still need the ability to manage the content easily. Expression Engine (CMS) and WordPress (Blog/Lite-CMS) are often used (both PHP based) but there are tons out there.
Good luck stepping up your game!
I would recommend learning jQuery. This will give you a browser independent abstraction for your JavaScript.
ASP.NET controls will render it's controls in a browser independent way, but that doesn't mean your site will automagically be browser independent. You still need to know how elements are rendered differently in different browsers.
I'd also recommend using a CSS Reset sheet as a starting point for your CSS.
All in all, if you've been developing old school ASP, you'll probably really love ASP.NET as it will save you a lot of time and looping. You may want to jump right in to ASP.NET MVC too.
To the root of your question, I'd learn ASP.NET if you're doing anything more than a simple brochure site. If you have .NET experience, and classic web development experience, then learning ASP.NET is not going to be a big hurdle and will be well worth the effort.
I agree with Aaron Daniels' answer about learning jQuery. jQuery helps a lot with cross-browser compatibility in JavaScript and some CSS-based effects.
However, you should also look into ensuring your site uses well-formed, valid HTML, and doesn't use too many CSS 2+ features. This should ensure that your site is standards compliant, which will mean it will play well with Firefox, Safari, Opera, and even later versions of IE to an extent. You will still need to do manual tweaking for IE - it's been too broken for too long for MS to be able to fix it properly in one go - so look into conditional comments for applying a separate stylesheet for IE users.
AJAX is a handy technology for "desktopifying" your web app. It provides a mechanism for asynchronous callbacks to the web server, so you can pass data to and fro without reloading the page in the browser window. This is how the voting buttons work on StackOverflow, for example.
Lastly, ASP.NET doesn't really have much effect on the end user's experience in terms of the look and feel of the site. It is a server technology that provides for writing complex applications to be delivered over the web to a browser. Having said that, MS have put in some extra goodies to make working with AJAX a little easier.
Hope that helps!

visual studio 2008 / asp.net web forms - is hand coding ~80% of the time too much?

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.

ASP.NET - collaboration between designer and developer

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.

Can anyone suggest good Guidelines for asp .net UI design?

I am a c# developer.
Recently I had to design a web UI in asp .net 2.0 .I had strange problems with aligning controls in Visual studio UI.
I have used Div, table tags to align asp .net controls(labels, textbox, grid etc).
But the problem was what I saw in design surface of visual studio was entirely different (most of the time) when I view the page in browser.
The gap between controls and alignments was never perfect .I have seen other developers also doing trial and error methods without a proper guidelines.
C# coding I am pretty good and I have lots of Microsoft articles and help materials to guide me.
But I haven’t found proper articles and guidelines for UI design of asp .net pages.(may be its out there and i havent found yet?)
Can anyone through more light on this subject. Any good books ,suggestions etc?
Thanks in advance
SNC
If you want granular control over your HTML/XHTML output then I would recommend switching to ASP.NET MVC. The problems you've described are those typically encountered when using ASP.NET WebForms. As Anton mentions, you do need to gain a good understanding of XHTML and CSS as well.
While I definitly +1 everyone suggesting that you get a better grasp of CSS and positioning in general and ditch the drag and drop method of building your controls, I figure you need something sooner rather than later.
For that, I give you Yahoo!'s CSS Grids (JQuery, MooTools and other libraries also have grid layout tools) which will help you to get your UI done quickly. In the mean time read up on CSS.
(X)HTML is compositional - not unlike XAML (which is actually modeled on HTML/CSS). When building WinForms you can drag and drop your controls onto the window willy-nilly, but not so with the web. One thing the drag and drop designer misses is that (X)HTML components have a hierarchy to them. The designer tries to overcome this by using position: absolute; which is a precarious crutch.
Your controls need to be composed with their positional relationships more or less intact already and that means you'll have to edit the code by hand to put things in the proper order.
It's not the UI design per se. What you need is solid understanding of how CSS and generally styles work on the web (in short: they do poorly). So what you need is a good CSS book. Plus, you'll have to dump WYSIWYG ASP.NET page editor.
I'm curious if you feel your HTML skills are on par. Could you create this same page in HTML without visual studio and get the results you expect (using notepad)?
Regardless, start spending more time in the HTML markup and less time using the designer surface in Visual Studio. The more you understand the output that ASP.NET creates the better a web developer you will become.
A trick I use quite often is knowing that you don't need to recompile to change aspx code. Make your changes to the aspx file, save, and then refresh your browser. Also, use firefox and get the webdeveloper plugin. I use the outline block level elements quite often to understand where some of my html flow problems are occurring.
Read up on Web Design. I'm a bit behind but I've always loved zengarden and zeldman.. I'm sure there's better out there now.

Resources