General App Development Tutorial

8/14/2019 General App Development Tutorial

1/30

General app development tutorial

IntroductionUnlike applications for platforms like iOS and Android, the first-tier languages of Web

applications are HTML, CSS, and JavaScript. These languages are supported by a worldwide

web of developer resources. This "Web stack" is available on all modern mobile and

desktop hardware and it enables you to maximize code reuse and potentially reach a

massive audience on different platforms and devices with little additional effort. In this

tutorial we'll explore the different aspects of web app creation, the strategies for designing

a flexible, functional app, and coding an app to completion.

Over the course of the tutorial, we'll be employing these techniques and technologies to

create a Twitter-based application meant for desktop, mobile phone, and mobile tablet

devices. This app will show tweets from selected geographic areas, and is called Area

Tweet. Once the app is completed, we'll create the appropriate manifest for submitting our

app to theFirefox Marketplace!

Tutorial steps1. Foundations of an HTML5 Web app2. Configuring your development environment3. App design4. App code5. Creating the Area Tweet app6. Debugging the app7. Testing the app8. Publishing the app9. Maintaining the app10.Profiting from your app11.Create your app!

Foundations of an HTML5 Web app

An Open Web App is basically an HTML5 app. While the role of HTML, CSS, and JavaScript

are obvious to some, let's do a quick recap of how each plays its own important role in an

HTML5 app.
https://marketplace.firefox.com/https://marketplace.firefox.com/https://marketplace.firefox.com/https://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Foundations_of_an_HTML5_Web_Apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Foundations_of_an_HTML5_Web_Apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Configuring_your_development_environmenthttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Configuring_your_development_environmenthttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_designhttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_designhttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_codehttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_codehttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Creating_the_Area_Tweet_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Creating_the_Area_Tweet_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Debugging_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Debugging_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Testing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Testing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Publishing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Publishing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Maintaining_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Maintaining_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Profiting_from_your_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Profiting_from_your_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Profiting_from_your_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Create_your_app%21https://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Create_your_app%21https://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Create_your_app%21https://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Create_your_app%21https://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Profiting_from_your_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Maintaining_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Publishing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Testing_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Debugging_the_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Creating_the_Area_Tweet_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_codehttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/App_designhttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Configuring_your_development_environmenthttps://developer.mozilla.org/en-US/docs/Web/Apps/Tutorials/General/Foundations_of_an_HTML5_Web_Apphttps://marketplace.firefox.com/


2/30

HTML5 for content and structureHTML is used to create the content structure for the web

application.New features in HTML5include newtypes,

form validation support,media tags likeand,and

more semantic HTML elements.

HTML documentation HTML5 features Learn HTML HTML5 Rocks! HTML5 Test HTML5 Boilerplate HTML Living Standard Simple HTML5 Guide

CSS3 for styleCSS provides the visual presentation, letting you control the basic

layout of content. CSS can do more than just format content

though; you can use the power of CSS toanimate elements,create

precise gradientsto avoid having to unnecessarily use images, and

createmedia querieswhich let you adjust the appearance of your

content based on the type of device it's being viewed on.

CSS documentation CSS Reference CSS Animations Specification CSS Gradient Generator CSS Media Queries Specification Media Queries for Standard Devices Mobile Safari Supported CSS Properties

JavaScript for dynamic interaction
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/docs/Web/HTML/Element/inputhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/inputhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/inputhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validationhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validationhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/audiohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/audiohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/audiohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/videohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/videohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/videohttps://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_documenthttps://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_documenthttps://developer.mozilla.org/en-US/docs/Web/HTMLhttps://developer.mozilla.org/en-US/docs/Web/HTMLhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/learn/htmlhttps://developer.mozilla.org/en-US/learn/htmlhttp://www.html5rocks.com/en/http://www.html5rocks.com/en/http://html5test.com/http://html5test.com/http://html5boilerplate.com/http://html5boilerplate.com/http://www.whatwg.org/specs/web-apps/current-work/multipage/http://www.whatwg.org/specs/web-apps/current-work/multipage/http://developers.whatwg.org/http://developers.whatwg.org/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/CSShttps://developer.mozilla.org/en-US/docs/Web/CSShttps://developer.mozilla.org/en-US/docs/Web/CSS/Referencehttps://developer.mozilla.org/en-US/docs/Web/CSS/Referencehttp://dev.w3.org/csswg/css3-animations/http://dev.w3.org/csswg/css3-animations/http://www.colorzilla.com/gradient-editor/http://www.colorzilla.com/gradient-editor/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://css-tricks.com/snippets/css/media-queries-for-standard-devices/http://css-tricks.com/snippets/css/media-queries-for-standard-devices/http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.htmlhttp://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.htmlhttp://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.htmlhttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/http://www.w3.org/TR/css3-mediaqueries/http://www.colorzilla.com/gradient-editor/http://dev.w3.org/csswg/css3-animations/https://developer.mozilla.org/en-US/docs/Web/CSS/Referencehttps://developer.mozilla.org/en-US/docs/Web/CSShttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationshttp://developers.whatwg.org/http://www.whatwg.org/specs/web-apps/current-work/multipage/http://html5boilerplate.com/http://html5test.com/http://www.html5rocks.com/en/https://developer.mozilla.org/en-US/learn/htmlhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5https://developer.mozilla.org/en-US/docs/Web/HTMLhttps://developer.mozilla.org/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_documenthttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/videohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/audiohttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validationhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/inputhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5


3/30

JavaScript provides the level of dynamism and user interaction for

the web app. JavaScript lets youlisten for and respond to user

interactions,load content dynamically,and get access to device-

specific features, like theCamera APIandGeolocation API.

JavaScript Guide JavaScript Reference All JavaScript documentation on MDN Canvas Tutorial Element.classList API DOM Storage API(localStorage object) Writing Modular JavaScript With AMD, CommonJS & ES

Harmony

Battery Status API document.querySelectorAll API

Using the Page Visibility API WebSockets

It's important to note that support for individual features varies from browser to browser;

feature detectionand research should be done before using each feature. How to use

these strategies will be covered in depth below.

App design

There are many considerations to ponder before designing your web app.

Design considerationsDevice support and design emulation

Knowing the types of devices your application should work on is of utmost importance.

Knowing the target devices and their capabilities tells us what features we can likely count

on, what UI components should look like, and so on. Many mobile JavaScript frameworks,

Dojo Mobilebeing one of them, provide multiple device themes for easy device theme

implementation. Even if you prefer not to use the given JavaScript framework, you can stillstudy the device theme stylesheet and borrow styles as desired.

Orientation support

Orientation support is a huge consideration when creating a web app capable of working

on mobile devices. One obvious orientation consideration is that desktop apps use
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListenerhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListenerhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListenerhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListenerhttps://developer.mozilla.org/en-US/docs/AJAXhttps://developer.mozilla.org/en-US/docs/AJAXhttps://developer.mozilla.org/en-US/docs/AJAXhttps://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_the_Camera_APIhttps://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_the_Camera_APIhttps://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_the_Camera_APIhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/JavaScript/Guidehttps://developer.mozilla.org/en-US/docs/JavaScript/Guidehttps://developer.mozilla.org/en-US/docs/JavaScript/Referencehttps://developer.mozilla.org/en-US/docs/JavaScript/Referencehttps://developer.mozilla.org/en-US/docs/JavaScripthttps://developer.mozilla.org/en-US/docs/JavaScripthttps://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Tutorialhttps://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Tutorialhttps://developer.mozilla.org/en-US/docs/Web/API/element.classListhttps://developer.mozilla.org/en-US/docs/Web/API/element.classListhttps://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storagehttps://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storagehttp://addyosmani.com/writing-modular-js/http://addyosmani.com/writing-modular-js/http://addyosmani.com/writing-modular-js/http://addyosmani.com/writing-modular-js/http://addyosmani.com/writing-modular-js/https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Statushttps://developer.mozilla.org/en-US/docs/WebAPI/Battery_Statushttps://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAllhttps://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAllhttps://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_APIhttps://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_APIhttps://developer.mozilla.org/en-US/docs/WebSocketshttps://developer.mozilla.org/en-US/docs/WebSocketshttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttp://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/features/mobilehttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttps://developer.mozilla.org/en-US/docs/WebSocketshttps://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_APIhttps://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAllhttps://developer.mozilla.org/en-US/docs/WebAPI/Battery_Statushttp://addyosmani.com/writing-modular-js/http://addyosmani.com/writing-modular-js/https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storagehttps://developer.mozilla.org/en-US/docs/Web/API/element.classListhttps://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Tutorialhttps://developer.mozilla.org/en-US/docs/JavaScripthttps://developer.mozilla.org/en-US/docs/JavaScript/Referencehttps://developer.mozilla.org/en-US/docs/JavaScript/Guidehttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_the_Camera_APIhttps://developer.mozilla.org/en-US/docs/AJAXhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListenerhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener


4/30

horizontal orientation by default, whereas most mobile devices use portrait as the default

orientation. An ideal web application looks good and works well in both orientations. Both

JavaScript and CSS media queries provide developers the capability to detect and react to

orientation changes as they happen.

Gestures vs. simple touch events

Consider the navigation interaction paths you want for your application. Will the

application be navigable by button touches or gestures? The answer to that question

decides whether your application must make room for static controls or must subtly

communicate to the user that gestures should be available. JavaScript libraries like

jGesturesexist to aid in gesture detection.

Basic app design principlesRegardless of the specific devices you plan to support, there are a few basic principles

which should be obeyed when creating web applications:

Avoid pixel-based widthswhen designing for multiple devices and/or multipleorientations

Use vector graphicsso that their dimensions may be elegantly adjusted betweendevices

Don t assume featureson any device; feature detection is still important The more flexible the app design, the more portable it will be when considering

broader device support

The design of our app will be very typical, with two panes. The first pane will provide asearch box for field for entering the user's location, as well as a list of previous location

searches. The second pane will simply show a list of tweets from Twitter. Each pane will use

a standard heading.

Our app will also be dynamic in that it will lay out properly in both landscape and portrait

orientation, respond to a simple swipe gesture, and display reasonably on desktop and

mobile devices. The file structure of the app will look like this:

- app

- app.css

- app.manifest

- app.js

- images/

- icon-16.png

- icon-48.png

- icon-128.png

- index.html
http://jgestures.codeplex.com/http://jgestures.codeplex.com/http://jgestures.codeplex.com/


5/30

The structure of your application may vary. Since this is a small sample application, there's

no need for more specific directory structures. The images are provided in different sizes

for different devices. For example, the icon-128.png file will be used for Mac OS X desktop

installations.

App codeOutside of the different colors and imagery that apps use, an app's design isn't necessarily

dynamic: the principles of designing a flexible app are largely the same. But the style and

tools a developer uses in coding an application is a completely different story. Numerous

libraries and frameworks are available for coding mobile apps.

JavaScript libraries

jQuery Mobile

jQuery'sofficial mobile framework isjQuery Mobile.jQuery Mobile provides a unified,

HTML5-based user interface system for all popular mobile device platforms. jQuery Mobile

also provides atheme builderfor application design as well as development.

jQuery Mobile Blog jQuery Mobile API jQuery API

Dojo Mobile

Dojo Mobileis theDojo Toolkit'smobile framework, boasting a series of flexible views and

widgets, automatic device detection and themes, and more. TheDojo Mobile Showcase

shows advanced Dojo Mobile usage in action.

Getting Started with dojox/mobile Dojo Mobile Documentation Dojo Mobile 1.8 Work-In-Progress Dojo Toolkit API

MooTools Moobile

The unofficial mobile framework ofMooToolsis calledMoobile.Moobile provides a mobile

application boilerplate as well as a host of simple mobile widgets.

MooTools Mobile MooTools Documentation MooTools Forge
http://jquery.com/http://jquery.com/http://jquerymobile.com/http://jquerymobile.com/http://jquerymobile.com/http://jquerymobile.com/themeroller/http://jquerymobile.com/themeroller/http://jquerymobile.com/themeroller/http://jquerymobile.com/blog/http://jquerymobile.com/blog/http://jquerymobile.com/demos/1.1.0/http://jquerymobile.com/demos/1.1.0/http://api.jquery.com/http://api.jquery.com/http://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/http://dojotoolkit.org/http://dojotoolkit.org/http://demos.dojotoolkit.org/demos/demos.php?cat=mobilehttp://demos.dojotoolkit.org/demos/demos.php?cat=mobilehttp://demos.dojotoolkit.org/demos/demos.php?cat=mobilehttp://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/getting_started/http://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/getting_started/http://livedocs.dojotoolkit.org/dojox/mobilehttp://livedocs.dojotoolkit.org/dojox/mobilehttps://www.ibm.com/developerworks/mydeveloperworks/blogs/ykami/entry/dojox_mobile_pane_dojox_mobile_container_and_dojox_mobile_contentpane9https://www.ibm.com/developerworks/mydeveloperworks/blogs/ykami/entry/dojox_mobile_pane_dojox_mobile_container_and_dojox_mobile_contentpane9http://dojotoolkit.org/api/http://dojotoolkit.org/api/http://mootools.net/http://mootools.net/http://mootools.net/http://moobilejs.com/http://moobilejs.com/http://moobilejs.com/https://github.com/cpojer/mootools-mobilehttps://github.com/cpojer/mootools-mobilehttp://mootools.net/docs/corehttp://mootools.net/docs/corehttp://mootools.net/forge/http://mootools.net/forge/http://mootools.net/forge/http://mootools.net/docs/corehttps://github.com/cpojer/mootools-mobilehttp://moobilejs.com/http://mootools.net/http://dojotoolkit.org/api/https://www.ibm.com/developerworks/mydeveloperworks/blogs/ykami/entry/dojox_mobile_pane_dojox_mobile_container_and_dojox_mobile_contentpane9http://livedocs.dojotoolkit.org/dojox/mobilehttp://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/getting_started/http://demos.dojotoolkit.org/demos/demos.php?cat=mobilehttp://dojotoolkit.org/http://dojotoolkit.org/features/mobilehttp://api.jquery.com/http://jquerymobile.com/demos/1.1.0/http://jquerymobile.com/blog/http://jquerymobile.com/themeroller/http://jquerymobile.com/http://jquery.com/


6/30

Numerous other mobile JavaScript frameworks are available to aid the development of

mobile web apps. When looking for a good mobile web app JavaScript framework, look for

multi-device support, touch and gesture event support, and a unified API with its host

framework.

The web app built in this tutorial will utilize jQuery Mobile. Experiment and evaluatedifferent mobile frameworks based on the goals of your app before selecting one (or

deciding against using any at all). In many cases, a framework app will be save you time; in

other cases, a framework could be overkill.

CSS libraries, helpers, and techniquesCSS plays an important role in any web-based technology. There are a variety of CSS

libraries than may aid you in creating, maintaining, and organizing your CSS.

CSS preprocessors

While CSS is a simple language, its lack of variables and the need for repeated style

assignments with vendor prefixes can make CSS difficult to maintaina pain no mobile app

developer needs. CSS preprocessors ease development of apps, allowing for better code

organization and faster development.

With one of those CSS preprocessors,LESS,CSS can be written like this:

@someColor: #000; /* color var */

.rounded-corners (@radius: 5px) { /* function */border-radius: @radius;

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

}

p {

color: @someColor;

a {

color: #fff;

background: @someColor;

.rounded-corners;

}

}

This gets converted into the following by the LESS preprocessor:
http://lesscss.org/http://lesscss.org/http://lesscss.org/http://lesscss.org/


7/30

p {

color: #000;

}

p a {

color: #fff;background: #000;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

While LESS is the most popular CSS preprocessor,SASSandStylusare also available and

useful.

CSS3 techniques

Web apps may take advantage of numerous CSS techniques that allow for enriched design

and strategies for avoiding the need for imagery.

Gradients

CSS3 provides the ability to createlinear and radial gradientswith some simple CSS code:

h1 {

background-image: linear-gradient(#6facd5, #497bae);

}Boxandtextshadows

Box shadowsandtext shadowsprovide a subtle depth enhancement to block elements and

text:

.shadower {

box-shadow: 10px 5px 5px #000;

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;

color: white;

font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L",serif;

}

ShapeswithCSS

CSS also provides the ability to cleverly create shapes likes triangles and circles:

.arrowRight {
http://sass-lang.com/http://sass-lang.com/http://sass-lang.com/http://learnboost.github.com/stylus/http://learnboost.github.com/stylus/http://learnboost.github.com/stylus/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowhttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradientshttp://learnboost.github.com/stylus/http://sass-lang.com/


8/30

width: 0;

height: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-left: 5px solid #2f2f2f;

font-size: 0;line-height: 0;

}

.circle {

border-radius: 50%;

width: 200px;

height: 200px;

}

Creating responsive layouts

Coding responsive layouts is paramount in creating flexible apps that work on multiple

devices and in multiple orientations. The following are some techniques for creating such a

design.


9/30

Ourdesktoplayout


10/30

Ourmobiledevice&

phonelayouts


11/30

Percentagewidths

Fixed pixel widths should rarely be used. Percentage widths are preferred as they letelements adjust to device viewport dimensions. Fixed widths (and heights) should generally

be used only for small, genuinely fixed-sized items.

Viewportsize-dependentelementdisplay

Showing and hiding elements based on viewport size is a common practice. Instead of

cramming a lot of content into a smaller space, or changing an app's design completely,

simply hiding those "supporting" elements may be the best option.

Viewportsize-dependentimagery

Adapting image sizes to the device viewport size is also a common practice, making vector

images (usingSVG,for example) the best practice for your web app.
https://developer.mozilla.org/en-US/docs/SVGhttps://developer.mozilla.org/en-US/docs/SVGhttps://developer.mozilla.org/en-US/docs/SVGhttps://developer.mozilla.org/en-US/docs/SVG


12/30

Mediaqueries

CSS media querieslet developers adjust layout and element styles to viewport size,

orientation, aspect ratio, and more:

/* screen size media queries */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* orientation media queries */

@media (orientation:portrait) {

}

@media (orientation:landscape) {

}

/* advanced media query usage */

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

}

/* aspect ratio */

@media screen and (device-aspect-ratio: 16/9) {

}orientationchangeandresizeevents

Orientation changes can also be detected with JavaScript. Most browsers fire an

orientationchange event while all browsers are known to fire the resize event.

window.addEventListener("resize", function() {

// Detect orientation based on width

var orientation = window.innerWidth > window.innerHeight ? "landscape" : "portrait";

// Execute more code accordingly...}, false);

Web app bootstrapsServer side processing of information can be handled by the server side technology of your

choice. Popular server side languages include PHP, Python, andNodeJS+express.There's a

likelihood that your application will want to implementMozilla Personafor app sign in.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttp://nodejs.org/http://nodejs.org/http://nodejs.org/http://expressjs.com/http://expressjs.com/http://expressjs.com/https://developer.mozilla.org/en-US/docs/Mozilla/Personahttps://developer.mozilla.org/en-US/docs/Mozilla/Personahttps://developer.mozilla.org/en-US/docs/Mozilla/Personahttps://developer.mozilla.org/en-US/docs/Mozilla/Personahttp://expressjs.com/http://nodejs.org/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries


13/30

App manifestsApps submitted to the Firefox Marketplace require anapplication manifest.This manifest

contains basic information that a web browser needs to interact with an app. Manifests are

written inJSON.A sample manifest could look like this:

{

"version": "0.1",

"name": "Area Tweet",

"description": "Find tweets by for any location",

"icons": {

"16": "http://areatweet.com/images/icon-16.png",

"48": "http://areatweet.com/images/icon-48.png",

"128": "http://areatweet.com/images/icon-128.png"

},

"developer": {

"name": "David Walsh",

"url": "http://areatweet.com"

},

"installs_allowed_from": [

"https://marketplace.firefox.com",

"http://areatweet.com"

],

"default_locale": "en"

}

The application manifest lives on the host server, not the Firefox Marketplace. It'srecommended that your manifest be saved with a .webapp extension. The manifest must

be served with a Content-TypeHTTPheader of application/x-web-app-manifest+json. Use

of HTTPS is recommended.

A complete listing of all manifest properties can befound here.There's also aFrequently

Asked Questionsdocument which provides tips for creating your manifest and explanations

for why the manifest hosting process is the way it is.

Use absolute paths within the manifest, even for images. The Firefox Marketplace will not

currently accept manifests with relative paths.

Application cacheSeeUsing the application cachefor details.

Navigation
https://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/JSONhttps://developer.mozilla.org/en-US/docs/JSONhttps://developer.mozilla.org/en-US/docs/JSONhttps://developer.mozilla.org/en-US/docs/HTTPhttps://developer.mozilla.org/en-US/docs/HTTPhttps://developer.mozilla.org/en-US/docs/HTTPhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cachehttps://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cachehttps://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cachehttps://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cachehttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_app_manifestshttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifesthttps://developer.mozilla.org/en-US/docs/HTTPhttps://developer.mozilla.org/en-US/docs/JSONhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifest


14/30

When an Open Web App is running in the Web runtime, no navigation controls are

displayed. If you want to detect this, check the window.locationbar.visible property. If

window.locationbar.visible is false, no navigation is displayed. You might want to check for

this so you can provide navigation controls for the app user. This is also one way to check if

the app is installed, or to check if the app is running in the Web runtime.

For other ways to check if you are running inside an app, seeHow can my app detect that it

is in the Web runtime?

Creating the Area Tweet app

With all of the design goals and coding standards laid out, it's time to get into the coding of

our app.

HTMLAs with any Web application template, we need an HTML page with the HTML5 doctype,

,andelements.

We'll be using jQuery Mobile as the JavaScript framework. That means we must pull in the

CSS and JavaScript resources required by jQuery Mobile:
https://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3Fhttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3Fhttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3Fhttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3Fhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/headhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/headhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/bodyhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/bodyhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/bodyhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/bodyhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/headhttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3Fhttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/About_apps#How_can_my_app_detect_that_it_is_in_the_Web_runtime.3F


15/30

With our basic application boilerplate and jQuery Mobile resource in place, it's time to add

content and widgets to the page. Since we've decided to use jQuery Mobile for our

application framework, our app's HTML structure will follow their prescribed widget

structures. The first pane provides a search box and a history list:

Area Tweet

Location Search

Search

Previous Locations

Clear History


16/30

There are a few things to notice with the code above:

The structure of the HTML5 sticks to semantics, which ensures maximumaccessibility.

As with any Web-based app, we assign CSS classes and IDs to elements we want tostyle and to access to from JavaScript code.

If you have questions about individual jQuery Mobile capabilities, node attributes, or

structures, please consult thejQuery Mobile Documentation.

The second pane will be used for displaying a list of tweets:

Back

Tweets

CSSOur Web app's CSS contains a CSS animation for fading in any element, as well as for

overriding jQuery Mobile styles and general element styling.

/* animations */

@-moz-keyframes fadeIn {

0% { opacity: 0; }

100% { opacity: 1; }

}

@-webkit-keyframes fadeIn {

0% { opacity: 0; }

100% { opacity: 1; }

}

.fadeIn {

-moz-animation-name: fadeIn;

-moz-animation-duration: 2s;
http://jquerymobile.com/demoshttp://jquerymobile.com/demoshttp://jquerymobile.com/demoshttp://jquerymobile.com/demos


17/30

-webkit-animation-name: fadeIn;

-webkit-animation-duration: 2s;

opacity: 1 !important;

}

/* Custom CSS classes */

.clear { clear: both; }

.hidden { display: none; }

.opaque { opacity: 0; }

/* Basic styling */

#prevLocationsContainer { margin-top: 40px; }

/* Customizing jQuery Styles */

#tweetsList li.ui-li-divider,

#tweetsList li.ui-li-static { font-weight: normal !important; }

/* Tweet list */

#tweetsList li {

}

#tweetsList li .tweetImage {

float: left;margin: 10px 10px 0 10px;

}

#tweetsList li .tweetContent {

float: left;

/* margin: 10px 0 0 0; */

}

#tweetsList li .tweetContent strong {

display: block;padding-bottom: 5px;

}

/* Media Queries for device support */

@media screen and (max-device-width: 480px) {

#prevLocationsContainer { margin-top: 10px; }

}


18/30

JavaScriptJavaScript is the last major component to add to our Web app. The following encompasses

all capabilities for the app:

$(document).ready(function() {

// Start from scratch on page load

if(window.location.hash) {

window.location = "index.html";

}

// Feature tests and settings

var hasLocalStorage = "localStorage" in window,

maxHistory = 10;

// List of elements we'll use

var $locationForm = $("#locationForm"),

$locationInput = $("#locationInput"),

$prevLocationsContainer = $("#prevLocationsContainer"),

$tweetsHeadTerm = $("#tweetsHeadTerm"),

$tweetsList = $("#tweetsList");

// Hold last request jqXHR's so we can cancel to prevent multiple requests

var lastRequest;

// Create an application object

app = {

// App initialization

init: function() {

var self = this;

// Focus on the search box

focusOnLocationBox();

// Add the form submission event

$locationForm.on("submit", onFormSubmit);

// Show history if there are items there

this.history.init();


19/30

// When the back button is clicked in the tweets pane, reset the form and focus

$("#tweetsBackButton").on("click", function(e) {

$locationInput.val("");

setTimeout(focusOnLocationBox, 1000);

});

// Geolocate!

geolocate();

// When the tweets pane is swiped, go back to home

$("#tweets").on("swiperight", function() {

window.location.hash = "";

});

// Clear history when button clicked

$("#clearHistoryButton").on("click", function(e) {

e.preventDefault();

localStorage.removeItem("history");

self.history.hideList();

})

},

// History modules

history: {

$listNode: $("#prevLocationsList"),

$blockNode: $("#homePrev"),

init: function() {var history = this.getItemsFromHistory(),

self = this;

// Add items to the list

if(history.length) {

history.forEach(function(item) {

self.addItemToList(item);

});

self.showList();

}

// Use event delegation to look for list items clicked

this.$listNode.delegate("a", "click", function(e) {

$locationInput.val(e.target.textContent);

onFormSubmit();

});

},


20/30

getItemsFromHistory: function() {

var history = "";

if(hasLocalStorage) {

history = localStorage.getItem("history");

}

return history ? JSON.parse(history) : [];

},

addItemToList: function(text, addToTop) {

var $li = $("" + text + ""),

listNode = this.$listNode[0];

if(addToTop && listNode.childNodes.length) {

$li.insertBefore(listNode.childNodes[0]);

}

else {

$li.appendTo(this.$listNode);

}

this.$listNode.listview("refresh");

},

addItemToHistory: function(text, addListItem) {

var currentItems = this.getItemsFromHistory(),

newHistory = [text],

self = this,

found = false;

// Cycle through the history, see if this is there

$.each(currentItems, function(index, item) {

if(item.toLowerCase() != text.toLowerCase()) {

newHistory.push(item);

}

else {

// We've hit a "repeater": signal to remove from list

found = true;

self.moveItemToTop(text);}

});

// Add a new item to the top of the list

if(!found && addListItem) {

this.addItemToList(text, true);

}


21/30

// Limit history to 10 items

if(newHistory.length > maxHistory) {

newHistory.length = maxHistory;

}

// Set new history

if(hasLocalStorage) {

// Wrap in try/catch block to prevent mobile safari issues with private browsing

// http://frederictorres.blogspot.com/2011/11/quotaexceedederr-with-safari-

mobile.html

try {

localStorage.setItem("history", JSON.stringify(newHistory));

}

catch(e){}

}

// Show the list

this.showList();

},

showList: function() {

$prevLocationsContainer.addClass("fadeIn");

this.$listNode.listview("refresh");

},

hideList: function() {

$prevLocationsContainer.removeClass("fadeIn");

},moveItemToTop: function(text) {

var self = this,

$listNode = this.$listNode;

$listNode.children().each(function() {

if($.trim(this.textContent.toLowerCase()) == text.toLowerCase()) {

$listNode[0].removeChild(this);

self.addItemToList(text, true);

}

});

$listNode.listview("refresh");

}

}

};


22/30

// Search submission

function onFormSubmit(e) {

if(e) e.preventDefault();

// Trim the value

var value = $.trim($locationInput.val());

// Move to the tweets pane

if(value) {

// Add the search to history

app.history.addItemToHistory(value, true);

// Update the pane 2 header

$tweetsHeadTerm.html(value);

// If there's another request at the moment, cancel it

if(lastRequest && lastRequest.readyState != 4) {

lastRequest.abort();

}

// Make the JSONP call to Twitter

lastRequest = $.ajax("http://search.twitter.com/search.json", {

cache: false,

crossDomain: true,

data: {

q: value},

dataType: "jsonp",

jsonpCallback: "twitterCallback",

timeout: 3000

});

}

else {

// Focus on the search box

focusOnLocationBox();

}

return false;

}

// Twitter reception

window.twitterCallback = function(json) {


23/30

var template = ""

+"{from_user}{text}",

tweetHTMLs = [];

// Basic error handlingif(json.error) { // Error for twitter

showDialog("Twitter Error", "Twitter cannot provide tweet data.");

return;

}

else if(!json.results.length) { // No results

showDialog("Twitter Error", "No tweets could be found in your area.");

return;

}

// Format the tweets

$.each(json.results, function(index, item) {

item.text = item.text.

replace(/(https?:\/\/\S+)/gi,'$1').

replace(/(^|\s)@(\w+)/g,'$1@$2').

replace(/(^|\s)#(\w+)/g,'$1#$2')

tweetHTMLs.push(substitute(template, item));

});

// Place tweet data into the form$tweetsList.html(tweetHTMLs.join(""));

// Refresh the list view for proper formatting

try {

$tweetsList.listview("refresh");

}

catch(e) {}

// Go to the tweets view

window.location.hash = "tweets";};

// Template substitution

function substitute(str, obj) {

return str.replace((/\\?{([^{}]+)}/g), function(match, name){

if (match.charAt(0) == '\\') return match.slice(1);

return (obj[name] != null) ? obj[name] : "";


24/30

});

}

// Geolocates the user

function geolocate() {

if("geolocation" in navigator) {// Attempt to get the user position

navigator.geolocation.getCurrentPosition(function(position) {

// Set the address position

if(position.address && position.address.city) {

$locationInput.val(position.address.city);

}

});

}

}

// Focuses on the input box

function focusOnLocationBox() {

$locationInput[0].focus();

}

// Modal function

function showDialog(title, message) {

$("#errorDialog h2.error-title").html(title);

$("#errorDialog p.error-message").html(message);

$.mobile.changePage("#errorDialog");

}

// Initialize the app

app.init();

});

We won't go over every part of the app's JavaScript, but a few items are worth pointing

out:

The script uses feature testing for both localStorage and geolocation. The app willnot attempt to use either feature if they aren't present in the browser.

The geolocation API is used to detect the user's current location andthe localStorage API is used to keep the user's search history.

The JavaScript has been written in a modular manner for easier testing. A swipe event is listened for on the tweet pane. When the pane is swiped, the user

is taken back to the first pane.


25/30

Twitter is the source of all data. No custom server-side processing is used for thisapp.

Debugging the app

For debugging an app the first step is, of course, to use a full-capabilities desktop browser

such as Firefox with all its available tools. But once the app is installed on a platform (cf.

Platform-specific details of app installation)it becomes a native app, it is run from inside

the webapp runtime and things get more complicated.

To debug problems when an app is running inside the webapp runtime one can run it from

the command line by enabling the old (but still useful)Error Console.

For example if an App comes from http://areatweet.com/ and is installed in

$HOME/.http\;areatweet.com/ (this is the case for a Linux Desktop cf.Platform-specificdetails of app installation)the webapp runtime will be found in this directory. One should

then run the webapp runtime with the debugging option as follows:

$ ~/.http\;areatweet.com

/webapprt-stub -jsconsole

Note that on Windows the webapp runtime is not named webapprt-stub but is named after

the name of the App, but the principle remains the same.

ReadHacking Firefox OSfor more information on debugging.

See also Platform-specific details of app installation Hacking Firefox OS Seebug 829573:When using the Web runtime, console methods should output to

stdout

Testing the app

App testing is of immense importance, especially when supporting multiple platforms anddevices. The number of tests and types of testing needed depend on the devices and

platforms supported. Test types include:

Speed Performance efficiency Input and output validation Touch and interactivity
https://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Error_Consolehttps://developer.mozilla.org/en-US/docs/Error_Consolehttps://developer.mozilla.org/en-US/docs/Error_Consolehttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://hacks.mozilla.org/2012/11/hacking-firefox-os/https://hacks.mozilla.org/2012/11/hacking-firefox-os/https://hacks.mozilla.org/2012/11/hacking-firefox-os/https://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://hacks.mozilla.org/2012/11/hacking-firefox-os/https://hacks.mozilla.org/2012/11/hacking-firefox-os/https://bugzilla.mozilla.org/show_bug.cgi?id=829573https://bugzilla.mozilla.org/show_bug.cgi?id=829573https://bugzilla.mozilla.org/show_bug.cgi?id=829573https://bugzilla.mozilla.org/show_bug.cgi?id=829573https://hacks.mozilla.org/2012/11/hacking-firefox-os/https://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://hacks.mozilla.org/2012/11/hacking-firefox-os/https://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_detailshttps://developer.mozilla.org/en-US/docs/Error_Consolehttps://developer.mozilla.org/en-US/docs/Web/Apps/Platform-specific_details


26/30

While those are the basic test types, there are more ideas to consider while testing.

Web environment differencesThe following are some things to keep in mind when dealing with different web

environments.

Vendor prefixes

Both advanced JavaScript and CSS features in browsers can be vendor-prefixed with -

webkit, -moz, -o, or -ms. Know the environments you plan to use and prefix features

appropriately.

Note:You should try to avoid using features that are only available on certain devices,unless you either provide appropriate fallbacks or specifically intend your app to be used on

a more limited set of devices.

Feature detection

Some environments will support a specific feature, others may not.Feature detectionis the

best way of knowing which tools are available for a given platform. For example, to detect

support of theGeolocationAPI, you would code:

if("geolocation" in navigator) {

// Geolocation available, use it!

}

CanIUse.comprovides detailed tables of browser and device support for specific features. A

helping library likeModernizrautomatically detects features upon page load and provides

that information accordingly.

Responsive design

Usingmedia queriesand foresight in design will prevent design problems. Common pitfalls

include not using vector graphics for elements that can grow or shrink, using fixed-

dimension elements on all devices, not testing different orientations, and simply not

looking at your app at different resolutions. Services likeScreenflyandresponsivepxhelp

aid in testing an app at different sizes, but there's no substitute for having a supporteddevice handy for manual testing.

Consider also the problems that can arise when different devices have different screen

resolutions. A case in point: the problems that cropped up when Apple introduced the

third-generation iPad, with its new 2048x1536 display:
https://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detectionhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttp://caniuse.com/http://caniuse.com/http://modernizr.com/http://modernizr.com/http://modernizr.com/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttp://quirktools.com/screenfly/http://quirktools.com/screenfly/http://quirktools.com/screenfly/http://responsivepx.com/http://responsivepx.com/http://responsivepx.com/http://responsivepx.com/http://quirktools.com/screenfly/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_querieshttp://modernizr.com/http://caniuse.com/https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocationhttps://developer.mozilla.org/en-US/docs/Browser_Feature_Detection


27/30

New York Times:Is The New iPad Screen Too Good For The Web? Net Magazine:Web devs battle new iPad's Retina Display

See also:

Responsive Web design Responsive design for mobile Intro to responsive design Responsive Design View,one of the Firefox Developer Tools

Unit testing

Unit testing is a common practice in all walks of development, and web app testing is no

different. Unit testing of CSS and JavaScript is also very easy when an application is coded in

a modular fashion. Popular JavaScript unit testing frameworks includeJasmine,QUnit,and

YUI Test.Each unit testing website provides code samples for how to use their test

framework.

Performance

Performance testing can be difficult to prescribe since it's wholly dependent upon the tasks

performed by the app. Basic web coding principles like minimizing HTTP requests

(JavaScript concatenation or CSS sprites help), JS and CSS minification, placing scripts at the

bottom of the page, and properly setting Expires headers all apply. The YSlow team

provides morehelpful web performance best practicesto follow, all of which will enhance

your web app. TheHTML5Rockswebsite also provides a list ofperformance best practices.

Publishing the app

Publishing the app

Once you have finished your app, you need to do the following:

Deploy the app (hosted apps only) - Arrange for Web hosting and get the app upand running on the Web server.Packaged appsdo not require hosting.

Publish the app - Make the app available for end users to install.Deploying the appYou need to host a hosted app on a publicly accessible Web server, just like any other

website. There are numerous ways to do this.
http://bits.blogs.nytimes.com/2012/03/21/ipad-web-retina/http://bits.blogs.nytimes.com/2012/03/21/ipad-web-retina/http://bits.blogs.nytimes.com/2012/03/21/ipad-web-retina/http://www.netmagazine.com/news/web-devs-battle-new-ipad-s-retina-display-121859http://www.netmagazine.com/news/web-devs-battle-new-ipad-s-retina-display-121859http://www.netmagazine.com/news/web-devs-battle-new-ipad-s-retina-display-121859https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_designhttps://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_designhttps://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_designhttps://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_designhttps://developer.mozilla.org/en-US/docs/Web/Apps/Design/Guidelines/Intro_to_responsive_designhttps://developer.mozilla.org/en-US/docs/Web/Apps/Design/Guidelines/Intro_to_responsive_designhttps://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Viewhttps://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Viewhttp://pivotal.github.com/jasmine/http://pivotal.github.com/jasmine/http://pivotal.github.com/jasmine/http://docs.jquery.com/QUnithttp://docs.jquery.com/QUnithttp://docs.jquery.com/QUnithttp://yuilibrary.com/yui/docs/test/http://yuilibrary.com/yui/docs/test/http://yslow.org/http://yslow.org/http://yslow.org/http://www.html5rocks.com/http://www.html5rocks.com/http://www.html5rocks.com/http://www.html5rocks.com/en/features/performancehttp://www.html5rocks.com/en/features/performancehttp://www.html5rocks.com/en/features/performancehttps://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_appshttps://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_appshttps://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_appshttps://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_appshttp://www.html5rocks.com/en/features/performancehttp://www.html5rocks.com/http://yslow.org/http://yuilibrary.com/yui/docs/test/http://docs.jquery.com/QUnithttp://pivotal.github.com/jasmine/https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Viewhttps://developer.mozilla.org/en-US/docs/Web/Apps/Design/Guidelines/Intro_to_responsive_designhttps://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_designhttps://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_designhttp://www.netmagazine.com/news/web-devs-battle-new-ipad-s-retina-display-121859http://bits.blogs.nytimes.com/2012/03/21/ipad-web-retina/


28/30

GitHub

If a hosted app is purely static (HTML, CSS, JavaScript, but no server-side processing),

GitHub Pagesis a solid hosting option. It will serve your manifest with thecorrect MIME

typeif you give it a .webapp extension.

Generic hosting solutions

For an app that needs a server-side processing, use a generic hosting option (like a Web

server you may already own or have access to) with the right capabilities, or a hosting

provider specifically tailored to the needs of your app, likeHerokuorGoogle App Engine.

Publishing the appOnce your Web app has been deployed, you obviously want to make it installable by your

intended user base. There are currently two options for publishing your app.

Submit to Firefox Marketplace

Submitting your appto the Firefox Marketplace has many advantages, such as increased

publicity, no need to implement special APIs on your own Web site, and the possibility of

publishing paid apps more easily.

Publish on your own website

If you want to let people install your app from a website you own, you mustimplement

some JavaScript codeon your Web site to manage installing and updating your app intousers' browsers.

Maintaining the app

Managing and maintaining your web app is as important as releasing it. Bugs will pop up,

users will request more features, and over time, new devices will be released and their

software updated.

App update processThis section needs to be written once the marketplace is closer to complete.Receiving and responding to user feedbackReceiving and responding to user feedback is an integral part of engaging users. User

feedback provides invaluable insight into:
http://pages.github.com/http://pages.github.com/https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttp://www.heroku.com/http://www.heroku.com/http://www.heroku.com/http://code.google.com/appengine/http://code.google.com/appengine/http://code.google.com/appengine/https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Submitting_an_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Submitting_an_apphttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_APIhttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Submitting_an_apphttp://code.google.com/appengine/http://www.heroku.com/https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttps://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#Serving_from_GitHubhttp://pages.github.com/


29/30

What the general reception of the app is Criticisms of the app Ideas for improvement and feature requests Device-specific bugs

The right response can elicit buzz and faithfulness from app purchasers; an unprofessionalor negative response can ruin your chance to fix app problems.

App refundsFirefox Marketplace users are entitled to refunds within 30 minutes of purchases. After

that 30 minutes, developers can review refund requests on an individual basis. Read the

Marketplace Payments FAQfor more information about payments and refunds.

Profiting from your app

Creating Web apps is also a great way to turn your passion into revenue!

Firefox MarketplaceTheFirefox Marketplaceis an outstanding marketplace for Web app developers. The

Firefox Marketplace supports both paid and free apps, in-app purchasing, a variety of

device platform apps, and more. The Firefox Marketplace provides competitive pricing and

offers consumers a variety of payment methods. Read theMarketplace Payments FAQto

learn more about monetizing your app on the Firefox Marketplace.

Paid apps

If you charge for your app on the Marketplace, the buyer will receive a digital receipt after

paying for it. Your app should check this receipt to make sure the app is paid for. Usually

this is done when the app starts. This tutorial does not cover how to check receipts. For

more information, seeValidating a receipt.

In-app payments

In-app payments are another way to monetize your app with the added bonus of

enhancing an existing app instead of requiring the user to purchase a new one. Mozilla's in-

app payment model works very similarly toGoogle's In-Apps Paymentssystem. The Firefox

Marketplace system flows as follows:

The app initiates a payment by signing a JWT request and calling a JavaScriptfunction

This starts the buyflow in a lightbox (served from an)o The buyer logs in with Mozilla Persona
https://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/Marketplace_payments#Refundshttps://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/Marketplace_payments#Refundshttps://marketplace.firefox.com/https://marketplace.firefox.com/https://marketplace.firefox.com/https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Marketplace_Paymentshttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Marketplace_Paymentshttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Marketplace_Paymentshttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Validating_a_receipthttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Validating_a_receipthttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Validating_a_receipthttps://developers.google.com/in-app-payments/docs/https://developers.google.com/in-app-payments/docs/https://developers.google.com/in-app-payments/docs/https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframehttps://developers.google.com/in-app-payments/docs/https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Validating_a_receipthttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Marketplace_Paymentshttps://marketplace.firefox.com/https://developer.mozilla.org/en-US/docs/Web/Apps/FAQs/Marketplace_payments#Refunds


30/30

o The buyer completes the purchase The app receives a JavaScript callback when the buyer closes the window The app server receives a signed POST request with a Mozilla transaction ID

indicating that the purchase was completed successfully

The Firefox Marketplace provides a JavaScript utility library to aid in this process.

TheIn-App Payments FAQprovides a wealth of information on how in-app payments work

and sample code for implementation. Keep this reference handy as the in-app payment

process is currently in an experimental state.

Create your app!

Using open Web technologies to create rich, powerful applications for numerous devices is

a fun, rewarding, and potentially profitable process. The open Web provides the tools

needed to make app creation possible, while Mozilla provides an excellent marketplace for

showcasing and distributing your app. Use the information provided in this document to

create your incredible app and share it with the world!

You can see a live demonstration of the app we created in this tutorial by visiting

AreaTweet.com.Want to install it on your desktop or mobile device? You candownload it

for freein the Firefox Marketplace!
https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/In-app_paymentshttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/In-app_paymentshttps://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/In-app_paymentshttp://areatweet.com/http://areatweet.com/https://marketplace.firefox.com/app/area-tweet/https://marketplace.firefox.com/app/area-tweet/https://marketplace.firefox.com/app/area-tweet/https://marketplace.firefox.com/app/area-tweet/https://marketplace.firefox.com/app/area-tweet/https://marketplace.firefox.com/app/area-tweet/http://areatweet.com/https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/In-app_payments

Documents

General App Development Tutorial