CSS Management Techniques

Idealy, your stylesheets should be done with modularity in mind.  It is not uncommon to find a stylesheet file with hundreds if not thousands of lines of text which all contain the same 6-7 css attributes.  I have two solutions for this problem, one using ASP.NET 2.0 and one without.

My main.css Stylesheet (without ASP.NET)

@import url(initial.css);  /* Default your styles across multiple browsers */
@import url(pages/home.css);
@import url(pages/about.css);
@import url(pages/contact.css);
@import url(layout.css);
@import url(fonts.css);
@import url(hacks.css);

Using this method, you only need to include a reference to one stylesheet which imports the rest into your page.  This way if you decide later that you no longer need an about page for example you can remove that line of code which means your about.css file is no longer being downloaded when your page loads up.  Less files to download equals faster page loads.  Note how each stylesheet serves its own unique purpose.  Also note that the order of your css imports are important because of the fact that you can very well overwrite attributes that were defined previously which is why initial.css is first and hacks.css is at the end.

ASP.NET 2.0 Method

ASP.NET 2.0 has had a feature around since the 2005 version of Visual Studio which is called Themes.  Using themes you can style your entire website using Skin files.  These Skin files consist of a subset of asp.net markup that deals with style properties, stylesheets and images..  One advantage of this method is how with a single reference to your theme in the web.config file of your asp.net page you can import all stylesheet files contained within this folder.  Simply put, you can add add as many stylesheet files as you want in any type of folder structure under themes and asp.net will include them in all your pages.  Pretty niftey eh?

More

Bionic Contacts

James bond eat your heart out. A University of Washington researcher has developed a contact lens including circuitry and a matrix of LEDs. They say that this technology is capable of displaying an augmented reality, interacting with mobile devices and gaming among other uses. Take a look at the video to get a full description of this new technology being developed.

More

Creating Templates in Visual Studio

It’s important to be off to a good start when working on the web.  Often, I get requests to moch-up a prototype web template that will be passed off to a developer to begin writing code.  While I enjoy the challenge of coming up with a design from scratch, often times there is a request to have certain features and layout that are similar to a previous web application.  Welcome to Visual Studio Templates.

FIrst things first, lets decide on a layout for our master page. (I choose #24)

http://blog.html.it/layoutgala/

View the source of your chosen layout and grab the <style> content and the <body> content and put it in their respective places.

Step 1

Place the content between <style> and put it in a separate .css file (optional but recommended)

<head runat="server">
    <title>Template</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

Step 2

Copy the contents between <body> and don’t forget to include a <asp:ContentPlaceHolder>, I’ve edited some of the placeholder text here for readability purposes.

<body>
    <form id="form1" runat="server">
        <div id="container">
         <div id="header"><h1>Header</h1></div>
        <div id="wrapper">
        <div id="content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </div>
        <div id="navigation">
            <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler</p>
        </div>
        <div id="extra">
            <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler</p>
        </div>
        <div id="footer"><p>Footer.</p></div>
        </div>
    </form>
</body>

 

If you’ve been following along, you should have something similar to this.

 

image

Alright, now comes the cool part. If you’re happy with your template, you can now proceed to exporting your template by following these simple steps

  1. Go to: File -> Export Template
  2. Select Project Template
  3. Click Next
  4. You will now have the option to name the template as well as provide a description and icon to display in your New Project window.
  5. Click Finish

You should now see the web site in your “New Web Site” dialog box under the My Templates section.  In case you were curious, what you really did was create a zip package containing the files of your solution and dropping it in the My Documents\Visual Studio 2008\My Exported Templates folder.

 

 image

 

If you would like to learn more about the advanced topics of Visual Studio Templates, start by checking out the resources from MSDN.

http://msdn2.microsoft.com/en-us/library/6db0hwky.aspx

More

AJAX Tips

Some of you may know how to disable ajax updates on the ScriptManager tag directly..

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePartialRendering=”false” />

But did you know that you can also disable ajax for a specific content page?

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    ScriptManager.GetCurrent(this.Page).EnablePartialRendering = false;
}

If you want to find out if the page did an asynchronous postback or not, use this..

protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        Page.Title = "AJAX POSTBACK!";
    }
}

More

First Post!

Welcome to the site. I’m just now starting to get back in the swing of things after some time off of work.  One of my goals for this blog is to record my daily activities so that I can later look back and learn from them.  Although the categories on this blog will be pretty diverse initally, I’ll be trying to focus them on web standards and user interaction as it relates to Microsoft technologies.  “But Mike, there are already blogs out there that cover these topics..”  Well my blog is 100x better of course!  But in all seriousness, the content on this site is generally going to be related to what I have found that works best in situations that arise throughout the workday and even some side projects here and there.  You may find that some examples will not validate, they will not follow proper wedicate (web-edicate) but In these circumstances I will be giving reasons why.  With that being said, web technologies are constantly changing.  Most of my postings will be from my own trial and error, there will always be a handful of different ways of doing something.  Again this is a learning experience as I myself get enjoyment out of constantly improving the skills needed to become a better web developer and engineer.  In the end, you will learn how to do cool stuff.  What more do you need to know?

More