Technology has continued to scream past us over the last few decades. What is top of the line now may be completely obsolete... more

Technology has continued to scream past us over the last few decades. What is top of the line now may be completely obsolete in six months. As soon as you begin to understand a new technology, updates to it come out and make the entire learning curve start over. This has certainly been true for .NET developers. When .NET was introduced it was an amazing improvement over previous Microsoft programming languages. The mere fact that VB and C programmers could understand each other’s code should say something. But the incredible number of new controls and gizmos could prove daunting to a lot of people. Before anyone could get comfortable with .NET 1.0, 1.1 was released. When people finally started getting comfortable with 1.1, 2.0 was released. And now, barely a year after the 2.0 release, there is a new 3.0 coming out. Some programmers love the flux and constant improvements to the functionality of .NET. They strive to learn all of the new features and enhancements to see how they can improve the projects they produce. Others try to keep up only so that their projects stay current and to see what impact the new frameworks will have on their existing applications. Either way, most folks want to focus on the “under-the-hood” pieces of the framework. They want to determine if the new .NET 2.0 GridView really is that much better than the 1.1 DataGrid (it is). They can immediately see the benefits of implementing Try…Catch…Finally statements in their code.

But what seems to happen too often is that these same programmers forget about, or at least put on the back burner, the concept of making these new powerful .NET pages look good; they forget about aesthNETics.

... less

The quintessential element of any web design is, in fact, the web design itself. This may come off as a bit simplistic, but... more

The quintessential element of any web design is, in fact, the web design itself. This may come off as a bit simplistic, but many people forget about that crucial component. The primary audience for this book is programmers who are already familiar with ASP.NET but who want to learn more about how to make the sites they develop more stunning and user-friendly. The core of this idea, though, is not exclusive to .NET programmers. In order to make dramatically dazzling user interfaces, programmers need to understand the basic concepts of web design. This would include areas of layout, color, and graphics.

But it should also include a fair understanding of the audiences that will be consuming the sites you produce. What kind of browsers should you target? What will your site look like if the user turns off stylesheets? How about JavaScript? What kind of bandwidth limitations are there? How likely is your clientele to print the pages you produce? What else?

This chapter will elaborate on some the basic concepts of web design. You will begin to understand style, color, and layout. You will hear some of the current topics and trends of web design, some of which may be completely new to you. You will begin to appreciate the work that goes into creating good web design.

This chapter will not, however, go into any topics necessarily limited to the ASP.NET arena. Concepts of good web design are universal and, as such, should never be thought of strictly in terms of a specific programming language. Obviously, since this book is about ASP.NET design, later chapters will focus on how the tools in Visual Studio 2005 can help developers incorporate these universal design concepts. However, for this chapter, the concepts are the same for any web designer/developer; not just .NET developers.

... less

In a perfect world, perhaps, a developer is simply a person who crunches out code. No need to meet with clients and gather... more

In a perfect world, perhaps, a developer is simply a person who crunches out code. No need to meet with clients and gather their requirements; that is the job of the project manager. No need to design or ensure the integrity and security of the database infrastructure; that is the job of the DBA. No need to worry about IIS configuration issues or the segregation of environment platforms (e.g., development, acceptance testing, production); that is the job of the network guys. And certainly no need to worry about color schemes, graphics, or logos used in the application; that is the job of the graphic designer.

But more and more, this is becoming less and less acceptable. In an interview, it is no longer uncommon to hear that the potential employer wants to know that the developer they hire can carry a project all the way from the requirements gathering to production and maintenance. For any of the steps involved in the Software Development Life Cycle, it is becoming increasingly hard to say “that isn’t my job.” Everything is your job. As a developer, you are expected to gather customer requirements, develop proof-of-concept designs, make decisions on application and database platforms, create and maintain databases for your projects, administer the IIS of the web servers (at least at the development region), and work with your clients through acceptance testing and eventually production moves and maintenance.

There are plenty of certification tracks out there to demonstrate that you have mastered many of these skills. For example, there is a Certified Project Management Professional (PMP) that teaches you about how to gather requirements and carry a project to its logical completion. There are plenty of Microsoft certifications that can prove to others that you understand Microsoft Technologies. Recently, a new branch of these certifications has been created, the Microsoft Certified Technology Specialist (MCTS), specializing in web applications. But take a look at the requirements (www.microsoft.com/learning/exams/
70-528.mspx) for the web-based client development exam (70-528). Plenty of the requirements call for you to show that you know how to implement the tools in the .NET 2.0 Framework. Notice, however, there are no requirements on when you should implement these controls. There is also no discussion of web standards or style and design.

So why do so many developers fully accept the responsibilities of the Software Development Life Cycle but still say that design isn’t part of their job? Is it the battle between the left side and the right side of the brain? Many developers seem to think in zeros and ones in a very linear and analytical manner, which actually comes in very handy in much of their programming. When creativity comes up, these developers shy away from this challenge and either offer up bland sites or rely on templates purchased or downloaded from third parties to fill the gap.

Why is this? Is it lack of motivation or interest? Is it truly a lack of ability or creativity? Or is it just a lack of exposure to the graphic arts? This chapter will operate under the assumption that it is the latter.

The wonderful thing about graphics is that you don’t have to be overly creative to come up with some engaging designs if you know a couple of tricks. This chapter will show you the basic workings of a graphic design application, Photoshop CS2, and some tricks that you can use when creating your next web project. Will you be a certified graphic designer at the end of this chapter (whatever that is)? No. But hopefully you will have a sufficient exposure to something you have historically shied away from and a renewed interest in finding out more.

... less

Depending on whom you ask, Cascading Style Sheets (CSS) are either a godsend or an overhyped glorified HTML formatter with... more

Depending on whom you ask, Cascading Style Sheets (CSS) are either a godsend or an overhyped glorified HTML formatter with very little purpose in today’s web design culture. There are a large number of people that are probably somewhere in the middle, but they are neither as vocal nor as fun to listen to debate on this hot topic.

The concepts of Cascading Style Sheets were officially announced to the world with 1994’s Cascading HTML Style Sheets by Hakon Wium Lie (www.w3.org/People/howcome/p/cascade.html). The code structure of the proposal looks a bit foreign compared to today’s CSS formatting, but this document was the first to specifically call for a linked document for style definitions that enabled a true separation of code and design in websites. While it was originally targeted to HTML, its scope has been expanded to include XML, XHTML, SVG, XUL, and most derivations of SGML. Now, if you ever have to answer a trivia question about the origins of CSS, you are ready.

Most current generation browsers support the CSS Level 2(CSS2) specification. You can find out more about what this entails by visiting the W3 C documentation located at www.w3.org/TR/REC-CSS2.

The purpose of this chapter is not to force you into believing that CSS should be used in one way or another. As already stated in Chapter 2, there are as many reasons to go to a completely CSS-based web design platform as there are to staying away from it all together. The point of this chapter is not to debate this issue any more than was already done in Chapter 2. In this chapter, you will learn how to start taking the steps towards a CSS-based web design platform. You will learn how to create structural layouts of your sites that resemble a table-based design but are done using only CSS. You will learn how to place elements on the page and stretch them according to your needs. You will learn how to create a sidebar that will stretch with the content area (or at least appear to).

You will also learn about some of the tools in Visual Studio 2005 that can help you create your CSS files and how to apply those files to your web projects. At the end of the chapter, you should have the basic layout of the surfer5 design completed and be ready to put that design into an ASP.NET Master Page in Chapter 7.

But, again, you will not be preached to about the merits, or perils, of CSS in web design. That is more of a judgment call each developer must make. The major arguments are laid out in Chapter 2, and there are plenty of supporting websites and other manuscripts for each side of the debate. This chapter is not meant to force you to one side or another; its purpose is to give you the tools you need in order to proceed with a CSS design if that is the path you choose. All subsequent chapters, though, will use the designs created in this chapter so, if for no other reason than to understand better what is going on in those chapters, it is a good idea to understand what is being said in this one. But, again, whether or not you use the concepts presented in the chapter in your future projects is a decision only you can make.

... less

Up to this point, there has been a fair amount of discussion about the advantages of CSS in your web projects. It can improve... more

Up to this point, there has been a fair amount of discussion about the advantages of CSS in your web projects. It can improve accessibility for your users as well as compliance with established web standards. You have seen how to achieve a standard website template resembling the traditional tables-based approach by using only CSS styling. You learned how to lay out the header and footer and how to create a two-column layout for your content. You have learned how to use the tools in Visual Studio 2005 to create and apply your CSS files for your web projects.

But is that enough? What happens, for example, if you drop one of the many ASP.NET controls onto your web project? How will it be rendered in your user’s browser? For example, if you use the new GridView that is part of the ASP.NET 2.0 tools, how will the HTML look in the browser?

The answer, quite simply, is that many of the ASP.NET 2.0 controls render with tables. To continue the above example, if you use a GridView in your project and then view the HTML source of the rendered page, you will see that all of the content is done in tables. Is this a bad thing? As with all positions on CSS theology, it depends on whom you ask. Many people, including quite a few CSS enthusiasts, believe that tables are okay to use for tabular data, which is what you are talking about in this GridView example. However, if you want to go with a pure CSS mentality in your projects, this would not be acceptable. If you want the rendered output to be pure CSS, you are simply stuck with the tools that come out of the box with Visual Studio 2005.

However, there is a solution: the ASP.NET 2.0 CSS Friendly Control Adapters. With these adapters, you can override, modify, or just tweak the rendering behavior of your ASP.NET controls. Put simply, you can tell your controls to output pure CSS rather than tables. With these new tools, you can make a more concerted effort towards a pure CSS site, even using the standard tools provided in Visual Studio 2005.

... less

Historically, web page developers have struggled with the art of mastering a consistent site navigation system that was easy... more

Historically, web page developers have struggled with the art of mastering a consistent site navigation system that was easy to maintain and worked in all browsers. Although not unique in this regard, ASP and ASP.NET seemed almost impossible to get a menu to work right and act the way you wanted. Most people resorted to purchasing third-party controls or relying on straight text hyperlinks or possibly images to create their navigation. The brave would attempt to write their own hovering drop-down menus, probably in JavaScript or something similar.

But that was then. Today’s .NET developers have an easily maintainable site navigation system and a variety of tools at their disposal for presentation to their customers. These developers no longer have to look any further than the standard toolbox of Visual Studio to have a powerfully simple and simply powerful set of navigation tools for their next project.

... less

No matter how good of a design you have for your site, it can be completely for naught if it isn’t carried forward consistently... more

No matter how good of a design you have for your site, it can be completely for naught if it isn’t carried forward consistently throughout your site. Up to this point you have learned the basics of creating a site that is aesthetically pleasing and, hopefully, easy for your visitors to use. You have received an overview of the different considerations you should take into account when planning your web projects, such as browser variations, the potential audience, and accessibility. You have learned the basics of image creation and design. You have received an introduction and overview of Cascading Style Sheets and how to use the power of Visual Studio to integrate these rules into your website. And, finally, you have learned how to create consistent, flexible, and accessible navigation for your site.

But all of this was for one page (Default.aspx). Copying this code to every page in your site would be, to say the least, a maintenance nightmare. Can you imagine having to update thousands of pages because the user wants a fairly minor design tweak? What you really want is a way to create a reusable template that can be incorporated into every page of your site. This will allow for all pages to look the same throughout your project, while allowing for easier maintenance as your projects mature. In a year or so when you want to redo the entire site, you only need to change the template rather than the coding on every page of your application. With Master Pages, you can do exactly that.

... less

If you are a fan of, or can at least relate to, the pirates of old, you can think of this book as a sort of modern day treasure... more

If you are a fan of, or can at least relate to, the pirates of old, you can think of this book as a sort of modern day treasure map. With most treasure maps, you might have to go around the palm tree, walk 300 paces to the three-trunk tree, and head south for 150 meters to a spot where the waterfall cleverly hides a cave with the fabled treasure. In the context of this book, however, themes are your buried treasure. Much as with a treasure map, you had to get through several intermediate steps before you were ready to get into making themes, at least successful themes, work. You had to learn about the considerations of web design and standards. You had to obtain a basic working knowledge of graphics and color. You needed to learn what Cascading Style Sheets were and how they can be used in your projects. You had to understand site navigation and the tools in .NET that allow you to make it consistent. And, most recently, you needed to see how to create a standard template using all of the previous ideas and concepts so that you could carry out the overall layout of your site throughout all of the pages that make it up. So now you just need to walk through the waterfall and begin digging ten paces due north; you are finally ready for themes. And, once you open this new treasure box, you will find it filled with CSS, skins, and images that you can apply to all of the pages of your site.

... less

At this point in the book, you have been given a fair assessment of what goes into themes, have seen some of the stumbling... more

At this point in the book, you have been given a fair assessment of what goes into themes, have seen some of the stumbling blocks you may need to consider in planning your theme development approaches, and have hopefully learned to appreciate how powerful themes can be, even with the limitations they do in fact have.

But what have you seen so far in regard to applying themes is very limited. So as not to dilute the concepts of Chapter 8, there was not much mention of the actual application of themes in your projects. In fact, the only way documented was declaring the Theme or StyleSheetTheme attribute in your @Page directive. While it was alluded to that you can apply themes programmatically, nothing concrete was given on how to do this. And, beyond that, no concepts were really discussed or demonstrated. Again, it was with good reason; you needed to get a full understanding of how Themes work, how they are different from StyleSheetThemes, and which ones you want to use in your projects.

Now that you have a solid understanding of themes, though, it’s time to delve deeper into how to actually apply the themes to your projects. Once this is completed, you should have all of the building blocks you need to be comfortable with incorporating themes into all of your future projects.

... less

If you have read this book from cover to, well, this chapter, you should have gained an appreciation of the tools you take... more

If you have read this book from cover to, well, this chapter, you should have gained an appreciation of the tools you take with you into every project that you can and should implement before you ever write your first connection object to the database of your choice. You first took a high-level look at the basic considerations of web design today, from screen resolution to browser demographics across the web. You have begun to understand some of the meaning behind all of this “accessibility” talk on the web and, maybe, it is no longer just an abstract concept that other developers have to worry about. With that, you began to better understand one of the more hot debates in web design today: the use of CSS vs. tables for web layout. You saw that there are some considerable bumps in your path to full CSS implementation but, hopefully, you also saw some pretty good reasons to consider it. You then started on the basic tenants of your layout, creating your logo graphic and picking the color scheme that would be carried throughout your site.

These first few chapters gave you the prerequisite knowledge of general web design that you would need to start getting into the .NET tools available to take you into the ranks of aesthNETics developers. You learned that, to be a true aesthNETics developer, you need to be more than just someone who knows .NET code. You were given the basic foundation of good aesthNETics with overviews of the concepts of good web design, such as target resolution, color depth, cross-browser support, and accessibility. Those concepts are critical to any web developer but were not specific to .NET. So, after that overview, it was time to put the “.NET” into “aesthNETics.” This meant that you needed to get familiar with the inner workings of several of the controls that are available as part of Visual Studio 2005 to help you create consistent, stylish web sites that are easily developed across development teams and hundreds or even thousands of pages.

As a part of this, you learned about the use of the XML-based menu system included in the .NET Framework, which allows you to display, lock down, and localize your navigation system for all of the pages of your site. From there, you learned how to make that navigation system more accessible through freely available control adapters that override the table rendering behavior of the navigation system and, instead, output CSS-friendly equivalents. You then took the basic shell you had at that point and saw how to easily wrap it inside of a Master Page to turn it into a true template that you can use for every page in your site. And, finally, you learned how to mold all of your .NET controls to look and feel the same through the use of themes.

Along the way, you saw some of the shortcomings and quirks of some of these concepts and how to work with those shortcomings or to work around them. You saw how the tools were meant to work, even if that way wasn’t necessarily intuitive. You have, at this point, created a consistent look that is ready to be deployed throughout your site. Or have you?

... less

If you are reading this book, and certainly if you are reading this appendix, you have the only truly quintessential tool... more

If you are reading this book, and certainly if you are reading this appendix, you have the only truly quintessential tool necessary for being a good developer: you want to learn. Maybe you picked up this book to get a better handle on general design issues for web design and perhaps you wanted to get a better perspective on how .NET can help handle those issues. Maybe you wanted to get a book on themes or Master Pages or maybe even the CSS Friendly Control Adapters. Or maybe (hopefully) someone told you how great this book is and you just couldn’t live without it (that is obviously the best scenario). But regardless of your reason, you probably paid money for this book in the hope that you would learn something you didn’t already know and have intentions of using the book again as a reference in your future development endeavors. You bought it to learn.

As part of this learning, it is important to understand not only the current state of technology, but also its future. Sure, for the most part, you probably picked up this book because you wanted to learn how to use the tools that are currently in the market for developing .NET 2.0 web projects. And, hopefully, you did exactly that as you read through the other chapters of this book.

But what will serve you best in your career (or hobby) as a programmer is to be prepared for the future. In 1970, Alan Kay, often considered the father of object-oriented programming, said “the best way to predict the future is to invent it.” This should be the heart and soul of every dedicated programmer. It’s not enough to know where we came from or where we are. It’s at least as important, if not infinitely more important, to realize where we are going. And the best of the best can even determine that future.

So how do you prepare for or, even better, decide the future? You find out what’s coming out. You start looking at prerelease software and getting up to speed so that, when a product is released, you are already using it to code your projects, not looking for new training on how to use it. You figure out how to use that new technology to jump ahead of the competition. You figure out, in these prerelease versions, what works better and what needs improvements and, if possible, you tell those that are making the future releases so that they can improve it.

With that in mind, it is important to at least have a fair understanding of the technologies coming out in the next few months (the end of 2007). With respect to the tools presented in this book, this means it’s time to pay particular attention to the latest offering by Microsoft, Visual Studio’s next release, currently codenamed Orcas.

While not necessarily appropriate for a chapter in this book, examination of Visual Studio Orcas certainly warrants discussion. There are so many improvements in this release that it is actually fun to play with the new tools. Things like the inclusion of out-of-the-box support for Microsoft AJAX, LINQ, and a slew of other things will make perfect fodder for many blogs, articles, and books.

However, as it relates to this book, there are a number of enhancements that directly improve things that you may have noticed while working on the projects and examples in the previous chapters. While all of the improvements to Visual Studio could easily take up an entire book, and quite a large one at that, this appendix will try to give at least an overview of some of the improvements that will directly impact the projects and examples in this book.

This appendix was written using the most current software available at the time, Visual Studio Code Name Orcas Beta 1 released on April 26, 2007. While the final release, and even any subsequent beta releases, are sure to have a lot of changes and improvements, it is believed that the discussions in this appendix will still be relevant and will probably make the final cut. However, there is no guarantee that this will be true. Inclusion of examples, screenshots, or discussions in this appendix does not mean that the exact same thing will be available in the final version or any version subsequent to Beta 1 (or previous to it). This is, after all, beta software.

... less

If you are a web developer, you have probably been tasked with presenting some sort of animated welcome splash page or header... more

If you are a web developer, you have probably been tasked with presenting some sort of animated welcome splash page or header area for a web project. Or, if that hasn’t happened yet, it probably will at some point in the future. The default solution to this requirement is, generally, to use Adobe Flash. Microsoft has never really offered a web solution for this type of work. They have continually improved their web programming languages (e.g., classic ASP to .NET to the latest .NET 3.5 enhancements) and the tools to develop these technologies, such as the latest Visual Studio products. They have, in the last few years, begun tinkering with interface and design technologies, such as Master Pages and AJAX. Microsoft has even shown a much bigger commitment to CSS and web standards through improvements in its support of CSS in its IDE as well as its Internet browser (which still isn’t there but is making progress). But, at least to this point, they haven’t dabbled much in providing rich user interfaces on the web. With the introduction of Microsoft Silverlight, though, Microsoft is taking a stab at this market, too.

According to Microsoft, “Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web.” If you read anything put out by Microsoft about Silverlight, you will see at least pieces of this phrase somewhere. This might be a little hard to understand, but, essentially, what it means is that they are going to try to compete in the market typically dominated by Adobe Flash. They are trying to provide a canvas to import movies, audio files, and other media content. This canvas will also allow you to draw and animate graphical objects in a very similar, yet easier, way than you did previously with the System.Drawing namespace. And, best of all for .NET developers, all of the static code is in the XML-based XAML, and you can add dynamic code through a variety of programming languages, including JavaScript, Visual Basic .NET, and C#. This means that you can, for example, create dynamic flash-like presentations powered by your C# managed code.

In short, Microsoft Silverlight adds the ability to create vector-based graphics, media, text, animation, and overlays to create a new interactive web experience that incorporates the power of .NET managed code with the simplicity of XML design. Visitors to your site, as long as they are using one of the major browsers, will have the exact same experience as any other user (after downloading a small—less than 2MB—plug-in). If Adobe isn’t taking this product as a serious competitor, they should. Microsoft has made a very impressive first offering into this market. And, after this appendix, hopefully you will have a decent understanding of what it can do and how you can use it in your own projects.

... less