Html5 Tutorial - Future Technology

Monday 10 March 2014

HTML5 Simplequiz #1

A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own).
With Dan’s blessing, we’re beginning an occasional series of HTML5 Simplequizzes. And here’s the first.
Consider a products page on a website. It might be a page showing widgets, HTML5 books or Remy’s favourite nose hair removers. What’s the best way to mark up the products?
Note: please DON’T USE ANGLE BRACKETS in your comments. Escape them with < and > or just use [foo] – we’ll know what you mean.

A:

<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>

B:

<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</article>
<article>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</article>

C:

<section>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</section>
<section>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</section>

D:

<nav>
<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>
...</nav>
Your answers below, please, with your rationale.

PhoneGap and Cordova with iOS 7

Running Existing Apps

The first thing I tried to do after the upgrade process was to run the existing PhoneGap applications already installed on my phone. Good news: They run “as is” (with a minor cosmetic issues: see below).

Building and Deploying

Building and deploying new apps was also pretty straightforward. Here are the steps (I’m assuming PhoneGap 3):
  1. Install Xcode 5: the update is available in the App Store on your Mac.
  2. Start Xcode 5 before building your application to make sure Xcode downloads the required components. Before you can build a project using the PhoneGap or Cordova command line tool, you’ll also have to accept the new license agreement in Xcode 5.
  3. Build your PhoneGap application as usual on the command line:
    1
    phonegap build ios
  4. Open the project (the .xcodeproj file in platforms/ios) in Xcode, and run it on your device.

The Status Bar Issue

On iOS7, all the applications are running full screen, and the status bar now overlays your application. As a result, it may cover some of your content or interfere with your header:

ios71

Different solutions have been discussed in the forums (here and here). Some of them involve native code to offset the web view. I think the simplest and cleanest solution is to add a 20px top margin to the document’s body using CSS. You can use version detection to avoid adding the margin if the application is running on iOS 6. Shazron posted a nice Gist with a simple solution:
1
2
3
4
5
6
7
function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
  
document.addEventListener('deviceready', onDeviceReady, false);


Here is the result:
ios72

Cordova 3.1

Cordova 3.1 is expected soon (probably next week) with additional iOS 7 support:
  • Update to the splashscreen plugin to better support the status bar
  • Update to the Media and Media Capture plugins to handle the new Microphone access permissions
  • A fix to this bug (keyboard preferences)

Topcoat

iOS 7 is another reason to take a look at Topcoat, the new CSS toolkit that I have already covered and demonstrated multiple times in this blog. Topcoat’s flat design with no gradients or shadows fits perfectly with the new aesthetics of iOS7. Topcoat is just a set of CSS styles and works with any JavaScript framework: Backbone.js AngularJS, Ember, etc.

Follow Me

PhoneGap tutorial - Employee Directory Sample App


Employee Directory Sample Application with Ratchet 2.0


After this week’s double announcement that Ratchet 2.0 is available and is now part of the Bootstrap organization, I decided to update the Ratchet/Backbone version of my Employee Directory application with Ratchet 2.0 and see how it looks.
You can experience the application in the phone “simulator” below (type a few characters in the search box), or click here to run the app in a full browser window.


Platform-Specific Themes

Among other new features, Ratchet 2.0 has a new base theme that you can overlay with optional themes for iOS and Android.

iOS theme

Here is the exact same app with the iOS theme:
Click here to run the app in a full browser window.

Android theme

And here is the same app with the Android theme:
Click here to run the app in a full browser window.

Source Code

The source code for the application is available on GitHub: http://github.com/ccoenraets/directory-backbone-ratchet

Wrapping Up

After a long wait, it’s great to see this new version of Ratchet, and it’s going to be interesting to see how the project evolves and how active it will be in its new home.
Ionic (built on top of AngularJS) has a lot of momentum in this space right now. It’s good to have options, especially if you are using another architectural framework. You can read about the Ionic/AngularJS version of the same application in this post.

PhoneGap Build API for Node.js

Adobe PhoneGap Build has a powerful RESTful API that you can use to tap into PhoneGap Build’s functionality. With the API, you can authenticate as a user and create, build, update, and download PhoneGap applications.
RESTful APIs are great but not without annoyances. All of the popular programming languages (and not so popular ones) have HTTP libraries for RESTful access. The downside is that you still need to implement the HTTP request and response communication logic. It’s not complicated, except with some authentication types. But it is more code to manage and grows as you encounter API quirks.
This is why we use libraries.
phonegap-build-api-js is a published NPM module for accessing the PhoneGap Build API with node.js. It abstracts the HTTP communication, deals with the API quirks, and leaves the rest untouched. In other words, it simplifies accessing the PhoneGap Build API, so that you can focus on integrating it with your product.

For your coding pleasure, here is an exhaustive list of usage examples:

Authentication

var client = require('phonegap-build-api');

client.auth({ username: 'zelda', password: 'tr1f0rce' }, function(e, api) {
    // use `api` to make requests
});

GET https://build.phonegap.com/api/v1/me

api.get('/me', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps

api.get('/apps', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps/:id

api.get('/apps/199692', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps/:id/icon

api.get('/apps/199692/icon').pipe(fs.createWriteStream('icon.png'));

GET https://build.phonegap.com/api/v1/apps/:id/:platform

api.get('/apps/199692/android').pipe(fs.createWriteStream('app.apk'));

GET https://build.phonegap.com/api/v1/keys

api.get('/keys', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/keys/:platform

api.get('/keys/ios', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/keys/:platform/:id

api.get('/keys/ios/917', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps

var options = {
    form: {
        data: {
            title: 'My App',
            create_method: 'file'
        },
        file: '/path/to/app.zip'
    }
};

api.post('/apps', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/apps/:id

var options = {
    form: {
        data: {
            debug: false
        },
        file: '/path/to/app.zip'
    }
};

api.put('/apps/197196', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/icon

var options = {
    form: {
        icon: 'my-icon.png'
    }
};

api.post('/apps/232741/icon', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/build

Build all platforms:
api.post('/apps/232741/build', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});
Build specific platforms:
var options = {
    form: {
        data: {
            platforms: [ 'android', 'blackberry', 'ios', 'winphone', 'webos' ]
        }
    }
};

api.post('/apps/232741/build', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/build/:platform

api.post('/apps/232741/build/android', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/collaborators

var options = {
    form: {
        data: {
            email: 'michael@michaelbrooks.ca',
            role: 'dev'
        }
    }
};

api.post('/apps/232741/collaborators', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/apps/:id/collaborators/:id

var options = {
    form: {
        data: {
            role: 'tester'
        }
    }
};

api.put('/apps/232741/collaborators/263955', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/keys/:platform

var options = {
    form: {
        data: {
            title: 'My BlackBerry Signing Key',
            password: 'my-password'
        },
        db: '/path/to/sigtool.db',
        csk: '/path/to/sigtool.csk'
    }
};

api.post('/keys/blackberry', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/keys/:platform/:id

var options = {
    form: {
        data: {
            password: 'my-updated-password'
        }
    }
};

api.put('/keys/blackberry/1505', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/apps/:id

api.del('/apps/14450', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/apps/:id/collaborators/:id

api.del('/apps/232741/collaborators/263955', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/keys/:platform/:id

api.del('/keys/ios/2729', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});
Enjoy!

Getting Started with PhoneGap and PhoneGap Build

PhoneGap Intro
PhoneGap is a free and open source framework that allows you to create mobile apps using the web technologies you’re already familiar with: HTML, CSS, and JavaScript. Use standardized web APIs and target the platforms you care about. Download PhoneGap for free right now and try it out.

The beauty of PhoneGap is that you’re able to reuse your existing web developer skills so you have a shorter learning curve and faster development. It’s based on 100% web standards and backed by large stakeholders like Google, Microsoft, BlackBerry, Intel, and more.

Other helpful reads:
PhoneGap’s Beliefs, Goals and Philosophy.
PhoneGap explained Visually


PhoneGap Build Intro
Taking PhoneGap one step further, PhoneGap Build is a service that allows you to package mobile apps in the cloud for multiple platforms. Simply upload your HTML, CSS, and JavaScript to the PhoneGap Build cloud service and we do the work for you. No more hassles of maintaining SDKs on your computer. You quickly and easily get app-store ready apps for iOs, Android, BlackBerry, and more. PhoneGap Build has a couple of subscription options, including a free subscription to try it out. Learn more about PhoneGap Build.
Did you know? PhoneGap Build is also part of Adobe’s Creative Cloud. PhoneGap Build is available to free and paid Creative Cloud members. Learn more about Creative Cloud. You might also be interested in Adobe’s Edge Tools + Services, which are a complementary set of offerings for web designers and developers looking to create beautiful mobile-ready content and apps with HTML, CSS, and JavaScript.

What’s the difference between PhoneGap and Cordova?
In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will remain free and open source under the Apache License, Version 2.0.
PhoneGap is an open source distribution of Cordova. You may see references to both PhoneGap and Cordova and their names used interchangeably. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.


In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will remain free and open source under the Apache License, Version 2.0.
PhoneGap is an open source distribution of Cordova. You may see references to both PhoneGap and Cordova and their names used interchangeably. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.
Read more:
Rolling Releases: How Apache Cordova becomes PhoneGap
PhoneGap, Cordova and what’s in a name.
Where to begin?
So you’ve got the background, installed PhoneGap, now what? Below are some helpful places to start:
Other handy resources:
wiki.phonegap.com
PhoneGap FAQ
PhoneGap Build FAQ
Found a bug?
Sometimes you might find something that doesn’t look quite right. It might be in the docs or a bug in Cordova itself. Help the community out by flagging the issue. Submit the bug on the Cordova Issue tracker.
What’s the community up to?
The PhoneGap community is large and robust. Find out what they’ve been up to in a variety of places:
  • The PhoneGap Featured Apps and Case Studies highlight some notable apps made with PhoneGap and services that integrate with PhoneGap Build. Have you made a PhoneGap app? Submit yours here
  • The PhoneGap Community Repo shows a monthly breakdown of the PhoneGap events and articles. If you’re organizing a PhoneGap event, speaking on PhoneGap, writing a blog post or have something to share, please add it to the release notes on Github.
  • Check out the PhoneGap Events calendar to find out what events we’re sponsoring and where the team is speaking.
  • PhoneGap meetups take place all over the world and have different community organizers. Find one close to you or start your own: Meetup.PhoneGap.com
Where do I get help?
Get answers to your questions from the community:
For PhoneGap, check out the PhoneGap Google Group
For PhoneGap Build, check out the PhoneGap Build Forum
Looking for extra, dedicated PhoneGap support? Check out PhoneGap’s paid support options
Stay connected
Are you a PhoneGap Developer or part of a PhoneGap Dev shop? Maybe you’re looking for a Dev? Check out our new PhoneGap Developer Directory. We have over 700 developers and dev shops in 83 countries listed so far!
Find out what’s happening with PhoneGap and PhoneGap Build with our Newsletter. Don’t worry, we hate spam too and won’t be sharing your info with anyone else.



Phonegap Video Tutorial - Real Time Work Shop Example


Abstract Learn how to build large, complex, and native-like mobile apps using HTML, JavaScript, and CSS. In this workshop you'll learn modern strategies and architectural patterns to build real-life Hybrid Applications that work and perform like native apps. You'll also learn how to efficiently use PhoneGap to leverage the native capabilities of your device in JavaScript and to package your HTML application as a native app for distribution through the different app stores. this video tutorial covers the following topics are covered and explained with real time examples The PhoneGap APIs - explains all phonegap API's how to use and build them remotely, locally and test them on different divices. Topcoat - Explains how to use Topcoat framework. The Single Page Architecture - Describes how to develop single page architecture applications rather then multi page architechture , differentiate between them, advatages of using single page architecture. Client-side HTML templates Effective Touch Events Modularization Approaches Mobile Performance Optimization Techniques Comparison of Leading JavaScript frameworks PhoneGap Plugins