Every Web Developer is a Win8 developer presentation on MultiMania

First of all, I had a great time on MultiMania and met a lot of great people over there. People from different worlds. Every day I work mainly in a Microsoft world, developing websites with ASP.NET MVC but I’m also busy in HTML5, CSS3 and the combination is something that I love.

But on MultiMania I had the chance to talk to Adobe people, Game creators, … Some talks were inspirational, other ones were technical and that what it’s all about isn’t it!

On MultiManie Dieter and I gave a presentation on Win8 development and how you can use your existing web skills to build Metro applications.

In case you’ve missed it, here are the slides: http://www.slideshare.net/kevinderudder/every-web-developer-is-a-win8-developer

Every Web Developer is a Win8 developerhttp://static.slidesharecdn.com/swf/ssplayer2.swf?doc=multimaniawin8html5-120523013923-phpapp02&stripped_title=every-web-developer-is-a-win8-developer&userName=kevinderudder

View more presentations from Kevin DeRudder.

“How to get started with HTML5?” session @ Queaso

Pictures and information about my session @ queaso can be found over here: click.

 

 

Hope to see you all on one of the next Queaso meetings.

k

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.

Using HTML5 date element in ASP.NET MVC3

With the arrival of HTML5, a few new elements are introduced:

• email
• url
• datalist
• …

Another pretty useful element is the date element

<input type=”date” />

Unfortunately, this element is not supported by most browsers. Now here is a trick to have a fallback in ASP.NET MVC3. We will use the date control if it is supported and use the jQuery UI Datepicker if it is not supported.

Because we want to do this for all date controls in our project, we will create a DisplayTemplate.

Step1: Create a DisplayTemplates folder in the shared folder of your project

Step2: Add a Partial View with the name of the type, in this case DateTime

Step3: Because I’m a razor fan, we’ll use razor.

@model DateTime

<input type=”date” />
<script type=”text/javascript”>
if (!Modernizr.inputtypes["date"]) {
$(“:input[type=date]“).datepicker();
}
</script>

Now I’m putting the script in the template, but to reuse it refer to it on your layout page.

Don’t forget references to jQuery UI, Modernizr. Place them in your layout page.

gr k

Slides and demo on my Media Queries Live session @ Microsoft

So here are my slides and demos from my Live session at Microsoft. Hope you found it interesting and may it be useful in your web applications.

For those who didn’t follow the session. We changed the existing ASP.NET MVC Music Store site, so that it would be available on a mobile phone as well.

Media querieshttp://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mediaqueries-120313110821-phpapp02&stripped_title=media-queries&userName=kevinderudder

View more presentations from Kevin DeRudder.

The video will be online in a few days on Channel9.

 

 

k.

ASP.NET MVC Music Store on a mobile device

Next week, i will be giving a session on CSS Media Queries at Microsoft. While I was making the slides I was thinking about some demos.

One of the things I will be showing is how you can change the ASP.NET MVC Music Store css so that it would render nicely on a mobile device.

This is a screen shot of what I will do, just to make you hungry for more. On the left, you see the normal desktop version, on the right is the mobile version:

so, tune in for the Media Queries Live session.

Techdays S2B HTML5 Session online now

As promised, here is a link to the session that I gave at the Microsoft S2B day at techdays.

gr k.