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:

</pre>
<audio width="300" height="32" controls="controls" src="intro.mp3">
 <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
 </audio>
<pre>

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:

  <audio width="300" height="32" controls="controls">
     <source src="MySound.ogg" type="audio/ogg" />
     <source src="MySound.mp3" type="audio/mp3" />
     <a href="MySound.mp3">The recording - MP3 - 2.3MB</a>
   </audio>

If you really need to provide a player for all browsers – including the ones that don’t understand HTML5 – I collected some information in this 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.

</pre>
<audio id="MySound" width="300" height="32" src="MySound.ogg" preload="auto">
 </audio>
<pre>

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.

   <audio id="MySound" width="300" height="32" src="MySound.ogg"
          preload="auto" controls="controls">
 </audio>

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:

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.

Since joining Mozilla I’ve been amazed at how much work gets done by such a small group of people.

One of the ways this happens is that the Open Source community helps and not just by writing code. Testing new features and filing bugs is vastly important too.

Plus, you get to use the latest and greatest features.

As a truely Open Source project, the daily build (actually the NIGHTLY builds) of Firefox are available each day.

You can download the Nightly Firefox Builds HERE

The Mac and Windows builds give you installers but, as Linux wizzards know, Linux works a bit differently.

The easier way to do it is to open a Terminal window and use the following three separate commands.

sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
sudo apt-get update
sudo apt-get install firefox-trunk

Then you can use the automatically installed launcher to run Firefox Nightly.

Tada !

I’ve been developing cross platform apps using HTML5 for deployment across Desktops, Tablets, and Phones. Lots of interesting apps can be built without talking to the hardware but sooner or later, we always want to go deeper. Mozilla is working Won an exciting “Web Runtime” ( read more here ) and there is a version of Firefox for Android.

Though I don’t want to build native Android Apps, I do want to get under the covers and experiment with building the Open Web Apps runtime components (it’s so cool working for an organization where EVERYTHING we build is open source and available for download WHILE it’s being developed.)

Since I hit a couple of snags getting things set up I though I’d share the steps that I used in the hopes that it would help someone else who is just getting started.

Though there are good commercial Java / Android Development tools available, the standard is to use Eclipse and the ADT, so that’s what I’ll be setting up in the steps below.

Eclipse is itself a Java App. On my Ubuntu machine the default Java Runtime was OpenJDK which is not recommended for running Eclipse.

So the first thing that we want to do is make sure that we have our Ubuntu system up to date, the latest version of the Java run-time and JDK installed and our Ubuntu box configured to use the Sun versions by default.

Start by opening up a terminal window.

If you are brand new to Ubuntu you can find any application (including apps you haven’t yet installed) by using the Unity Launcher Bar

1. Click on the Ubuntu App Button on the top.
2. Start typing the name of the application you are looking for.
3. If it appears in Installed Apps – click to run it. If it appears in available apps, install it.

Terminal will be installed. Click on it to run.

sudo apt-get update

Enter your password when the sudo command in the terminal prompts you for it.

Leave the terminal window open when the command completes.

Next run upgrade.

sudo apt-get upgrade

Now we need to get the Java JDK

You can install it from your open terminal:

sudo apt-get install sun-java6-jdk

The command above installs only the JDK. I wanted to make user everything Java was installed on my machine and up to date to avoid problems with unresolved dependencies later on so I ran this command:

sudo apt-get install sun-java6-bin sun-java6-jre

sudo sun-java6-jdk sun-java6-plugin sun-java6-source

You can run them all at once but I broke them up for formatting here on my blog.

Now we want to check and confirm that Java and the JDK / Java Compiler installed and being used are the latest. This is necessary because you can have as many different versions installed on your machine but only one will be the default.

java -version

javac -version

And you should see something like this.

Check Java Versions on Ubuntu

If some other version appears (like the Open JDK) then you can change the default by running this command and choosing the version that you just installed.

sudo update-alternatives --config java

Once done, we need to instal lthe Adroid SDK.

Get it here : http://developer.android.com/sdk/

Downloading the Android SDK

You can decompress the files and place them in a location that makes sense for your Linux usage.

I put mine in /usr/apps/android-sdk

We also want to add the Android SDK to our shell path.

To do this, open a Nautilus instance (File Explorer) and navigae to your Home directory.

“/home/joesstagner” in my case.

Then use the menu to select View->Show Hidden Files

Ubuntu Show Hiden FIles

Find the .bashrc file and open it with the text editor of your choice.

Append the following line, changing the entry to reflect the location that you chose for the Android SDK

export PATH=${PATH}:/home/apps/android-sdk/tools

Save and close the file.

Now we can install Eclipse.

There are two ways that you can do this – but the important part is that you install “Eclipse for Java Developers“.

If you install the bare bones version of Eclipse you may find yourself in dependency hell when you try to set Eclipse up for Android.

You can download Eclipse for Java from www.eclipse.org

Download Eclipse for Java

In my case I will use Ubuntu’s synaptic package manager to install Eclipse.

You can find and run the Synaptic Package Manager using the technique referenced above.

Install Eclipse with the Synaptic Package Manager on Ubuntu

Note that I installed both Eclipse and Java development components.

Now we are ready to download and install the Eclipse plugin for Android Development.

1. Start Eclipse, then select Help -> Software Updates….
2. In the dialog that appears, select the Available Software tab.
3. Click Add Site…
4. Enter the Location: http://dl-ssl.google.com/android/eclipse/

Note: It’s probably better to use https for the download but I had problems in doing so.

Add the Android Developer Tools to Eclipse

Then select the tools :

Add ADT - Select Tools

Click next until you get to the EULA and agree to it (click yes)

Eclipse will download and install the ADT.

Installing the Android Developers Kit - ADT

You may see a warning that the code to be downloaded is unsigned.

ADT Unsigned Security Warning

I chose to install anyway.

When everything is installed, Eclipse will prompt you to re-start Eclipse.

Restart Eclipse

When you restart, Eclipse may ask you about updating the Android SDK

Eclipse Add Reference to Android SDK

Eclipse will ask you a couple of permission questions – say yes.

When it’s all done we can select New -> Project

New Android Project in Eclipse

Now we’re ready to start building an Android App !

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.

When an Open Web app runs, the Mozilla Web Runtime installs local copies of the HTML5 markup and all of the other web assets that are resolvable via the DOM, just like you might do by using an HTML5 Cache Manifest (https://developer.mozilla.org/en/Offline_resources_in_Firefox ). In fact, you may choose to use both the default Mozilla App mechanism and the HTML Application Cache: use the Mozilla Web Runtime for all environments that currently support it (at the time of this writing: Windows, Mac, Linux with the latest Firefox Nightly build or Android with the SOUP runtime installed), and the HTML Application Cache for other environments.

If a Web page is dynamically generated, as in an ASP.NET, PHP, etc., application, any cached version represents a snapshot of a single point in time. [<--Not sure why this sentence is here. It seems to signal a change of topic, but then the topic doesn't change.] When submitted as an app, the page actually “becomes” an app, getting a launcher item similar to native apps on whatever the host operating system is. When the app is launched, the local assets are used if there is no Internet connection or if the caching mechanism determines that the assets have not changed since they were last downloaded.

By doing the above we have not added any additional functionality to our application. All we have done by declaring our page to be an app is to get the run-time to copy the bits locally and to run those local bits if the device is off line or if the bits haven’t changed.

Does this get us anything ?

Is there value in just this simple step ?

Yes, it gets us three valuable improvements:

• Users can see our page even if they are not connected because the run-time renders the cached version if there is no Internet connection.
• Processor cycles and bandwidth consumption from our infrastructure or hosting are greatly reduced because new bits are only fetched when they are needed.

Many organizations are starting with this approach because very little technical effort is necessary and it can be done very quickly. In most cases all you need to do is to create an app manifest file (see:https://developer.mozilla.org/en/Apps/Getting_Started) and to submit the app to the marketplace. (Developers can submit apps now at https://marketplace.mozilla.org/en-US/login?to=/en-US/developers/ so that they will be available to consumers when the “buy side” of the marketplace opens later this year.)

But if that’s all you do with your app, you are missing the opportunity.

Take a look at http://caniuse.com/ for a snapshot view of technologies that are available to developers using the modern web runtime.

Whether we are building a real Open Web App from scratch or we are converting an HTML page to an app and then adding modern features, HTML5 era technologies let us really start to developer client / server applications that utilize the browser and its host resources, thereby reducing our server requirements while improving the end user’s experience.

Developers can do things like :

• Read and write data locally and sync with a server when appropriate.
• Run multiple threads of execution at the same time.
• Exchange content with other applications, or share logic with them.
• Interact with the device on which their app is running.
  • Touch user interface
  • GPS
  • Camera
  • Richly integrate multimedia.
  • And much more…..

Since apps’ source code is deployed to a single URL and is updated on the device on which the app runs only when updates are necessary, versioning is low cost and friction free. This makes it easy to start by making a page and then iteratively adding features one after another.

Lets do it !

Since this model makes it so easy to get started, why not give at a try?

Follow the guidance here : https://developer.mozilla.org/en/Apps/Getting_Started

And submit your app here : https://marketplace.mozilla.org/

My manager, Stormy, warned me that getting up to speed at Mozilla would be more difficult than I expected, and of course, I didn’t really believe her. My manager at Microsoft told me the same thing on my first day of work there, and it wasn’t really true. Microsoft was just big, not hard to adjust to.

Mozilla is DIFFERENT.

When I interviewed with Mozilla, my impressions were the same as most people who are not participating Mozillians.

Mozilla makes FireFox and Thunderbird and is Open Source, does standards stuff, etc. It all sounded cool and I “thought” I “got it”, but I didn’t. In truth, I still don’t completely, but learning is fun.

During the interview process I was impressed with everyone’s passion about “The Mission”, though, even having read “The Mission Statement”, I still had no idea what it all meant. The passion, though, was clear to see.

My first day of work at Mozilla was day one of the organization’s yearly “all hands” gathering. That event lasted a week and I met literally hundreds of my new co-workers. I also came to begin to understand that “The Mission” had almost nothing to do with “products” and everything to do with helping to change the world by propelling the Open Internet.

People at Mozilla tend to be idealistic in that they believe they actually can change the world. After just spending a decade at Microsoft this seemed unrealistic to me. The funny thing is that in the short five months that I have been here at Mozilla, I’ve actually seen a number of examples where Mozilla IS changing the world !

I flew home after the ALl Hands Week and I expected that, on Monday, I would start my efforts helping people learn and use open web technologies.

Instead, by the end of that Monday, I had been hijacked to work with the Business Development Team for the new Mozilla Marketplace. It made sense, I was new – so I had time, and I do have a “technology in business” background as well as much experience consulting with organizations large and small about solving there specific problems, using specific technologies.

So, over the past five months I’ve talked with hundreds of great organizations, large and small. Organizations that are doing amazing and NEW things with the Web. I’ve attended events in the USA, England and Spain and, unexpectedly learned more than I ever expected about Mobile computing. (I was never really interested in Mobile prior to coming to Mozilla)

Now after five months – I’m getting back to “Technical Evangelism”. The Apps Business Development team has had a bit of time to catch it’s breath and start to distribute the “partner engineering” function and my hope is that this will let me detach from all the “consulting” and tech support that I’ve been going and get back to building and offering GUIDANCE.

I’ve become very passionate about both HTML5 and multi device development and I think there is great opportunity to help people that are new to HTML/JavaScript/CSS, as well as people that are experienced but adapting their skill sets to HTML5 “Apps” development.

So my plan is to continue to focus on HTML5 from an Applications perspective. You will be surprised at how much you think you can NOT do with HTML5 that you actually can do. I know I’m surprised every day.

So, how about some help ?

What questions / problems do you need solved or answered that fit in the following question/statement.

I’m building an Application using HTML 5 and I don’t think it’s possible to (fill in here).

Example: Example: Protect my source code.

I’m building an Application using HTML 5 – how do I (fill in here)?

Example: Include my Twitter Feed without a Server Proxy

I’ll post articles here on MisfitGeek.com, but I’ll also post them on Mozilla Hacks (http://hacks.mozilla.org/) you should read them on Hacks because you get articles from ALL the folks in MDN !

Which, of course, means that I’ve been remis with my blogging.

I’ve been traveling, sick, growing ever sicker of tooth problems, etc. – but I’ve also been immersed HTML5 App building and helping organizations all around the world get started in building Apps for the Mozilla App store. (https://developer.mozilla.org/en/Apps/Getting_Started)

I still get an email or two a day from people who are just realizing that I’ve left Microsoft.

I’m planning to getting back to writing articles and doing videos in the next few weeks. Though I won’t be doing ASP.NET.)

So, feel free to post your thoughts on what content I should work on.

I’m planning an HTML5 podcast as well.

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 !

My site was (until this afternoon) hosted at Site5. (http://www.site5.com/) Now, I’m going to tell you what happened and how Site5′s process makes them an undesirable choice for my needs. Before I do that – a disclaimer. Site5 is a pretty good service with good folks working there. They did restore my site and engaged me in public discussion on Twitter about the event and their desire to help me. I don’t “blame them” per se. They have emailed asking to discuss what happened and how they could improve their services.

Running a high quality, low cost hosting service is very difficult, especially the “service” part. The hosting business is based on low margin and high volume. Each support person on parole causes a distinct increase in the shared hosting site density required to turn a profit. I do sympathize.

So here is what happened.

After receiving notices from my Tweeples that my site was down I logged in to my Site5 hosting account and they had opened a support ticket telling me they had turned off web access to my site due to “excessive CPU utilization”.

My Site5 account is “Unlimited” storage and bandwidth, but it’s a shared account, so if my disk space / band width use causes too much CPU use – it’s a problem.

There is no phone number for direct support so I went to the Site5 site to use “on-line” chat. Unfortunately, Site5′s on-line chat was “not available”.

So I added a reply to the support ticket and waited.

Site5 later replied that my site was turned off due to too many requests for the index.php page of my WordPress blog from a single IP address in Hungary. They explained that they only turn off a site as a last resort and they had to do it because it was a shared account and the CPU use was effecting the performance of other sites on the machine.

Fair enough.

Now, my web site isn’t important, like, say FEMA or CNN, but it’s part of how I feed my family so a default support policy of unplugging my site because ONE IP ADDRESS is spamming my site with requests seems like a really poor support policy.

It’s also not the first time I’ve experienced a DoS attack against one of my blogs and I’ve never had a host simply turn off my site as a result. While Site5 support said it was a “last resort” no one could tell me what steps had been made BEFORE turning off my site to attempt to solve the problem.

Not only was my site unplugged, but it was done in an “ugly” way. Visitors did not get a temporary landing page telling them there was a temporary problem, visitors didn’t even see an error. It just looked like the site had been deleted.

Site5 first suggested that the inex.php page was the problem and it was probably because I had added a new plug-in to my WordPress instance. They instructed me to try installing a cache plugin for WordPress. (I hadn’t added a plugin to WordPress since it’s original installation.)

Then they explained that they had identified the inbound request flood from a single IP address – which again made me wonder what other actions had been attempted before executing the “last resort” of unplugging my site.

I later got a detailed explanation of how difficult it is to identify attacks in real time. I’m sure the person who emailed me was not aware that 5 of my 10 years at Microsoft were spent focusing largely on cyber-security and I thought offering to help him implement a strategy to identify such attacks would not be well received. In fact, when I ran Microsoft’s ASP.NET site we identified DoS attempts on an almost daily basis and other “entry level” hosting providers have been able to do so with my accounts as well.

I was also told that even if they had identified the source of the issue they would block an IP address because that could be “bad”.

Still, it wasn’t this one time issue – in and of itself – that caused me to change service providers.

I was worried about the NEXT TIME.

Site5 turned my site off as a “last resort” but wasn’t able to explain what other steps were attempted.

Visitors to my site received NOTHING – no, “Temporarily Off Line” message, nothing !

Doesn’t that mean that anyone who was so inclined could cause anyone else’s site, if it was hosted at Site5, to be turned of by simple flooding it with requests. Even when the requests stop, my site is still down. Why not block the IP spammer ?

Anyway, I kept trying to gat someone on support chat, sometime later I did. I was told that Tier 1 did not have authority to actually make changes to my account (like turn web access back on) and that someone else was “looking into” what was going on, but customers weren’t allowed to talk to “those” support people.

I also found it bothersome that the problem was being looked into only AFTER turning my account off.

After some dialog I understood that the on-line support people serve as middle-men who can not touch an account and that “higher level” support staff and managers do not talk to customers on the phone or chat with them directly. My only recourse was to wait until someone replied to my question on the support ticket.

After complaining via the support ticket system and an ongoing conversation on twitter, the service manager emailed me to say that he was sorry and he explained that, while they could tell the problem was coming from a Hungarian IP Address after the fact, apparently their real time monitoring is not sophisticated enough to identify such an attack in real time. He also told me that they wouldn’t block an IP address under such circumstances as that might have negative results, though I can’t see how they feel turning of my entire site was a less negative result that blocking a single IP address that had been identified as flooding my site.

As I’m 100% focused on the HTML5 Apps space this is especially problematic for me. Turning a site off completely could have cascading negative effects if I’m using that site to host an App being distributed through store and would make it easy for competitors and objectors to kill my App’s success simply by spamming my home page. (Which, by the way is so trivial easy to do, and script kiddie can do it and it’s pretty easy to do it anonymously as well.)

So, while the folks at Site5 were very nice, the fact that turning off a site in this manner, in response to a fairly common issue – coupled with the fact that there is no way to interact in real time with someone who has the authority to make a change on my account – simply makes this level of service less than my minimum requirement.

This is especially true as I start developing guidance for Apps developers and making hosting recommendations.

I don’t mean to sound overly harsh about Site5. Most people wouldn’t ever experience this problem. My Mom’s blog doesn’t get that much traffic and she’s not likely to attract the attention of someone who would try to mess with were web site. I wouldn’t hesitate to recommend Site5 with those criteria.

But, service needs vary.

So – I’m researching a number of options for hosting HTML5 “Apps” but in the mean time I needed to move my site to a host where the events I experienced today would not be repeated.

Over he past decade I’ve used hosting services from more than a dozen companies, most of the economically priced ones have been poor performers in the customer service and up-time departments.

Though I already have a reseller account at another hosting provider (which I’ve had for 6 or 7 years) I originally set up an account at Site5 because they advertised unlimited bandwidth and I was leaving Microsoft so I needed a place to host podcast audio files.

I made a list of features I wanted in a hosting company and discovered that one of my existing hosts already met my criteria and I’ve had 7 years of great service experience with them.

So, what is my hosting criteria ?

• A wide variety of Individual Shared, Reseller, Virtual Private and MANAGED Virtual Private, and Dedicated account options with multiple levels for each and reasonable pricing at each level
• The ability to move domains between account types and assistance available to do so.
• The ability to have my own custom NDS names.
• Support for developing apps with PHP, Python / Django, Perl, Ruby Rails, and NODE.js
• Multiple Database options
• A guaranteed service level (99% up time, etc)
• A support ticket system.
• On-line chat support that is ALWAYS manned.
• Telephone support options for when things are really critical.

Then there are some additional “nice to have” items.

• Shared SSL Support
• Individual SSL options
• Source Control Hosting Options
• Free default WebMail
• Customizable Control Panel
• Some kind of domain / account manager
• SSH access

It turns out that I’m already using a hosting company that meets all those critera – though I didn’t realise it until yesterday.

The company is A2 Hosting – http://www.a2hosting.com/

Now let me be clear. I’ve been using A2 for 6-7 years. I started using them while working at Microsoft so I kept my use of their Linux based hosting pretty quiet. A2 has never provided me with any incentive to endorse them in any way, they don’t know I’m writing this, and I have always paid full retail prioce for the services that I have received from them – so my experience as a customer has been the same that you or anyone else is likely to experience.

When I signed up for my A2 “reseller” account it was because I wanted to host a bunch of little web sites and didn’t want to have a bunch of different accounts. Though I have a reseller account, I only use it to host my own sites. I choose A2 because I though their reseller account offered a lot for a very reasonable price. Because of the way that I started with them I guess I always thought of them as a “low end” provider.

I signed up for Site5 because of their unlimited bandwidth option.

As I started yesterday researching an alternative, I remembered the great service I’ve received from A2.

My A2 account is a “low cost” account, and there HAVE been issues and down time. But in all the years I’ve used them any issue has been solved quickly.

There is always someone in the on-line chat support and that someone can actually solve problems. IN fact, the chat based support people are so good – in all the years I’ve hosted with them I’ve never had to call the 24/7/365 phone based tech support.

They have always known what was happening and what the eta to fix it was – or they could do it themselves.

I couldn’t remember the last time I had been to the A2 web site – they’ve added lots of services.

They now have hosting starting at $3.35 a month (unlimited disk and bandwidth) all the way up to high end, managed, dedicated servers with Cloud options.

So I moved my blog before it was even back on line at Site. It took me about 30 minutes to get all the content,the code and the database moved. There was one thing I couldn’t figure out because the DNS change had not propagated yet, but I chatted the on-line support and Erin had the answer (thanks Erin) !

My web sites are often PHP apps like WordPress or Drupal but my Apps stuff is moving towards Node.js and Python – I was thrilled to discover that A2 supports both.

So for now I’ve consolidated all my hosted stuff to A2. (I still need to choose a Cloud based PaaS provider for some work.)

I’ll be using A2 for a bunch of my Apps learning content since my account gives me the flexibility to create sub domains for all the test apps I want to build. Heck, with Virtual Private instances starting at $13.95 per month I could even host test Apps with Java back ends if I really wanted to.

Anyway, I though this was a fairly significant experience and that sharing it might be useful to some of my readers.

Choosing a hosting company is a bit like cheering for your favorite sports team.

Either : Mine is the best and yours sucks!

Or: Yours sucks and mine sucks TOO !

And: If you ask me tomorrow I may feel differently about mine !

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 :

<div class="span-9 last">
<div class="grid_6 alpha">

… 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…..

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.

So, it makes sense that Microsoft would be extremely concerned about anything that helped bring rich, powerful cross platform applications to prominence in the industry. In the years I worked at Microsoft we often implemented a pseudo-embrace competitive strategy. We “embraced” the popularity of Java and then tried to subvert Java on Windows so that it would become a Windows specific technology. Apps written for Microsoft’s version of Java would not run anywhere but Windows.

A similar thing happened when open web development languages surpassed ASP.NET as the premier web development choices.  Microsoft did some work around PHP to make it “almost good enough”, and worked on implementations of Python and Ruby – both of which have been pretty much abandoned.

Microsoft is now doing the same thing with HTML5 and JavaScript. Embracing some of the standards, leveraging the popularity of their great Visual Studio Tool set and extending the standards based technology with “Windows Only” extensions.

Apps that run on anything other than Windows is BAD for Microsoft and choosing this development model includes betting on Windows 8 to be so good on the desktop and on Tablets / Devices that adoption of Windows 8 across all form factors will be nearly ubiquitous (making the market segment of non-Windows devices too small to be of interest to developers.)

Apple & Microsoft combine to represent nearly complete dominance in the desktop operating system space and both see “device based computing” as huge threats to that dominance. (As evidenced by the aggressive legal actions that both have been taking in attempts to thwart the success of Android.)

The more that user’s find utility in internet capable computing devices that are NOT conventional personal computers, the more fragile their respective dominance becomes.

And it’s not just operating system developers that look to leverage the exploding apps space to maintain their historic success. Google, for example, built a pretty good apps platform that only works in their Chrome browser. Why would they care? Because their success is based on search which starts, for the vast majority of users, IN THE BROWSER. So, controlling the majority of the browser market share helps their core mission.

Amazon restricts what yo can install on their brilliant Kindle and Kindle Fire devices because their business is based on the digital acquisition process (Apps, Books, Video, Audio, etc)
All these examples represent the very nature of business.

But in a perfect world, what would be best for the REST of us ?

The retail consumer who purchases applications and the small developer who sells them are the ones who would benefit most from an industry move to standards based applications that could be purchased once and run anywhere the purchaser wanted to run those apps.

It is for these reasons that the OPEN Web Community (including Mozilla) is so interested in “Standards based applications development”.  As a non-profit organization, Mozilla’s mission is to promote openness, innovation and opportunity on the web.

So, what might a “Web Run Time” based application look like?

Well, in many cases it will look like a native application.

It will run while the host device is connected to the internet – and when it’s not.

This is done in part by creating an application manifest that supplies a list of resources to the host (an HTML5 enabled browser or similar runtime) specifying what files need to be saved in the cache for use when off line.

Of course, this means that many web developers will need to change the way they think of web development.

ASP.NET, PHP, Python, Ruby, Perl (did I miss anything important ?) developers are used to writing code the executes on the SERVER with very little code on the client. Usually the JavaScript code in these applications implements some user interface behavior but no real business logic.

In the new “Web Run Time” model we’ll shift our architectural perspective to one who’s logic executes on the CLIENT and gets updates from the server when the server is  available. Those updates can be data, markup, or even code.

Those updates can be determined and delivered by any server side technology that can send data over HTTP, so the old standards like PHP and ASP.NET can be used, or we could choose a newer construct like Node.js.

Application specific data can be written to the cloud, as is becoming more prevalent, and can be written on the client when an internet connection is not present. The “Web Run Time (HTML5) offers several methods for local storage.

Local Storage
Session Storage
The FIleSystem API
IndexedDB (Only implemented in FireFox at the moment)

The application itself can mange storage choices in performant ways, using practices very much like those in multi-threaded designs, by determining the availability of the internet, making I/O decisions and handling persistence execution in “Web Workers”. (Read more here: http://dev.w3.org/html5/workers/ )

What’s more, the combination of Web Workers and Web Sockets can go a long way to finding the performance opportunities that web developers may have struggled with in the past.

In the near future, HTML5 Apps will be able to detect whether they are running in the foreground or the background and select different threads of execution based on this state.

More and more, HTML5 implementations, and the containers in which they run, will expose standard interaction APIs for both hardware (like camera, mic, GPS) and software services (like mail, calendaring, etc).

All these things reduce the scope of applications that would require native access to the operating system API.

If HTML5 provides the user interface structure of our application and JavaScript is what we use to implement it’s imperative logic, then CSS is what we use to define the appearance of our applications.

Clever use of CSS3 will not only let us implement elegant UI behaviors but dynamically applying different CSS style sheets will let us taylor the same markup and code for execution on any specific form factor (Phone, Tablet, PC, big screen television.)

So I’m embarking on a journey n which I’ll explore Application Building in HTML5, sharing with you what I learn and what difficulties I encounter.

What examples of obstructions have you experienced in building real Apps with HTML5?  (Please don’t offer speculations but rather issues discovered in your own hands on development work.)