Dot Net Rules

What's new in ASP.Net 4.5 and VS 2012 - part 2

This is the second post in a series of posts titled "What's new in ASP.Net 4.5 and VS 2012".You can have a look at the first post in this series, here.

Please find all my posts regarding VS 2012, here.

In this post I will be looking into the various new features available in ASP.Net 4.5 and VS 2012.I will be looking into the enhancements in the HTML Editor,CSS Editor and Javascript Editor.

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 will work fine in Windows 7 as well so do not worry if you do not have the latest Microsoft operating system.

1) Launch VS 2012 and create a new Web Forms application by going to File - >New Web Site - > ASP.Net Web Forms Site.

2) Choose an appropriate name for your web site.

3) I would like to point out the new enhancements in the CSS editor in VS 2012. In the Solution Explorer in the Content folder and open the Site.css

Then when I try to change the background-color property of the html element, I get a brand new handy color-picker.

Have a look at the picture below

Please note that the color-picker shows all the colors that have been used in this website.

Then you can expand the color-picker by clicking on the arrows. Opacity is also supported.

Have a look at the picture below

4) There are also mobile styles in the Site.css .These are based on media queries.

Please have a look at another post of mine on CSS3 media queries.

Have a look at the picture below

In this case when the maximum width of the screen is less than 850px there will be a new layout that will be dictated by these new rules.

 Also CSS snippets are supported. Have a look at the picture below

I am writing a new CSS rule for an image element. I write the property transform and hit tab and then I have cross-browser CSS handling all of the major vendors.Then I simply add the value rotate and it is applied to all the cross browser options.

Have a look at the picture below.

I am sure you realise how productive you can become with all these CSS snippets.

5) Now let's have a look at the new HTML editor enhancements in VS 2012

You can drag and drop a GridView web server control from the Toolbox in the Site.master file.

You will see a smart tag (that was only available in the Design View) that you can expand and add fields, format the web server control.

Have a look at the picture below

6) We also have available code snippets. I type <video and then press tab twice.By doing that I have the rest of the HTML 5 markup completed.

Have a look at the picture below

7) I have new support for the input tag including all the HTML 5 types and all the new accessibility features.

Have a look at the picture below

8) Another interesting feature is the new Intellisense capabilities. When I change the DocType to 4.01 and the type <audio>,<video> HTML 5 tags, Intellisense does not recognise them and add squiggly lines.

Have a look at the picture below

All these features support ASP.Net Web forms, ASP.Net MVC applications and Web Pages.

9) Finally I would like to show you the enhanced support that we have for Javascript in VS 2012.

 I have full Intellisense support and code snippets support.

I create a sample javascript file. I type If and press tab. I type while and press tab.I type for and press tab.In all three cases code snippet support kicks in and completes the code stack.

Have a look at the picture below

We also have full Intellisense support.

Have a look at the picture below

I am creating a simple function and then type some sort of XML like comments for the input parameters.

Have a look at the picture below.

Then when I call this function, Intellisense has picked up the XML comments and shows the variables data types.

Have a look at the picture below

Hope it helps!!!

What's new in ASP.Net 4.5 and VS 2012 - part 1

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 new features available in ASP.Net 4.5 and VS 2012.

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.

Please find all my posts regarding VS 2012, here .

Well I have not exactly kept my promise for writing short blog posts, so I will try to keep this one short.

1) Launch VS 2012 and create a new Web Forms application by going to File - >New Web Site - > ASP.Net Web Forms Site.

2) Choose an appropriate name for your web site.

3) Build and run your site (CTRL+F5). Then go to View - > Source to see the HTML markup (Javascript e.t.c) that is rendered through the browser.

You will see that the ASP.Net team has done a good job to make the markup cleaner and more readable. The ViewState size is significantly smaller compared to its size to earlier versions.

Have a look at the picture below

4) Another thing that you must notice is that the new template makes good use of HTML 5 elements.When you view the application through the browser and then go to View Page Source you will see HTML 5 elements like nav,header,section.

Have a look at the picture below

5) In VS 2012 we can browse with multiple browsers. There is a very handy dropdown that shows all the browsers available for viewing the website.

Have a look at the picture below

When I select the option Browse With... I see another window and I can select any of the installed browsers I want and also set the default browser.

Have a look at the picture below

When I click Browse, all the selected browsers fire up and I can view the website in all of them.

Have a look at the picture below

There will be more posts soon looking into new features of ASP.Net 4.5 and VS 2012

Hope it helps!!!

Using JQuery tabs in an HTML 5 page

In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.

Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.

Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

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. 

Let me move on to the actual example.

This is the sample HTML 5 page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Liverpool Legends</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
     <script type="text/javascript" src="tabs.js"></script>
    
  </head>
  <body>
    <header>
        <h1>Liverpool Legends</h1>
    </header>
 
    <section id="tabs">
        <ul>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>
        </ul>
   <div id="first-tab">
     <h3>Liverpool Defenders</h3>
     <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>
   </div>
   <div id="second-tab">
     <h3>Liverpool Midfielders</h3>
     <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.
 
       </p>
   </div>
   <div id="third-tab">
     <h3>Liverpool Strikers</h3>
     <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>
      </p>
   </div>

 </div>

</section>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
  
  </body>
 
</html> 

This is very simple HTML markup. 

I have styled this markup using CSS.

The contents of the style.css file follow

* {
    margin: 0;
    padding: 0;
}

header

{

font-family:Tahoma;
font-size:1.3em;
color:#505050;
text-align:center;
}


#tabs {
    font-size: 0.9em;
    margin: 20px 0;
}
#tabs ul {
    float: left;
    background: #777;
    width: 260px;
    padding-top: 24px;

}
#tabs li {
    margin-left: 8px;
    list-style: none;
}
* html #tabs li {
    display: inline;
}
#tabs li, #tabs li a {
    float: left;
}
#tabs ul li.active {
    border-top:2px red solid;
    background: #15ADFF;
}
#tabs ul li.active a {
    color: #333333;
}
#tabs div {
    background: #15ADFF;
    clear: both;
    padding: 15px;
    min-height: 200px;
}
#tabs div h3 {
    margin-bottom: 12px;
}
#tabs div p {
    line-height: 26px;
}
#tabs ul li a {
    text-decoration: none;
    padding: 8px;
    color:#0b2f20;
    font-weight: bold;
}

footer
{
background-color:#999;
width:100%;
text-align:center;
font-size:1.1em;
color:#002233;
}

There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules.

The JQuery code lives inside the tabs.js file

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
 
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
 

I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass

I hide and show the tabs when the tab becomes the active tab.

When I view my page I get the following result

Hope it helps!!!!!

Scrolling an HTML 5 page using JQuery

In this post I will show you how to use JQuery to scroll through an HTML 5 page.I had to help a friend of mine to implement this functionality and I thought it would be a good idea to write a post.

I will not use any JQuery scrollbar plugin,I will just use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download.

Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

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. 

Let me move on to the actual example.

This is the sample HTML 5 page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Liverpool Legends</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   
    <link rel="stylesheet" type="text/css" href="style.css">
   
    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
     <script type="text/javascript" src="scroll.js">
     </script>
     
  </head>
  <body>
    <header>
        <h1>Liverpool Legends</h1>

    </header>
   
    <div id="main">
   
    <table>
        <caption>Liverpool Players</caption>

        <thead>
            <tr>
                <th>Name</th>
                <th>Photo</th>
                <th>Position</th>
                <th>Age</th>
                <th>Scroll</th>
            </tr>
        </thead>
        <tfoot class="footnote">
            <tr>
                <td colspan="4">We will add more photos soon</td>

            </tr>
        </tfoot>
    <tbody>
        <tr class="maintop">
        <td>Alan Hansen</td>
            <td>
            <figure>
            <img src="images\Alan-hansen-large.jpg" alt="Alan Hansen">
            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/Alan_Hansen">Alan Hansen</a></figcaption>
            </figure>
            </td>
            <td>Defender</td>
            <td>57</td>
            <td class="top">Middle</td>
        </tr>
        <tr>
        <td>Graeme Souness</td>
            <td>
            <figure>
            <img src="images\graeme-souness-large.jpg" alt="Graeme Souness">
            <figcaption>Souness was the captain of the successful Liverpool team of the early 1980s <a href="http://en.wikipedia.org/wiki/Graeme_Souness">Graeme Souness</a></figcaption>
            </figure>
            </td>
            <td>MidFielder</td>
            <td>59</td>
        </tr>
        <tr>
        <td>Ian Rush</td>
            <td>
            <figure>
            <img src="images\ian-rush-large.jpg" alt="Ian Rush">
            <figcaption>The deadliest Liverpool Striker <a href="http://it.wikipedia.org/wiki/Ian_Rush">Ian Rush</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>51</td>
        </tr>
        <tr class="mainmiddle">
        <td>John Barnes</td>
            <td>
            <figure>
            <img src="images\john-barnes-large.jpg" alt="John Barnes">
            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/John_Barnes_(footballer)">John Barnes</a></figcaption>
            </figure>
            </td>
            <td>MidFielder</td>
            <td>49</td>
            <td class="middle">Bottom</td>
        </tr>
       
        <tr>
        <td>Kenny Dalglish</td>
            <td>
            <figure>
            <img src="images\kenny-dalglish-large.jpg" alt="Kenny Dalglish">
            <figcaption>King Kenny <a href="http://en.wikipedia.org/wiki/Kenny_Dalglish">Kenny Dalglish</a></figcaption>
            </figure>
            </td>
            <td>Midfielder</td>
            <td>61</td>
        </tr>
        <tr>
            <td>Michael Owen</td>
            <td>
            <figure>
            <img src="images\michael-owen-large.jpg" alt="Michael Owen">
            <figcaption>Michael was Liverpool's top goal scorer from 1997–2004 <a href="http://www.michaelowen.com/">Michael Owen</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Robbie Fowler</td>
            <td>
            <figure>
            <img src="images\robbie-fowler-large.jpg" alt="Robbie Fowler">
            <figcaption>Fowler scored 183 goals in total for Liverpool <a href="http://en.wikipedia.org/wiki/Robbie_Fowler">Robbie Fowler</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>38</td>
        </tr>
        <tr class="mainbottom">
            <td>Steven Gerrard</td>
            <td>
            <figure>
            <img src="images\steven-gerrard-large.jpg" alt="Steven Gerrard">
            <figcaption>Liverpool's captain <a href="http://en.wikipedia.org/wiki/Steven_Gerrard">Steven Gerrard</a></figcaption>
            </figure>
            </td>
            <td>Midfielder</td>
            <td>32</td>
            <td class="bottom">Top</td>
        </tr>


    </tbody>
</table>
     
    </div>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
  
  </body>
 
</html> 

The markup is very easy to follow and understand. You do not have to type all the code,simply copy and paste it.For those that you are not familiar with HTML 5, please take a closer look at the new tags/elements introduced with HTML 5.

When I view the HTML 5 page with Firefox I see the following result.

I have also an external stylesheet (style.css).

body{
background-color:#efefef;
}

h1{

font-size:2.3em;

}

table {

border-collapse: collapse;
font-family: Futura, Arial, sans-serif;

}
caption {

font-size: 1.2em;
margin: 1em auto;


}
th, td {

padding: .65em;

}

th, thead {

background: #000;
color: #fff;
border: 1px solid #000;

}
tr:nth-child(odd)
{
background: #ccc;
}
tr:nth-child(even)
{
background: #404040;
}



td
{
border-right: 1px solid #777;
}
table
{
 border: 1px solid #777;
 }

.top, .middle, .bottom
{
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    text-align: center;

}

.footnote
{
text-align:center;
font-family:Tahoma;
color:#EB7515;

}

a{color:#22577a;text-decoration:none;}    
a:hover {color:#125949; text-decoration:none;} 

footer
{
background-color:#505050;
width:1150px;
}

These are just simple CSS Rules that style the various HTML 5 tags,classes.

The jQuery code that makes it all possible resides inside the scroll.js file.Make sure you type everything correctly.

$(document).ready(function() {


                $('.top').click(function(){


                    $('html, body').animate({


                        scrollTop: $(".mainmiddle").offset().top


                    },4000 );


                 });


                $('.middle').click(function(){

                    $('html, body').animate({

                        scrollTop: $(".mainbottom").offset().top

                    },4000);

                 });


                    $('.bottom').click(function(){

                    $('html, body').animate({

                        scrollTop: $(".maintop").offset().top

                    },4000);

                 });

});
 

Let me explain what I am doing here.When I click on the Middle word (  $('.top').click(function(){ ) this relates to the top class that is clicked.

Then we declare the elements that we want to participate in the scrolling. In this case is html,body ( $('html, body').animate).These elements will be part of the vertical scrolling.

In the next line of code we simply move (navigate) to the element (class mainmiddle that is attached to a tr element.)

      scrollTop: $(".mainmiddle").offset().top 

Make sure you type all the code correctly and try it for yourself. I have tested this solution will all 4-5 major browsers.

Hope it helps!!!

Disabling the right-click sub menu using JQuery

Recently I needed to disable the right-click contextual menu in an HTML page for a very simple HTML application I was creating for a friend.

This is going to be a short post where I will demonstrate how to disable the right-click contextual menu.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

Please find here all my posts regarding JQuery.

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 am going to create a very simple HTML 5 page with some text and an image.

The HTML markup for the page follows. 

<!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">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
  
   <figure>
  <img src="html5.png" alt="HTML 5">
</figure>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <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>
          </article>
      </div>   
   
  
  </body>
 
</html>

This is the JQuery code, I use

 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);

I simply disable/cancel the contextmenu event.When I load the simple page on the browser and I right-click the context menu does not appear.

Hope it helps!!!

Resizing text in an HTML 5 page using JQuery

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

In this post I will demonstrate how to implement a very common feature found in websites today, enabling the visitor to increase or decrease the font size of a page.

You can use the JQuery code I will write in this post for HTML pages which do not follow the HTML 5 standard.

As I said earlier we need to write JavaScript to implement this functionality.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

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.

The HTML markup for the page follows.

<!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">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

$(function() {
    $('a').click(function() {
        var getfont = $('p').css('font-size');
        var mynum = parseFloat(getfont, 10);
        var newmwasure = getfont.slice(-2);
       
        $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);
        }
    })
   

})

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
    <div id="resize">
    <a href="" id="increase">Increase Font</a>
       |
        <a href="" id="decrease">Decrease Font</a>
        </div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <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>
          </article>
      </div>   
   
  
  </body>
 
</html>

There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and the JQuery code is included inside the .html page.

I have two links on this page that will increase/decrease the font size of the contents enclosed inside the <p></p> tags.

Let me explain what the JQuery code does.

When the user clicks on the link, I store in a variable the current font size of the <p> element that I get back from the CSS function.

var getfont = $('p').css('font-size');

So now we have the original value. That will return a value like "16px" "1.2em".

Then I need to get the unit of measurement (px,em).I use the slice() function.

 var newmwasure = getfont.slice(-2);

Then I want to get only the numeric part of the returning value.I do that using the parseFloat() function.

Have a look at the parseFloat() function.

Finally with this bit of code I choose a ratio (I am devising a very simple algorithm for increasing and decreasing) and apply it to the <p> element. I still use the CSS function. You can get but also set the font size for a particular element with the CSS function.

So I check for the id=increase and if this matches I will increase the font size of the <p> element.If it does not match we will decrease the font size.

  $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);

The code for the css file (style.css) follows

body

{
background-color:#eaeaea;

}

p{

font-size:0.8em;
font-family:Tahoma;

}

#resize

{

width:200px;
background-color:#dadada;

}

#resize a {

text-decoration:none;

}

The above CSS rules are very easy to understand. Now I save all my work.

I view my page on the browser for the first time.Have a look at the picture below

Now I increase the font size by clicking the respective link

Have a look at the picture below

Finally I decrease the font size by clicking on the respective link

Have a look at the picture below 

Once more we see that the power and simplicity of JQuery library enables us to write less code but accomplish a lot at the same time.

Hope it helps!!

Building an ASP.Net 4.5 Web forms application - part 1

I am going to start a new series of posts on how to build an application using ASP.Net 4.5 Web forms.A few days back I have been asked to present a number of presentations on ASP.Net 4.5.

Ι will demonstrate how to create a website that sells posters on line.In this web forms application I will design and implement the main functionality that is needed in order to have an operational e-shop. I will also use this series of posts to highlight the various features in ASP.Net and most particularly the new features available in ASP.Net 4.5.

This is going to be part 1 of the application where I will explain what I am going to do.In the final post on this series of posts I will demonstrate on how to deploy the web site to Windows Azure.

I will use Visual Studio 2012 Ultimate edition but you can use the Visual Studio Express 2012 for Web.You can download it here.The .Net framework will be installed automatically.

In case you have trouble installing Visual Studio please have a look at this link.

You can download everything you will need for this project if you use the Web Platform Installer. You must be administrator in your machine to run the Web Platform Installer.

I will try to explain everything in detail and with many screenshots. I would say that it would be very helpful if one has some knowledge of HTML, CSS, Javascript, relational databases,Object- oriented concepts.

This is not going to be a 100-level (beginner level tutorial) and very experienced developers will lot not gain much from this series of posts. 

The development language will be C#. I will create a Web Application Project and not a Web Site Project.

There are a lot of web developers out there that use ASP.Net MVC.ASP.Net MVC provide us with a new way of writing ASP.Net applications.It does not replace web forms. It is just an alternative project type.It still runs on ASP.Net and supports caching,sesions and master pages.There is more emphasis on test-driven development and separation of concerns with ASP.Net MVC.

If I have time I will create another series of posts where I will create the exact same application using ASP.Net MVC 4.0.

There are two posts in my blog regarding ASP.Net MVC.You can find them here and here . I always thought that people who are familiar with RAD tools, the best way to learn web applications on the .Net framework is the ASP.Net Web forms paradigm.It is a control based, event-driven development model that suits most people that know how to create Windows Forms Applications or WPF applications.

Let's start with the actual demo-application.

1) Launch Visual Studio. Create a New Project (File->New Project).From the available templates choose ASP.Net Web Forms Application. Have a look at the picture below

 2) Make sure that you spend some time reviewing the structure of the application and the files in the Solution Explorer. We have .aspx files,.js files (including the JQuery library), .css files e.t.c.Make sure you run the application and navigate to the various pages.Make sure you realise that ASP.Net is a server side technology.The built-in web server dynamically generates the HTML that is rendered on the browser. If you want to learn more about Page-lifecycle events have a look at this post of mine.We have a functional web application out of the box.There is common structure-layout in this web application. This feature is known as Master Pages.

Please have a look at the HTML rendered in your browser.The ASP.Net application template uses HTML 5.Modernizr (open source javscript Library) is also included for browsers that do not support HTML 5. If you want to find more about HTML 5, have a look at these posts.

Have a look at the picture below

You can also use register and log in to the web site. If you want to learn more about membership controls and the Membership provider in ASP.Net have a look here.

Another important feature I want to highlight is NuGet and Nuget packages.If you have a look at the JQuery .js files that are included in the web site out of the box, you will notice that this is not the latest version.

We can download the latest version of JQuery Library using Nuget.If you go to Tools->Library Package Manager->Manage NuGet Packages For Solution you can locate the latest version of JQuery and download it in your solution. You can also do with the other libraries and tools.NuGet is really great because when you install a package through NuGet it copies all the files to the solution,adding references and making changes to the web.config.Find more about Nuget in this post.

Please have a look at the picture below.

In the next post I will make some changes in the .css files and .master pages to give a unique look and feel to our site.

Hope it helps!!!

Using Native Drag and Drop in HTML 5 pages

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

In this post I will show you how to implement Drag and Drop functionality in an HTML 5 page using JQuery.This is a great functionality and we do not need to resort anymore to plugins like Silverlight and Flash to achieve this great feature. This is also called a native approach on Drag and Drop.

I will use some events and I will write code to respond when these events are fired.

As I said earlier we need to write Javascript to implement the drag and drop functionality. I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

I will create a simple HTML page.There will be two thumbnails pics on it. There will also be the drag and drop area where the user will drag the thumb pics into it and they will resize to their actual size.

The HTML markup for the page follows

<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.8.1.min.js"></script> 
<script language="JavaScript" src="drag.js"></script>  
</head>

<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Drag and Drop the thumb image in the designated area to see the full image</h2>
</header>


<div id="main">

<img src="thumbs/steven-gerrard.jpg"
 big="large-images/steven-gerrard-large.jpg" alt="John Barnes">


<img src="thumbs/robbie-fowler.jpg"
big="large-images/robbie-fowler-large.jpg" alt="Ian Rush">


<div id="drag">
<p>Drop your image here</p>
 </div>


</body>

</html>

There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and another javascript file that I will implement the whole drag and drop functionality.

The code for the css file (style.css) follows

#main{
  float: left;
  width: 340px;
  margin-right: 30px;
}

#drag{
  float: left;
  width: 400px;
  height:300px;
  background-color: #c0c0c0;

}

These are simple CSS rules. This post cannot be a tutorial on CSS.For all these posts I assume that you have the basic HTML,CSS,Javascript skills.

Now I am going to create a javascript file (drag.js) to implement the drag and drop functionality.

I will provide the whole code for the drag.js file and then I will explain what I am doing in each step.

$(function() {
          var players = $('#main img');
          players.attr('draggable', 'true');
         
          players.bind('dragstart', function(event) {
              var data = event.originalEvent.dataTransfer;
              var src = $(this).attr("big");
              data.setData("Text", src);
              return true;
          });

          var target = $('#drag');

          target.bind('drop', function(event) {
            var data = event.originalEvent.dataTransfer;
            var src = ( data.getData('Text') );
           
            var img = $("<img></img>").attr("src", src);
            $(this).html(img);
            if (event.preventDefault) event.preventDefault();
            return(false);
          });

         
          target.bind('dragover', function(event) {   
            if (event.preventDefault) event.preventDefault();
            return false;
          });


           players.bind('dragend', function(event) {
             if (event.preventDefault) event.preventDefault();
             return false;
           });

        });

 In these lines

 var players = $('#main img');
 players.attr('draggable', 'true');

We grab all the images in the #main div and store them in a variable and then make them draggable.

Then in following lines I am using the dragstart event.

  players.bind('dragstart', function(event) {
              var data = event.originalEvent.dataTransfer;
              var src = $(this).attr("big");
              data.setData("Text", src);
              return true;
          });

In this event I am associating the custom data attribute value with the item I am dragging.

Then I create a variable to get hold of the dropping area

 var target = $('#drag');

Then in the following lines I implement the drop event and what happens when the user drops the image in the designated area on the page.

 target.bind('drop', function(event) {
            var data = event.originalEvent.dataTransfer;
            var src = ( data.getData('Text') );
            
            var img = $("<img></img>").attr("src", src);
            $(this).html(img);
            if (event.preventDefault) event.preventDefault();
            return(false);
          });

 The dragend  event is fired when the user has finished the drag operation

        players.bind('dragend', function(event) {
             if (event.preventDefault) event.preventDefault();
             return false;
           });

 When this method event.preventDefault() is called , the default action of the event will not be triggered.

Please have a look a the picture below to see how the page looks before the drag and drop takes place.

Then simply I drag and drop a picture in the dropping area.Have a look at the picture below

It works!!!

Hope it helps!!

Using CSS3 media queries in HTML 5 pages

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

In this post I will provide a hands-on example on how to use CSS 3 Media Queries in HTML 5 pages. This is a very important feature since nowadays lots of users view websites through their mobile devices.

Web designers were able to define media-specific style sheets for quite a while, but have been limited to the type of output. The output could only be Screen, Print .The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use.

Please have a look at the snippet below - HTML 4 media queries

<link rel="stylesheet" type="text/css" media="screen" href="styles.css">

<link rel="stylesheet" type="text/css" media="print" href="print-styles.css">

Τhe browser determines which style to use.

With CSS 3 we can have all media queries in one stylesheet. Media queries can determine the resolution of the device, the orientation of the device, the width and height of the device and the width and height of the browser window.We can also include CSS 3 media queries in separate stylesheets.

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.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Media Queries 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.

We can see that even IE 9 supports this feature.

Let's move on with the actual demo. 

This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand.This is a page with a 2 column layout.

<!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 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;
      }

Now I view the page in the browser.Now I am going to write a media query and add some more rules in the .css file in order to change the layout of the page when the page is viewed by mobile devices.

@media only screen and (max-width: 480px) {
          body{
            width: 480px;
          }
          #main{
            -moz-column-count: 1;
            -webkit-column-count: 1;
          }
        }

I am specifying that this media query applies only to screen and a max width of 480 px. If this condition is true, then I add new rules for the body element.

I change the number of columns to one. This rule will not be applied unless the maximum width is 480px or less. 

As I decrease the size-width of the browser window I see no change in the column's layout.

Have a look at the picture below.

When I resize the window and the width of the browser so the width is less than 480px, the media query and its respective rules take effect.

We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices.

Have a look at the picture below

Hope it helps!!!!

Using rounded corners in modern websites with CSS3

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

In this post I will provide a hands-on example on how to use rounded corners (rounded corners in CSS3) in your website. I think this is the feature that is most required in the new modern websites.

Most websites look great with their lovely round panels and rounded corner tab style menus.

We could achieve that effect earlier but we should resort to complex CSS rules and images. I will show you how to accomplish this great feature with the power of CSS 3.We will not use Javascript.

Javascript is required for IE 7, IE 8 and the notorious IE 6. The best solution for implementing corners using CSS and Javascript without using images is Nifty corners cube.

There are detailed information how to achieve this in the link I provided. This solution is tested in earlier vesrions of IE (IE 6,IE 7,IE 8) and Opera,Firefox,Safari.

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.

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.

We can see that even IE 9 supports this feature.

Let's move on with the actual demo.

This is going to be a rather simple demo.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>
    </div>
    
    <div id="main">
    
      <h2>HTML 5</h2>
        
      
          <p id="panel1">
            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 need to write the various CSS rules that style this markup. I will name it style.css

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;
border-radius: 20px;

}

Have a look below to see what my page looks like in IE 10.

This is possible through the border-radious property. The colored panel has all four corners rounded with the same radius.

We can add a border to the rounded corner panel by adding this property declaration in the #panel1,  border:4px #000 solid;

We can have even better visual effects if we specify a radius for each corner.

This is the updated version of the style.css.

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;


border-top-left-radius: 20px;
border-top-right-radius: 70px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 70px;

}

This is how my page looks in Firefox 15.0.1

 In this final example I will show you how to style with CSS 3 (rounded corners) a horizontal navigation menu.

 This is the new version of the HTML markup

<!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>
    </div>
   
    <div id="nav">
<ul>
<li><a class="mymenu" id="activelink" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">Main</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">HTML 5</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">CSS 3</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">JQuery</a></li>

</ul>
</div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <p id="panel1">
            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>

This is the updated version of style.css

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;

border-top-left-radius: 20px;
border-top-right-radius: 70px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 70px;

}


#nav ul {
width:900px;
position:relative;
top:24px;
}

ul li {
text-decoration:none;
display:inline;
}

ul li a.mymenu {
font-family:Tahoma;
color:black;
font-size:14px;
font-weight:bold;
background-color:#77cdef;
color:#fff;
border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid black;
padding:15px; padding-bottom:10px;margin :2px; text-decoration:none; border-bottom:none;
}

.mymenu:hover { background-color:#e3781a; color:black;
}
 

The CSS rules are the classic rules that are extensively used for styling menus.The border-radius property is still responsible for the rounded corners in the menu.

This is how my page looks in Chrome version 21.

Hope it helps!!!

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.

<style type="text/css">

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

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


}
</style>

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!!!

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="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<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="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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


<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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


<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<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="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

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


</ul>



</body>

</html>
 

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!!!!

Using Audio and Video in HTML 5

Using HTML 5 form input elements in ASP.Net applications