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
Mozilla is the only browser vendor who’s mission is to promote open innovation on the world wide web.
This year we’ve been diving into Mobile web technology in big ways.
Please consider including the code below on your web site or your blog. (WordPress users you can simply include the code as a text widget, just remember to point the image links at images on your site.)
The script is simple.
1.) If the visitor is using Firefox (any version) – SayTHANKS !
2.) If the visitor is not using Firefox – check to see if they are using an Android device.
3.) If not, suggest they use Firefox.
4.) If they are using Android, suggest Firefox Mobile.
You can get much more fancy, but you get the idea.
THANKS ! If you add the code to your site – tweet the url to @MisfitGeek and I’ll re-tweet !
<script type="text/javascript">
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
document.write("<h2>THANKS for Using Firefox !!!</h2>")
document.write("<img src='http://misfitgeek.com/images/firefox3.jpeg' />");
}
else {
if (/Android[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
document.write("<h2>Get Firefox MOBILE !</h2>");
document.write("<a title='Get FireFox MOBILE!'
href='http://www.mozilla.org/en-US/mobile/'>
<img src='fennec-icon.jpeg' /></a><br />");
document.write("<b>
Click the Tail & Get Firefox Mobile for Android!
</b>");
}
else {
document.write("<h2>Please Consider Using Firefox !!!</h2>");
document.write("<a title='Get FireFox !' href='http://getfirefox.org/'>
<img src='http://misfitgeek.com/static/getfirefox.png' />
</a>");
}
}
</script>
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.
<!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>
.active #active, .suspended #suspended {
display: inline
}
.active #suspended, .suspended #active {
display: none
}
.active {
background: white;
color: black;
}
.suspended {
background: black;
color: white;
}
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;
}
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 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.
Note the message that confirms the Marketplace is not yet open to the general public.
Now I’ll use the search feature to find my Round Time app.
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.
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.
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…
Progress is a great thing and THANKS to Marco for his awesome work !
