Ehsan Tavakoli: 2010

Monday, 22 February 2010

http://blog.etavakoli.com

I moved to: http://blog.etavakoli.com

See you there :)

Saturday, 20 February 2010

When you are trying to create a master page for your website, you may just wonder how can you make them that every user with any browser can call your pages up. No matter they are using IE or Firefox or even Opera on their tiny PocketPC.

You can easily design different pages for different container. How? By adding an attribute into master page property.

<%@ Page language="C#" MasterPageFile="~/Test.master"
      Mozilla:MasterPageFile="~/TestMozilla.master"
      Opera:MasterPageFile="~/TestOpera.master" %>
....

You can find a list of available browsers on the production server where the application will be hosted at C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers\

avantgo
cassio
Default
docomo
ericsson
EZWap
gateway
generic
goAmerica
ie
Jataayu
jphone
legend
MME
mozilla
netscape
nokia
openwave
opera
palm
panasonic
pie
webtv
winwap
xiino

Friday, 19 February 2010

How to set FireFox as a default browser in Visual Studio 2008

I just found such an easy way to set Firefox as a default browser in VS 2008. I felt silly when I had to open Firefox by myself each time I was trying to debug a web site.
The solution? It's piece of cake!

Right Click on your project name in Solution Explorer:

Click on "Browse with..." and then select Firefox as a default.

Here we go! :)

Wednesday, 17 February 2010

Using MasterPage and Tableless design ASP.NET

Hey again, in this post I'm going to show how easily we can use a tableless design (with div and CSS) with MasterPage in ASP.NET 3.5. The trick is that we need nested master pages.

1. For start, we need a tableless design. We can get free designs from: http://www.oswd.org
I chose a template called Grapes: http://www.oswd.org/design/preview/id/3567 it's awesome! You can download it as well.

First, you need to copy the css file and images folder into your project. Then we need 3 different Masterpages to implement what we need. We assume that we need a dynamic menu and dynamic content.

Here is our template code: (it's plain HTML with CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Grapes</title>
<link rel="stylesheet" type="text/css" href="grapes.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Your name here" />
<meta name="Copyright" content="Copyright (c) Your copyright here 2005" />
</head>
<body>
<div id="container">
<div id="hdr">
<h1>grapes</h1>
<p id="tagline">fruit, wine &amp; web design</p>
</div>

<div id="lftcol">
 <ul id="nav">
  <li><a href="" id="current">Introduction</a></li>
  <li><a href="">Our Wines</a></li>
  <li><a href="">Important Grapes</a></li>
  <li><a href="">Contact Us</a></li>
  <li><a href="">Links</a></li>
 </ul>

<div id="quote">
<p><em>A great source for information...</em></p>
</div>
 
<h3>More stuff</h3>
 <ul>
  <li><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a></li>
  <li><a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a></li>
  <li><a href="http://www.davereederdesign.com/">Authors Website</a></li>
  <li><a href="http://www.oswd.org/">OSWD</a></li>  
 </ul>

</div>



<div id="rgtcol">
<h2>Introduction</h2>
<p>Hello and welcome to my latest template called &quot;Grapes&quot;.  
<br /> 
&quot;Grapes&quot; is an Open Source web template which means it can be used without the need to ask permission and you have full rights to use and adapt its images.  For more of my work, please see my website which can be found  <a href="http://www.davereederdesign.com/">here.</a>
</p>
<p>
I wanted to create a fairly simple yet attractive template which can be used for food or wine related websites, although it can easily be adapted for other uses too. 
</p>


<h2>But is it <em>easy</em> to Use?</h2>
<p>&quot;Grapes&quot; should be quite easy to use as I have added plenty of comments and tried to make the <acronym title="Cascading Style Sheet">CSS</acronym> as neat and organised as possible. 
</p>
<p>There are also plenty of styles for other tags, including:</p>

<p><code>Text using the code tag, this is ideal for showing code on a page.</code></p>

<p><acronym title="acronym text">acronym text</acronym></p>

<p><strong>strong or bold text</strong></p>

<p><em>em or italic text</em></p>

<p>This is a paragraph of normal text that contains <span>span</span> tags with a class set to <span>special</span>.  This means all the <span>big words</span> in this paragraph are words that are placed between opening and closing <span>span</span> tags.  These span tags can be used to add meaning to a block of text or to <span>shout out</span> when needed.</p>
</div>

<div id="bttmbar">Copyright &copy; Your Copyright Info</div>


</div>

</body>
</html>

Second, HeaderMasterPage.master

<%@ Master Language="C#" MasterPageFile="~/MainMasterPage.master" AutoEventWireup="true" CodeFile="HeaderMasterPage.master.cs" Inherits="MasterPage1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <div id="hdr">
            <h1>
                grapes</h1>
            <p id="tagline">
                fruit, wine & web design</p>
        </div>


            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
     
</asp:Content>

and Third, MenuMasterPage.master

<%@ Master Language="C#" MasterPageFile="~/HeaderMasterPage.master" AutoEventWireup="true" CodeFile="MenuMasterPage.master.cs" Inherits="MasterPage2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div id="lftcol">
<ul id="nav">
<li><a href="" id="current">Introduction</a></li>
<li><a href="">Our Wines</a></li>
<li><a href="">Important Grapes</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Links</a></li>
</ul>

<div id="quote">
<p><em>A great source for information...</em></p>
</div>

<h3>More stuff</h3>
<ul>
<li><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a></li>
<li><a href="http://www.davereederdesign.com/">Authors Website</a></li>
<li><a href="http://www.oswd.org/">OSWD</a></li>
</ul>

</div>



<div id="rgtcol">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
            </asp:ContentPlaceHolder>
</div>
</asp:Content>

now, we can use MenuMasterPage.master in our ASPX file

Here is a sample default.aspx file:

<%@ Page Title="" Language="C#" MasterPageFile="~/MenuMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<h2>Introduction</h2>
<p>Hello and welcome to my latest template called "Grapes".
<br />
"Grapes" is an Open Source web template which means it can be used without the need to ask permission and you have full rights to use and adapt its images.  For more of my work, please see my website which can be found  <a href="http://www.davereederdesign.com/">here.</a>
</p>
<p>
I wanted to create a fairly simple yet attractive template which can be used for food or wine related websites, although it can easily be adapted for other uses too.
</p>


<h2>But is it <em>easy</em> to Use?</h2>
<p>"Grapes" should be quite easy to use as I have added plenty of comments and tried to make the <acronym title="Cascading Style Sheet">CSS</acronym> as neat and organised as possible.
</p>
<p>There are also plenty of styles for other tags, including:</p>

<p><code>Text using the code tag, this is ideal for showing code on a page.</code></p>

<p><acronym title="acronym text">acronym text</acronym></p>

<p><strong>strong or bold text</strong></p>

<p><em>em or italic text</em></p>

<p>This is a paragraph of normal text that contains <span>span</span> tags with a class set to <span>special</span>.  This means all the <span>big words</span> in this paragraph are words that are placed between opening and closing <span>span</span> tags.  These span tags can be used to add meaning to a block of text or to <span>shout out</span> when needed.</p>
</asp:Content>

Look at the final screenshot:

Tuesday, 16 February 2010

Sample use of CompareValidator and CustomValidator for Calendar component

Here is a very simple sample about how we can use CompareValidator and also CustomValidator for checking calendar selection. In this example, there are two calendars which ask user to select his arrival and departure date. It can be usually used in booking systems. With validators we are trying to ask user to entry proper date at first and then want to force user to book at least for 2 days. We implement the last rule by using CustomValidator...

Here is our default.aspx source:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Booking</title>


<style type="text/css">
div.fixed 
{
    width: 900px;
    margin: 0px auto;
}

div.left 
{
    float: left;
    width: 450px;
}

div.right 
{
    float: right;
    width: 450px;
}
</style>


</head>
<body>
    <form id="form1" runat="server">
        <div class="fixed">
            <div class="left">
                <p>Select your arrival date:</p>
                <br />
                <asp:TextBox ID="arriveTxt" runat="server"></asp:TextBox>
                <asp:Calendar ID="arrive" runat="server" 
                    onselectionchanged="arrive_SelectionChanged"></asp:Calendar>        
            </div>
            <div class="right">
                <p>Select your departure date:</p>
                <br />
                <asp:TextBox ID="departureTxt" runat="server"></asp:TextBox>
                <asp:Calendar ID="departure" runat="server" 
                    onselectionchanged="departure_SelectionChanged"></asp:Calendar>    
            </div>
        
            <asp:CompareValidator ID="validator1" runat="server" ControlToValidate="departureTxt" ControlToCompare="arriveTxt" Type="Date" Operator="GreaterThan" Text="Please Select a Proper Date For Departure/Arrive"></asp:CompareValidator>
        
    
            <br />
            <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
            <asp:CustomValidator ID="validator2" runat="server" ControlToValidate="departureTxt" OnServerValidate="ServerDateValidation">You Must at Least Book for 2 Days</asp:CustomValidator>
            <br />
        
        </div>
    </form>
</body>
</html>

And this is our code behinde:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack) {
            departure.SelectedDate = DateTime.Now.Date;
            arrive.SelectedDate = DateTime.Now.Date;
        
            departureTxt.Text = departure.SelectedDate.ToShortDateString();
            arriveTxt.Text = arrive.SelectedDate.ToShortDateString();

       }
    
    
    
    }


    protected void departure_SelectionChanged(object sender, EventArgs e)
    {
        departureTxt.Text = departure.SelectedDate.ToShortDateString();
    }

    protected void arrive_SelectionChanged(object sender, EventArgs e)
    {
        arriveTxt.Text = arrive.SelectedDate.ToShortDateString();

    }


    protected void Button1_Click(object sender, EventArgs e)
    {
    
    }
    protected void ServerDateValidation(object source, ServerValidateEventArgs args)
    {
        System.TimeSpan datediff = departure.SelectedDate - arrive.SelectedDate;

        if (datediff.Days > 2)
            args.IsValid = true;
        else
            args.IsValid = false;

    }
}

Thursday, 11 February 2010

HOW to design Tableless

As, I started introducing DIV tag in my last post. Here is a simple sample that how we can use div in our designs.

In this approach, we want to create a two rows/three columns webpage. We call them 'Header', 'LeftCol', 'Main', 'RightCol'

First of all we need a proper CSS:

<style type="text/css">
body {
  margin: 0;
  padding: 0; 
}

#header {
  background: #CCFF33;
  height: 100px;
}

#leftcol {
  background: #FF6633;
  float: left;
  width: 150px;
  height: 500px;
}

#rightcol {
  background: #FF6633;
  float: left;
  width: 150px;
  height: 500px;
}

#main {

  background: #fff;
  float: left;
  width: 600px;
  height: 500px;
}


div.fixed
{
    width: 900px;
    margin: 0px auto;
}


}
</style>

CSS is almost everything when you are designing your layout with 'div'

Here is the sample HTML code:

<div class="fixed">
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="main">Main Section</div>
<div id="rightcol">Right Section</div>
</div>

Just remember I used 'fixed' class to put all elements in center of page. And not matter what user's browser size is, content gets 900px of its window.

Wednesday, 10 February 2010

Using DIV instead of TABLE

DIV tag really has more flexibility in page layout than table. You can simply put a div in any sections of your webpage. Moreover, you can move or edit your div with AJAX technology easier than table.

In other hand, div tag produces fewer characters than table. Like that:

<div>
</div>

And:

<table>
  <tr>
    <td>
    </td>
  </tr>
</table>

Therefore, it will help you to diminish your page source character and let it to load faster.

Then another reason that’s why it’s better to use div is for CSS. You can modify your div sections by CSS much easier than table tag.

Now, with all these good features you may wonder why they have created table at all. Designers in W3C have made table tag for creating tables (in context) and also for making tabs. Table tag is easy to use and time effective and can be used for implementing tabs so much faster and cheaper than div tag.

Here is the list of div features:

• Less weight in page size

• Higher Page Rank in Google and other search engines

• Higher Flexibility

• More control with CSS

I’m strongly advising any developers to use div instead of table in your designs. Eventually, let’s check out this website: http://www.csszengarden.com which has been designed with div codes and you can easily change the whole design by clicking the links on the right menu.

In the next few posts, I'm going to write how to use div in your design....

3, 2, 1, Go!

Visual Studio 2010 and .NET framework 4.0 RC will be released today for general download. So, you can find more information and download link from: http://msdn.microsoft.com/en-gb/vstudio/dd582936.aspx

As Microsoft website says:

2010 is different - handing off files to my team is a lot more efficient. That frees up my time to be more creative.

With the prototyping tool, I can share my ideas and then watch them come to life.

for sure, I will post more topics after downloading it for myself.

It's in ISO format and the license will be expire on July 2010

Ehsan Tavakoli

Monday, 22 February 2010

http://blog.etavakoli.com

Saturday, 20 February 2010

Browser-Specific Master Pages

Friday, 19 February 2010

How to set FireFox as a default browser in Visual Studio 2008

Wednesday, 17 February 2010

Using MasterPage and Tableless design ASP.NET

Tuesday, 16 February 2010

Sample use of CompareValidator and CustomValidator for Calendar component

Thursday, 11 February 2010

HOW to design Tableless

Wednesday, 10 February 2010

Using DIV instead of TABLE

3, 2, 1, Go!

About Me

+Fav Links

Blog Archive

Latest Microsoft Blogs

Channel 9

Labels

My Favorite Books