Mobile-Web-App

Monday, March 12, 2012

HTML5: input with datalist

Example of input with datalist

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 input</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 input</h1>

<datalist id="weekday">
 <option value="Sunday" label="SUN">
 <option value="Monday" label="MON"/>
 <option value="Tuesday" label="TUES"/>
 <option value="Wednesday" label="WED"/>
 <option value="Thursday" label="THUR"/>
 <option value="Friday" label="FRI"/>
 <option value="Saturday" label="SAT"/>
</datalist>

<label for="dayofweek">Day of week</label>
<input id="dayofweek" list="weekday"></input>

</body>
</html>

textarea with spell check

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 input</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 input</h1>

<p>
<label for="nospellcheck">Without Spell Check</label>
<textarea id="nospellcheck" spellcheck="false"></textarea>
</p>
<p>
<label for="withspellcheck">With Spell Check</label>
<textarea id="withspellcheck" spellcheck="true"> </textarea>
</p>

</body>
</html>

Easy display value of slider in HTML5

In HTML5 we can display a slider as <input> with type="range". By default, there are no display for the select value. It's a easy way to add a <output> to update with the slider input.
(Not all browser supper slider input currently!)

Easy display value for of slider in HTML5, run at Google Chrome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 input</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 input</h1>

<label for="rangeinput">Range</label>
<input id="rangeinput" type="range" min="0" max="10" value="5" onchange="rangevalue.value=value"></input>
<output id="rangevalue">5</output>

</body>
</html>

Sunday, March 11, 2012

HTML/Javascript: input to load multiple file

Example of using HTML code of <input> with type="file" and multiple to open multiple files.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML file</title>

<script>
function fileSelected(filelist){

 var ulist = document.getElementById("unorderedlist");

 for(var i = 0; i < filelist.size; i++){
  var li = document.createElement("li");
  li.innerHTML = filelist.files[i].name;
  ulist.appendChild(li);
 }

}
</script> 
 
</head>
<body>

<p>
<input id="fileinput" type="file" name="filechooser" size="10" accept="audio/*" multiple onchange="fileSelected(this)"></input>
</p>
<p>
<ul id="unorderedlist"></ul>
</p>

</body>
</html>

Saturday, March 10, 2012

Introducing HTML5 Game Development

Making video games is hard work that requires technical skills, a lot of planning, and—most critically—a commitment to completing the project. With this hands-on guide, you’ll learn step-by-step how to create a real 2D game from start to finish. In the process, you’ll use Impact, the JavaScript game framework that works with HTML5’s Canvas element.

Not only will you pick up important tips about game design, you’ll also learn how to publish Impact games to the Web, desktop, and mobile—including a method to package your game as a native iOS app. Packed with screen shots and sample code, this book is ideal for game developers of all levels.

Set up your development environment and discover Impact’s advantages
Build a complete game with core logic, collision detection, and player and monster behavior
Learn why a game design document is critical before you start building
Display and animate game artwork with sprite sheets
Add sound effects, background music, and text
Create screens to display stats and in-game status
Prepare to publish by baking your game files into a single file

About the Author

For more than 13 years, Jesse Freeman has been on the cutting edge of interactive development with a focus on the Web and mobile platforms. As an expert in his field, Jesse has worked for VW, Tommy Hilfiger, Heavy, MLB, the New York Jets, HBO, and many more. Jesse was a traditional artist for most of his life until making the transition into interactive art, and he has never looked back.

Jesse is a Technical Architect/Technology Evangelist at Roundarch and is an active leader in New York's developer community. He is also active in the online community as a writer for several development sites including Adobe Developer Connection, O'Reilly Media, Inc., and Activetuts+. He can be found on twitter at @jessefreeman. Jesse also speaks at conferences and does workshops, which you can find schedules for on his website at http://jessefreeman.com.

HTML/Javscript - Create List items dynamically

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML/Javscript - Create List items dynamically</title>

<script>

var montharray = new Array("January",
         "February",
         "March",
         "April",
         "May",
         "June",
         "July",
         "August",
         "September",
         "October",
         "November",
         "December");
         
var weekdayarray = new Array ("Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday");

function onloaded(){
 var ulist = document.getElementById("unorderedlist");
 var olist = document.getElementById("orderedlist");

 //Generate list items for <ul>
 for (var i = 0; i < montharray.length; i++) {
  var li = document.createElement("li");
  li.innerHTML = montharray[i];
  ulist.appendChild(li);
 }
 
 //Generate list items for <ol>
 for (var i = 0; i < weekdayarray.length; i++) {
  var li = document.createElement("li");
  li.innerHTML = weekdayarray[i];
  olist.appendChild(li);
 }
}
</script> 
 
</head>
<body onload="onloaded()">

<ul id="unorderedlist"></ul>
<ol id="orderedlist"></ol>

</body>
</html>

Friday, March 9, 2012

HTML/Javascript: load and play local mp3 on web page

The example below demonstrate how to load local mp3 on web page. In my own test, it can run on Google Chrome, not Firefox. And, it can play mp3 in current directory only.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML file</title>

<script>
function fileSelected(filelist){

 var fileinfo = 
  "<p>File name: " + filelist.files[0].name + "</p>" +
  "<p>File size: " + filelist.files[0].size + "</p>" +
  "<p>File type: " + filelist.files[0].type + "</p>"; 
  
    document.getElementById("result").innerHTML = fileinfo;
    document.getElementById("audiosource").setAttribute("src", filelist.files[0].name);
}
</script> 
 
</head>
<body>

<p>
<audio controls="controls" id="audiosource">
  <source type="audio/mp3"  />
Your browser does not support the audio element.
</audio>
</p>
<p>
<input id="fileinput" type="file" name="filechooser" size="10" accept="audio/*" onchange="fileSelected(this)"></input>
</p>
<p id="result"></p>

</body>
</html>