Building metro style apps with HTML5, CSS and JavaScript

On 21 and 22 of may multi-mania takes place in Kortrijk. Like every year you will be able to follow various of workshops on day 1 and a number of sessions on day 2.

Now, hang on, the best part of it all is: IT’S FREE, NADA, NOTHING, so you don’t have any excuse to stay away.

On day 1: I will be your host together with Dieter De Preester and Frederik Duchi on building metro style applications with HTML5, CSS3 and Javascript.

Learn how you can use your web skills to build Windows 8 Metro style apps using HTML5, CSS3 and JavaScript. In this session you’ll discover how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.

You will learn about navigation, user experience patterns and controls and the seamless integration with the operating system that will let you create great Metro style apps.

On day 2: Dieter and I will show you that every Web Developer is a Win 8 Developer

HTML5 is a first class citizen inside the windows 8 eco system. In this session you will learn how to create windows 8 metro style applications using HTML5, JavaScript and CSS3.

Off course, you’ll have a bunch of other sessions where you can take a look at. If you are interested in more win 8, join Katrien De Graeve and meet her at the metro.

Metro is the name of the Design Language for applications in Windows 8. Join us for a ride on the key principles behind Metro Design, the inspiration and some great examples as we move into the future with Windows 8 Metro Style Apps.

If you want to see the other sessions or you want to register, visit the multi-mania site

So I, or we really hope to see you there during the sessions or afterwards at the bar.

Capitalize first letter with CSS

Maybe stupid, maybe handy, maybe awesome. I don’t know if you already this one, I did but I saw a few people struggling with it.

How do you capitalize the first letter of a paragraph or li or whatever…

Very simple:

li:first-letter
{
    text-transform: capitalize;
}

there you go, think of something like tip of the day

HTML 5 Validation scripts in ASP.NET MVC

With the arrival of HTML5, you can make use of the cool new form validation features like:

• email, url
• number
• required
• …

Problem with these features, for me, is that each browser uses their own notifications. I prefer that I can use a notification that looks the same in all browsers.

One way to do this is with Javascript and CSS, more info can be found on several sites. Here is an example page that microsoft created: click here.

If you don’t want that the browser validates your form, you can use the novalidate keyword on the form. If you are using ASP.NET MVC you can pass this attribute like so:

@using (Html.BeginForm(null, null, FormMethod.Post,new {novalidate="true"}))

Hope this one helps you in you projects

Live session on Media Queries now on Channel 9

My Live session on CSS Media Queries is now available on Channel 9.

http://channel9.msdn.com/posts/Using-CSS3-Media-Queries-to-build-Mobile-Web-Applications/player?w=512&h=288

 

k.