Mobile Web Best Practices

The document "Mobile Web Best Practices 1.0" of W3C Recommendation specifies Best Practices for delivering Web content to mobile devices. The principal objective is to improve the user experience of the Web when accessed from such devices.

The recommendations refer to delivered content and not to the processes by which it is created, nor to the devices or user agents to which it is delivered.

It is primarily directed at creators, maintainers and operators of Web sites. Readers of this document are expected to be familiar with the creation of Web sites, and to have a general familiarity with the technologies involved, such as Web servers and HTTP. Readers are not expected to have a background in mobile-specific technologies.

Visit: http://www.w3.org/TR/2008/REC-mobile-bp-20080729/

Mobile Web Best Practices 1.0

Getting started with the Google Maps SDK for iOS

This is a three part series to introduce the Google Maps SDK for iOS.

The series covers:
1) Setting up your development environment
2) Getting and testing an API key
3) Creating your first application

HTML5 iPhone Web Application Development

HTML5 iPhone Web Application Development

HTML5 iPhone Web Application Development

An introduction to web-application development for mobile within the iOS Safari browser with this book and ebook

Overview

• Simple and complex problems will be covered with examples and resources that backup the approach and technique.
• Real world solutions that are broken down for multiple target audiences; from beginner developers to technical architects.
• Learn to build true web applications using the latest industry standards for iOS Safari.

In Detail

Create compelling web applications specifically tailored for distribution on iOS Safari. Work through real world examples with references, and in-depth discussions on the approach; including its benefits and drawbacks.

"HTML5 iPhone Web Application Development" strives to teach all levels of developers, beginners and professionals, the process of creating web applications for iOS Safari. Utilizing current industry standards for frontend development, learn to take advantage of HTML5, CSS3 and JavaScript to create compelling software.

Start with reviewing current industry standards for frontend development, and end with creating a native application using the same codebase.

Your journey will begin with an overview of current industry standards for frontend technology, quickly moving to solve real world issues; from creating a resizable or responsive gallery, to creating a single page application that utilizes the popular Backbone.js framework.

"HTML5 iPhone Web Application Development" aims to make you an expert in developing web applications for the iOS Safari platform.

What you will learn from this book

• Explore exciting HTML5 features such as Geolocation and localStorage
• Responsive design implementation
• Native application development using PhoneGap
• Get to grips with current industry standards
• Develop touch-based interactivity
• Learn about Safari specific UI enhancements
• Find solutions to every day real world problems

Approach

Presented in an easy to follow, step by step tutorial format, this is your guide to web application development for the iOS Safari

Who this book is written for

This book was meant for you! From the beginner developer to chief technology officer, this book aims to make you an expert in the field of web application development for iOS Safari. Familiarity with HTML, CSS and JavaScript are greatly encouraged but if you’re looking to dive right in and find solutions to everyday problems and more, then this book is for you.

Simulate Touch events on Google Chrome Desktop

To simulate Touch Events on Google Chrome Desktop:

Open Developer Tools by clicking on Chrom's Menu, select Tools, Developer Tools.

Click on the Setup icon.

Select Overrides Settings, scroll down to enable Emulate touch events.

Firefox OS Demo

Firefox OS Demo
Find out more: www.mozilla.com/firefoxos

Hello World! for Firefox OS WebApps

To build a simple Hello World run on Firefox OS:

Hello World run on Firefox OS Emulator

• Create a working directory to hold your source code.
• Create a HTML file, named index.html, in the working directory.
  

  <html>
  <header>
   <title>Mobile-Web-App</title>
  </header>
  <body>
   <p>Hello! from <a href="http://mobile-web-app.blogspot.com/">Mobile-Web-App</a>.
  </body>
  </html>
  

• Create another file, "manifest.webapp".
  

  { "name": "Hello Firefox OS",
   "description": "Hello from Mobile-Web-App",
   "launch_path": "/index.html"
  }
  

Run with Firefox OS Simulator on desktop: start Firefox browser, start Firefox OS Simulator by Tools from Firefox menu -> Web Developer -> Firefox OS Simulator.

Click on Add Directory button, browse to select your manifest.webapp. The Emulator will start and load your WebApp.

Alternative, you can click the Simulator Stopped if it is not yet started. Then click Connect button.

Firefox OS Simulator

Firefox OS Simulator is a test environment for Firefox OS. Use it to test your apps in a Firefox OS-like environment that looks and feels like a mobile phone. After installing it, go to Web Developer > Firefox OS Simulator to access its features.

Visit https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/ using Firefox Browser to install Firefox OS Simulator Extension.

After installed, you can open Firefox OS Simulator Dashboard by selecting Tools from Firefox menu -> Web Developer -> Firefox OS Simulator.

Firefox OS Simulator Dashboard

Next: Hello World! for Firefox OS WebApps