Mozilla Audio Data API

Mozilla Audio Data API.

Advertisements

The Wheels Of Steel: An Ode To Turntables (in HTML)

 

 

 

The Wheels Of Steel: An Ode To Turntables (in HTML).

The turntable is more than just a hi-fi music player for the home. To the DJ, it’s also a creative tool for remixing music in real-time. The turntable gave birth to a culture of disc jockeys and is an important element of hip-hop; it also plays a role, quite literally, in the evolution of electronic music.

Turntable rig, May 2011

The turntable rig, May 2011: Two Technics 1200s and a RANE TTM-54 mixer sit atop a repurposed speaker box.

Turntables have had many nicknames given to them by DJs including 1200sthe 1s and 2s, and T-turns among others. The famous 1981 DJ set, The Adventures of Grandmaster Flash on the Wheels Of Steel, highlights the significance of turntables in DJing and hip-hop. Flash’s work is considered to be an early example of Turntablism, the use of turntables as an instrument.

How to create offline HTML5 web apps in 5 easy steps

How to create offline HTML5 web apps in 5 easy steps | CatsWhoCode.com.


How to create offline HTML5 web apps in 5 easy steps

Published on May 23rd, 2011 by Jean-Baptiste Jung25 Comments –

Among all cool new features introduced by HTML5, the possibility of caching web pages for offline use is definitely one of my favorites. Today, I’m glad to show you how you can create a page that will be available for offline browsing.

 

Getting started

1 – Add HTML5 doctype

The first thing to do is create a valid HTML5 document. The HTML5 doctype is easier to remember than ones used for xhtml:

<!DOCTYPE html>
<html>
  ...

Create a file named index.html, or get the example files from my CSS3 media queries article to use as a basis for this tutorial.
In case you need it, the full HTML5 specs are available on the W3C website.

2 – Add .htaccess support

The file we’re going to create to cache our web page is called a manifest file. Before creating it, we first have to add a directive to the .htaccess file (assuming your server is Apache).

Open the .htaccess file, which is located on your website root, and add the following code:

AddType text/cache-manifest .manifest

This directive makes sure that every .manifest file is served as text/cache-manifest. If the file isn’t, then the whole manifest will have no effect and the page will not be available offline.

3 – Create the manifest file

Now, things are going to be more interesting as we create a manifest file. Create a new file and save it asoffline.manifest. Then, paste the following code in it. I’ll explain it later.

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg

Right now, you have a perfectly working manifest file. The way it works is very simple: After the CACHEdeclaration, you have to list each files you want to make available offline. That’s enough for caching a simple web page like the one from my example, but HTML5 caching has other interesting possibilities.

For example, consider the following manifest file:

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css

NETWORK:
search.php
login.php

FALLBACK:
/api offline.html

Like in the example manifest file, we have a CACHE declaration that caches index.html and style.css. But we also have the NETWORK declaration, which is used to specify files that shouldn’t be cached, such as a login page.

The last declaration is FALLBACK. This declaration allows you to redirect the user to a particular file (in this example, offline.html) if a resource (/api) isn’t available offline.

4 – Link your manifest file to the html document

Now, both your manifest file and your main html document are ready. The only thing you still have to do is to link the manifest file to the html document.

Doing this is easy: simply add the manifest attribute to the html element as shown below:

<html manifest="/offline.manifest">

5 – Test it

Once done, you’re ready to go. If you visit your index.html file with Firefox 3.5+, you should see a banner like this one:

Other browser I’ve tested (Chrome, Safari, Android and iPhone) do not warn about the file caching, and the file is automatically cached.

Below you’ll find the browser compatibility of this technique: As usual Internet Explorer does not support it.

  • IE: No support
  • Firefox: 3.5+
  • Safari: 4.0+
  • Chrome: 5.0+
  • Opera: 10.6+
  • iPhone: 2.1+
  • Android: 2.0+

HTML5 Is Not (Yet) a Panacea For Mobile Enterprise Applications | The Enterprise Mobility Forum

HTML5 Is Not (Yet) a Panacea For Mobile Enterprise Applications | The Enterprise Mobility Forum.

 

HTML5 IS NOT (YET) A PANACEA FOR MOBILE ENTERPRISE APPLICATIONS

Today is a good morning here in Boston.  The mighty Bruins have tied up the Stanley Cup Playoffs with another decisive win against the Vancouver Canucks.  I maintain the theory I tweeted that the winner of the Cup should be decided based upon the total goals accumulated during the seven game series.  I think some of my Canadian friends might disagree with that, but oh well.  After catching up on the morning’s news, I caught wind of the news that The Financial Times was launching its new mobile app.

This is a pretty interesting piece of news on multiple fronts.  First of all, I am a big fan of The Financial Times, so I welcome anything they can do to improve their mobile experience.  The PCMag article makes a couple of interesting comments, including the fact that this new app actually circumvents the Apple AppStore.  Now while I typically don’t feel the need to comment on pure consumer focused mobile issues, this does raise the question moving forward of the monetization strategies for AppStores.  Now mind you, I am personally a big fan of “native” apps on mobile devices because (for now) they are the best way to capture a completely native mobile user experience.  There’s no question however that there is a very important trend moving forward for developing HTML5 based applications because they are – by design – cross platform.

But are they really?

I fired up my trusty iPhone4 and sure enough, I got a nice user experience.  Kudos to the Financial Times for developing such a nice mobile app. I then tried the “app” on my BlackBerry PlayBook.  The web page says “The new FT app for iPad and iPhone.”  I scroll down a bit further and see another title that says “Optimised for your iPad and iPhone.”

So the new HTML5 application is NOT cross-platform.  Hunh????  Isn’t that supposed to be the whole point of HTML5….we finally break free from the shackles of having to develop applications for each platform?

And hence the point of today’s missive.  As with most things, there is a gap between goals/objectives and the realities of the day.  The Financial Times (and others) will still need to customize the HTML5 application for the various platforms.  That means they are going to need a HTML5 application for the iPhone/iPad (it looked different by the way on my iPod), that is then tweaked for BlackBerry, Windows Phone, webOS, Symbian and the various flavors of Android (both in smartphone and tablet forms).

Does this at all sound familiar to the challenges we currently face in developing mobile applications?  It most certainly should IMO.

The Financial Times is a wonderful example that – at least as of today – HTML5 is NOT the panacea of mobile that it is cracked up to be.  Mobile application development – particularly mobile enterprise application development – is NOT a trivial undertaking.  We still need a fair bit of customization for the various operating systems and device form factors, and if anything, this reinforces in my mind the need for tools to develop, deploy, manage and update mobile enterprise applications in the most effective and efficient manner possible (particularly when you realize the need for your own mobile enterprise app store).