General App Development Tutorial Foundations of an HTML5 Web
Total Page:16
File Type:pdf, Size:1020Kb
General app development tutorial Introduction Unlike 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 the Firefox Marketplace! Tutorial steps 1. Foundations of an HTML5 Web app 2. Configuring your development environment 3. App design 4. App code 5. Creating the Area Tweet app 6. Debugging the app 7. Testing the app 8. Publishing the app 9. Maintaining the app 10. Profiting from your app 11. 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. HTML5 for content and structure HTML is used to create the content structure for the web application. New features in HTML5 include new <input> types, form validation support, media tags like <audio> and <video>, 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 style CSS 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 to animate elements, create precise gradients to avoid having to unnecessarily use images, and create media queries which 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 JavaScript provides the level of dynamism and user interaction for the web app. JavaScript lets you listen for and respond to user interactions, load content dynamically, and get access to device- specific features, like the Camera API and Geolocation 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 detection and 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 considerations Device 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 Mobile being 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 still study 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 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 jGestures exist to aid in gesture detection. Basic app design principles Regardless 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 widths when designing for multiple devices and/or multiple orientations Use vector graphics so that their dimensions may be elegantly adjusted between devices Don't assume features on 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 a search 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 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 code Outside 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's official mobile framework is jQuery Mobile. jQuery Mobile provides a unified, HTML5-based user interface system for all popular mobile device platforms. jQuery Mobile also provides a theme builder for application design as well as development. jQuery Mobile Blog jQuery Mobile API jQuery API Dojo Mobile Dojo Mobile is the Dojo Toolkit's mobile framework, boasting a series of flexible views and widgets, automatic device detection and themes, and more. The Dojo 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 of MooTools is called Moobile. Moobile provides a mobile application boilerplate as well as a host of simple mobile widgets. MooTools Mobile MooTools Documentation MooTools Forge 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 evaluate different 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 techniques CSS 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 maintain—a 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: 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, SASS and Stylus are 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 create linear and radial gradients with some simple CSS code: h1 { background-image: