I'm learning ASP.NET using a great Sitepoint book, and I'm also learning more about CSS. I'm undecided on how useful Master Pages are. Could someone let me know whether the real world use mater pages - and if they don't what do they do?
Cheers
Mike
Yes, we absolutely use them.
Typically you will use master pages to handle your header, footer and navigation sections that are consistent through-out all the pages in your website.
This follows the DRY principle of not having to repeat yourself when creating new web forms.
MasterPages are the best feature that came with ASP.NET 2.0.
I use them whenever I can. They simplify your maintenance and management on a website. With a one change you can change whole site.
I always use master pages. It helps keep the code for each page less cluttered, and as previously stated, it lessens the need to repeat yourself.
Speaking of CSS, I use CSS to style the master pages, and set text formating "rules", while I usually end up styling graphics in each individual aspx/ascx-file. I find this less confusing, as you'll otherwise end up with one massive CSS-file - which is hard to keep structured - or a myriad of CSS-files - which often get hard to keep track of.
We use Masterpages for many of our applications and find them a benefit but I think your right to question how useful they are.
For our applications that have a large number of pages it's great to be able to extract a lot of the style information to one place. I know it's possible with include files etc but as Masterpages are the main method for Visual Studio it's obviously integrated very well and easy to use.
The biggest benefit for me is that I tend to use the same Masterpage across many applications thus giving them all the same look and feel. Again I know this can be achieved in other ways but it's Visual Studio integration makes it the easiest for us.
I think the best way for you to decide is to try them and try an alternative method as well. Pick your favorite and then let us all know!
Master pages are absolutley crucial to any ASP.Net application. They are the building blocks for your site.
And if you ever start looking at SharePoint they are the underpinning of all customisation and branding.
Why would you think otherwise? I am interested to know why you might not have thought them as useful.
I've had a solution delivered without master pages, and its a real pain trying to change the layout of the page, as each page has to be changed individually.
Related
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.
When designing a ASP.net WebForm application what are some important steps to take (or hacks if you like to use the term) to ensure the best possible performance (in terms of speed, stability, and scalability)?
Here's a good Best Practices written by microsoft. Chapter 6 is specific to ASP.NET, but the whole document is .NET in general.
http://msdn.microsoft.com/en-us/library/ms998530.aspx
You've got a ton of material, directly from Microsoft here.
Also a checklist is available if you want condensed information.
Just a couple, in addition to the good advice already given,
Don't put every single page in a webform, not everything needs it - The default behaviour from VS is to give you a master page that wraps a form around everything, and a lot of people seem to stick with that. In my experience, some controls can render 30% faster outside of a webform, so if you're just parsing a querystring then reading something from a database, leave the form at home if you can. Even getting your navigation out of the form will help.
Don't use a server control when plain old HTML will do - does it really require a asp:linkbutton or asp:hyperlink just to go to the FAQ page etc. Plain hyperlinks work just fine in asp.net, but some people seem to get stuck on the idea of using runat="server" for everything.
There is a phenominal book on this subject by one of the Yahoo guys, Steve Souders. It taught me a lot.
Or you can just watch this video. It's a high level overview of the same information - you can pick up a lot in 45 minutes by watching this.
NOTE: This content is not WebForms-specific. It's general best practices for the web, and it is what you need if you are trying to roll out a high performance website.
Big # 1 tip: turn off viewstate in the web.config. That should have been the default, if you need it for a control turn it on on a control by control basis.
My other piece of advice is stay the hell away from *view controls. Use repeaters and find a good 3rd party grid control. The really "magical" controls that ship with asp tend to be perf hogs, and in general just not a good idea anyways (with the possible exception of ListView)
1 - Turn on content compression on iis
2 - Cache everything you can
This will do for the majority of webapps out there.
I am not sure about content compression when the content involves html with js doing ajax stuff. Sometimes the blocks of data exchanged through ajax are small and in this case (and if that is considered content) compression often hurts instead of helping. For example, a four bytes block of data produces a compressed block of 100+ bytes.