Archive for the ‘ HTML / CSS’ Category

jQuery Accordion and Dynamic Runtime Population

As I mentioned in my last post I’m playing with this idea of building a scoring application for boxing / mma events.

I want it to be a single page web application that scales to fit phones, tablets, etc.

An event contains a number of “bouts” and each bout will be a section in a jQuery UI Accordion control.

However, as is often the case, there are a couple of real world conditions that I couldn’t find documentation of sample to demonstrate.

1.) Event event can have a different number bouts.

This means that the accordion sections have to be dynamically built at runtime in the html page.

2.) The order of the events can change right up to the event time.

This means that the USER needs to be able to change the visual sequence of the bouts.

3.) The click-able header needs to be multiple elements.

All the demos I found assumed the headers were simple H3 elements.

You can play with a working version by clicking the image below.

Note that you can not only open and close the “bouts” but you can re-order them using drag-n-drop on the title bars.

– - – THIS IS A UI PROTOTYPE – - –

FightCard- 001

Built this way I can now add the AJAX logix fo recieve a JSON package that contains the event detail and use that data to populate the event.

Here is the code as it exists so far.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fight Card</title>
<link rel="stylesheet"
 href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css">
<style>
    /* IE has layout problems when sorting  */
    .group { zoom: 1 }
</style>

<script>

//-----------------------------------------------------------+
// addBout() - Add a single node to the accordian
// TODO: add JSON object as input parameter and build the
//       bout with that data,
//-----------------------------------------------------------+
function addBout(){
    var bout =
        "<div class=\"group\">" +
            "<span class=\"handle\"> " +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width33pct align-left\">" +
                            "<strong>Blue Fighter TBD</strong>" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "vs." +
                        "</span>" +
                        "<span class=\"cell width33pct align-right\">" +
                            "<strong>Red Fighter TBD</strong>"+
                        "</span>" +
                    "</div>" +
                "</div>" +
            "</span>" +
            "<div>" +
                "<div class=\"table\">" +
                    "<div class=\"row\">" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                        "<span class=\"cell align-center valign-middle\">" +
                            "Round<br />0" +
                        "</span>" +
                        "<span class=\"cell width150 align-center\">" +
                            "<img src=\"images/silhouette.jpg\" alt=\"\">" +
                        "</span>" +
                    "</div>" +
                "</div>" +
                "<span>" +
                "Mauris mauris ante, blandit et, ultrices a, suscipit , " +
                "quam. Integerut neque. <br /> Vivamus nisi metus molestie" +
                " vel, gravida in, condimentum sit amet, nunc. Nam a nibh." +
                "accordion .ui- iconDonec suscipit eros. Nam mi. Proin " +
                " viverra leo ut odio. Curabitur malesuada. Vestibulum a " +
                "velit eu ante scelerisque vulputate." +
                "</span>" +
            "</div>" +
        "</div>";
    return bout;
}

$(function() {

    $( "#accordion" )
            .accordion({
                header: "> .group > .handle",
                heightStyle: "content"
            })
            .sortable({
                axis: "y",
                handle: ".handle",
                stop: function( event, ui ) {
                    // IE doesn't register the blur event when sorting
                    // so trigger focusout handler to remove .ui-state-focus
                    ui.item.children(".handle").triggerHandler("focusout");
                }
            });

    //-----------------------------------------------------------+
    // This for loop is just for testing.
    // The real app will iterate a JSON collection and send
    // each bout node to the addBout function for insertion
    // into the accordion
    //-----------------------------------------------------------+
    for (var i=0;i<5;i++) {
    $("#accordion").append(addBout()).accordion("refresh");
    }
});
</script>

</head>

<body>

<div id="main-container" class="main-container">
    <div id="accordion">
    <!-- Bouts will be inserted here -->
    </div>
</div>

</body>
</html>

And the CSS

body {
   font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
   font-size: 62.5%;
   background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;body {
	font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
	font-size: 62.5%;
    background: url('../images/background.gif') repeat;
}

.main-container {
    width: 96%;
    max-width: 960px;
    min-width: 300px;
    height: 100px;
    position: absolute;
    top:20px;
    left: 0;
    right: 0;
    margin: auto;
}

/*---------------------------------------*/
/*   Styles for table like formatting.   */
/*---------------------------------------*/
.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

/*---------------------------------------*/
/*   Styles for width specification.     */
/*---------------------------------------*/
.width150 {
    width: 150px;
}

.width33pct {
    width: 33%;
}

.width34pct {
    width: 34%;
}

/*---------------------------------------*/
/*   Styles for various alignments.      */
/*---------------------------------------*/
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

/*-------------------------------------------*/
/*   Style overrides for jQuery accordion.   */
/*-------------------------------------------*/
.ui-state-default{
    background-color: #3173a5;
    background-image: none;
}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

}
.ui-accordion-header {
    background-color: #333333;
    color:  #BDC3C7;
    font-size: 16;
}

.ui-accordion-header.ui-state-active {
    background-color: #BDC3C7;
    color: #333333;
    font-size: 16;
}

A simple HTML/CSS adaptive container.

So if you’ve been reading me for a while or you follow me on Twitter you probably know I’m a fight fan.

I’ve started building a sports app related to fighting sports and I’m starting with an HTLM5 app that will run adaptively in any size browser.

I didn’t find an example that did what I want.

My desire was to place the functionality inside a DIV that would take up most of the width of the screen, scale with the size of the screen but ONLY up to 960 pixels.

Like this is the browser window is greater that 960px.

adapt-proto-1

And like this when the browser window is less than 960px.

adapt-proto-2

Here’s the code I came up with.

Simple, but meets my needs.

<html>
    <head>
        <title></title>
        <style type="text/css">
		body {
			background-color:#b0c4de;
		}

		div {
		    width: 96%;
		    max-width: 960px;
		    height: 100px;
		    background-color: white;
		    position: absolute;
		    top:20px;

		    left: 0;
		    right: 0;
		    margin: auto;

		}
        </style>
    </head>
    <body>
	    <div>
	    	--- app content ----
		</div>
    </body>
</html>

Enhance your HTML5 app with audio.

When we think of sound in an HTML application we might think of two things: We remember all those sites that started playing load obnoxious background music when the page loads and then we think about music playing apps.

Sound can however be much more: when building immersive app experiences it can be a crucial attribute. It can enhance tactile feedback or communicate activity or changes in state to the user. A ping sound when a new email arrives or a dismissive sound when there was an error can make things much more obvious for the end user.

Prior to HTML5 most developers had to resort to plug-in technologies like Flash, Quicktime, Real player or Windows Media Player to play audio. These, of course, required that these technologies were installed on the users’ machines and the plugins being active.

With HTML5, we have an audio element that natively supports sound playback. As with any HTML element, you can even play nice with older technologies by providing fallback content. For example by simply linking to the audio file:

———

As not all browsers support the same audio formats (MP3 not being a free format makes it impossible to decode it in an open source browser) you can provide the same audio in different formats:

Example:

  The recording - MP3 - 2.3MB

If you really need to provide a player for all browsers – including the ones that don’t understand HTML5 – I collected some information about this in an older blog post.

When your application checked that HTML5, Canvas and all the other things needed for your functionality is supported then backward compatibility is less of a concern, however you may still have cross-browser compatibility concerns since browser vendors are not fully converged on common feature implementation. That said, basic support for audio is available across all major browsers.

You don’t need to have an audio element in your HTML, you can also create them on the fly in your JavaScript:

var aSound = document.createElement('audio');
aSound.setAttribute('src', 'PlayMe.ogg');
aSound.load()

However, there may be advantages to using the tag in your HTML.

  • Using the tag adds to the semantic integrity of your markup.
  • It makes your code easier to read and understand.
  • The tag can display controls so the user can play the audio and seek in it with native controls that are also keyboard accessible
  • The tag has an optional preload attribute that tells to the browser to load the audio before users start playing it.
  • Browsers have a distinct loading sequence of referenced assets. By leveraging that sequence, it iss possible for you to help improve the performance of your app.

Here are some examples for using the tag in HTML5.


In this instance the audio element is not visible and MySound.ogg will only be played by calling the play method on the element instance.

document.getElementById('MySound').play();

By adding a controls attribute you can display the player controls so that the user can play the audio file by interacting with them.

These controls differ from browser to browser and operating system to operating system, but all have the same features as shown in the following image:

audio player with controls

You can easily hide or display the audio element’s controls whenever appropriate (like when the UI state changes) with a simple bit of JavaScript:

var myAudio = document.getElementById( "TimerBellSound" );
if ( myAudio.hasAttribute("controls") ) {
  myAudio.removeAttribute("controls") ;
}
else {
  myAudio.setAttribute("controls", "controls")
}

As Terrill Thompson explains in his blog post HERE, we can easily create a custom player as well. Not only does this provide us with the flexibility of defining our own user interface but it lets us address accessibility concerns as well. His player looks like this and has a consistent look and feel across browsers and operating systems:

So what could sound do in your app? As an example, consider the follow application prototype:

This application will be a timer for athletes. When in use, the athletes won’t be sitting in front of the device that is running the app. It will be running on their computer, tablet or phone and, while they may glance at it to check the time, for the most part they will rely on audible feedback for when to start working out, when to rest, and when to increase or decrease the intensity of their workout.

The audio element in HTML5 makes adding sound to your app both easy and straight forward.

Time to start building apps for FirefoxOS

WARNING: This post reflects my PERSONAL opinions and not those of Mozilla !

Doing something new requires tenacity. There can be a lot of challenges (emotional, intellectual, financial, etc.)

FirefoxOS is one of those things.

The OS itself is a real community driven, free Open Source project. This, in and of itself, is challenging. Search the web for “Is Android really Open Source” and you will read about some of the issues and challenges.

Then there is the competition. There are 6 billion mobile phone subscriptions in the world, and in the smart-phone segment, Android has 52.2% or the market and Apple has 33.4%. Even Microsoft hasn’t been successful in cracking the smart-phone market, no matter how much marketing they invest in the effort.

And what about the technology? HTML5 is not done yet, is it? It’s not hard to find an “expert” that will tell you HTML5 is not ready for prime time!

So why would you, as a developer, bother starting to build an application for a platform that hasn’t been released yet, on a technology that’s not ready yet, developed by a relatively tiny organization in the industry?

I spend a lot of time at work playing devil’s advocate and having this conversation with the engineering, marketing, and business development teams I work with at Mozilla.

But, after all, Mozilla is the poster child for success against the challenging conditions I just described. The community-driven, open source projects of Firefox and Thunderbird were launched to shake up a market that was already dominated by strong commerical competitors.

Mozilla’s mission has always resonated well with people, especially software developers who care about the free and open web.

And, in my humble opinion, the developer audience who will ultimately buy into Firefox OS is larger and somewhat differentiated from the traditional supporters of the Open Web.

While not all application developers define success in terms of monetary return, the success of all applications is defined by:

  1. The ability to REACH the largest possible percentage of intended users.
  2. The usefulness of the FUNCTION it provides to those users

The function can take many forms.

  1. Monetary gain
  2. Decreased customer service costs
  3. Increased customer satisfaction
  4. Decreased operational costs
  5. Increased or Improved Brand Identity and Affinity
  6. Public Service

There are other considerations like personal preference, choice of technology, hardware, “cool factor” etc., but it’s my contention that all other factors are not “decision pivots” like reach and function are.

So, if the question is “why would developers start building apps today for Firefox OS,” the question can’t be answered without discussing Firefox OS in the context of reach and function.

So, can you really meet your technical needs with HTML5 ?

First, I’m not even going to refer to the development technology as HTML5 because it’s much more than markup language.

Let’s instead call it the Web-Runtime!

  • HTML
  • CSS
  • JavaScript
  • JavaScript callable runtime implemented APIs
  • Related tools, libraries and frameworks

If your goal is to find some application feature that you just can’t make work using the above technology, you probably can find a corner case of some sort, though in the last year I’ve yet to have a developer describe a consumer application use case scenario to me that truly could not be done with Web-Runtime technology.

Yes, the technology is evolving so there are pieces that are not fully “here” yet – but I never suggested you wouldn’t have to get a bit creative if you are starting early in the Firefox OS / Apps ecosystem life cycle.

Apart from feature specific API concerns the other argument I hear is “the performance isn’t there!”

My teammate Rob Hawkes has been doing a lot of performance profiling of HTML5 games since games tend to really expose performances issues. He’s found a number of good games that work just fine written in HTML running on low end devices.

Like all performance considerations when you move platforms. Some optimization may be required.

Ok, so if you buy my argument that technically you could build your app for FirefoxOS, then why WOULD you?

Well, I think this is the interesting part.

First there is the expected reach opportunity .

FirefoxOS devices will start being available in 2013, initially in Brazil.

Eventually I think you’ll see lots of telcom carriers selling them in a variety of emerging and established markets. You see, carriers don’t make money on phones; they make money on services including bandwidth consumption. This means that they are happiest when everyone can afford the phones that will be used the most often and that will promote lots of interaction.

The original code name for Firefox OS was “Boot to Gecko,” referring to fact that the design imperative for the operating system was booting directly to the Gecko rendering engine without the heavily layered stack that you see in other mobile operating systems. This means that it will run well on lower end (less expensive) hardware.

It also suggests that Firefox OS devices will enjoy great success (penetration) in emerging markets. Why is THAT important to developers? (See the Firefox OS Marketplace HERE)

Nearly every mobile industry analyst will tell you that the biggest opportunities in the software industry are in emerging markets. Many (perhaps most) emerging markets have better cellular infrastructure than conventional Internet infrastructure, and many have better cell service (with data) then we have in the U.S.A.or Europe.

There is an entire generation of users who skipped the traditional connected personal computer and went straight to mobile.

On top of that, the apps that you write for Firefox OS phones will also install as native apps on Android phones and tablets with the Mozilla Web-Runtime installed. That’s an additional 300 million devices with hundreds of thousands of new users every day.

And like they say in the ShamWow infomercials, “But wait, there’s more!…..”

Because the entire stack is open, in the near future you’ll be able to run your well designed app on Windows, Mac and Linux Computers. And if Microsoft and Apple permit it, probably iPhone/iPad and Windows Phone / Surface devices too.

That’s one app – everywhere.

Then we will have achieved the idea that “The Web IS the Platform”—t he idea that the whole can be greater than the sum of the parts.

As I side note, I think people continue to be confused about what is an app versus what is a web page. Maybe there is no real answer but if you think outside the box a little, the fact that you can write apps (or web pages) that work even when no or limited connectivity is available create the opportunity to build some really interesting experiences for end users.

Yes, there are some “ifs” in all that logic, but you don’t get to AMAZING by waiting to see what everyone else does.

Before I wrap up, I wanted to hightlight one additional inducement for app development, and that’s the last item on my app functions list above. Enhancing Public Service.

Every day I Mozilla I participate in conversation where people are asking about and talking about “how can we make things better for people?”

For example, at my last organizational team off site, a representative from Medic Mobile came to speak to us about the amazing things they are doing in developing regions of the world to help get desperately needed health care to patients in remote areas.. It was one of the most inspirational talks on the use of technology I’ve heard and it made me think about what could be done with rich Firefox OS smart phones to make people’s lives better around the world.

As an advisor, consultant, industry analyst, throughout my career, I’ve always looked at new and interesting technology and markets and continued to ask the question, “when is the right time to “get in?”

After a year of being involved with HTML5 and mobile technology, I think the time for starting to build apps for Firefox OS is now! At least for many, many kinds of apps and targets.

So…….

  1. If you have an HTML5 app or page that you’re considering bringing to FirefoxOS and the Firefox Marketplace, or
  2. You have an Android of iOS app that you’re considering bringing to FirefoxOS and the Firefox Marketplace, or
  3. You have an idea for an app in Brazil, or
  4. You have a Firefox Add-in that you could bring to FirefoxOS and the Firefox Marketplace, or
  5. You just have some other cool idea for an HTML5 app

Then I want to hear from you!!!!

Tell me about your app!

J Stagner AT Mozilla DOT com


User Initiated Resizing

The Firefox Marketplace Aurora Android was released last week so developers can start submitting their HTML5 based apps.

I’ve been working on the interval timer app on and off for some time now and have been using it for experimentation and proof points around HTML5.

In playing with user interface options I wanted a mechanism that would let athletes set the size of the main display element to whatever they wanted. The trick for my app is that they need to be able to do it with little dexterity (like with gloves or hand wraps on) and I wanted it to work on a PC with, or without a mouse, and on an Android Tablet.

So my idea was to allow each important element of the app to be re-sized in one of three ways.

  1. The app is running on a PC with a mouse wheel and when the user places the mouse inside the element and scrolls the wheel, the element will grow or shrink depending on the direction of the scroll action (larger for Up-Scroll and smaller for Down-Scroll).
  2. The app is running on a PC whose mouse does not have a scroll wheel, in which case the user can click and drag to change the element size.
  3. The app is running on a tablet of phone and they should be able to swipe an element to re-size it. (Note: I don’t want to use pinch in this case because my users may be wearing gloves.)

So, I put together a demo.

The demo starts with this……

And after using any of the three methods above the element is re-sized as ….

Note that the resizing actions only work when the mouse or touch events are on the specific element that is to be re-sized.

As is so often the case, there are jQuery plugins handle all of these UI desires.

The code is below. Simple stuff, but another example of a feature that I started out with saying “you can’t do that in HTML.

You can run the dmo HERE


<!doctype html>
<html>
   <head>
      <title>Mousewheel font resizer</title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <script src="js/jquery.js"></script>
      <script src="js/jquery.mousewheel.js"></script>
      <script src="js/jquery.event.move.js"></script>
      <script src="js/jquery.event.swipe.js"></script>
      
      <script type="text/javascript">

         var TextSize = 1;

         $(function() {
			 
             var currentTime = new Date()
             var month = currentTime.getMonth() + 1;
             var day = currentTime.getDate();
             var year = currentTime.getFullYear();
             $('#TimeDisplay').html(day + "/" + month + "/" + year);


             $('#TimeDisplay')
               .mousewheel(function(event, delta, deltaX, deltaY) {
                  var o = '';
                  if (delta > 0) {               
                     o = delta;
				 }
                 else if (delta < 0)
                     o = delta;
                  
                  if( o != '' )
                     size( o );
                  return false; // prevent default
               });
               
               
               $('#TimeDisplay').on('swipeleft', function(e) {
					size(-1);
				});
               
               $('#TimeDisplay').on('swiperight', function(e) {
					size(1);
				});
				
               $('#TimeDisplay').on('swipeup', function(e) {
					size(1);
				});
      
               $('#TimeDisplay').on('swipedown', function(e) {
					size(-1);
				});
            
            function size(msg) {
               TextSize += msg;
               if (TextSize < 1) {
                   TextSize = 1;
               }
            $('#TimeDisplay').css('font-size', TextSize + 'em');
            };
         });
      </script>
   </head>
   <body>
      <br /><br />
      <div id="TimeDisplay">s</div>
      <br />
   </body>
</html>


HTML5 Off Line: Storing and retrieving Videos with IndexedDB

HTML5 Off Line: Storing and retrieving Videos with IndexedDB

There’s some disagreement among developers as to the importance of an offline experience for HTML5 apps. Some people say it’s not that important  because everything is always connected. That may be true if you live in the heart of Silicone Valley but if you live in the hills of New England, like I do, or in Central or South America (where the first Firefox OS devices will ship), then that may not be true.

Personally, I think a great app needs to include an offline strategy. “Adaptive” design shouldn’t be only about the user interface.

You’ve probably heard about HTML AppCache, but AppCache is only designed for certain limited use cases.

Think of media files for example. AppCache is declarative, meaning that you specify the resources that should be downloaded and cached in the cache manifest. AppCache is also non deterministic so it downloads the referenced resources on a best efforts basis, primarily for use “next time”.

In the case of a content driven app, this doesn’t solve all the problems. Take, for example an app for a video podcast. There may be hundreds, or even thousands of video files. The user wouldn’t want the run-time to just start downloading thousands of videos, many of which they may never even watch. The user wants to watch only certain videos and only those certain videos should be downloaded..

Since I pay for band width (both as an application hoster and as an Internet user) I don’t want a preferred video to be download each time a user wants to view it.

HTML5 local storage is not designed for lots of data or for large objects.

Gecko, the engine behind Mozilla Apps and Firefox OS Apps supports an embedded database – IndexedDB.

IndexedDB has been available in Firefox for some time and is mostly implemented in Google Chrome. It will also be implemented in Microsoft’s IE 10.  Safari, Opera, etc have implemented WebSQL which the the W3C has stopped working on.

(The demo that follows did not work in Chroime at the time of this writing, probably related to this issue. Since the focus if this article revolves around Firefox OS and Mozilla Apps I’m not going to try to debug the issue on Chrome at this time. Please email me if you get it to work in Chrome.)

I have to admit that I found IndexedDB a bit daunting when I first started with it. It’s different than the SQL databases that I have worked with because it does not involve user created SQL syntax in order to interact with the database. Instead, it leverages what feels to me more like an  ORM (Object Relation Mapping) approach. If you’re not used to ORM syntax there is a bit of a learning curve but once you adjust to it I think you’ll find that your code reads and gets written in a more fluid manner.

So given the use case described above for a video viewing app, here is the English pseudo code for the app’s function.

  1. Fetch a video from the Internet and download it into the browser DOM.
  2. Store that video in an IndexedDB object store
  3. In response to some user generated event …
  4. Retrieve the previously stored video from the IndexedDB object store.
  5. Play the retrieved Video

The demo starts with an index.html page

Note the  link to the put.html page.

Put.html will automatically start downloading a video file.

See the “WORKING” message ?

When the file has been downloaded and saved that message will change to indicate that you can click the link to move on to the display page.

Here is the put.html markup.


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>HTML5 - Storing a video file IN IndexedDB</title>
      <link rel="stylesheet" href="css/base.css" type="text/css" 
            media="screen">
   </head>
   <body>
      <div class="container">
         <header class="header" role="banner">
            <h1>Storing a video file IN IndexedDB</h1>
         </header>
         <div class="main">
            <article class="main-content" role="main">
               <span id="fetchstatus">
                  WORKING : Video File is Downloading
               </span>
               <br /><br />
               <a href="show.html">
                  <strong>
                     Click to DISPLAY a video retrieved FROM IndexedDB
                  </strong>
               </a>
            </article>
         </div>
      </div>
      <script src="js/put.js"></script>
   </body>
</html>


And the included JavaScript file – put.js

I think the code’s functionality is pretty straight forward.


(function () {

   window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                      window.mozIndexedDB || window.OIndexedDB || 
                      window.msIndexedDB;
                       
   var IDBTransaction = window.IDBTransaction || 
                        window.webkitIDBTransaction || 
                        window.OIDBTransaction || 
                        window.msIDBTransaction;
                         
   var dbVersion = 1.0; 
   var indexedDB = window.indexedDB;
   var dlStatusText = document.getElementById("fetchstatus");

   // Create/open database
   var request = indexedDB.open("VideoFiles", dbVersion),
      db,
      createObjectStore = function (dataBase) {
          dataBase.createObjectStore("Videos");
      },

      getVideoFile = function () {
         var xhr = new XMLHttpRequest(),
         blob;
         // Get the Video file from the server.
         xhr.open("GET", "Heilman-Betts.webm", true);     
         xhr.responseType = "blob";
         xhr.addEventListener("load", function () {
            if (xhr.status === 200) {
                blob = xhr.response;
                putVideoInDb(blob);
                dlStatusText.innerHTML = "SUCCESS: Video file downloaded.";
            }
            else {
                dlStatusText.innerHTML = "ERROR: Unable to download video.";
            }
          }, false);
          xhr.send();
      },

      putVideoInDb = function (blob) {
         var transaction = db.transaction(["Videos"], "readwrite");
         var put = transaction.objectStore("Videos").put(blob, "savedvideo");
      };


    request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };

    request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;

        db.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };
        
        getVideoFile();
       
    }
    
    // For future use. Currently only in latest Firefox versions
    request.onupgradeneeded = function (event) {
        createObjectStore(event.target.result);
    };
    
})();


Note both the xhr event listener and the onsuccess / onerror methods for IndexedDB funtions which indicate that both APIs are asynchronous.

Now that the video file is stored in the IndexedDB store, we can click on the lick to navigate to the show.html page which will automatically retrieve the video from the IndexedDB store and ready it for playing on the page.

Here is the show.html markup.


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>HTML5 - Storing and Playing Videos with  IndexedDB</title>
      <link rel="stylesheet" href="css/base.css" type="text/css" 
            media="screen">
   </head>
   <body>
      <div class="container">
         <header class="header" role="banner">
           <h1>Display a video stored in IndexedDB</h1>
         </header>
         <div class="main">
            <video  id="Video" type="video/webm" controls>
               <p>
               If you are reading this,
               it is because your browser does not support the 
               HTML5 video element.
               </p>
            </video>
            <p>
                Video MIME type is : <span id="vidMimeDisplay"></span>
            </p>
         </div>
      </div>
      <script src="js/show.js"></script>
   </body>
</html>

And the show.js code…..


(function () {
    // IndexedDB
    window.indexedDB = window.indexedDB || window.webkitIndexedDB || 
                       window.mozIndexedDB || window.OIndexedDB || 
                       window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || 
                     window.webkitIDBTransaction ||
                     window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;

    var indexedDB = window.indexedDB;

    // Create/open database
    var request = indexedDB.open("VideoFiles");
    
    request.onerror = function (event) {
        // Failed to Open the indexedDB database
    };

    request.onsuccess = function (event) {
		db = request.result;
		
		// Open a transaction to the database
        var transaction = db.transaction(["Videos"], "readwrite");

        // Retrieve the video file
        transaction.objectStore("Videos").get("savedvideo").onsuccess = 
        function (event) {
				
        var videoFile = event.target.result;
        var URL = window.URL || window.webkitURL;
        var videoURL = URL.createObjectURL(videoFile);

        // Set video src to ObjectURL
        var videoElement = document.getElementById("Video");
            videoElement.setAttribute("src", videoURL);

       var mimeDisplayElement = document.getElementById("vidMimeDisplay");
           mimeDisplayElement.innerHTML = videoFile.type;
	    };
    }
})();

Which results in…..

Now the video can be watched and re-watched without having to re-download the video for each viewing.

If we configured the player for app caching the videos could even be played with no internet connection. (I’ll do an example of that if a future post.)


[ CLICK HERE ] To download the code.


Testing HTML5 Web Workers (A Demo)

Yesterday I started a series of blog posts on HTML5 apps oriented architectures. You can read the first post HERE.

The demo lets the user select a video that they want to watch and then, when the click on the link, the code dynamically download’s that video and plays it for the user. The next logical step for the evolution of the demo is to move the video download logic out of the main thread using HTML5 Web Workers.

On it’s own, moving the download to another thread doesn’t buy us much. There is nothing for the user to do while they are waiting for the first video to download and subsequent download requests don’t interrupt the video player until they are finished.

But, I’m looking forward to how I want the down feature to ultimately work. Ultimately, I want to store any downloaded videos in a data base and let the user watch saved videos while downloading new videos. That means I’ll need a mechanism by which the user can add videos to a download queue in a Web Worker.

So I spent time today looking into how web workers function. I found lots of demos but I didn’t find one that I thought was a really straight forward test. So I wrote one.

The test model is simple and you’ve probably seen this oversize when learning web services.

We’ll create a Web Worker with a method that receives an argument. The Web Worker will add some text to the inbound argument and return the combined string.

Lets first look at what the running app and then we’ll review the code.

Web Worker Sample

When I click on the “Send to Worker” button, the button click event handler sends the string “MisfitGeek” to a method in the worker process. The worker process appends some text and returns the newly combined string.

Web Worker Demo - Return

Note the number in square brackets at the end of the string in the alert box. It’s value is “1″.

If I click on “OK” and then click on the “Send to Worker” button again, that numeric value changes,

Web Worker Demo - Return

Now let’s look at the code.

The code for the Web Worker lives in a JavaScript code file named “worker.js”.

Here is the code: (It’s just 6 lines long.)


var callCount = 0;

self.onmessage = function(event) {
  callCount++;
  // Below is a single line of code seperated for display purposes.
  self.postMessage(event.data +
                   ' : Hello from your worker ! [' + callCount + ']');
};

The code doesn’t do all that much. It increments the local variable “callCount” and then creates and returns a string by combining the string parameter that was passed in with local values.

The calling page looks like this.



<script type="text/javascript">// <![CDATA[
        var worker = new Worker('js/worker.js');
        worker.addEventListener('message', function(event) {
         alert(event.data);
        }, false);

        function callWorker(msg) {
           worker.postMessage(msg); // start the worker.
	    }

// ]]></script>
    HTML5 Example - Worker
</pre>
<div id="mainDiv" style="text-align: center;">
  <button onclick="callWorker('MisfitGeek')">
    Send to Worker.
  </button>
 These aren't the droids you're looking for.
 - Move along... move along.</div>
<pre>


Lines #5 and #6 above are where the magic happens.

Line #5 says take the code in worker.js and run it in a Web Worker.

Line #6 says to hook up the following anonymous function for when that worker posts a message. In our case all we are going to do in that funtion ios to use the message send to the main thread from the Web Worker to display in an alert dialogue.

Line #10 declares a local function that will be called when the user clicks on the “Send to Worker” button which will be called with a text argument (in our case this is hard coded to the text “MisfitGeek”. That function call sthe Web Worker postMessage() method, sending as an argument the text (“MisfitGeek”).

Not that the variable callCount defined in worker.js is not accessible outside the Web Worker.

Simple but powerful. We will use this method in a future post to download video files as selected without blocking the user interface !


Shifting HTML code design to App Architectures – a demo.

For the last nine months I’ve been focused on the potential of HTML5 as an application development platform. When I first started talking about HTML5 for building apps, it seemed like very few people really “got” what it meant. Rather that HTML simply being something that gets spewed out by your server. HTML5 and it’s companion technologies, themselves became a platform.

In fairness, there were lots of developers that were starting to add “richness” to their HTML / client side work, predicated in no small part on the change in web development perspective that was catalyzed by the whole “Ajax” phenomenon.

More and more people seem to be embracing what the HTML5 wave of technologies could mean to development of all sorts. I say “could” mean because I believe HTML5 is in its “usable” infancy.

I recently asked my readers how important they think “off-line” support for HTML5 apps is.

The answers were great and showed how far developers as a group have advanced their perspective on where HTML development is going.

During my years at Microsoft I spent much time helping developers change the way that they looked at ASP.NET based web development by authoring patterns and practices that were focused on developing web applications that used real client / server interactions. With the advances Mozilla is making with it’s HTML5 Apps platform and the Firefox OS, it seems like a good time to apply that same kind of guidance to apps focused patterns and architectures.

So here is the beginning of a demo project for apps.

Understand that this app is a learning project and it’s focused on MozApps and Firefox OS apps. That means I’m writing the sample specificity for Gecko based run-times. If you were writing a cross browser app supporting Gecko, Webkit and Microsoft browsers you would have to do some feature detection and code against the features that are available in your browser. Perhaps I’ll write some samples to demonstrate that in the near future but for now I’ll focus on apps for one of the Gecko run-times.

Here is what the user interface of the demo looks like. I’ve only implemented the first feature for demonstrating “sometimes connected” architecture, but we’ll build on this app over the coming weeks.

Dynamic Media Demo

You can run the page here http://www.misfitgeek.com/demo/mediaget/ – just remember that this demo targets the Gecko run-time so if you’re not using a current version of Firefox you’re sort of on your own.

This page will play video files but what is a bit different about this page than you would have found in “old school” HTML page design is that the page contains a single media element and that HTML video tag has no video source specified.

This might be a common scenario in an HTML5 app (Think YouTube or Netflix). One would not, really could not, embed all the videos that the end user “might” want to watch.

In this case, we will not download any videos by default when the page is loaded, we’ll wait until the user selects a video to watch and then DYNAMICALLY fetch that video. When it was been retrieved we’ll play it. In our sample the user can choose from three videos but that number could be 100s of videos since none of the choices are actually downloaded until the user selects a video to watch.

At the top of the UI the user has three videos that they can choose from to watch.


</pre>
<h3>Videos Available For Viewing</h3>
<div class="gallery">
<div class="photo"><a href="javascript:loadMedia('demo-vid.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid.webm');">Fetch Video 1</a></div>
<div class="photo"><a href="javascript:loadMedia('demo-vid-2.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid-2.webm');">Fetch Video 2</a></div>
<div class="photo"><a href="javascript:loadMedia('demo-vid.webm');">
 <img src="img/foto.jpg" alt="" width="155" height="110" />
 </a>

 <a href="javascript:loadMedia('demo-vid.webm');">Fetch Video 3</a></div>
<div class="cleaner"></div>
</div>
<pre>

Notice that clicking on each image causes a bit of JavaScript to execute. (Yes I know there are other, and perhaps better ways to do this, especially if you are a jQuery aficionado but this is a straight forward method for learning simplicity.)

Here is what the loadMedia() method looks like.


function loadMedia(mediaFile) {
   document.getElementById("dlstatus-container").style.display="block";
   var xhr = new XMLHttpRequest();
   var mediaFileLocation = "media/" + mediaFile;
   xhr.open("GET", mediaFileLocation, true);
   xhr.responseType = "blob";      // Set the responseType to blob
   xhr.addEventListener("load", function () {
      if (xhr.status === 200) {
		 document.getElementById("dlstatus-container").style.display="none";
		 document.getElementById("player-container").style.display="block";
         blob = xhr.response;         
         var mediaFile = blob;
         var URL = window.URL || window.webkitURL;
         var mediaURL = URL.createObjectURL(mediaFile);
         var mediaElement = document.getElementById("media-element");
         mediaElement.setAttribute("src", mediaURL);
      }
      else {
		  // Download failed. Stop Download Status.
		  // ToDo: Add Error Handeling.
		  document.getElementById("dlstatus-container").style.display="none";
      }
   }, false);
   
   xhr.send();
}


The function catches a file name to be retrieved and then does an XmlHttpRequest call to fetch the file from the media directory on the server. Not that this method runs on the same thread as the user interface. In a later version we will use “HTML5 Web Workers” to cue the video downloads without blocking the user interface.

The first thing that loadMedia() does is show a hidden div named dlstatus-container. This div contains an animated gif file that indicates the file is being downloaded.


   <div id="dlstatus-container" style="display:none">
      <h2>Downloading Video .......</h2>
      <img src="img/dl-status.gif" alt=""  />
       </br /><br /><hr /><br />
   </div>

I use a free on line tool at AjaxLoad.info to generate the “working” image.

Line 7 in the listing above defines an event listener and line 8 tests to make sure the download was a success.

After that we turn off the status indicator div and the display the div that contains the HTML5 video element.


   <div id="player-container" style="display:none">
      <h2>Media Fetch</h2>
      <video id="media-element" controls="controls" 
             width="520" height="340" autoplay="autoplay">
      </video>
      </br /><br /><br /><hr /><br />
    </div>

Note that autoplay on the video element is on, so that when the video element’s source attribute is populated with the downloaded video on line 16 of the loadMedia() method, the video begins to play.

You can test the feature here – http://www.misfitgeek.com/demo/mediaget/

Note the behaviors.

  • If you start playing one video and then select another video, the first video will continue to play until your second choice is ready.
  • If you play one video, then play a second video, then go back to the fist video you watched – it will begin playing immediately when you select it, since it has been automatically cached by the run-time when it was downloaded.

A simple but meaningful feature.

Stay tuned. We’ll start adding features in the next post in this series.


Weekly HTML5 Links Post On Mozilla Hacks

Hi Folks – this weeks Mozilla Hacks post of links for HTML5 Apps Developers is available HERE !

How important is HTML5 Off Line ?

There are a collection of facilities that are available to developers using HTML5 that enable an HTML5 app to run when no connection to the internet is available.

Of course, the first access to the app requires an internet connection but during that first experience the browser can use AppCache to save the required resources locally so that they are present later when a network connection is not available. Clever use of the NETWORK and FALLBACK sections help you tailor the app’s experience based on the network connection state.

Local Storage and IndexedDB provide facilities to store needed data for use both online and off. window.navigator.onLine and associated event listeners can even help you switch state at runtime.

So technology is in place for building offline HTML5 apps. At Mozilla we’re busy building an HTML5 apps run-time for running HTML5 apps on Windows, Mac,Linux and Android, a marketplace for distribution of such apps, and a cool HTML5 based phone operating system (Firefox OS).

So for the last 10 months or so I’ve been really focused on HTML5 “apps” and I’m especially excited about the B2G Phone OS but it does leave me with the question, how much do folks really need off line functionality in an HTML5 app ?

Fault Tolerant Cloud Based Hosting has become a norm in recent years and the service levels have been very reliable so the question become the utility of the proverbial “last mile”.

For mobile users there are two questions.

1.) Is there service everywhere I need there to be.

2.) How much will use effect my service plan.

Here in rural New England, where I live, there are many spots without cell service coverage. However I tend to only experience them when I’m driving in between places that DO have coverage so the inconvenience is minimal.

As to the data usage, my monthly service contract comes with a monthly data allowance. If my internet usage surpasses that allocation AT&T just automatically adds another “block” of usage to my bill for that month. (I think the increment is $20USD) – So at least it’s not like the old days when you exceeded your plan, silently went into a high-price-by-the-minute plan and got surprised by a $1,000 cell phone bill at the end of the month.

But, the way that it works in the USA and Europe is not necessarily the way it works in the resat of the world.

For example, Mozilla’s phone OS initiative is expected to launch in Brazil first (read more here) but consumer usage profiles in Brazil are very different. Something like 85% of cell phones are acquired on prepaid / pay-as-you-go contracts. This means when you run out of prepaid data access, you’re done until you buy more. Local experts also inform us that “public” use of smart phones is significantly curtailed due to theft concerns, etc.

So share your thoughts on the following two questions.

1.) How much does OFF LINE functionality matter for a desktop app?

2.) How much does OFF LINE functionality matter for a MOBILE phone or tablet app?


Weekly HTML5 Apps Links Series on Mozilla Hacks

FYI – Each week I post a list of resources on the Mozilla Hacks Blog that may be of interest to folks doing HTML5 development.

Here is this weeks – Weekly HTML5 Apps Developer Resources, June 20th 2012


A Usage Saver pattern for HTML Apps

Mozilla is building a HTML5 “Operating System” for devices named Boot-to-Gecko or B2G for short.

Due to the lightweight nature of B2G it will work on a wide variety of devices from high end to, shall we say modestly priced.

Gary Kovacs, Mozilla’s CEO, recently announced that the first Boot to Gecko  devices will be introduced in Brazil.

Most mobile service plans limit the amount of bandwidth a user is allocated each month. In many cell service customers in South America purchase cell service using “pay as you go” plans. Either way, apps that over consume band with will not be very well received so developers need to design their app interactions to minimize the amount of bandwidth they consume.

Applications on B2G will be built with HTML5 / CSS3 / JavaScript.

Frequently HTML5 apps use various service mechanisms to update their content. We can optimize the actual number of bytes required by those communications.

Another method that we can implement is to determine when the running application is not being used by the user.

One way to do this is to hook the DOM’s window.onblur and window.onfocus events implement a state manger with which we can track “Active” and “Suspended” state.

When the state is “suspended” the application would bypass any network activities.

Here is a quick sample of hooking the onblur and onfocus events.

HTML File


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/IsActive.js"></script>
</head>
<body class="active">
   <center>
      <br /><br />
      <h1>
         <p>
	      Processing is .... <br /><br />
	      <span id="active">ACTIVE</span>
	      <span id="suspended">SUSPENDED</span>.
	   </p>
      </h1>
   </center>
</body>
</html>


Note that we include a .css and a .js file and wecreate two divs – one to show when the window is active and the other to show when it is not active or “blurred”.


CSS File


.active #active, .suspended #suspended { 
   display: inline 
}

.active #suspended, .suspended #active { 
   display: none 
}

.active {
   background: white;
   color: black;
}

.suspended {
   background: black;
   color: white;
}


Some simple styles to change the background to reflect changes in state.


JavaScript File



function onBlur() {
	document.body.className = 'suspended';
};

function onFocus() {
	document.body.className = 'active';
};

if (/*@cc_on!@*/false)  // check for Internet Explorer
   {
	document.onfocusin = onFocus;
	document.onfocusout = onBlur;
   }
else
   {
	window.onfocus = onFocus;
	window.onblur = onBlur;
   }


The code to implement the state event handlers. Note the required hack for Internet Explorer.


To throttle our bandwidth consumption when the user has another application in the forground we would simpley add logic to the onBlur() & onFocus() functions to set and unset a state variable and then we would test the value of that variable before we make any network calls.


Mozilla Apps on Linux from the Community !

I’ve spent a great deal of time over the last six months focusing on HTML5 “apps”. There continues to be profound confusion about defining what exactly an HTML5 “app” is and that’s OK. One of the great things about HTML5 is the wide variety of ways that you can choose to use it.

One of the prospects that I’m most excited about is the ability to create applications with HTML5/CSS3/JavaScript that provide user experiences like that of a natively built apps.

Mozilla has been working on both a “Web Run Time”  to enable this type of development and a Marketplace for really broad distribution of such apps.

As a non-profit organization, Mozilla has limited funds and resources. We don’t have thousands, or even hundreds of software developers in our engineering teams to point at any given problem at any particular point in time.

What we DO have though is a great global community.

The size of our team has required that we not build the entire Web Run Time for all devices at the same time. To start with the largest user share we have focused on Windows and Mac first.

Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

My wishes have been answered by Marco Castelluccio. If Marco’s name is familiar to you it may be because he recently won the Mozilla Dev Derby contest for his IndexedDB entry.

Marco, a student, wrote and submitted the Web Run Time support to Firefox for Linux and it’s now available in the Firefox Nightly channel.

How cool is that?! – Real production features submitted by a community member on the same time line as the company’s own code.

Here is what the apps experience looks like on Linux.

First you need to install Firefox Nightly (as of this writing) and you don’t want to do it through the package manager / Nightly PPA as it tends to lag a bit. (If what I just said doesn’t make sense to you – just ignore it. Installation  is simple.

You will net Firefox Nightly for Linux at http://nightly.mozilla.org/

Download Firefox NightlyThe size of our team has required that we not build the entire Web Run Time for all devices at the same time. As the largest user share we have focused on Windows and Mac first. Though I use Windows, Mac, and Linux – I prefer to do my web development on Linux and I’ve missed the apps support on Linux.

Download the correct version, extract the files and put them where you want them.

If you double click on the extracted “firefox” binary file it should run (make sure permissions are set to allow execution).

Of course you can create a desktop shortcut or if you are using Ubuntu Unity you can pin Firefox Nightly there as well.

AS of this moment, the Mozilla Marketplace is in a “limited” beta so if you are not a Mozillian of a developer who previously submitted an app you won’t yet be able to get access to the store, but I’ll show you the acquisition process in as seen in Linux with Marco’s code.

When I click Log In I am prompted to authenticate with BrowserID.

BrowserID Log In

Note the message that confirms the Marketplace is not yet open to the general public.

Mozilla Marketplace Opening Soon

Now I’ll use the search feature to find my Round Time app.

Search Timer Apps

Mine is the second one so I’ll click to navigate to the KO Timer page on the Mozilla Marketplace.

When I click on the Install Button I get the permissions prompt.

Marketplace Install Permissions Prompt

When installation is compete I can search for and find the “KO Round Timer” in the application launcher (I’m using Ubuntu)

When I run the app here is what I see.

KO Timer Start Screen

You can also run the same app in Firefox at http://timer.koscience.com/

Running as an app on Ubuntu I can stick the KO Timer to the Unity Launcher…

KO Timer Stuck to Unity

Progress is a great thing and THANKS to Marco for his awesome work !


HTML5: The difference between an App and a Page.

Cross-posted from my entry to the Mozilla Developer Network – HTML5: The difference between an App and a Page.

HTML5 is only one part of the”Stack”

HTML5 is really more than one thing. In the strictest sense, HTML5 is fifth major revision of the W3C specification of the markup language that is used to create web pages.

But in a practical sense, HTML5 is far more than that. For developers, HTML is a wave of technologies that are evolving and gaining browser implementations along roughly the same time-line as the markup language itself. Many of the related technologies are being spearheaded by the Web Hypertext Application Technology Working Group (whatwg.org), but still other technologies in this genre are driven from elsewhere. For example WebGL, the 3D rendering en/Apps/Getting_Started)engine for Web Apps, is driven at Khronos (http://www.khronos.org/), and Mozilla’s WebAPI team (https://wiki.mozilla.org/WebAPI) is leading a collection of relevant API work including a comprehensive array of device-specific APIs. And the W3C was a Device APIs Working Group ( http://www.w3.org/2009/dap/] )

Mozilla is also investing heavily in an initiative to facilitate the use of standards-based Web technologies to build applications that can be installed and used in the same way a “native” applications would be.

There are many reasons that doing so might be desirable, not the least of which is the ability to build much or all of your application for use on many different devices and platforms using a single set of development technologies.

Developers can already build HTML Applications (with help from the HTML5 Apps documentation https://developer.mozilla.org/en-US/apps ) and submit their applications to the Mozilla Marketplace (https://marketplace.mozilla.org/ ).

App versus Page ?

When people start talking about building apps with HTML5, one of the early questions that comes to the conversation is “What’s the difference between an app and a page?”

This is bit of a difficult question to answer because of the very wide range of answers which can all be true, but which may be completely different.

While your HTML5 app should be more than a simple HTML5 page, technically speaking it doesn’t have to be. Using the steps outlined in the guide “Getting Started with making (HTML5) apps” (https://developer.mozilla.org/en/Apps/Getting_Started ), you could simply create an apps manifest file and submit your HTML page as an app.

Read the rest of this entry »

Building Apps and deploying them from GitHub

Those guys at GitHub have always been forward thinking and Open friendly !

So you ave probably heard that Mozilla is getting into “Apps” in a big way (https://apps.mozillalabs.com/)

There are couple of things about HTML5 apps that are different than conventional native apps.

First, because they are web technology they want to live somewhere on the web. Second, each app has a manifest (https://developer.mozilla.org/en/Apps/Manifest) and that manifest needs to be served with a new, specific MIME type.

Now, if you self host on Linux this is trivial. You can just add an entry to the .htaccess file, but if you don’t want your app to have it’s own web presence there is another option.

This clever guy on my team, Rob Hawkes (http://rawkes.com/) is the Developer Community Gaming Lean on my team and he  worked with GitHub to add the ability to serve Mozilla Apps Manifests directly from your GitHub repository.

COOL !

Then, an independent game developer, Jerome Etienne (http://jetienne.com/) tested it by publishing a game in the Mozilla Labs Developer Preview Apps Store.

The game is called marbleSoccer and the GitHub is here - https://github.com/jeromeetienne/marbleSoccer

To install and run the game, start by installing the Mozilla Labs Apps  Runtime (we’re in preview, this step won’t always be necessary)

https://addons.mozilla.org/en-US/firefox/addon/app-runtime/

Then you need to log in to the store at :

You need a BrowserID to log in (which everyone should want to have, anyway) :)

https://browserid.org/

After logging in search the store for MarbleSoccer.

Once you have it installed you’re good to go.

There you go – game installed and running – hosted at GitHub

Great job guys !

 


Choosing a CSS Framework

I’ve been building web applications since the beginning of the World Wide Web and yet I’ve never become very knowledgeable about CSS.

I’ve listened to the arguments about page layout (styles versus tables) and hacked my way through enough CSS but always found myself more frustrated than enthralled.

JavaScript frustrated me in the early days too. Compared to C++, Java, C#, etc it left “dirty” to me but I’ve grown to enjoy and embrace JavaScript and I know that I need to do the same thing with CSS.

CSS is very powerful but you need embrace it to really Grok (http://en.wikipedia.org/wiki/Grok) it.

But, I have some issues :

  • I’m in a hurry – I need to be building apps now.
  • I don’t think aesthetically – I’m a bits and bytes guy.
  • I’m a pragmatist – I don’t care about purist type elegance.

So I’m choosing a “CSS Framework”.

If you search the web you can find lots of discussions about why NOT to use a CSS framework. Purists say that a CSS Framework is a contradiction in terms, but I suspect that 99% of developers doing significant client side work are using a CSS framework, even if their framework of choice is a collection of code that they wrote themselves (as opposed to someone else’s formal framework).

There are some basic criteria when choosing any framework.

  • Rich Functionality
  • The flexibility to extend and modify features
  • Understandable code
  • Good Documentation
  • Good usage examples
  • A vibrant community
  • An implementation that works the way I want to work

When it comes to choosing a CSS framework there are some additional criteria.

  • Reset Strategy
  • Typography Implementation
  • Semantic Naming

Especially “Semantic Naming” becomes incredibly important the more complex your markup becomes.

There is a cyclic relationship between HTML Elements as Identified by “Id”, CSS Classes that are applied to those elements and the JavaScript code that is executed against those elements, often that are found by way of the classes assigned to them.

Random naming of CSS classes or a set of naming conventions that lack logical value can turn the whole stack into a mess.

So, good naming strategy is crucial to a usable CSS framework and a way to customize naming in conjunction with your application’s problem domain is even better.

There are LOTS of CSS frameworks to choose from and several dozens of blog posts on the web listing the popular ones.

Rather than enumerate all the ones that I did NOT choose, I though I’d share some reasons for choosing the one that I did choose.

My criteria seems to be best met by Blueprint CSS (http://blueprintcss.org/)

  • A CSS reset that eliminates the discrepancies across browsers.
  • CSS Reset based on Eric Meyer’s (http://meyerweb.com/eric/tools/css/reset/)
  • A solid grid that can support the most complex of layouts.
  • Typography CSS that implements a baseline grid.
  • Form styles.
  • Print styles.
  • A Plugin model and a collection of available plugins.
  • En ecosystem for use in different development. (WordPress, Drupal, etc)
  • Tools, editors, and templates.

While the checklist seems complete is the combinatorial effect that we end up being interested in.

For example, using a CSS reset by itself nullifies browser defaults (which all tend to look different to the user) but using a CSS reset by itself, especially one as complete as Eric Meyer’s, means there is a lot of default behavior to be re-defined. Of course Blueprint CSS handles this for us.

For my needs there is one more very important feature of using Blueprint CSS.
Blueprint CSS comes with a Ruby script that lets you customize Blueprint style sheets using your own semantic class names.

This isn’t a matter of purism for me. UI code and markup can get very complex and maintainability, as well as debugging, can be drastically effected by semantic naming.

Standard framework names like these :


&lt;div class=&quot;span-9 last&quot;&gt;
&lt;div class=&quot;grid_6 alpha&quot;&gt;

… are learn-able, but just have no RELATIVE meaning inside our own application.

Here is some good information on CSS Semantics and using the Blueprint CSS customizer.

http://joshuaclayton.me/blueprints_compress_a_walkthrough.html
http://www.sitepoint.com/css-frameworks-semantic-class-names/

More to come…..


Building Apps with HTML5 – Desktop, Tablet, Phone !

Disclaimer : As a reminder, this post represents only my own personal opinion and is not presented as an endorsed or official position by anyone but myself.

Few evolutions of developer technology have resulted in as much discussion and speculation as “HTML5”.

In this post I’m going to write about building APPLICATIONS with HTML5, not sites or pages.

Two weeks ago I was in London at the Apps World Conference where I witnessed an interesting dichotomy.  The few HTML5 sessions were PACKED. There wasn’t even standing room left. But, almost every other session included commentary to the effect that HTML5 is “nor ready for prime time, though it is going to be really important in two or three years.

If you’re a cross platform tools vender, out-source developer, or consulting shop working in the mobile application space, then that’s probably what you want to believe. (Or at least what you want the industry to believe.) If you’re a  “native” developer you’re probably in the same boat.

I’ve talked to many “Native” / desktop application developers over the years who just don’t like the “Web Stack”.  They tend to discount HTML5 out of hand.

You hear one liners like :

HTML5 Apps can’t get good performance.
JavaScript sucks !
You can’t access the necessary hardware in HTML5.
You can’t optimize battery life in HTML5.

There is no question that there are some kinds of applications that you would not try to write using Web development technologies. You wouldn’t write Adobe Photoshop, Apple Final Cut Pro, or Audacity in JavaScript for example.

But I believe there are LOTS of applications that can be written in HTML5 / Web technologies and that there are significant advantages to doing so when your application scenario makes a Web stack appropriate.

Lets first fix what I think is a problem with the vocabulary.

“HTML5” is not really HTML 5.0. “HTML5” is a wave of technologies of which version 5 of the hypertext Markup language is only one part.

You can read the W3C HTML5 Draft Specification here : http://dev.w3.org/html5/spec/

While the HTML5 specification enhancements are important we, should be equally interested in the work being done by the What Working Group – http://www.whatwg.org/

But to get the whole picture we need to consider other evolutions in web technology as well.

There is the CSS3 specification – http://www.w3.org/Style/CSS/specs which is part of the wave.

I also think that jQuery is in important part of the piece, especially now that browser venders are leveraging the performance experience of other scripting language makers and building significant optimizations into their respective “Web Stacks”.

So, in this post I will refer all of the technologies that we would use to build a Web Standards Based Application collectively as “The Web Runtime”.

Before I start to talk about what we can to with The Web Runtime, let me suggest that none of the corporate entities will want you to believe that you can build great  applications that will thrill customers by using only standards based technologies.

Why ? Because web technology runs on every platform that matters, is not controlled by any single entity and can be delivered by a wide variety of mechanisms.

Apple wouldn’t be thrilled by the success of The Web Run Time. Apple changed both the phone and the information industry with iOS, but their sustained success is, at least partially, predicated on the head start they achieved by being first to the market space.

While (in my opinion) iOS, as a device operating system, is still slightly better than Android at this stage of Android’s evolution, it is only marginally so and Android is evolving rapidly. What’s more, the iPhone is no longer the number one phone from a hardware perspective.There are many Android phones that are more advanced. (Like the Galaxy S2 Skyrocket). Apple can’t innovate on the hardware as quickly as the entire phone and tablet manufacturing industry and folks have angst over whether or not Apple can keep up with the pace. Expected announcement of the iPhone 5 this fall never materialized.

Still, the iPhone is staying strong in the market because the “Apps” are there. iOS is a proprietary platform. Apps that run on iOS do not run anywhere else. For most consumers, the only way to get Apps on your iPhone or iPad is through the Apple store where Apple gets a good percentage of the purchase price, subscription fee or in application purchases. (Yes, we geeks can jailbreak or iPhones, but that does cause other concerns.)

If Web Runtime Apps started to enjoy adoption Apple would loose it’s head start as well as it’s monopoly on the sales and distribution process. Developers could build an application once and consumers could run that app on whatever great bit of hardware they wanted. Moving from one platform to another would be FAR less painful.

It’s been suggested to me that the performance of HTML/JavaScript in Safari on iOS has intentionally been made slower than it needs to be in order to help maintain the disparity between “Web Apps” and native iOS apps.

Microsoft probably wants “Web Runtime” applications to succeed even less.

Though Microsoft has more than one profitable product, Windows is still the mainstay of Microsoft’s revenue stream and the combination of Windows and Office (which has almost no success outside of Windows) probably still represent more than half of Microsoft annual revenue (thought that is a guess on my part).

Operating systems have nearly no direct value to the average consumer of computing devices (Servers, Laptops, Tables, Phones, TVs, etc) An operating system is only as interesting as the applications that are available to run on it.

In the early days of Microsoft Bill Gates and company had a brilliant long term success strategy of embracing developers and the development process to get them to target Windows for all kinds of applications.

That strategy has worked well. We had and CP/M and Apple computers well before the first PCs hit the street and the IBM PC with MS-DOS surpassed them all. We later got IBM’s OS2 and NextSTEP, which were technically better than the versions of Microsoft Windows that were available in their day, but did neither succeeded against Windows.

Even today, Apple’s OSX is a more consumer friendly Operating System than Windows,  and Linux is far more performant and stable than Windows, but yet Windows is far more popular than both OSX and Linux combined on the consumer’s desktop – why?

There are three reasons.

Application Availability. Microsoft has done a better job than Apple, or the Linux community, of exposing a set of developer technologies that make developing Windows Desktop applications easy enough for a broad variety of developers.
Microsoft has grown monopolistic market share and successfully maintained it which makes Windows the largest potential market segment for application developers.
They have leveraged their monopoly market share to manipulate the hardware OEM space to propagate that majority market share.
Read the rest of this entry »

HTML5 App versus HTML5 Page – What’s the Difference ?

It’s happened several times this week.

I heard someone say “There no difference between an HTML5 App and a Web Page / Web Site”.

While a web page could be an App, I think it’s a gross over simplification to say that they are the same thing.

Fundamentally, an HTML5 App should be more that simply a saved web page.

Yes, the HTML5 Off-Line API lets you create an application manifest to specify assets to be downloaded so that you can access those assets when the host device is not connected to the internet.

I clever application will understand when no network connection is available (See navigator.OnLine) and will tailor it’s behavior based on the network state.

Supporting “sometimes connected” experiences will likely require slightly more complex architectural design too. For example, web “sites” that work with data simply don’t work if the browser connection to the internet goes away. A line of business App that supports both connected and disconnected scenarios could determine the network state and, if not connected, store application / transactional data locally and then sync when a network connection becomes available.

Though that work flow and the eventing mechanism to support it is non-trivial, it can be abstracted into a common data I/O layer.

As you think about Apps supporting different network states you will think of any number of scenarios where you would implement custom logic  for on-line and off-line conditions.

Consumer research constantly tells us that consumers have very distinct, and different, perceptions of what an “Application” is and what a Web Site / Web Page is.  Apps should have a host integrated presence. For example, on most hosts I should be able to launch the application from a shortcut or icon. A process manager (like on Windows of Linux) should know the App identity.

Another big part of the intended App experience is the idea that we can write an application one time and run it on any device that we choose. As an industry, we have been trying to accomplish this forever.

Using “Web Standards Technology” we will define our user interface structure with HTML and write our imperative client logic in JavaScript.

We can write different CSS styles to custom tailor the aesthetics to whatever devices we want without touching the logic.

The “App” can be served up from a server and run ion a browser or run on the desktop using a Web Run Time.

Applications that have a server interactions will speak HTTP and JSON or XML so you can implement that data access (and any additional server side logic) in pretty much whatever language on whatever platform you like. This model solves another problem that we are always trying to solve and that is turning the World Wide Web back into a real Client / Server Network by federating real logic to the clients computing device thereby taking as much load as possible off of our servers.

The cross platform nature of HTML5 / Standards Based Technology has become important in a way that it has never been in previous generations of computing.

A decade ago cross platform meant writing your application once and being able to run it on Windows and Unix. The “platform” we were talking about was really the Operating System. Sure the hardware was different, but to the application developer the underlying hardware didn’t matter. This is no longer true and the difference between hardware hosts is greater than ever before.

Good applications will sometimes need to offer different functionality on different devices and will sometimes need to implement some features in a device specific manner in order to offer the same experience no matter what device the application is running on. Since it is commonplace for users to own and use multiple different devices to access the World Wide Web it will be important for developers to make their applications experience as similar as possible across devices.

Take, for example, an application that helps the user find something close to them. If the App is running on a phone or other 3G/4G enabled device that device will have a GPS built in to the hardware. If the App is running on you Mac Book Pro (or other laptop) it’s not likely  that a GPS will be present so the developer will have to provide an alternate mechanism for any geolocation functionality.

To do this I could use the GPS is there is one available on the host device but us an IP based Web Service if the device has no GPS but is connected to the internet.

If you are wondering how you would get access to that GPS, or,  for that matter camera, mic, or any other device specific hardware, well I’m glad you asked.

THAT is what the Web Run Time (or WebRT) will do.

Today’s modern browsers create a “sandbox” to limit what code delivered from the Web is allowed to do on the host machine. This concept of restricting the functionality of “untrusted” application code is not unique to browsers. Adobe AIR & Flash, Sun /Oracle Java, Microsoft .NET and many other technologies do this sort of thing.

The “Web Run Time” will (eventually) have a collection of standard APIs that expose all of the common hardware types that applications developers will need access to in order to build rich applications using Standards Based (HTML5/CSS3/JavaScript) Technology.

And the Web Run Time will free the developer from the browser “chrome” so an App will look like (and be) it’s own thing – and not just something the user can use inside Firefox or Chrome or IE.

So, maybe it’s just me, but I believe that thinking about HTML5 based “Apps” as simple HTML pages (that may get cached off line) is a pretty narrow view of what the next generation of Web powered applications could look like.


Build Cross-Platform Apps with Standards

Lots of people doesn’t realize that a lot more goes on at Mozilla than just Firefox. The Mozilla mission is to promote the Open Web.

Mozilla is primarily a web technology organization and the bright guys and gals in Mozilla Labs have spent a lot of time thinking about how difficult it is to build applications for broad deployment across different platforms, devices and browsers. On the desktop there is Windows, Mac, and Linux. On devices there is iPhone, iPad, Android Phone, Android Tablets, Windows Phone 7, and others. Then in the “browser space” there are a collection of proprietary options like the Chrome OS, and Chrome Applications.

And, each ecosystem has it’s own app store. Apple for iOS apps, the Mac store for Mac apps, the Android store for Android apps, Windows Phone store for Windows Phone apps and there is a flood of new app stores in the works. An Amazon store, a Windows 8 app store, a Chrome Store, and Ubuntu Linux Store, etc.

For application developers this situation creates two sets of problems,

1.) I can’t write my application once and get it to anyone that wants it. I have to rewrite that application for every target platform whose users I want to distribute my application to.

2.) Each platform vendor dictates what technology I have to use to develop my application. Some are very restrictive.

What if we could develop an application once, using standards-based Web development technologies that would run either in a browser or as a native application on any device, browser or platform that our users are running on, whether the device is connected to the Internet or not?

Well, that’s Mozilla’s goal with (web) applications.

I’ll post about how we’ll distribute there applications in the near future.

So, I want to start a working group for building applications targeting this universal “Web Run Time”.

The basis for these applications is HTML5.

Now, I know what you’re saying. HTML is for web pages. But, not ONLY web pages.

It makes sense. HTML5 becomes the user interface structure definition, CSS3 is used to represent the aesthetic directives and JavaScript is used to implement much of the imperative logic.

The more we move logic to the end user’s computer the more we can leverage the distributed computing power of the World Wide Web.

For both Web Developers and Application Developers there will be a learning curve.

Apart from the new HTML version 5 specific elements there are a number of “out of specification” technologies that are part of the HTML 5 “wave” and will be part of the “platform”. (App Cache, Local Storage, Web Workers, Web Sockets, etc.)

There will also be specific architectural distinctions that we’ll need to consider to provide the best possible experience for both online and offline application state. For example, some features will only be available when the application can connect to the Internet and, of course, we’ll need to build apps that can store updated data locally, when appropriate, and then sync or write directly to a user specific data store in the cloud.

For desktop and device developers, and for web developers alike, much of the technology, and the architecture, will require some new learning.

So…. I’m hoping you will join me.

Sure, there are some applications that won’t fit this standards based model, like drivers and such, but many - probably most - will.

So, think of an application and start designing it. Post here or email me about the application you are going to build.

I’ll be starting How-Do-I videos and blog posts on using the “Web Run Time” technologies for application building. Eventually I’ll cover deployment specifics, device specifics, patterns and practices and the like.

I have several applications in the works. The first will be an interval based workout timer.

You will be able to run it on my website and all the code and docs will be hosted on GitHib.

Are you ready ?

What will your app be ?


What’s New in HTML5 – Markup and More !

HTML5 is poised to change not only Web development, but application development in general and when I say HTMl5, I mean “the wave” and not only the additions to the HTML5 syntax spec.

I’ve been building an HTML5 presentation (have a great conference coming up ?) and planning a collection of How-To content so i thought it might be a good idea to enumerate the new wave of web development technology so that I can cover as much as possible. As I do feature specific content I’ll update this page to link from the entries here.

There are API features and extensions beyond the HTML5 syntax itself.

  • Selectors
  • Web Workers
  • Web Storage
  • Web SQL Storage
  • Offline Application Cache
  • WebSockets
  • Geolocation
  • Notifications

And then there are the additions to the spec itself.

Lets look …

TAGS

<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a dropdown list
<details> Defines details of an element
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation links
<output> Defines some types of output
<progress> Defines progress of a task of any kind
<rp> Used in ruby annotations to define what to show if a browser does not support the ruby element
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations
<section> Defines a section
<source> Defines media resources
<summary> Defines the header of a “detail” element
<time> Defines a date/time
<video> Defines a video
<wbr> Defines a possible line-break

ATTRIBUTES

contenteditable Specifies whether a user can edit the content of an element or not
contextmenu Specifies a context menu for an element
draggable Specifies whether a user is allowed to drag an element or not
dropzone Specifies what happens when dragged items/data is dropped in the element
hidden Specifies that an element should be hidden
spellcheck Specifies if the element must have its spelling and grammar checked

EVENTS

DOCUMENT
onafterprint Script to be run after the document is printed
onbeforeprint Script to be run before the document is printed
onbeforeonload Script to be run before the document loads
onerror Script to be run when an error occur
onhaschange Script to be run when the document has changed
onmessage Script to be run when the message is triggered
onoffline Script to be run when the document goes offline
ononlineNew Script to be run when the document comes online
onpagehide Script to be run when the window is hidden
onpageshow Script to be run when the window becomes visible
onpopstate Script to be run when the window’s history changes
onredo Script to be run when the document performs a redo
onresize Script to be run when the window is resized
onstorage Script to be run when the document loads
onundo Script to be run when the document performs an undo
onunload Script to be run when the user leaves the document
FORM
oncontextmenu Script to be run when a context menu is triggered
onformchange Script to be run when a form changes
onforminput Script to be run when a form gets user input
oninput Script to be run when an element gets user input
oninvalid Script to be run when an element is invalid
DRAG & DROP
ondrag Script to be run when an element is dragged
ondragend Script to be run at the end of a drag operation
ondragenter Script to be run when an element has been dragged to a valid drop target
ondragleave Script to be run when an element leaves a valid drop target
ondragover Script to be run when an element is being dragged over a valid drop target
ondragstart Script to be run at the start of a drag operation
ondrop Script to be run when dragged element is being dropped
SCROLL
onmousewheel Script to be run when the mouse wheel is being rotated
onscroll Script to be run when an element’s scrollbar is being scrolled
MEDIA
oncanplay Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough Script to be run when a file can be played all the way to the end without pausing for buffering
ondurationchange Script to be run when the length of the media changes
onemptied Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended Script to be run when the media has reach the end (a useful event for messages like “thanks for listening”)
onerror Script to be run when an error occurs when the file is being loaded
onloadeddata Script to be run when media data is loaded
onloadedmetadata Script to be run when meta data (like dimensions and duration) are loaded
onloadstart Script to be run just as the file begins to load before anything is actually loaded
onpause Script to be run when the media is paused either by the user or programmatically
onplay Script to be run when the media is ready to start playing
onplaying Script to be run when the media actually has started playing
onprogress Script to be run when the browser is in the process of getting the media data
onratechange Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onreadystatechange Script to be run each time the ready state changes (the ready state tracks the state of the media data)
onseeked Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalled Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspend Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange Script to be run each time the volume is changed which (includes setting the volume to “mute”)
onwaiting Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)

In addition to the HTML additions for version 5, there are some syntx items that are no longer supported in version 5.
TAGS REMOVED

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
  • <u>
  • <xmp>

EVENTS REMOVED

  • onreset

Did I miss anything ?

I hope you’ll join me in this new web standards development journey !

Please comment. Post additions, requests, thoughts, questions !


The HTML5 Article Tag – Fixing the World Wide Web

I’ve started working on a few presentations to take on the road to developer conferences and one of the topics is a presentation on HTML5.

Many folks look at new technologies from a somewhat academic perspective, like folks that are frequent public speakers at technical events. This is an important part of the technical evolutionary process. Folks that push the edges of new technologies for their own sake lay the groundwork for how will will apply those technologies in the future.

But I tend to like to focus more on the practical business applications of new technology.

We all know that the World Wide Web is broken.

Once upon a time there was the idea of the World Wide Web as one huge semantic network of information.

se·man·tic

adjective 1. of, pertaining to, or arising from the different meanings of words or other symbols

What we have instead is a glut of content.

From my perspective, one of the most significant enhancements coming in HTML is the collection of additions to semantic markup.

A huge problem with HTML prior to version 5 is that markup lacked any real informational context.

Tags like DIV, SPAN, and TABLE are used to organize the presentation of the content on our page and, of course their associated Id tags can be used to execute code against those elements. Also we have a collection of tags that we can use to describe the aesthetics of other tags, like style, class, width, etc.

But, none of that markup helps us identify actually what is contained inside those tags.

The HTML5 <article> tag, as well as other “semantic” tags in HTML5 go a long way to enable us to solve this problem.

Here is what the HTML5 spec says about the <article> tag.

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

W3C Specification

Take special note of the phrase “self contained composition”.

Lets look at how an article might have been presented in HTML 4.


<div>
   
   <h1>The 2011 Super Open Source Event</h1>
   <div>

      <h2>Keynotes</h2>

      <p>Important people talking about important stuff.</p>

   </div>
   <div>

      <h2>Sessions</h2>

      <p>Breakout sessions for learning technical details.</p>

   </div>
   <div>

      <h2>Roundtables</h2>

      <p>Open discussions about the new technology.</p>

   </div>
   <strong>Link to get all the videos after the event.</strong>

</div>

Though this content is well organized, there is no semantic context to the content.

So ? You may ask why that matters.

It might not matter if you only want to read content on sites that you already know about and visit, but that’s really far less than the way the web was meant to work.

In fact, even in today’s web, this use-case accounts for a VERY small percentage of the way people actually use the web. The popularity of search engines is clear evidence that people begin most of there interaction with the web by starting with a discovery process. The content above provides very little guidance to discovery mechanisms like search engine indexers which primarily have to rely on word indexing and complex inference algorithms to determine the nature of the content on a page and, even at that, the search engine can’t really help you consume the content it finds, it can only send you to that “page” for further determination as to the appropriateness of the page for your needs.

We have created complete additional technologies like RSS and ATOM to help solve this problem. The problem with those technologies is that they are additions to the actual content. We need to create the content AND we need to create the “feed” that defines that content.

While this works, it is a compete secondary effort and it only works for content when the feed data is explicitly created for that given content. The rest of the web is still just a bunch of words.

Let’s say, for example, that I was building a web site for Tennis fans. If I wanted to index and aggregate articles from various Tennis web sites and those web sites used markup like that above, it would be nearly impossible for an application to figure out what constituted a story on that site.

But, using HTML5′s semantic markup, the content itself contains logical context.

Let’s look at the content above in HTML5 markup.


<article>
   
   <h1>The 2011 Super Open Source Event</h1>
   <section>

      <h2>Keynotes</h2>

      <p>Important people talking about important stuff.</p>

   </section>
   <section>

      <h2>Sessions</h2>

      <p>Breakout sessions for learning technical details.</p>

   </section>
   <section>

      <h2>Roundtables</h2>

      <p>Open discussions about the new technology.</p>

   </section>
   <strong>Link to get all the videos after the event.</strong>

</article>

You can also see an additional addition to HTML5′s new semantic markup – the <section> tag which can be used to segment an article into logical sub units.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

I’m working on some code code samples. In the mean time, share your thoughts.


The Difference between HTML DIV and HTML SPAN

Using builder tools like FrontPage or ASP.NET WebForms has permitted web developers the “luxury” of avoiding learning the details of some parts of the standard web application stack (like HTML).

Like many types of syntax, HTML has it’s nuances and one that is often missed by folks learning HTML is the difference between the <DIV> tag and the <SPAN> tag.

Probably the reason that folks find this confusing is the haphazard use of these tags in the markup that they review.

In fact the differences are pretty simple and are clearly defined in the HTML specification.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

Pretty simple when you think about it.

<DIV> renders it’s contents as a block and <SPAN> renders it’s content “in-line”.

I’ve found remembering this useful as I concentrate on avoiding tables for any layout tasks.


Choosing an editor or IDE for development is a personal thing, like choosing a car. What is a perfect ride for one person offers no interest at all to another. Personally, I was never happy with only one car and usually want different ones in the garage so that I can choose the one that most closely matches my mood or the kind of driving that I need to do.

Some folks like the help and tooling of a fully integrated environment like Visual Studio. Others like the hardcore elitism of EMACS or Vi. I’m a pragmatist, I like tools that just help me get the job done.

For right now I’ll focus on tools for the client side of web development. Here’s what I’ve chosen. All of these tools are free. There is one commercial application that I’ll add at the end because I think it’s worth the money.

jEdit is a good general programmer’s editor with syntax highlighting support and, though it’s feature rich, it doesn’t get in your way while you’re writing code.

jEdit is written in Java and so it runs on Linux. Mac and Windows. I especially like the rich plug-in repository where i can get and add all kinds of specific features that I’m interested in.

You can install jEdit via the Ubuntu Software Center.

And you can get plug-ins here – http://plugins.jedit.org/

Though jEdit is a great general purpose programmer’s editor, I tend to like something with HTML specific features when doing HTML work.

Though there are many HTML editors available for Linux and most of them are free, most of them lack any specific support for HTML5.

Read the rest of this entry »

Best Tools for Professional JavaScript Development

I’ve been doing a lot og Client Side Development lately and am plannign on doing a lot more. HTML5, JavaScript, CSS – Oh My.

I’m building a work-out timer and there is a LOT of JavaScript so as I started looking for a Testing Framework I found myself building a list of options for the various types of JavaScript tools (I’ll address CSS and HTML tools later.)

The “code protection” section happened less because I want to hide code and more that I want to minimize my growning JavaScript dependencies.

I’ll post about my choices in the near future but wanted to share the list first.

A few notes about the list below.

I’ve added the ones that I feel merit consideration for MY work. Feel free to suggest additions, but I have intentionally omitted many choices for a variety of reasons. Currency, Adoption, support, etc.

Some are commercial products and others are free.

In the Editors (and IDE) section, I know there are hundreds. In my list are some Windows Only choices and some Linux / Mac choices as cross platform is very important to me.

Here is the raw list, I’ll comment on each category as I make selections.

Testing

Pavlov – https://github.com/mmonteleone/pavlov
JSSPEC – http://code.google.com/p/jsspec/
SvrewUnit – https://github.com/nkallen/screw-unit
Jasmine – http://pivotal.github.com/jasmine/

Mocking Frameworks

JSmock – http://jsmock.sourceforge.net/
JSmickito – http://jsmockito.org/
MockMe – http://johanneslink.net/projects/mockme.html
Qmock – https://github.com/andybeeching/qmock
JSHamcrest – http://jshamcrest.destaquenet.com/

Editors

JetBrains WebStorm – http://www.jetbrains.com/webstorm/
VWD Express – http://www.microsoft.com/express
CoffeeCup – http://www.coffeecup.com/html-editor/
NetBeans – http://netbeans.org/
Aptana – http://www.aptana.com/
Komodo Edit – http://www.activestate.com/komodo-edit
Edit Rocket – http://www.editrocket.com/features/javascript_editor.html
Komposer – http://www.kompozer.net/
Antechnius JavaScript Editor – http://www.c-point.com/
1st JavaScript Editor Pro – http://yaldex.com

Code Protection

JSCruncher Pro – http://domapi.com/jscruncherpro/
YUI Compressor – http://developer.yahoo.com/yui/compressor/
Javascript Obfuscator – http://java-applets.org/javascript-obfuscator-linux.html
JavaScript Obfuscator – http://javascript-source.com/buy.html
AntiSoft  HTML Protector http://www.antssoft.com/order.htm
Closure Compiler – http://code.google.com/closure/
JSMin – http://www.crockford.com/javascript/jsmin.html
Digua – http://digua.sourceforge.net/
ObfuscateJS – http://tools.2vi.nl/ + http://linux.softpedia.com/get/Utilities/ObfuscateJS-10350.shtml
Stunnix – http://www.stunnix.com/prod/jo/
Thicket – http://www.semdesigns.com/Products/Obfuscators/ECMAScriptObfuscator.html
Jasob – http://www.jasob.com/
JCE Pro – http://syntropy.se/en/2010/04/jce_pro_downloads/
Scripts Encrypter – http://www.dennisbabkin.com/screnc/
Shanes Obfuscator – http://www.shaneng.net/Main/JavaScriptObfuscator
Jammer – http://rzr.online.fr/docs/shop/jammer.htm
JS Strong – http://www.stronghtml.com/tools/js/
JavaScript Scrambler – http://www.quadhead.de/jss.html
HTML Protect – http://java-applets.org/javascript-obfuscator-linux.html
IonCube HTML Obfuscator – http://www.ioncube.com/html_encoder.php

Play Sound in HTML5 and cross browser support with backward compatability.

In the last post in this series [ read here ] I added the clock timing logic to the HTML workout timer.

The next feature to add is round and interval audio. I want to ring a bell at the beginning and the end of each round, a warning before a change in work state, etc.

This is quite a bit more difficult than it sounds because we need to support both the differences between HTML5 implementation specifics in each of the modern browsers as well as  support still popular older browsers that only support pre “5″ versions of HTML.

I wanted code that would play an Audio file in the current versions of Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Firefox, Chrome, and Safari on the Mac and on old HTML 4 browsers. As it turns out some current browsers will play .wav but not .mp3 files. Some with play .mp3 but not .wav and some will play both.

So, I built a small test application that would play in all !

The UI was simple enough:

Lets look at the code and I’ll call out the notable points of interest.


&lt;!DOCTYPE html&gt;
&lt;html&gt;  
&lt;head&gt;
&lt;title&gt;Play Audio&lt;/title&gt;
&lt;script src=&quot;script/jquery-1.6.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;script/modernizr-latest.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    var currentFile = &quot;&quot;;
    function playAudio() {

        var oAudio = document.getElementById('myaudio');
        // See if we already loaded this audio file.
        if ($(&quot;#audiofile&quot;).val() !== currentFile) {
            oAudio.src = $(&quot;#audiofile&quot;).val();
            currentFile = $(&quot;#audiofile&quot;).val();
        }
            var test = $(&quot;#myaudio&quot;);
            test.src = $(&quot;#audiofile&quot;).val();
        oAudio.play();   
    }
    
    $(function() {
        if (Modernizr.audio) {
            if (Modernizr.audio.wav) {
                $(&quot;#audiofile&quot;).val(&quot;sounds/sample.wav&quot;); 
            }
            if (Modernizr.audio.mp3) {
                $(&quot;#audiofile&quot;).val(&quot;sounds/sample.mp3&quot;);
            }
        }
        else {
          $(&quot;#HTML5Audio&quot;).hide();
          $(&quot;#OldSound&quot;).html('&lt;embed src=&quot;sounds/sample.wav&quot; 
                                      autostart=false width=1 height=1 
                                      id=&quot;LegacySound&quot; 
                                      enablejavascript=&quot;true&quot; &gt;');
        }

    });
&lt;/script&gt;
&lt;/head&gt;
  
&lt;body&gt;
  &lt;div style=&quot;text-align: center;&quot;&gt; 
    &lt;h1&gt;Click to Play Sound&lt;br /&gt;&lt;/h1&gt;
    &lt;div id=&quot;HTML5Audio&quot;&gt;
    &lt;input id=&quot;audiofile&quot; type=&quot;text&quot; value=&quot;&quot; style=&quot;display: none;&quot;/&gt;
    &lt;br /&gt;
  
    &lt;button id=&quot;play&quot; onclick=&quot;playAudio();&quot;&gt;
        Play
    &lt;/button&gt;
    &lt;/div&gt;
    &lt;audio id=&quot;myaudio&quot;&gt;
        &lt;script&gt;
        function LegacyPlaySound(soundobj) {
          var thissound=document.getElementById(soundobj);
          thissound.Play();
        }
        &lt;/script&gt;
        &lt;span id=&quot;OldSound&quot;&gt;&lt;/span&gt;        
        &lt;input type=&quot;button&quot; value=&quot;Play Sound&quot;  
               onClick=&quot;LegacyPlaySound('LegacySound')&quot;&gt;
    &lt;/audio&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

First, you will notice that I’ve included jQuery as I now do in all my web based UI and I’ve included Modernizr, which I’ll use to determine where the HTML5 audio tag is supported and if it is, what audio file format that I need to use for the browser that I happen to be running in.

I’ve created a “sounds” directory and sound files named “sample.wmv” and “sample.mp3″.

Note the declaration of an audio element on line 54. If the browser supports the HTML5 Audio element the code between lines 54 and 64 will be ignored. If the browser does not support HTML5 audio then that markup will be rendered (including the JavaScript). The actual LegacySound object that gets played on line 63 is only needed if the browser is not HTML5 and it will be created by some JavaScript when the page is loaded only if it is needed,

Lines 6 to 20 are a JavaScript function to play the HTML5 audio element. Note that I’ve used a technique to improve performance slightly if name of the audio file to be played has not changed since the last time the function was called.

Beginning on line 22 code will be executed when the document is ready (loaded).

Line 23 tests to see if the HTML Audio tag is supported.

Then we check to see which media file type is supported.

If the HTML5 Audio tag is not supported then line 32 hides the user interface elements that would be used with the HTML Audio and line 33 creates the embedded media object to be played by older browsers.

I’ve tested this code in all the browsers listed above as well as Netscape 7 for HTML 4 compatibility.

You can click [ HERE ] to download a working sample.

Building an HTML App – Workout Timer – Clock Logic

In [ this post ] I introduced an HTML application that I intended to build.

I’ve been picking away at the logic (though haven’t gotten to the HTMP “5″ stuff yet) and thought I’d share the milestone.

Note that the gray area in the screen shot below is not implemented yet.

Here are some of the features that ARE implemented.

  • Work and Rest mode count downs.
  • Start / Pause
  • Reset Time & Round Count
  • Title Bar Status Indicator
  • Local Time Indicator
  • Total elapsed time clock (not effected by paused time)
  • Accumulated Work Time
  • Accumulated Rest Time

A couple points of interest for newer JavaScript developers.

First, note the use of ENUM (ish) conscructs.

I can define an enum as follows:


var Mode = { "STOP": 0, "WORK": 1, "REST": 3, "HIGH": 4, "LOW": 5, "LOW": 6 };

And then use it this way:


var CurrentMode = Mode.REST;
....
 if (CurrentMode == Mode.REST) {
    ......
	}

Also, I can create a simple object like this. Note the object instance allocations after the definition :


function clock(h, m, s, ms) {
	this.hours = h;
	this.minutes = m;
	this.seconds = s;
	this.miliseconds = ms;
}

var workClock = new clock(0, 0, 0, 0);
var elapsedClock = new clock(0, 0, 0, 0);
var totalWorkClock = new clock(0, 0, 0, 0);
var totalRestClock = new clock(0, 0, 0, 0);

Then I can access Object Instance Properties like this:


workClock.minutes = RoundLengthMinutes;

The entire source listing is below.

You can run the page in it’s current form at http://www.misfitgeek.com/fighttimer/

Please report bugs and make feature suggestions using by submitting comments.

To view the source code click below.

Read the rest of this entry »

Beginning an HTML5 Application – The Requirements

More and more developers are starting to think about building applications that have both on-line and off-line features using HTML5.

I’ve been giving this some thought and have decided to build one myself.

I thought for a while about what sort of application would make for a good showcase.

It’s one of the though things about building examples – no one tells you what your next application is supposed to do.

In any event, what I decided on is in interval training application for boxers. A “round timer”.

Since this is intended to be a learning application and there are some great designer types and jQuery developers that read my blog, I thought it would be cool to design and develop this application by committee.

Here are some of the features that I’m hoping will help make it a good showcase.

  • Lots of running logic implemented in JavaScript CSS and jQuery
  • Play audio videos for interval sounds.
  • Use Local Storage to save user specific profiles.

Once the basics are done I could expand the application with things like:

  • Server based back ups and workout suggestions.
  • Embedding Video Demonstrations for workouts.
  • Web Sockets for Peer to Peer – team workouts.

I want the user interface to be highly configurable. Here is a quick layout.

I’ll include the markup for the UI prototype for anyone that wants it but remember.

It’s JUST a UI prototype. It needs to be refactored for CSS, etc,

PLEASE post your suggestions about what form the application should take – both from a feature set perspective as well as from a technical one.

Click [ Read More ] to see markup …..

Read the rest of this entry »

Update to the WebSockets prototype on HTML5 Labs site

Last week the Interoperability team at Microsoft released the fourth update to the WebSockets prototype on our HTML5 Labs site, bringing the implementation in line with the recently released WebSockets 07 Protocol Specification.

This latest release updates both the server and client prototype implementations based on 07 specification. The majority of the changes in this update are around client-to-server masking. 

The team is also hosting a WebSocket endpoint, which implements the proposed IETF interop tests, which are defined here

You can find the WebSocket endpoint here: ws://html5labs.cloudapp.net:4502/interoptests.

In addition, our client and server implementations continue to be interoperable with Firefox and Jetty, an open-source project providing an HTTP server, HTTP client, and javax.servlet container, developed by the Eclipse community.

You can read the full announcement on the Interoperability team blog -  here.

This prototype forms part of our HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

This is the fourth update to our WebSockets prototype since it was released on the HTML5 Labs site in December, the IndexedDB prototype has been updated to bring it in line with the latest version of the specification, and we recently added a new WebSockets demo.

The team anticipates further HTML5 Labs prototypes of WebSockets when the current Last Call review is completed and an updated draft comes out. 

We will also update the prototype when the W3C Web Applications Working Group updates the API specification to reflect the resolution of a currently open bug.  There appears to be an emerging consensus in the discussion and we expect an update of the editor’s draft soon.

Coming next is the Media Capture API prototype, a draft specification that defines HTML form enhancements to provide access to the audio, image and video capture capabilities of a device.

The first release of the prototype includes Audio capabilities only, but we plan to add video support shortly after the release of the first version.

So, stay tuned for the Media Capture prototype and other new ones that we are working on right now.

HTML5 Prototypes–FileAPI, IndexedDB, Media Capture

The  Interoperability team recently made available an update to the FileAPI prototype released on HTML5 Labs last month. The File API prototype is based on the evolving W3C specification that provides an API for representing file objects in web applications.

This update implements  the changed behavior in File.slice and also includes a minor update to the existing features by adding support for selecting and reading multiple files sequentially via the FileList Interface.

The prototype includes a simple demo that shows how FileAPIs can be used to select images on the local machines, preview them on the browsers, and it can easily extended to add the ability to upload the images on the server.

As you likely know, HTML5 Labs is the place where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience.

So far, there3 have been three updates to the WebSockets prototype since it was released on the HTML5 Labs site in December, the IndexedDB prototype has been updated to bring it in line with the latest version of the specification, and the team recently added a new WebSockets demo.

Coming next is the Media Capture API prototype, a draft specification that defines HTML form enhancements to provide access to the audio, image and video capture capabilities of a device.

The first release of the prototype includes Audio capabilities only, but the team plans to add video support shortly after the release of the first version.

So, stay tuned for the Media Capture  prototype and other HTML 5 work that is in process !

Using HTML5 Local Storage

One of the more interesting aspects of HTML is the local storage scenario.

You always hear folks say that the hardest thing about new technologies is not learning the technology itself but rather changing the way that we think about the problems and solutions that the new technology might be appropriate for.

Using Client Side Storage (HTML5 Local Storage) definitely falls into that category.

One of the things that is somewhat unique to user expectations of web applications is that they can simply walk up to “any” web browse running on any machine and use the application as they like.

In most (ok. nearly ALL) cases this should be the case.

If so, wouldn’t client side storage be a bad idea? I mean, if I store data on the machine that the user is interacting from and then the user later access my application from a different machine, all that saved data is gone.

True. But still there are good uses for Client Side storage.

Let me propose s few…..

•Long running or multi session state. (Without adding server resource consumption.)
•Frequently used or needed data for single long running sessions (only has to be fetched ONCE for the session.)
•As a local data cache (if it’s there, use it, if not, fetch and save it.)
•User specific data like a “You’ve visited this page x number of times”.

You probably wouldn’t want to save data ONLY on the client but still there are some interesting usage scenarios.

HTML provides two different client side storage options with two different persistence scopes.

•Session – stores data that lives only for the current browsing session.
•Local – stores data even after the browser has been closed and the “session” is terminated.

Note that there are additional solutions that use browser plug-ins, but these are the “standard” facilities.

For more detail about HTML5 Web Storage you can read the W3C Specification [ HERE ]. There is also information about Microsoft’s DOM storage implementation [ HERE ].

If we are going to use local storage then the first thing that we might want do is detect browser support since if client storage is not supported we will either need to omit the feature from rendering or execute some alternate strategy for that particular feature (like a server-side equivalent.)

Here’s a sample using the Modernizr library.


<link href='~/Styles/Site.css' rel='stylesheet' type='text/css' />
<script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
</script>
<script src='Scripts/modernizr-1.7.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
	$(function () {

		if (Modernizr.localstorage) {
			// browser supports local storage
			alert('YES - Local Storage');
		}
		else {
			// browser doesn't support local storage
			alert('NO - Local Storage');
		}

		if (Modernizr.sessionstorage) {
			// browser supports local storage
			alert('YES - Session Storage');
		}
		else {
			// browser doesn't support local storage
			alert('NO - Session Storage');
		}
	});
</script>

Since most current browsers support local storage, for the sake of simplicity I’ll omit the detection code from my sample and focus on the persistence and retrieval.

Lets suppose I have an application that consists os a multipage workflow and I wanted to add a “Scratch Pad” for users of my web application.

The first page in my application might look like this.

And another page might look like this.

Read the rest of this entry »

Use HTML5 Video Tags in your ASP.NET Applications

Internet Explorer 9 arrived this week with HTML 5 features galore.

Visual Studio 2010 SP1 recently shipped with HTML5 support as well.

So, lts get started adding HTML5 features to our ASP.NET Web Sites.

In this post – we’ll play video in the browser using HTML5 Video Tags.

Before you continue – I suggest you read this post on writing HTML5 markup that degrades gracefully.

The good news is that the HTML5 Video tag has backward compatibility support built in.

The bad news is that we need to do a little more than just write code.

Different browsers support different video formats and HTML5 lets you specify multiple source video files so the browser can use the one it supports.

Example:


<video width='640' height='360' controls>

   <!-- Safari / iOS video    -->
   <source src='SomeVideo.MP4' type='video/mp4' />

   <!-- Firefox / Opera / Chrome10 -->
   <source src='SomeVideo.OGG' type='video/ogg' />

   <!-- fallback - no support for the HTML Video Tag -->
   <img src='NO-VIDEO.JPG' width='640' height='360'
        alt='No HTML5 VIdeo Support'
        title='No video playback capabilities' />
</video>

By default, IIS won’t be configured for certain MIME types that we will want to use with HTML5 video, like .OGG

The built it Visual Studio Web Server doesn’t let you configure your own MIME types so you’ll need to use IIS.

You could use the Web.Config file to specify new mime types [ READ HERE ], but lets make it permanent.

Fire up the IIS Manager and locate the MIME Types Button

Open the MIME Types dialog and add an .ogg MIME type.

Now we’re ready to code.

Create a new ASP.NET WebForms Web Site using the default Web Site template and add this markup to the Default.aspx page.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
       <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <video src='windowsmedia.ogg' controls='controls'>
    </video>
</asp:Content>

Don’t forget to change the name of your .ogg file to one you have coppied to your project directory.

Read the rest of this entry »

WebSockets Release Interoperates with Firefox, Eclipse’s Jetty

Today the interop team at Microsoft updated, for the fourth time since December, the WebSockets prototype on our HTML5 Labs site, which brings the implementation in line with the recently released WebSockets 06 Protocol Specification. 

They extended our interoperability testing so that now, along with LibWebSockets, they have tested interoperability with Jetty, an open-source project providing an HTTP server, HTTP client, and javax.servlet container, developed by the Eclipse community, and they accepted the invitation of Patrick @Docksong.com to test our code with a Firefox Mindfield version he built with an implementation of the 06 Protocol Specification.

They tested the WebSockets interoperability between our HTML5 Labs prototype client and Jetty server, which recently added support for the 06 version of the spec and also tested the WebSockets interoperability with a test Firefox build that supports the 06 protocol specification.

We are hosting a chat demo page on Azure, which can be opened in Firefox and will use native browser WebSocket instead of the Silverlight-based one.

This update of the WebSocket prototype brings ping-pong support: automatic client to server ping every 50 seconds. It also now supports the binary and fragment frames feature defined in the WebSocket protocol specification, but they are not yet exposed to javascript because the W3C API working group is still working on defining a set of APIs that can work with binary data.

This prototype forms part of Microsoft’s HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

You can read more about all this on Claudio’s blog post or on Port 25.

Please visit the links above and join us in discussions that will help drive the specifications under development and Microsoft related implementations.

HTML5 versus Silverlight–Is Silverlight Dead?

In a world NO, NO, NO !

I got this email from a developer that I have corresponded with for several years.

I know this guy to be smart and experienced, so this is not a “newbie” question but rather an example of how difficult it is to understand the new technology that is constantly emerging in the software development industry and what they mean for our future work and choices.

From:

Sent: Friday, February 18, 2011 12:00 PM

To: Joe Stagner

Subject: Html 5 causing Silverlight Dev to End?

Joe,

I heard from someone that Html 5 is eliminating the need for Silverlight, such that Silverlight development might stop. Any truth to this???

Phil

In the interest of transparency, I don’t work in in the Silverlight team. I’m not even the Silverlight guy on my team, but I am a technical strategist and have been developing web applications since before Windows even had a TCP/IP stack !

What follows is MY opinion and may not exactly “jive” with Microsoft Official position.

> Note to Tim Heuer, Hey old buddy – I’m sure you’ll email me if I’m WAY off base Smile 

HTML5 is interesting – period.

I’m building developer guidance right now using HTML5, but HTML5 is NOT a Silver Bullet.

Certainly there are some scenarios for which HTML5 feature will displace the need for a RIA type plugin like Silverlight.

In most cases though, I don’t think this is true.

What HTML can “do” – Silverlight can do really well !

In my humble opinion,  I’m not sure that we (Microsoft) have done a great job demonstrating the high end of what can be done with Silverlight. The more advanced the application scenario, the more Silverlight excels.

Late last year there was a lot of noise on the web suggesting that Microsoft was disinvesting in Silverlight.

I know it’s hard to believe, but everything you read on the internet is not necessarily true Smile 

So, what are some of the scenarios that I personally would require Silverlight.

Audio / Video

Yes, I know, you can play video with HTML5, welcome to the 1990s Smile 

I need to do MUCH MORE than just “play” video.

Example: Completely separate from my job at Microsoft I create training and educational video for athletes. I want offer that video on a web site but don’t want that video to be swiped, edited, copied, etc all over the web.

HTML5 does not support DRM or other media related security initiatives so remove most of the media produced by the Movie, Television, and Training Industries from use with HTML5 (as well as mine.)

What’s more, I need to do A LOT MORE then just play video. I want to record usage data, allow user annotations, insert context specific ads, links, etc, and much more which means I WANT a custom player that can make my user’s video experience ROACK.

Performance

Historically, most browser applications are really single tier. All the executable logic runs on the server and the browser just displays the results.

We’re finally starting to catch up and architect web applications with “Federated Logic”.

It only makes sense. Lets run as much code as we safely can in the browser so as to off load the required processing power from our servers to the clients computer.

HTML5’s facility to enable this is present, but inferior.

True, JavaScript execution has been a point of focus in HTML5 compliant browser implementations and HTML5 has “Web Worker” Processes. (It’s acually a seperate spec – http://www.w3.org/TR/workers/)

Web Workers, in particular, are very interesting but require certain restrictions in terms of interacting with the User Interface. This is another example of how HTML with fit well in certain scenarios and not others.

There is also the issue of source code protection which is virtually impossible in JavaScript.

Communications

HTML WebSockets was my favorite feature. Unfortunately it looks like WebSockets won’t make it into the final HTML5 specification. In fact – it’s a whole different spec http://dev.w3.org/html5/websockets/. That means it’s implementation may vary from browser to browser if it gets implemented at all.

Silverlight has a complete network stack today and it works in all the most popular browser currently in use. 

Off Line

HTML5 has Off-Line application considerations.

An offline application cache and local storage will suffice for some applications but if you think about such usage scenarios a little further things start to get more complex.

For example, if our application implements a rich user interface using AJAX techniques, as users today expect, what happen to those interactions when the user is off line. Can you really just “turn them off”, or do you need to provide a set of disconnected logic?

We might be ale to do this, but if our application will be use significantly off line (as well as on) Silverlight offers significant advantages. (If you haven’t toured Silverlight recently Silverlight now has a strong Out-Of-Browser capability (meaning run as a desktop app, no browser involved) .

Touch / Multi Touch Interfaces

User interaction continues to evolve and Computers, Tables, and Dedicated devices often lend themselves to Touch or Multi-Touch User Interfaces. Lets plan ahead, shal we?

WebCam / Microphone

Tack specific applications, social networking, etc. ?????  Cool.

And More.

Work with Ink? call the Operating System’s API ? Silverlight.

And lest we forget. Silverlight is THE applications development model for Windows Phone 7 applications (though if you’re building games you may be using XNA)

Windows Phone 7 is enjoying rapid success and growth. Not only does that alone insure the continued evolution of Silverlight, but the ability to share code between your Phone, Browser and Desktop Applications.

So no Phil….

HTML5 will enjoy enthusiastic adoption but will not eliminate Silverlight. In fact, as HTML5 helps us push the edges of web applications design and architecture, the opposite might be true. We may find ourselves envisioning more and more functionality for which Silverlight is the ideal enabler.

del.icio.us Tags: ,

Microsoft WebSockets Prototype

Last week Microsoft released an update to the WebSockets prototype, which was first released late last year (December 2010).

This update brings the implementation in line with the WebSockets 04 Protocol Specification.

It’s important to note that the spec is still evolving, with the 03 version released in December, the 04 version last month and the 05 spec which just shipped yesterday. The plan is to continue to rev the code going forward and to bring the implementation in line with the just released WebSockets 05 Protocol Specification.

If you’re not familiar with WebSockets, it is a technology designed to simplify much of the complexity around bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket.

WebSockets  can be implemented in web browsers, web servers as well as used by any client or server application. The WebSocket API is currently being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

This prototype comes from Microsoft’s HTML5 Labs Web site, a place where we prototype early and not yet fully stable drafts of specifications developed by the W3C and other standard organizations. We believe that the HTML5 Labs approach has advantages over placing unstable specifications directly in browser.

First, developers can build on Internet Explorer 9 without worrying that their site will break as the underlying specs change. Second, we will iterate very quickly in HTML5 Labs and expect the standalone approach with prototypes to be closer to the latest specs.

As an example with WebSockets, most browsers are still on the outdated versions of WebSockets-00 or older.

Updating the prototype is a great way to continue to test the spec as well as let users play with new features to make sure they work the way they are supposed to and to provide feedback.

As part of the update, we posted new demos, including a casual game that shows users how WebSockets can enable new scenarios.

Building these prototypes in a timely manner will help us have informed discussions with developer communities, and give implementation experience with the draft specifications that will generate feedback to improve the eventual standards.

You can read more about this on Caludio Caldato’s blog and at the HTML5 Labs site.

Internet Explorer 9–RC Impressions

Did you try the IE9 “beta”.

We’ve come to expect too much from “beta” software.

I couldn’t use the IE9 beta in front of my children.

It made me say a lot of bad words Smile 

Since I’m doing a lot of HTML5 work when the IE9 release candidate dropped I figured I’d give it another spin.

Viola ! IT ROCKS ! It’s Fast, the Crashing is GONE, and I’m digging it.

I’ll be doing some IE9 specific guidance.

It the mean time – hear are some resources to get you started with IE9 too !

Internet Explorer 9 Guide for Developers

Internet Explorer WEB Developer’s Guide

Internet Explorer 9 Keynote Address (Streaming)

Internet Explorer 9 “Test Drive” Demos

Internet Explorer 9 – Features 

Internet Explorer 9 – Get it HERE

del.icio.us Tags: ,

HTML 5 Markup that Gracefully Degrades

As I continue preparing developer guidance for ASP.NET Developers who want to use HTML features in their ASP.NET applications, I’m reminded that public facing web sites need to support legacy bowsers while offering the up-to-date visitors with the better experience that the latest technologies can provide.

Though we might keep a server-side index of supported features on a per browser basis, it makes more sense to dynamically detect feature support on an as-needed basis.

Why ?

  • Feature detection by JavaScript in the browser is the most accurate, up-to-date means to determine the availability of a feature.
  • You only have to write the detection code once for each feature.
  • You don’t need to create and continually update the server side feature matrix on a “per browser” basis.

I’ll be sharing code snippets and blogging about using HTML5 specific features but in this post I’ll be sharing a sample of using HTML feature detection.

The code below is intended as a generic example bit I will use the HTML5 Video Tag to demonstrate the techniques.

EXAMPLE: Some browsers simple do not support the HTML5 Video Tag at all. Others support the Video Tag but only render specific video file types.

Rather than only support users who are using our favorite browser, wehave several options to provide the broadest possible browser support.

Our fist option is to write some JavaScript code to find out if the specific features (HTML5 Video in this case) is available.

Read the rest of this entry »

10 things you should think about with HTML 5

1.) HTML is EVOLUTION not REVOLUTION.

HTML is already well defined and ubiquitously used. HTML 5 offers n interesting collection of INCREMENTAL enhancements to existing HTML syntax.

HTML5 offers “native” ways to do do things that we already do with JavaScript / Silverlight / Flash or Server Side Code.

There will be advantages but, as is often the case, the “big wins” will be the new scenarios that developer invasion.

HTML is a collection of new tags, elements, attributes, features, etc. NOT an full replacement for existing HTML.

2.) HTML5 is not really”A” standard. (It’s several.)

One of the must frustrating things about being a Web Developer has always been the incompatibilities between browsers. In recent years the compatibility between current browser versions has improved (though we’ve still been stuck with the lingering use of Internet Explorer 6).

HTML5 will probably bring back the browser wars. Though nothing is set in stone yet, it seems certain that different t browsers will provide support for different collections of HTML5 “features”. [ See more HERE. ]

Given this inevitability, building a public facing site will always mean supporting users who make different browser choices, and that means using HTML5 features will REQUIRE our code to proactively do feature detection.

Historically speaking, server side detection of browser features is a less than perfect mechanism. Our HTML 5 pages will need JavaScript code will need to confirm support for a given feature at runtime before we use it and provide some strategy for when that feature is not supported in the user’s browser.

This means that sometimes it will be easier to depend on3rd party technologies like jQuery or Silverlight since we can detect it’s presence ONCE and then code against all the features provided.

3.) People just don’t update their browsers.

IE6 was released in 2001 and as of this writing still hangs on to 5% market share.

Our web applications are still going to have to be coded to degrade gracefully. While this is not rocket science, it inevitably means more work for the web developer. In fact, this is true of all new browser supported features. Unless we want to simply ignore users that are not using the latest and greatest technologies that we choose to target, each features of “ne” browsers that we with to support will require incrementally additional coding to degrade gracefully. This is another example of where a 3rd party product (like jQuery or Silverlight) may be easier.

Of course, there are JavaScript libraries starting to surface to simplify this process. [ Like Modernizr. ]

4.) It’s still all “Jelloware”.

HTML has had a wacky standards process since its very beginning and HTML5’s definition seems to be no different.

The HTML standards definition process has been a strange combination of speculative discussion and post implementation forensic. In many cases browser manufacturers implement features that they desire or think is important and the ones that are most successful are the ones that make it in to the specification.

Which HTML things make it into the specification and then with of those things are actually implemented by any specific browser maker (let alone all of theme) is still up in the air.

It seems that some very interesting functionality (like WebSockets) may be included in the spec but not implemented by all browsers – or just the opposite. It may be implemented by some “HTML5” browsers but not even make the specification.

5.) Everybody wants a piece.

Google is all over the HTM5 process, Microsoft , Adobe and Yahoo have significant interest. As is always the case, these corporate influences can change or delay the finalization of what is already a tediously slow standardization process.

Read the rest of this entry »

Dynamic Page Menus in WebMatrix Templates with CSS and jQuery.

A basic practice in software development of all types is to use mechanisms that allow us to write and maintain code in a single place no matter how many difference places that code is used throughout our entire application.

When we’re building web sites, and more specifically web pages, the reuse of UI code can be especially challenging as the nature of web applications are stateless and in most models there is a 1-to-1 relationship between endpoints and “files”.

In ASP.NET WebForms we have master pages.

In Microsoft WebMatrix we have Layout Templates.

One of the advantages of the general move towards “standards based” web development is that HTML, CSS, and JavaScript can generally be used across different web development platforms and the technique described below can be used no matter which ASP.NET Development model you choose. (WebForms, ASP.NET MVC, WebMatrix)

I’ll use WebMatrix for the example.

Given a WebMatrix site created using the default “Starter” template the following Home Page and About Page can be displayed when the project is run.

Note that only the text inside the white area of the pages is different in the Default.cshtml and About.cshtml pages.

Read the rest of this entry »

Microsoft Folks Submit Grid model for HTML/CSS to the W3C.

Still using table for layout ?

It’s not the preferred way.

Modern Web Site development defines layout with CSS wherever possible.

As we look forward to HTML5 and CSS 3 some of the folks in Dev Div are tooling for the new wave and immersed in the resulting ecosystem.

Alex Mogilevsky, Phil Cupp, and Markus Mielke from  Microsoft, via the CSS Working Group have submitted a draft for CSS3 Grid Alignment.

The official description says …..

CSS Grid Alignment Level 3 contains features that enable authors to align UI elements horizontally and vertically. By using the features in this module authors can position layout elements such as controls and application content into columns and rows, defining a grid structure with fixed, fractional, or automatic units. The elements can then be positioned and sized into the logical cells of the grid. Further, this module enables stacking and spanning of elements to build cohesive experiences out of a collection of modular UI pieces.

CSS Grid Alignment Level 3 also helps to manage changes in available space for layout. For example, the features in this module can help manage changes by allowing placement of elements in the grid independent of source order. Such management may be required when a browser window is resized or when a screen’s aspect ratio changes, due to screen rotation.

You can read the complete draft document here : http://www.interoperabilitybridges.com/css3-grid-align/

After the holidays I’ll be playing with some samples and will publish them here on MSJoe.com

Why would you write your own WYSIWYG editor?

I recently had an email exchange with someone asking me about how to approach writing their own WYSIWYG editor control for web applications.

Perhaps an interesting academic exorcize, or maybe he has some very specific application  but it got me thinking about how many implementations there are out there already !

While searching I found this great list which is lifted entirely from Mike Pope [ Click HERE to Read at Mike's Blog ] – THANKS MIKE !

Rich Editor Controls that you can use with ASP.NET

HTML Editors
As near as I can tell, all of these work in-browser and produce HTML or XHTML.

Word Processing, RTF, PDF, and more
These variously support other formats, notably non-HTML (e.g. RTF) and sometimes PDF.

Other/Not Sure
I’m not sure how exactly these fit into the picture; they’re listed at least in one location as being ASP.NET editors.

  • Community Editor (BigByte). Desktop editing, it says; possibly not in-page HTML editing? Appears to be free.
  • DevEdit NX (Interspire). Not 100% clear that it supports ASP.NET.

More Information

  • A similar list is available at 123aspx.com.
  • Daniel Walzenbach published a list as well in December 2007. With pictures! :-)
  • Scott Mitchell has an article on using FreeTextBox.
  • Building a WYSIWYG HTML Editor” A two-part article by Mitchell Harper. I’m pretty certain that this is for Internet Explorer only, tho.

Fluid-Width <div> Layers with Rounded Corners

 Check out THIS POST where Josh shows us how to make DIVs with rounded corners.

Understanding Dynamic ASP.NET Controls

I was working on a demo of using MS AJAX and Dynamically adding ASP,NETControls to a page when I can across this great 4 part blog posting on the subject and wated to share it.

http://weblogs.asp.net/infinitiesloop/archive/2006/08/25/TRULY-Understanding-Dynamic-Controls-_2800_Part-1_2900_.aspx

Themes & Master Pages – Are they enough ?

I’m not a graphics designer, not even close.

In fact, I’m what you might refer to as esthetically challenged.

So lately I’ve been toying with the idea of building an ASP.NET based CMS, mostly due to my frustration about the lack of .NET based options when compared to PHP.

So I’ve been working on application architecture and ASP.NET offers lots of great synergies, but one place I’m stuck is in the area of UI abstraction for the purpose of themeing.

I understand how themes and Master Pages work technically, but my lack of design acumen leaves me struggling when evaluating them for complex UI design.

So, to get me started I picked up a copy of Jacob Sanford’s new book….

ASP.NET 2.0 Design – CSS, Themes and master Pages

 

I’ll blog a review and probably do some videos from what I learn, but in the mean time…..

What are YOUR thoughts about Themes and Master pages ?

What are the issues, tips, tricks, gotchas ?

Are Themes & master Pages flexible enough to serve as a templating engine for an application like Joomla or am I better off building an HTML/CSS skinning system from scratch ?

Thanks!