Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

September 2012 - Posts

Using real fonts in HTML 5 & CSS 3 pages

This is going to be the fifth post in a series of posts regarding HTML 5. You can find the other posts here, here , here and here.

In this post I will provide a hands-on example on how to use real fonts in HTML 5 pages with the use of CSS 3.

Font issues have been appearing in all websites and caused all sorts of problems for web designers.The real problem with fonts for web developers until now was that they were forced to use only a handful of fonts.CSS 3 allows web designers not to use only web-safe fonts.These fonts are in wide use in most user's operating systems.

Some designers (when they wanted to make their site stand out) resorted in various techniques like using images instead of fonts. That solution is not very accessible-friendly and definitely less SEO friendly.

CSS (through CSS3's Fonts module) 3 allows web developers to embed fonts directly on a web page.First we need to define the font and then attach the font to elements.

Obviously we have various formats for fonts. Some are supported by all modern browsers and some are not.The most common formats are, Embedded OpenType (EOT),TrueType(TTF),OpenType(OTF).

I will use the @font-face declaration to define the font used in this page. 

Before you download fonts (in any format) make sure you have understood all the licensing issues. Please note that all these real fonts will be downloaded in the client's computer.

A great resource on the web (maybe the best) is http://www.typekit.com/.They have an abundance of web fonts for use. Please note that they sell those fonts.

Another free (best things in life a free, aren't they?) resource is the http://www.google.com/webfonts website. I have visited the website and downloaded the Aladin webfont.

When you download any font you like make sure you read the license first. Aladin webfont is released under the Open Font License (OFL) license.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for web fonts from the latest versions of modern browsers.

Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

 

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

I create a simple HTML 5 page. The markup follows and it is very easy to use and understand

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
      </div>   
   
  
  </body>
 
</html>

 

Then I create the style.css file.

@font-face
{
font-family:Aladin;
src: url('Aladin-Regular.ttf')
}

h1
{
font-family:Aladin,Georgia,serif;


}

As you can see we want to style the h1 tag in our HTML 5 markup.I just use the @font-face property,specifying the font-family and the source of the web font.

Then I just use the name in the font-family property to style the h1 tag.

Have a look below to see my page in IE10.

 

Make sure you open this page in all your browsers installed in your machine. Make sure you have downloaded the latest versions.

Now we can make our site stand out with web fonts and give it a really unique look and feel.

Hope it helps!!!

 

Using multiple column layout with HTML 5 and CSS 3

This is going to be the fourth post in a series of posts regarding HTML 5. You can find the other posts here , here and here.

In this post I will provide a hands-on example with HTML 5 and CSS 3 on how to create a page with multiple columns and proper layout.

I will show you how to use CSS 3 to create columns much easier than relying on DIV elements and the float CSS rule.

I will also show you how to use browser-specific prefix rules (-ms for Internet Explorer and -moz for Firefox ) for browsers that do not fully support CSS 3.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

I will create a simple page with information about HTML 5, CSS 3 and JQuery.

This is the full HTML 5 code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
    <div id="main">
      <div id="mainnews">
        <div>
          <h2>HTML 5</h2>
        </div>
        <div>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          <div class="quote">
            <h4>Do More with Less</h4>
            <p>
             jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

            </p> 
          </div>
          <p>
            The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.         
            The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
        </div>
      </div>   
   
      <div id="CSS">
        <div>
          <h2>CSS 3 Intro</h2>
        </div>
        <div>
          <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
          </p>
        </div>
      </div>
     
      <div id="CSSmore">
        <div>
          <h2>CSS 3 Purpose</h2>
        </div>
        <div>
          <p>
            CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
          </p>
        </div>
      </div>
     
     
    </div>
    <div id="footer">
   
    <p>Feel free to google more about the subject</p>
 
    </div>
  
  </body>
 
</html>

 

The markup is very easy to follow. I have used some HTML 5 tags and the relevant HTML 5 doctype.

The CSS code (style.css) follows

 body{
        line-height: 30px;
        width: 1024px;
        background-color:#eee;
      }
     
      p{
   
    font-size:17px;
    font-family:"Comic Sans MS"
      }
      p,h2,h3,h4{
        margin: 0 0 20px 0;
      }
     
      #main, #header, #footer{
        width: 100%;
        margin: 0px auto;
        display:block;
      }
     
      #header{
        text-align: center;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
      }
     
      #footer{
        text-align: center;
        border-top: 1px solid #000;
        margin-bottom: 30px;
      }
     
      .quote{
       width: 200px;
       margin-left: 10px;
       padding: 5px;
       float: right;
       border: 2px solid #000;
       background-color:#F9ACAE;
      }
     
      .quote :last-child{
        margin-bottom: 0;
      }
     
      #main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;
      }
     
 

All the rules in the css code are pretty simple. The layout is achieved with that CSS rule

#main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;

Do note the column-count,column-gap and column-rule properties. These properties make the two column layout possible.

Please have a look at the picture below to see why I used prefixes for Chrome (webkit) and Firefox(moz).It clearly indicates that the CSS 3 column layout are not supported from Firefox and Chrome.

 

 

 Finally I test my simple HTML 5 page using the latest versions of Firefox,Internet Explorer and Chrome.

 In my machine I have installed Firefox 15.0.1.Have a look at the picture below to see how the page looks


 

I have installed Google Chrome 21.0 in my machine.Have a look at the picture below to see how the page looks


 Have a look at the picture below to see how my page looks in IE 10.

 

 

My page looks the same in all browsers.

Hope it helps!!!

Posted: Sep 16 2012, 08:17 PM by nikolaosk | with 1 comment(s) |
Filed under: , ,
Creating a multi-column rollover image gallery with HTML 5

I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.

I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page.

I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post. 

Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.

Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WEΒ offers today. 

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

In order to be absolutely clear this is not (and could not be ) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags.

Let's move now to the actual hands-on example.

In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.

Please have a look at the HTML Markup that I typed in my fancy editor package below

<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Do hover over the images with the mouse to see the full picture</h2>
</header>
<ul id="column1">

<li><a href="">

<img src="thumbs/john-barnes.jpg" alt="">
<img class="large" src="large-images/john-barnes-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/ian-rush.jpg" alt="">
<img class="large" src="large-images/ian-rush-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/graeme-souness.jpg" alt="">
<img class="large" src="large-images/graeme-souness-large.jpg" alt="">
</a>
</li>





</ul>

<ul id="column2">

<li><a href="">

<img src="thumbs/steven-gerrard.jpg" alt="">
<img class="large" src="large-images/steven-gerrard-large.jpg" alt="">
</a>
</li>


<li><a href="">

<img src="thumbs/kenny-dalglish.jpg" alt="">
<img class="large" src="large-images/kenny-dalglish-large.jpg" alt="">
</a>
</li>


<li><a href="">

<img src="thumbs/robbie-fowler.jpg" alt="">
<img class="large" src="large-images/robbie-fowler-large.jpg" alt="">
</a>
</li>


</ul>

<ul id="column3">

<li><a href="">

<img src="thumbs/alan-hansen.jpg" alt="">
<img class="large" src="large-images/alan-hansen-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/michael-owen.jpg" alt="">
<img class="large" src="large-images/michael-owen-large.jpg" alt="">
</a>
</li>


</ul>



</body>

</html>


 

You can download the images large-images.zip

It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>.

I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image

Make sure you validate your HTML 5 page in the validator found here

Have a look at the CSS code below that makes it all happen.


img { border:none;
}

#column1 { position: absolute; top: 30; left: 100;
}

li { margin: 15px; list-style-type:none;
}

#column1 a img.large {  position: absolute; top: 0; left:
700px; visibility: hidden;
}

#column1 a:hover { background: white;
}
#column1 a:hover img.large { visibility:visible;
}


#column2 { position: absolute; top: 30; left: 195px;
}
li { margin: 5px; list-style-type:none;
}



#column2 a img.large { position: absolute; top: 0; left:
510px; margin-left:0; visibility: hidden;
}

#column2 a:hover { background: white;
}
#column2 a:hover img.large { visibility:visible;
}

#column3 { position: absolute; top: 30; left: 400px; width:108px;
}
li { margin: 5px; list-style-type:none;
}

#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:
315px; margin-left:0; visibility: hidden;
}

#column3 a:hover { background: white;
}
#column3 a:hover img.large { visibility:visible;
}

Ιn the first line of the CSS code I set the images to have no border.

Then I place the first column in the page and then remove the bullets from the list elements.

Then I use the large CSS class to create a position for the large image and hide it.

Finally when the hover event takes place I make the image visible.

I repeat the process for the next two columns.

I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.

Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post.

Hope it helps!!!!

Posted: Sep 15 2012, 09:09 PM by nikolaosk | with no comments
Filed under: , ,
Page Inspector and Visual Studio 2012

In this post I will be looking into a new feature that has been added to theVS 2012 IDE. I am talking about Page Inspector that gives developers a very good/handy way to identify layout issues and to find out which part of server side code is responsible for that HTML snippet of code.

If you are interested in reading other posts about VS 2012 and .Net 4.5 please have a look here and here.

This tool is integrated into the VS 2012 IDE.We can launch it in different ways.

1) We will create a new ASP.Net MVC application (an Internet application). I will not add any code.

2) In the Solution Explorer I choose my project and right-click. From the available options select View in Page Inspector

Have a look at the picture below.

 

 3) We can launch Page Inspector from the Standard Toolbar. Please have a look at the picture below.

 

 

4) Let's view our application with Page Inspector. First I inspect the About link-menu.I can see very quickly the HTML that is rendering for that link to appear. I also see the server side code (the actual view, _Layout.cshtml) that is responsible for that link. This is something developers always craved for. We can also see the CSS styles that are used to style this link (About).

Have a look at the picture below

 

Obviously there are similar tools that I have been using in the past when I wanted to change a part of the HTML or see what piece of CSS code affects my layout. I used Firebug when viewing my web applications in the Firefox browser. Internet Explorer and Chrome have also great similar tools that help web developers to identify issues with a site's appearance/issues.

Please bear in mind that Page Inspector works with all forms of the ASP.Net stack e.g Web Forms,Web Pages.

Hope it helps!!!!!

Looking into Strongly Typed Data Controls in ASP.Net 4.5 and Visual Studio 2012

In this post I will be demonstrating a brand new feature which available in ASP.Net 4.5.I will be demonstrating the numerous features added in .Net 4.5 in future posts. Have a a look if you want in my last post that investigates enhancements added to EF 5.0 Designer.

I will be demonstrating with a hands-on example on Strongly Typed Data controls and how we can have Intellisense and compile type checking using this new feature.

I assume you have downloaded VS 2012 (Express edition will do).I have also downloaded and installed AdventureWorksLT2012 database.You can download this database from the codeplex website.  

I will be creating a simple website without using this feature. Then I will show you what the problem is without using this feature.

1) Launch VS 2012. Create a new ASP.Net Web Forms Site. Choose C# as the development language.Give an appropriate name to your site.

2) Now we will add a data access layer to our site in order to fetch some data to the user interface.I will use EF database first approach.

3) Add a new item in your project, an ADO.Net Entity Data Model. I have named it AdventureWorksLT.edmx.Then we will create the model from the database and click Next.Create a new connection by specifying the SQL Server instance and the database name and click OK.Then click Next in the wizard.In the next screen of the wizard select only the Customer table from the database and hit Finish.You will see the Customer entity in the Entity Designer. 

4) Add a new web form to your site.Name is Customer.aspx.We will add a new web server control a GridView that will get the data from the database through EF.

 This is the code for the web server control.I am using the Bind syntax.We are using strings to represent the property names (FirstName,LastName).

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

            <Columns>
                <asp:TemplateField HeaderText="FirstName">
                   

                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                    </ItemTemplate>
               

               </asp:TemplateField>
               

               <asp:TemplateField HeaderText="LastName">
                   

                     <ItemTemplate>
                        <asp:Label ID="lbName" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                    </ItemTemplate>


                </asp:TemplateField>


            </Columns>


        </asp:GridView>

 

 5) In the Page_Load event handling routine of the Customer.aspx page type the following code

 

        AdventureWorks2012Entities ctx = new AdventureWorks2012Entities();

        var query = from cust in ctx.Customers
     
        select new {cust.FirstName,cust.LastName};

        GridView1.DataSource = query.ToList();


        GridView1.DataBind();

 

I am not going to explain the code here. Have a look in my blog for other EF posts if you have any trouble with this.

 

6)  Build and Run the application. You will see the data appearing on the page.

7) Now let's do a simple typo.Replace the following line

  <asp:Label ID="lbName" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>

with this

  <asp:Label ID="lbName" runat="server" Text='<%# Bind("LLastName") %>'></asp:Label>

 

Build your site. It will compile. The compiler does not know anything . Guess where you will get the exception, at runtime.Run your site and you will get an exception.

 

8) Let's rewrite the code in the Customers.aspx page.

 

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ItemType="AdventureWorks2012Entities.Customer">

            <Columns>
                <asp:TemplateField HeaderText="FirstName">


                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server" Text='<%# Item.FirstName %>'></asp:Label>
                    </ItemTemplate>


                </asp:TemplateField>
                <asp:TemplateField HeaderText="LastName">


                    <ItemTemplate>
                        <asp:Label ID="lbName" runat="server" Text='<%# Item.LastName %>'></asp:Label>
                    </ItemTemplate>


                </asp:TemplateField>


            </Columns>


        </asp:GridView>
 

Now we can tell our application what type of data the control will be bound to using the ItemType 

ItemType="AdventureWorks2012Entities.Customer"

 

Now we need to alter the code in the template. Have a look at those 2 lines 

   <asp:Label ID="lblName" runat="server" Text='<%# Item.FirstName %>'></asp:Label>

  <asp:Label ID="lbName" runat="server" Text='<%# Item.LastName %>'></asp:Label>

 Now we have compile type checking and Intellisense in our sample application.As we type the compiler informs us if it recognizes the property. This is a great enhancement since I do not want to face exceptions on runtime because of typos.

 9) Build and run your application again. The sample application works fine.

 

Hope it helps!!!

 

Using multiple diagrams per model in Entity Framework 5.0

I have downloaded .Net framework 4.5 and Visual Studio 2012 since it was released to MSDN subscribers on the 15th of August.For people that do not know about that yet please have a look at Jason Zander's excellent blog post .

Since then I have been investigating the many new features that have been introduced in this release.In this post I will be looking into the new support for multiple diagrams that EF Designer has out of the box.

In order to follow along this post you must have Visual Studio 2012 and .Net Framework 4.5 installed in your machine.Download and install VS 2012 using this link.

My machine runs on Windows 8 and Visual Studio 2012 works just fine.

I have also installed in my machine SQL Server 2012 developer edition. I have also downloaded and installed AdventureWorksLT2012 database.You can download this database from the codeplex website.  

Before I start showcasing the demo I want to say that I strongly believe that Entity Framework is maturing really fast and now at version 5.0 can be used as your data access layer in all your .Net projects.

I have posted extensively about Entity Framework in my blog.Please find all the EF related posts here.

In this demo I will show you how to split an entity model into multiple diagrams using the new enhanced EF designer. We will not build an application in this demo.

Sometimes our model can become too large to edit or view.In earlier versions we could only have one diagram per EDMX file.In EF 5.0 we can split the model into more diagrams.

1) Launch VS 2012. Express edition will work fine.

2) Create a New Project. From the available templates choose a Web Forms application 

3) Add a new item in your project, an ADO.Net Entity Data Model. I have named it AdventureWorksLT.edmx.Then we will create the model from the database and click Next.Create a new connection by specifying the SQL Server instance and the database name and click OK.Then click Next in the wizard.In the next screen of the wizard select all the tables from the database and hit Finish.

4) It will take a while for our .edmx diagram to be created. When I select an Entity (e.g Customer) from my diagram and right click on it,a new option appears "Move to new Diagram".Make sure you have the Model Browser window open.

Have a look at the picture below

 

5) When we do that a new diagram is created and our new Entity is moved there.

Have a look at the picture below

 

 6) We can also right-click and include the related entities. Have a look at the picture below.

 

7) When we do that the related entities are copied to the new diagram.

Have a look at the picture below 

 

8) Now we can cut (CTRL+X) the entities from Diagram2 and paste them back to Diagram1.

9) Finally another great enhancement of the EF 5.0 designer is that you can change colors in the various entities that make up the model.

Select the entities you want to change color, then in the Properties window choose the color of your choice. Have a look at the picture below.

 

To recap we have demonstrated how to split your entity model in multiple diagrams which comes handy in EF models that have a large number of entities in them

Hope it helps!!!!

More Posts « Previous page