Mobile-Web-App

Thursday, July 19, 2012

YouTube Upload Widget for your website

The YouTube Upload Widget lets your website's visitors perform both webcam and file uploads to YouTube. The support for webcam uploads sets the upload widget apart from the other uploading options that the YouTube API supports. The widget uses HTML5's postMessage support to send messages back to your website regarding videos uploaded via the widget.

The YouTube Upload Widget is an experimental feature, which means that it is still in development and subject to change or even be removed without notice.

Link: YouTube Upload Widget

Wednesday, July 18, 2012

WebGL Beginner's Guide

This book is a step-by-step tutorial that includes complete source code for all of the examples covered. Every chapter builds on top of the previous one thereby giving the reader an immediate feeling of progression. Each block of code is explained, and 3D web development concepts are diagrammed and covered in detail. This book is written for JavaScript developers who are interested in 3D web development. A basic understanding of the DOM object model and the jQuery library is ideal but not required. No prior WebGL knowledge is expected.

Thursday, July 12, 2012

jQuery Mobile 1.1.1 released

This is our first maintenance release for version 1.1 and it’s chock full of bug fixes and improvements based on community feedback and testing.

The most notable changes in this release are speedier page transitions and tap responsiveness on longer pages, smoother transitions in Cordova, and more polished form elements.

Alongside this release, the ThemeRoller Mobile tool has been updated to make it easy to upgrade existing themes to 1.1.1. A new downloader builder tool is now released as a public alpha and allows you to build custom versions of jQuery Mobile 1.1.1 that only include the modules you need.

Source: http://jquerymobile.com/blog/2012/07/12/jqm-1-1-1/

Sunday, July 8, 2012

Create photo grid using css

First create a HTML with a series of picture without css.

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

</head>
<body>
<h1>Mobile-Web-App: CSS Exercise</h1>
<div id="photogrid"  style="width:600px;">
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
</div>

</body>
</html>

Modify the HTML with CSS, it's easy to create grid for the pictures.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: test css</title>
<style>

#photogrid{
 line-height: 0;
 -webkit-column-count: 6;
 -webkit-olumn-gap: 5px;
 -moz-column-count: 6;
 -moz-column-gap: 5px;
 column-count: 6;
 column-gap: 5px;
}
#photogrid img{
 width: 100%;
 height: auto;
 margin-bottom: 5px;
}

</style>
</head>
<body>
<h1>Mobile-Web-App: CSS Exercise</h1>
<div id="photogrid"  style="width:600px;">
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
 <img src="http://goo.gl/BlQEX"/>
</div>

</body>
</html>

Wednesday, July 4, 2012

Get screen density with JavaScript using window.devicePixelRatio DOM property

In mobile web app (specially in Android, various screen densities are provided), we can get screen density with JavaScript using window.devicePixelRatio DOM property.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">

<script>
function myOnLoad(){
 
 var devicePixelRatio = window.devicePixelRatio;
 eleRatio = document.getElementById("ratio");
 eleRatio.innerHTML = devicePixelRatio;
 
}

window.onload = myOnLoad;
</script> 

</head>
<body>
<h1>Mobile-Web-App: detect device pixel ratio</h1>

devicePixelRatio: <b id="ratio"></b>

</body>
</html>

Monday, July 2, 2012

Mozilla's Boot to Gecko Mobile Operating System

Mozilla tells us that all Android users (with unlocked bootloaders) will be able to install the operating system onto their phones. The video show a quick demo of Boot to Gecko on a Galaxy S II, which included peeks at the dialer, messaging system, system preferences.

Saturday, June 30, 2012

Mobile JavaScript Application Development: Bringing Web Programming to Mobile Devices

When developing apps for the latest smartphones, you’re faced with several vexing questions. How many platforms do you need to accommodate? What level of support do mobile browsers provide? To help you address these and many other key issues, this guide provides a hands-on tour of the most powerful JavaScript frameworks available today.

You’ll build sample apps with jQuery Mobile, Sencha Touch, and PhoneGap to learn the unique advantages—and disadvantages—of each framework. From there, you can determine which one is best for your project. This book is ideal for web developers familiar with JavaScript, HTML, and CSS.

Experience the simplicity of jQuery Mobile for building cross-browser applications
Learn how Sencha Touch’s architecture, widgets, and blazing-fast rendering engine makes it a good choice for enterprise software
Use PhoneGap to package your web app into a native iOS, Android, or Windows Phone application
Discover the impact of various HTML5 features on mobile app development
Pick up JavaScript productivity tips as you delve into its object orientation, closures, and coding conventions