Here's another post in my series about the technology for the Riverview Gardens Give Camp Skyline held recently. One of the great things about the Give Camp was the learning opportunities for our associates.

The emerging HTML 5 standard has many new and interesting pieces that make it a great tool for developing web based applications. Let's take a look at some of the new tags.

New Input types HTML 5 introduces many new input types, that make it easier for end users to enter data. Here is a quick list:

In general, the new input types will validate that an input is in the expected format (i.e. email or url) and display a message to the user.

All of these attributes are implemented in various shapes and forms across the browser vendors. For example, IE 9 does not, at this point support any of the input types, though many are supported in IE 10. They also are implemented differently across the various browser vendors. The good news is your pages will still render as generic input boxes if it does not recognize the new types.

Some of the inputs are not things that can be validated, like tel, which indicates a telephone number, because of the many different phone number formats across the globe. So why use it at all? Because by explicitly identifying the input type, we are better able to describe the purpose of the input. It becomes useful on things like mobile websites where a mobile browser can immediately display a number pad rather than an alpha keyboard.

Another slick feature is the introduction of the placeholder attribute. When creating an HTML form, the placeholder will display information about the text. Once the user places focus on the input, it disappears. In Chrome, the following markup:

<input type="email"/>

Renders:

Semantic Another focus of HTML 5 is the introduction of new sematic elements. The semantic elements exist to more explicitly identify what your document items are. This is helpful for web pages which need to be used by screen readers, or to search engines in trying to parse the content of your document. The first part of semantic is the introduction of several new tags that define your HTML document structure. They are:

There are several more semantic elements, but you get the gist of it. It is important to remember these elements don't really DO anything for presentation on the page. You are still responsible for styling your header or footer, or providing navigation elements each time you render the page into the nav element. What it does do is describe your document.

A second part of semantics is the use of microdata to even further describe your document. More can be learned about microdata in a previous blog post.

More elements There are new video and audio tags to explicitly play, wait for it... big surprise coming, video and audio files in your browser without requiring plugins. The reality however gets pretty complicated pretty quick. All of the vendors have a "preferred" video format, the reality of which results in you having to encode your video to support these various vendor specific implementations.

<audio src="StuckBetweenStations.mp3" controls autoplay /> 

<video src="WhiteSoxVsBrewersWorldSeriesGame1.mp4" controls height="200px" width="400px" />

The canvas tag purpose in life is really a drawing surface. You can draw and animate using JavaScript and style elements across the canvas tag. This is another way of saying, let's make some games. The canvas obviously serves other purposes, but it is a deep topic we will just introduce here.

There you go ... a high level introduction into some of the new HTML tags that are part of HTML 5. Next we will discuss some programming items, such as persisting data.

Long ago, in a land far, far, away, I started an introduction to HTML 5 by giving a short history of HTML and the standards process. It was to quickly be followed up with an overview of what is meant by HTML 5 applications. Months later, here we are....

With the Skyline Give Camp just behind us, I thought I would kick off a wave of blog posts about some of the technology we will be used during the Give Camp. First up, let's discuss HTML.

There has been a lot (and I mean a lot) of enthusiasm for HTML 5 for creating applications, but what does that really mean? In general, I believe there are two things people mean when they discuss HTML 5. The first is the HTML standard itself. The second is creating applications using HTML 5. We will touch on each of those.

HTML 5 Standard The HTML 5 standard is really the evolving standard being created by the WC3 and WHAT working group. It is the new parts of the angle bracket goodness that keeps food on a lot of our tables. A lot of what Skyline does is creating applications for our clients where we render HTML server side and send it down to browsers to be rendered. HTML 5 has a lot of new markup tags and attributes to make these types of applications more interactive, discoverable and intuitive for users. I'll discuss these new attributes in more depth in future blog posts.

HTML 5 Applications The real excitement about HTML 5 is for HTML 5 applications. HTML 5 applications can, obviously, be a lot of different things to different people. At its root, is to have HTML 5 be a light container, and then to use JavaScript/jQuery to inject data into the markup.

A way to think about this ... We have done a lot of work with Silverlight. The model we have for that is MVVM (Model-View-ViewModel). At a very high level, this concept involves a View, which has nothing in it other than screen layout and design, a model (our entities or data model) and the ViewModel, which is responsible for getting data and binding itself to the view. In this scenario, the view is very light weight and has no logic, the ViewModel is where all the heavy lifting occurs.

There is a very shaky analogy to this in HTML 5 based applications. Often, you will have an HTML page that consists of markup. Essentially it is the bare bones implementation of the User Interface. This will be sent down to the browser for display. Part of the markup though includes JavaScript references. The JavaScript functions will then call back end data services and inject that data into our view. For example, the following markup could be sent down to a browser

<div data-role="content">
    <div id="twitList"></div>
</div><!-- /content -->

A Javascript or jQuery function could then be sent to "inject" markup into the HTML, such as

    $(function () {
    console.log("binding attempat");
    $.ajax({
        url: "http://search.twitter.com/search.json?q=SkylineTweets",
        dataType: 'jsonp',
        success: function (json_results) {
            console.log(json_results);
            $('#twitList').append('<ul data-role="listview"></ul>');
            listItems = $('#twitList').find('ul');
            $.each(json_results.results, function (key) {
            html = '<a class="avatar" href="#"><img src="' + json_results.results[key].profile_image_url + '" alt="' + json_results.results[key].from_user + '"/></a>';

            html += '<a href="http://twitter.com/' + json_results.results[key].from_user + '"><h3>' + json_results.results[key].from_user + '</h3></a>';

            html += '<span class="details">' + json_results.results[key].text + ' </span>';
            listItems.append('<li>' + html + '</li>');
            console.log(html);
        });
    // Need to refresh list after AJAX call
        $('#twitList ul').listview();
    }   
    });
})

This will result in the retrieved results for @SkylineTweets Twitter feed being injected into the HTML markup as an Unordered List (UL).

Obviously, there are a lot more pieces involved in creating HTML 5 applications. The important thing to take away is that HTML is now considered a programming language. Through a combination of HTML 5 and JavaScript/jQuery, developers are creating great applications. Microsoft's next version of Windows, Windows 8, even supports HTML and JavaScript as a native programming language.

The concept of HTML being a view, and JavaScript being the tool to inject data into the view is an important one to understand!

This blog post originally appeared at [Skyline Technologies] (http://www.skylinetechnologies.com/Insights/Skyline-Blog/March-2012/HTML-5-for-Applications)

One of the wonderful things about being a consultant in Northeast Wisconsin is there are so many great companies in our area. The beauty of technology and our inter-connected globe means you can have customers and clients anywhere. Not only has my company acquired customers in the Midwest and across the Unites States, but we have gained customers in other countries as well.

In my time as a consultant, I've learned quite a few things working with International customers. Here are a few tips that will enable you to deliver excellent customer satisfaction, even if those customers are, literally, on the other side of the world.

Time Difference - One of the biggest challenges in working internationally is the time difference between you and your clients. When you have a customer call write down what time it is for each one of the people on the phone that is in a different country. Be sure that if it is 8:00 a.m. in the United States when you start the call, you realize it is 10:00 p.m. in Hong Kong and your client would most likely rather be getting ready for bed. This will help you focus on what needs to get done in the meeting and help you keep the meeting from running long.

Know What Day It Is - When I work with a client in another country on a regular basis, I add that country's holiday calendar to my calendaring software. That way, whenever a meeting needs to be scheduled, I don't have to embarrass myself by not knowing that November 2nd is Day of the Dead in Brazil and nobody will be coming into the office. Outlook and Google calendar, two of the more popular calendaring options on the market, make this easy.

Communication Costs - Communicating overseas by phone can be expensive, especially if you are making calls several times a week for hours at a time. There are several excellent options that enable you to mitigate these costs.

In many countries, a good percentage of people are now using Skype, a software application recently purchased by Microsoft. Skype does an excellent job of enabling you to talk to several people at once. In my experiences, numerous organizations use Skype and many of them prefer it to a phone call. Obviously, all of the call participants need to be sitting at or near a computer for this to work.

Google also has voice calling options within their Gmail application. If you use this option you'll want to download Google Talk so you can quickly make a call without logging into Gmail.

Both these application require the people you want to communicate with to have the software installed. If that's not an option, or you have customers who exclusively use landlines, both Skype and Google offer the ability to buy minutes to call people directly. These rates are generally MUCH cheaper than dialing internationally over the phone.

Finally, Microsoft Lync has abilities similar to Skype and Google Talk, however there is the added benefit of being able to share computer screens and for multiple users to work on the computer desktop at the same time.

There are many other options available for effective communication such as Instant Messaging, Google docs, Go To Meeting, and more. However, nothing beats a person to person call.

Culture - Given the size of the United States, our culture is very similar across the country. It can be very surprising to see the amount of differences in other countries, especially in Europe. For example, Switzerland has three official languages: German, French and Italian in a country the size of Vermont and New Hampshire combined.

In India, when a person shakes their head up and down, instead of it meaning yes like it would in the states, it generally means a person is saying no.

The United States is also a large country for both political and economic reasons in the world. You can almost guarantee that customers you have overseas know who the President of the United States is as well as some of our recent political news.

The reality is, if you want to be able to engage with your customer, you owe it to yourself to pay attention to what happens in the countries where they do business. Economist Magazine is a great business resource for this. It discusses the political and policy situations in many countries and will make you a better informed person when talking to clients from other parts of the world. A less expensive option is Google News, which has the ability to set the edition of the page that is displayed. So if you will be spending a week with a customer in Britain, check out the British edition of Google News for a couple of weeks before heading over there.

Remember, you are building your business ties based on your relationship ties. If you visit another country and your potential client says a dish is a local favorite, or something they are particularly fond of, they are most likely trying to introduce you to a part of their culture and share it with you. So, when visiting Scotland if a client says they love haggis and ask you to try it, be sure you do!

Working with clients overseas can be a very rewarding experience. Just be sure you are respectful of the customer and their culture and make sure you sit and listen before speaking. In today's global economy the world is your customer base!

This blog post originally appeared at [Skyline Technologies] (http://www.skylinetechnologies.com/Insights/Skyline-Blog/December-2011/Tips-for-Working-With-International-Clients)