Mobile-Web-App

Friday, December 13, 2013

Releasing HTML5 Games for Windows 8

Windows 8 presents an incredible opportunity for distributing and monetizing HTML5 games, and this guide shows how you can profit from it. You’ll learn everything you need to know about porting your original web-based JavaScript game to the new "touch-first" version of Windows, as well as several options for selling your game in Windows Store.

Windows 8 is a big leap forward for developers because it treats HTML5 as a first-class citizen, alongside C# and C++. Interactive development expert Jesse Freeman explains how Windows 8 works, gets you started with Visual Studio Express (it’s free!), and uses a case study to show you how to port an HTML5 game with ease.

Learn which games and JavaScript libraries work best on Windows 8
Adjust artwork for different screen resolutions and Windows 8 features
Accommodate mouse, keyboard, touch, and other game controls
Optimize your game to run well on any Windows 8 device
Understand the steps for publishing your game to Windows Store
Explore fixed price, trial mode, ad support, and in-app purchase options
Use a web-first workflow to ensure your game runs on many other platforms

Tuesday, December 3, 2013

Emulation in Chrome DevTools

You can now realistically emulate many device characteristics on desktop, saving you time and making your iteration loop much faster. You can emulate screen size, devicePixelRatio, and ❮meta viewport❯ with full touch event simulation. More at http://html5rocks.com/en/tutorials/developertools/mobile/

Sunday, December 1, 2013

Javascript exercise: duplicated variable name in global and local

This exercise show duplicated variable name in global and local:

my_var1 declared and defined outside function as global variable
my_var2 duplicated with local variable without defination.
my_var3 duplicated with local variable, load value before use.
my_var4 duplicated with local variable, load value after use

duplicated variable name in global and local

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile-Web-App</title>

<script>
var my_var1 = "my var 1";
var my_var2 = "my var 2";
var my_var3 = "my var 3";
var my_var4 = "my var 4";

var testjavascript = (function (){
 console.log("Test Start");
 
 var my_var2;
 var my_var3 = "my var define inside function before use";
 
 console.log("my_var1: " + my_var1);
 console.log("my_var2: " + my_var2);
 console.log("my_var3: " + my_var3);
 console.log("my_var4: " + my_var4);
 
 var my_var4 = "my var define inside function after use";
 
 console.log("Test End");
});

console.log("testjavascript() run after document loaded.");
window.onload = testjavascript();
</script>

    </head>
    <body>
        <h1>Mobile-Web-App</h1>
        <h2>http://mobile-web-app.blogspot.com/</h2>
    </body>
</html>

Javascript exercise: variable can be accessed before declared

This exercise show that we can access variable before declaration without error, what it return is undefined. But cannot access variable without declaration, it will stop the javascript.

variable can be accessed before declared

Example code:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile-Web-App</title>

<script>
var testjavascript = (function (){
 console.log("Test Start");
 console.log("use var before declaration: " + my_var);
 
 var my_var;
 console.log("use var after declaration: " + my_var);
 
 local_var = "Hello World";
 console.log("use var after value assigned: " + my_var);
 
 console.log("Un-declared var: " + another_var);
 
 console.log("Test End");
});
 
console.log("testjavascript() run after document loaded.");
window.onload = testjavascript();
</script>
    </head>
    <body>
        <h1>Mobile-Web-App</h1>
        <h2>http://mobile-web-app.blogspot.com/</h2>
    </body>
</html>

Wednesday, November 27, 2013

The Mobile Playbook, 2nd Edition - from Google

The Mobile Playbook is a resource guide from Google to help businesses win with mobile. It features insights, case studies and recommendations on how any business can operationalize mobile.

Tuesday, November 26, 2013

Add voice input to your web page, with one line of html only

(For Google Chrome) To add voice recognition function to your web page, simple add the html code:
<input x-webkit-speech>

Simple Web Speech API Demo

Example code:

<!DOCTYPE html>
<head>
<title>Mobile-Web-App - Simple Web Speech API Demo</title>
</head>
<body>
<h1>Mobile-Web-App - Simple Web Speech API Demo</h1>
<h3>my blog: Mobile-Web-App</h3>
<div><p><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></p></div>
<br/>
<input x-webkit-speech>
</body>
</html>

Test Simple Web Speech API Demo

tested with Google Chrome browser:

Not support at Microsoft Internet Explorer 11 and Firefox 25.0.1.

Sunday, November 24, 2013

Share your HTML pages in Google Drive to public

You can make your files/folders in Google Drive visible to public on web, so you can use your Google Drive as a simple web server.

To make it public:
- Login your Google Drive.
- Right click on the folder/file you want to share with public.
- Select Share... > Share...
- Change Who can access.
- Select Public on the web. So anyone on the Internet can find and access.
- Save.

Get the link of your HTML page:
- Right click on the file.
- Share... > Share...
- Copy the Link to share.
- Open the link in browser.
- Click Preview.
- A preview window will be opened, It's your taget link.

Try my shared HTML in Google Drive:
https://googledrive.com/host/0B69wuI993SmgUTBpdEJmS0dTRjA/testJQueryUI_Accordion.html