Friday, August 31, 2012

HTML5 Canvas, fill background

In the example, the function resetCanvas() will fill background according to canvas size. Also, bind the "resize" event to resetCanvas() function using jQuery, such that when user re-size the window, the background always follow to new window size.

HTML5 Canvas, fill background


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

var canvas;
var context; 

$(window).bind("resize", resetCanvas);

function loadcanvas(){
 window.scrollTo(0, 1);
 resetCanvas();
}

function drawBackground(){

 context.fillStyle = "#505050";
 context.fillRect(0, 0, canvas.width, canvas.height);
 
}

function resetCanvas(){
 canvas = document.getElementById("mycanvas");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
 
 context = canvas.getContext("2d");
 
 drawBackground();
}

</script>
</head>
<body onload="loadcanvas();">

<canvas id="mycanvas">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Tuesday, August 28, 2012

Detect screen size using Javascript

Example to detect screen size using Javascript:

Detect screen size using Javascript


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Resize</title>
<script type="text/javascript">

function doOnLoad(){

 window.addEventListener(
  "resize", 
  function() {
   var orientation;
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;

   if(windowWidth > windowHeight){
    orientation = "Landscape";
   }else if(windowWidth < windowHeight){
    orientation = "Portrait";
   }else{
    orientation = "Square";
   }   
   
   document.getElementById("browserinfo").innerHTML 
    = orientation + " : " + windowWidth + " x " + windowHeight 
    + "<br/>Screen Size: " + screen.width + " x " + screen.height;
  }, 
  false);

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Resize</h1>
<div id="browserinfo"></div>
</body>
</html>


Monday, August 27, 2012

Detect orientation change using Javascript

Example to detect orientation change using Javascript in browser.

Detect orientation change using Javascript


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Orientation Change</title>
<script type="text/javascript">

function doOnLoad(){
 var supportOrientationChange = "onorientationchange" in window;
 
 if(supportOrientationChange){
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange supported";
  
  window.addEventListener(
   "orientationchange", 
   function() {  
    document.getElementById("browserinfo").innerHTML 
     = window.orientation + " : " + screen.width + " x " + screen.height;
    }, 
   false);
 }else{
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange NOT supported";
 }
 

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Orientation Change</h1>
<div id="browserinfo"></div>
</body>
</html>


Thursday, August 23, 2012

Free ebook download from Microsoft Press: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)

The second preview edition of “Programming Windows 8 Apps with HTML, CSS, and JavaScript” by Kraig Brockschmidt is available from Microsoft Press for free in pdf format. The book currently contains 12 chapters and it will be expanded and other ebook formats will be available with the complete book.  Sample code also can be downloaded.
Description
This book is about writing Metro style apps for Windows 8 using HTML5, CSS3, and JavaScript. Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring the details of those web technologies themselves.
The new chapters cover collection controls (everything you wanted to know about ListView!), layout (especially view states), commanding UI (app bars, message dialogs, and their friends), the all-important topic of managing state, a close look at input and sensors (a form of input, really), media, animations, and contracts (share, search, the file pickers, and contacts). The earlier preview chapters (1-4) have also been updated and refined.
Table of Contents
  • The Life Story of a Metro Style App: Platform Characteristics of Windows 8
  • Quickstart
  • App Anatomy and Page Navigation
  • Controls, Control Styling, and Basic Data Binding
  • Collections and Collection Controls
  • Layout
  • Commanding UI
  • State, Settings, Files, and Documents
  • Input and Sensors
  • Media
  • Purposeful Animations
  • Contracts

Download Link: http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx 


Wednesday, August 22, 2012

Google announced Octane: the JavaScript benchmark suite for the modern web

Google released Octane, a JavaScript benchmark suite that aims to measure a browser’s performance when running the complex and demanding web applications that users interact with daily.

overview of the new tests:
  • Box2DWeb runs a JavaScript port of a popular 2D physics engine that is behind many well-known simulations and web games.
  • Mandreel puts a JavaScript port of the 3D Bullet Engine to the test with a twist: The original C++ source code for the engine is translated to JavaScript by Onan Games’ Mandreel compiler, which is also used in countless web-based games.
  • Pdf.js is based on Mozilla’s PDF reader and shows how Javascript applications can replace complex native browser plug-ins. It measures how fast the browser decodes a sample PDF document.
  • GB Emulator is derived from an open source emulator of a famous game console running a 3D demo.
  • CodeLoad measures how quickly a JavaScript engine can bootstrap commonly used JavaScript libraries and start executing code in them. The source for this test is derived from open source libraries (Closure, jQuery).

Source: Chromium Blog - Octane: the JavaScript benchmark suite for the modern web

Sunday, August 19, 2012

Example to modify button style using CSS

modify button style using CSS


<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Button</title>

<style type="text/css">
button#cssbutton {
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F0F0F0), color-stop(1.0, #808080));
 border-radius: 15px;
 box-shadow: 0 0 4px #303030;
 width: 100%;
 padding: 5px;
 border: 1px solid black;
 
}
</style>
</head>
<body>
<button type="button">Simple Button</button>
<button id="cssbutton" type="button">Styled Button</button>
</body>
</html>



Force page scroll to top once page loaded

To force the web page scroll to top, you can call window.scrollTo(0, 1). In order to make it happen when page load, modify &lt;body&gt;:

<body onload="window.scrollTo(0, 1);">


Thursday, August 16, 2012

Introducing the Windows 8 platform


Windows 8 is Windows re-imagined. Join this session to learn about the new platform for building Windows 8 apps. Get an understanding of the platform design tenets, the programming language choices and the integration points with the operating system and with other apps.

Source: http://channel9.msdn.com/Events/Windows-Camp/Windows-8-Developer-Camp-Redmond/WIN8-CAMP-01

Saturday, August 11, 2012

Chrome Packaged Apps - A quick overview

Packaged apps deliver an experience as capable as a native app, but as safe as a web page. Just like web apps, packaged apps are written in HTML5, JavaScript, and CSS. But packaged apps look and behave like native apps, and they have native-like capabilities that are much more powerful than those available to web apps.

Know more: http://developer.chrome.com/apps

Chrome Packaged Apps - A quick overview



Friday, August 10, 2012

Smashing HTML5 (Smashing Magazine Book Series)


Welcome to HTML5 - the future of the Web
HTML5 is packed with great new features, including new content-specific elements, audio and video playback, canvas for drawing, and many others. But where to begin? With Smashing HTML5, you have everything you need to get up and running quickly.
Bill Sanders is a professional Web developer, information and interface designer, and instructor. His expertise and knowledge shared throughout Smashing HTML5 will help fast-track you toward building next-generation Web sites.
Smashing HTML5 provides comprehensive coverage - from how to get started with HTML5 to optimizing media on the Web. You will learn how to use text, graphics, audio, video, and navigation in HTML5 Web pages running in compatible browsers.
You will also learn how to:
  • Work with HTML5 tags
  • Design page structure
  • Make site navigation easy for your audience
  • Integrate media including video into HTML5 pages
  • Harness the power of the HTML5 canvas
  • Use HTML 5 forms
  • Create interactivity, store information, and much more
Smashing HTML5 is an essential read for Web designers and developers looking to transition to HTML5. With this book, you'll be able to create Web pages that not only look great, but also take advantage of the new features HTML5 has to offer.


Thursday, August 9, 2012

Simple example using WebGL to clear color

<html>
<head>
 <title>Mobile-Web-App: test WebGL</title>
 <script type="text/javascript" >
  var webGl = null;
  
 function doOnLoad(){
   var myCanvas = document.getElementById("mycanvas");
   
   var glContextName = 
    ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
   
   for(var i = 0; i < glContextName.length; ++i){
    try{
     webGl = myCanvas.getContext(glContextName[i]);
    }catch(e){
    }
    
    if(webGl){
     break;
    }
   }
   
   if(webGl != null){
    webGl.clearColor(1.0, 0.1, 0.5, 1.0);
    webGl.clear(webGl.COLOR_BUFFER_BIT);
   }else{
    alert("Sorry! WebGL not supported.");
   }
   
   
 }  
  
 </script>
</head>
<body onLoad = "doOnLoad()">
<canvas id = "mycanvas" style="border: 5px solid;" width="250" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>

</body>
</html>

Simple example using WebGL to clear color, run on Firefox at Galaxy Nexus (Android 4.0.4)

In case of WebGL not supported

Tuesday, August 7, 2012

Video tutorial - Javascript Fundamentals: Development for Absolute Beginners

Over the course of 21 episodes, you will paught the fundamentals of Javascript programming. Tune in to learn concepts applicable to web based videogames, enhanced user interfaces, and dynamic web pages.

Walk you through getting the tools, writing code, and much more! Each concept is broken into its own video so you can search for and focus on the information you need.

01 - Series Introduction

In this introductory video, Bob sets some high-level goals and explains how JavaScript is used in web development as well as how to get the most out of this video series.

02 - Writing your First JavaScript Application

We get started by setting up our development environment and an HTML5 template webpage before building a simple 'Hello World' example. Then we create a more interesting example discussed at length in the next lesson.

03 - Dissecting the First JavaScript Application You Wrote

In the previous video, Bob created an interesting JavaScript example, and in this video he walks through the example line by line, explaining the purpose of the various key words and operators and providing a general overview of topics for the next eight lessons.

04 - Writing JavaScript in Visual Web Developer Express Edition

Before discussing JavaScript proper, Bob demonstrates how to ease JavaScript development by downloading, installing, and utilizing the free Visual Web Developer Express Edition from Microsoft.

05 - JavaScript Variables, Types, Operators, and Expressions

Most programming languages have a notion of variables, data types, and syntax rules including statements, expressions, operators, keywords, and operands. In this video, Bob provides a quick overview of the most important topics related to basic syntax rules. He explains how JavaScript variables and types are different than those in other programming languages, explaining the purpose of "undefined." Finally, he shows how to use escape sequences in string literals.

06 - Conditional Logic in JavaScript

In this lesson, Bob demonstrates the use of the if ... else if statement, the ternary (or conditional) operator, and the case ... select statements. Along the way, we learn about the && and || operators as well as the Date object in JavaScript.

07 - JavaScript Functions

Functions are central to JavaScript, much in the same way classes are central to Object Oriented Programming languages like Visual Basic or C#. In this lesson, Bob demonstrates the basics of creating and calling functions, passing arguments, using the arguments object, and creating function literals as well as anonymous functions.

08 - JavaScript Arrays
You can think of arrays as variables that hold other variables. In this lesson, Bob demonstrates how to create, initialize, and retrieve elements of arrays using indexes. He also demonstrates how to loop through all elements in an array (foreshadowing the topic of the next lesson) and how to create associative arrays.

09 - Looping Statements in JavaScript

Looping (or rather, iteration) statements allow your application to individually access each item in an array or other collection of object properties. In this lesson we demonstrate four different looping statements pointing out the nuanced differences between each: the while, do ... while, for, and for ... in.

10 - Understanding Function versus Global Scope

One often misunderstood topic that leads to errors in programs is how JavaScript treats variables declared inside and outside of functions. This video explains the ramifications of variable scope at both the functional and global levels. For developers coming from other programming languages, it demonstrates how your familiarity with block scope will lead you to erroneous conclusions about JavaScript's functional and global scope. Also briefly discussed is the notion of hoisting in JavaScript.

11 - Working with External JavaScript Files

Up to now, we've been mixing our JavaScript with our HTML5 code. However, to write better organized and more accessible applications, we must learn a new technique -- how (and why) to reference external JavaScript files.

12 - Organizing and Simplifying JavaScript with Object Literals

Developers coming from Object Oriented Programming backgrounds may notice similar constructs (objects, the new keyword, etc.), but in JavaScript these ideas are implemented much differently. This video demonstrates the creation of simple objects called "object literals" to keep related properties and functions (methods) together in one structure. Finally, Bob demonstrates using constructors and the new keyword to show how different these ideas are from other programming languages.

13 - Understanding the Document Object Model

In this video, we discuss the Document Object Model, explaining how the web browser parses and creates the DOM from HTML5 code, the purpose of the window and document objects, the built-in API functions for accessing parts of the DOM, and more.

14 - Getting Started with jQuery

We've said several times how jQuery helps smooth over JavaScript's rough edges. In this lesson, Bob shows how to include and reference the jQuery library in your web page as well as explaining how to get a reference to the jQuery object, demonstrating the use of the .ready method as a means of bootstrapping the onload event, and more.

15 - jQuery Selectors

jQuery utilizes CSS3 style selectors to access DOM objects. This video demonstrates both simple and more advanced uses of jQuery selectors to help you get creative when selecting DOM elements as well as discussing where to go when you want to pack more selectors into your arsenal.

16 - jQuery Events

This lesson shows how to utilize jQuery Events to create a simple game by writing and attaching anonymous functions to events fired on a web page.

17 - Installing and Utilizing jQuery Plugins
jQuery Plugins are like mini-libraries of code that provide some extra functionality. There are thousands of jQuery Plugins available—most of them provide some user interface widget to display information or retrieve input in creative ways. In this lesson, Bob demonstrates the use of the jQueryUI Plugins from the jQuery team as a means of showing how to include and use jQuery Plugins in your web applications.

18 - Unobtrusive JavaScript

Writing unobtrusive JavaScript is considered a best practice by most developers. In this lesson Bob explains some core ideas as well as three techniques that can help you write code to make your JavaScript application more accessible and maintainable while avoiding errors.

19 - Using jQuery to Retrieve JSON via AJAX

AJAX allows web pages and web servers to communicate without requiring a full page refresh. JSON is a data format that closely resembles object literals in JavaScript. Most modern web applications utilize some form of AJAX and in this lesson we demonstrate how easy it is to do so via jQuery.

20 - Fundamentals of JavaScript Closures

Closures are a slightly advanced topic, but are at the core simply a means by which you can marry a function along with its environment variables and input parameters. This video demonstrates the basics of closures as a first step toward mastering this important structure in JavaScript.

21 - Series Wrap-Up

In this last video, Bob provides a road-map of additional topics that you may want to investigate in order to round out your budding expertise in JavaScript. Bob also suggests (since many people ask) a list of books that might prove helpful as you to take your JavaScript knowledge to the next level.


Sunday, August 5, 2012

Apply border on canvas

Apply border on canvas


<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 canvas {border:3px dotted blue;}
 </style>
</head>
<body>
<center>

<canvas width="250" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>

<canvas style="border: 5px solid;" width="250" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>

</body>
</html>


Thursday, August 2, 2012

jQuery Mobile 1.2.0 Alpha released

The jQuery Mobile 1.2.0 alpha released. This release brings a new popup widget, an autodivider option for listviews, and a host of enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try the demo now!

jQuery Mobile web site: http://jquerymobile.com/

jQuery Mobile 1.2.0 Alpha



Wednesday, August 1, 2012

Programming in Go: Creating Applications for the 21st Century



Your Hands-On Guide to Go, the Revolutionary New Language Designed for Concurrency, Multicore Hardware, and Programmer Convenience

Today’s most exciting new programming language, Go, is designed from the ground up to help you easily leverage all the power of today’s multicore hardware. With this guide, pioneering Go programmer Mark Summerfield shows how to write code that takes full advantage of Go’s breakthrough features and idioms.

Both a tutorial and a language reference, Programming in Go brings together all the knowledge you need to evaluate Go, think in Go, and write high-performance software with Go. Summerfield presents multiple idiom comparisons showing exactly how Go improves upon older languages, calling special attention to Go’s key innovations. Along the way, he explains everything from the absolute basics through Go’s lock-free channel-based concurrency and its flexible and unusual duck-typing type-safe approach to object-orientation.

Throughout, Summerfield’s approach is thoroughly practical. Each chapter offers multiple live code examples designed to encourage experimentation and help you quickly develop mastery. Wherever possible, complete programs and packages are presented to provide realistic use cases, as well as exercises. Coverage includes

  • Quickly getting and installing Go, and building and running Go programs
  • Exploring Go’s syntax, features, and extensive standard library
  • Programming Boolean values, expressions, and numeric types
  • Creating, comparing, indexing, slicing, and formatting strings
  • Understanding Go’s highly efficient built-in collection types: slices and maps
  • Using Go as a procedural programming language
  • Discovering Go’s unusual and flexible approach to object orientation
  • Mastering Go’s unique, simple, and natural approach to fine-grained concurrency
  • Reading and writing binary, text, JSON, and XML files
  • Importing and using standard library packages, custom packages, and third-party packages
  • Creating, documenting, unit testing, and benchmarking custom packages