Skip navigation
All Places > PI Developers Club > Blog > 2013 > June
2013

 

 

 

 

 

What is HTML5?

 Based on the popularity of “Exposing your data in HTML5 Using MVC and jQuery”, a hands-on lab which took place in vCampus Live! 2012 and the need of increasing the availability of resources on the topic, I have started studying HTML 5 a short time ago and I want to share with you what I have found out so far.

 

 HTML 5 is the next evolution of the HTML (Hyper Text Markup Language), which is used by almost every site on the internet, in order to handle the demands of the modern web.

 

One of the new features of HTML 5 is the media playback and offline storage. While in HTML4 it was needed some requirements on the client-side as flashes to show a video or play a music, in HTM5 you can directly embed media files with the simple HTML tags "<video>" and "<audio>", without the need of extra plugins. I will show you an example later.

 

The actual HTML5 specifications are still being defined and it seems that they won’t be finished before 2022 (yes, this is not a joke! Just search it and you will find it quickly). However, many parts of the specifications are almost finished and are ready to be used in the most recent releases of browsers.

 

If you want to know the level of HTML5 compatibility of your browser, please refer to this webpage http://html5test.com/ which shows you a score indication of how well your browser supports the current HTML5 specifications. I have visited this site with some common browsers and below you can find the scores out of a total of 500:

 

 

Microsoft Internet Explorer 10

320

Google Chrome 27.0.1453.110 

448

Opera 12.15

404

Mozilla Firefox 21.0

384

 

 

The conclusion is that currently (June, 2013), Google Chrome is the browser which best supports HTML5.

 

Free requirements for HTML5 development

 

 

If you don’t have Visual Studio 2012 Professional yet, you can download the free version of this product which is called Visual Studio Expression for Web using the link below:

 

http://www.microsoft.com/visualstudio/11/en-us/downloads#express-web.

 

The major differences between this free version and the professional one is that the express editions do not Support plug-ins (No ReSharper, no add-ons) and that the Team Foundation Server integration was removed.

 

Another interesting web application from Microsoft is Web Matrix whose main purpose is to build web sites. Besides compatible with ASP.NET, it includes SQL Server Compact so that your web application can connect to a SQL database. You can download Web Matrix using the link below:

 

http://www.microsoft.com/web/webmatrix/

 

There are a wide range of other tools that could be used to build HTML5 pages but they are out of the scope of this post. The example below was done using Visual Studio 2012 Professional, but it should also work on the free editors described above.

 

 

 Creating a simple HTML5 page with Visual Studio 2012

 

 

I will now show you two ways to develop your HTML5 page.  The first one, you will have to download a template from the web in order to develop pure HTML5. Generally, the purpose of Visual Studio is to develop application through code as C++, C# and VB.NET. Using its extensive features of web application template projects, you can develop HTML5 pages.  Therefore, if you want to avoid downloading a new template from the internet, you could choose second option which is creating an ASP.NET MVC4 Web Application, and then you will create your HTML5 in a *.cshtml file.

 

 

Using the online template

 

 

If you choose this option, you first need to download the Pure HTML template for Visual Studio using the link below:

 

http://purehtml.codeplex.com/

 

When you click on Download your browser will download a file with *.vsix extension. To install this template on your Visual Studio, run this file using the Visual Studio Version Selector application.

 

 

 

 2816.1.jpg

 

 

 

Then, create a new project, on the left pane select Visual C# -->Web. You should find the new template you have just installed called “Pure HTML Web Site”. Choose a name and a location for your solution and click OK.

 

 

 

 

 

3005.2.jpg

 

 

 

 

 

 

 

Using Windows Explorer, create a new folder called Songs on your project folder (the one that contains the index.html file). Copy your *.mp3 file to this folder.

 

 

 

On Visual Studio, right-click on your project name and choose Add-->New Folder.  Choose the name Songs. Then, right click on this new folder and select Add-->Existing Items… Choose the *.mp3 file from the Songs folder.

 

At this point, you should have this structure in your solution explorer window:

 

 

 

2117.3.jpg

 

 

 

 

 

Finally, open your index.html and paste the code below:

 

 

 
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Listening to my favorite music</title>

</head>

<body>

    <div>

        <audio src="songs/bestsong.mp3" controls="controls" />

    </div>

</body>

</html>

 

 

 

Now, it is time to debug this page. One of the new features of Visual Studio 2012 is that now it is possible to debug your web application not only with Microsoft Internet Explorer but also with many main browsers of the market. Nevertheless, some debug features work only with the Microsoft’s browser.

 

 

 

 1541.4.jpg

 

 

 

The audio control that is used depends on the browser you are running. What is important is that you are able to hear your song and if you are able to control the audio player!

 

 

Using ASP.NET MVC4 Web Application

 

 

If you choose this option, you will realize that the procedure is more complex but no template is required.

 

Firstly, open Visual Studio 2012 and create a New Project.  On the web section, select ASP.NET MVC4 Web Application and click OK. On the next window, select the basic Template and make sure that the Razor option is chosen on the View engine and that the Create a unit test project is unchecked. Then click OK.

 

Right click on Controllers under Solution Explorer, and select Add-->Controller. Use HomeController for the controller name. Make sure you are using the empty MVC controller template and then click Add.

 

On the Views folder of the solution explorer, create a new folder called Home. Then, right click on this new folder and select Add-->View. Use “Index” for the view name, making sure that all the options are unchecked and then click on add.

 

Using Windows Explorer, create a new folder called Songs on  your project folder (the one that contains the Global.asax file). Copy your *.mp3 file to this folder.

 

On Visual Studio, right-click on your project name and choose Add-->New Folder.  Choose the same name Songs. Then, right click on this new folder and select Add-->Existing Items… Choose the *.mp3 file from the Songs folder.

 

Finally, drag your *.mp3 file from the solution explorer and drop it on the div section of your Index.cshtml. This is a good opportunity to edit your title. The content of your Index.cshtml file should be similar to the code snippet below:

 

 

 
@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Listening to my favorite music/title>

</head>

<body>

    <div>

        <audio src="~/Songs/bestsong.mp3" controls="controls" />

    </div>

</body>

</html>

 

 

 

 

 

Press F5 to debug and you shall see the same page developed in the first option.

 

There are many interesting features that could be shown using HTML5. In this first blog about this subject, I have shown you how to create a simple HTML5 that plays a song, showing your browser audio control. However, stay tuned for the upcoming blog posts with more examples as this subject is pretty rich.

Filter Blog

By date: By tag: