Susan IbachTechnical Evangelist
How do you take the HTML you know and love and give it a Metro look and feel for Windows 8 apps?
The Windows 8 team put up an interesting blog post this week about how you take existing HTML controls and style them to look metro. You can read the full blog post here, but I’ll highlight a few of the key points to get you started.
Don’t forget if you are working on an app, or thinking of starting an app we have hackathons across Canada in August:
Now let’s look at some HTML! Let’s take a look at the perennial favourite HTML control: <button>
a simple button control will actually look different in a Windows 8 native app than it will in a browser like IE10.
Let’s say you define a button control using HTML and render that same code in IE10 and Windows 8
<button>Windows 8 Rocks!</button>
Button in IE10
Button in Windows 8 Metro app
There’s more to it than just a default CSS file.
They’ve reworked the ways controls are built so you have more flexibility when styling the controls. Most browsers render controls using previously generated images and when you apply a style to the control, the browser discards the hardcoded image, re-renders the control in a baseline look and then applies the style you requested on top of that baseline. You can’t style directly onto new styles.
It’s pretty cool what you can do! Here’s a couple of examples of styling a checkbox control.
The Windows 8 team blog post goes into a lot more detail, explaining best practices for making sure your buttons scale well across different screen sizes, handling touch, accessibility features, and more! Could that last website you built work as a Windows 8 app?
Imagine It! Build It! Live it!
My husband likes cherry ice cream. My son likes chocolate. I like mint chocolate chip. Our favorite ice cream shops sell all three flavours, so we all leave happy!
When I started coding, I quickly discovered that a big part of development was making choices. I also discovered myself frustrated when working with tools and platforms that did not give me choices and forced me down a specific path.
When Microsoft first released .NET, I liked having the option to code in VB or C#. Though many hard core programmers scoffed at VB, it was a language familiar to many and supporting it allowed more programmers to move to the .NET platform without having to learn a new programming language. If you were a C programmer you tended to gravitate to C#, if you were a Visual Basic programmer you coded in VB .NET
I admit it, C++ scares me a little bit, but it’s a great programming language. I just haven’t spent much time using it. It’s very popular for gaming, and with DirectX and C++ you can build great games for Windows 8. (You can build great games with HTML5/CSS as well!) If you are a C++ programmer you can build apps for the Windows 8 store using C++. Check out the Roadmap for Windows 8 apps using C++ to learn more.
If you are already familiar with the .NET framework, you may find it easiest to develop your apps in C# or VB .Net. For more information on getting started with Windows 8 apps using .NET check out the Roadmap for Windows 8 apps using C# or Visual Basic. By the way, if you’ve already coded with Java, C# will seem very familiar.
Pick the option which will get you up and coding the fastest. Windows 8 is here, and you can publish apps to the Windows 8 store. Download Windows 8 today and find your favorite flavor!
How do you get the Windows 8 SDK and Visual Studio? What if you have Visual Studio already?
This blog is part of a series, you can find the entire series here.
In Step 2 we learned where to find and different options for installing Windows 8 which is required before you download and install the SDK. Now you need the Windows 8 SDK and a version of Visual Studio 2012. In this blog we’ll look at what you need to install so you can start building a Windows 8 app. This blog post covers the following:
If you are in a technical program like Computer Science you may have access to DreamSpark Premium which is usually accessed through your school IT department or through a special portal maintained by your school like this one from Carleton where you can download Visual Studio and Expression Studio.
If you are a student in a non technical program such as business administration or you are in a technical program that does not have a DreamSpark Premium subscription, you can still get a copy of Visual Studio through DreamSpark Standard. DreamSpark Standard subscriptions are given to universities, colleges, and even school boards so that high school students can access Microsoft developer software. They are usually tied to a school email address. For example a student with an email address that ends in @Ryerson.ca is recognized as a student from Ryerson who can access the Ryerson University subscription. If your school does not have a subscription, you can request a verification code by contacting your local Microsoft representative. (In Canada that’s us!). Now you can
Note: when you download Visual Studio and Expression Studio, you will get an .iso file. You will need to either burn a copy of the .iso onto a DVD or use a tool such as Virtual Clone Drive to read the .iso and allow you to install it.
If you are a Microsoft Student Partner, or work at a company with an MSDN subscription you can download a copy of Visual Studio from the Microsoft Download Center.
That’s okay you don’t need a full version of Visual Studio to develop an app, when you install the Windows 8 SDK it will install a copy of Visual Studio 2012 Express with Blend you can use to develop your app.
If you do have access to a full version of Visual Studio 2012 and Expression Blend, install it before you install the Windows 8 SDK. When you install the Windows 8 SDK it will detect your copy of Visual Studio 2012 and install the Windows 8 templates into your existing copy of Visual Studio. Visit the the windows dev center (dev.windows.com) to download the tools and SDK.
If you do not have a copy of Visual Studio 2012 already, then all you need to do is download the tools and SDK and it will install a copy of Visual Studio 2012 Express and Blend for Visual Studio on your system so you can start developing.
Who won the worldwide student competition to solve the world’s problems using technology?
When 76 countries send their best teams to compete at the World Wide Finals in Software Design you know the judges have their work cut out for them. This year’s winners were team Quadsquad from Ukraine with their project Enable Talk.
More than 40 million people in the world are hearing or speech impaired. To communicate they use sign language. Unfortunately, very few people in the world understand sign language which leaves them feeling isolated. The team was inspired when they were in the supermarket, watching a cashier trying to understand a speech impaired person and thought how useful it would be to have a device to overcome this communication barrier.
Using a smartphone and a pair of sensory gloves project “Enable Talk” to solve the language barrier between sign language users and the rest of the world! The gloves capture hand movements and transmit the movement pattern (the sign) to the mobile device via Bluetooth. The application matches the incoming pattern with stored signs and plays the sound for that sign using the Microsoft Speech API and Bing API.
What signs do the gloves recognize? Well the first part of the process is to capture the hand movements. You wear the sensory cloves each of which is equipped with flex sensors that capture finger movements. A compass, gyroscope and accelerometer determine the position of the gloves in space. So you create a library of sign that can be recognized. So even colloquial signs can be added and recognized.
Windows 8, Windows Phone, Windows 7, Bing
If you would like to see the team’s entire presentation from the World Wide Finals you can view it here. If you just want a sneak peak at what they’ve done you can watch the video below.
Congratulations Team Quadsquad!
The technology to do amazing things is here! What could you do? Imagine it! Build it! Live it!
You are about to start coding your Windows 8 project, what template should you start with?
This blog is part of a series.
Picking the right template at the start of your project can save you a lot of work! Finding the right Visual Studio template, or finding a project template out there that is similar to what you are trying to build may mean some of the features you want are already coded and ready to go.This post will cover:
When you choose File | New Project and choose Installed | Templates | <Programming Language> | Windows Store you see up to 6 different project templates to choose as a starting point. Let’s see when you should use each one:
This template will create a very simple one page application, popular with single page applications such as timer apps, and one page puzzle apps, or apps with multiple screen navigation that does not follow the flow of other pre-defined templates.
This template is good for apps that have a drill down or parent-child style of navigation. The template is designed to show one or more categories on a page called GroupedItems (or GroupedItemsPage) which is the default start page. If you select a group, details about a group are displayed on a page called GroupDetail (or GroupDetailPage). If you select an item, details about the selected item are displayed on a page called ItemDetail (or ItemDetailPage). This template works well for many apps that allow you to navigate through a lot of information such as store apps, blog reader apps, photo organizer apps, and teaching apps. If you choose to use this template, check out the Windows 8 camp in a box which includes a hands-on lab that tells you step-by-step how to create an app with sample data, and add features like snap, search, semantic zoom, and share using this template. It’s a very good resources for learning how to add features to this template.
This is a template for a two page project. Designed for a Parent-child or drill down style of navigation. The difference between the Split and Grid App, is that when you select a group with this template it brings you to a page that is split in two. One half of the page will list all the items in the group, the other half of the page lists the details of any item you select within the group. The default start page is the Items (or ItemsPage) which lists all the groups. The page that lists the items and the details for the selected item is called Split (or SplitPage)
Class libraries are useful when you have code you want to use in multiple applications. You can put the re-usable code into a class library and compile it into a .dll and then import it into one or more projects.
If you want to re-use code across Windows 8 and Windows Phone or other .NET Platforms, you should consider using Portable Class Libaries instead.
Unit testing is a great way to find logic errors in your code. You can use the Unit Test Library to create test methods that will allow you to retest your application as often as needed.
Used for developing C++apps with 2D graphics, including games. Nice little blog post on getting started with it here. There’s also a good video from Build, and some sample Direct2D projects.
Used for developing C++ apps with 3D graphics, including games, to get started with this template, check out this video from build and some sample Direct3D Projects
If you want to write code in C++ that can be re-used across projects. Use this template and you can create a dynamic link library (DLL) you can reuse in multiple Windows store apps or components.
If you want to write code in C++ that can be re-used across projects. Use this template and you can create a static library (.lib) you can reuse in multiple Windows store apps or components.
Hmmm sounds similar to a DLL project doesn’t it? So what’s the difference between static and DLL (dynamic) libraries? When you compile a project that includes a static library, the library actually becomes part of the executable. That means your executable is bigger and it means whatever version of the code you compiled with is the version of the library that will run. When you compile a project that references a dynamic library, it is not compiled as part of the executable. If the same dynamic library is called by multiple projects it is only loaded once. Also the dynamic library can be upgraded to a newer version without replacing all the executables that use it.
This is similar to the blank app template except this template has the infrastructure to scale for larger screens. For applications with a lot of graphics, such as games, this is very useful. Here’s a post by Chad Carter on creating a Fixed Layout App project.
This is basically a blank app but it has predefined controls for navigation, so if your app is going to have more than one screen, this is a like a blank app that has more support for navigation between pages. (thank you to Infragistics for Brent’s Bytes blog on templates which helped me in my research). Here’s a post by Chad Carter on creating a Navigation App project.
Sometimes developers create templates for common applications that you can quickly update to suit your needs. Here’s a few you might find useful
Created by IdeaNotion, If you are using Wordpress.org for your website and you want to bring your content to the store, check out this template that lets you view blog posts by category, view your pages, view and post comments, see post information in a live tile, and use the Search and Share charms. You can download the source code here, and find a quick start guide here.
This club/team template allows you to easily create an app for members of a club or team. You can share information about members of the team or executive, a blog, and upcoming events.
I will be sharing a second version of this template shortly that also allows you to share photos and a twitter feed through the application as well. I will update this blog when that template becomes available
What mobile app list of templates would be complete without the blog reader template. It seems like the Hello World of mobile apps.
Here’s a few interesting samples you can also check out to find code examples for different tasks