i can code! for Web.: June 2011

Wednesday, June 22, 2011

Google Apps Script

Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services.

With Google Apps Script you can:

Automate repetitive business processes (e.g. expense approvals, time-sheet tracking, ticket management, order fulfillment, and much more)
Link Google products with third party services (e.g. send custom emails and a calendar invitation to a list from a MySQL database)
Create custom spreadsheet functions
Build and collect user inputs through rich graphics interfaces and menus (e.g. a company could power an internal application for purchasing office supplies where users could shop via a customized menu interface)

http://code.google.com/googleapps/appsscript/

Google I/O 2011: Developing Apps, Add Ins and More with Apps Script

This intermediate talk focuses on some less well known uses of Apps Script - building Add Ins for Google Apps, standalone applications and more! We'll focus on rapid application development features, and demonstrate deployment to several targets.

Monday, June 20, 2011

Aptana Studio

The current version, Aptana Studio 3, is a open source development tool for the open web.

Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered!

Support Windows, Mac OS X and Linux.

Core Features include:

HTML, CSS, and JavaScript Code Assist Aids in authoring of HTML, CSS, JavaScript, PHP, and Ruby. Supports the latest HTML5 specifications. Includes information about the level of support for each element in the major web browsers.
Deployment Wizard Support for one-shot as well as keep-synchronized setups. Multiple protocols including FTP, SFTP, FTPS and Capistrano. Ability to automatically publish your Ruby & Rails applications to hosting services such as Heroku and Engine Yard.
Integrated Debugger Set breakpoints, inspect variables, control execution. The integrated Ruby & Rails debugger helps you squash those bugs. (JavaScript debugging coming soon.)
Git Integration Easily put your projects under git source code control. Collaborate with team members thru merge, pull and push actions to remote repositories such those hosted on Github. Facilitates git-based deployments.
Built-in Terminal Quickly access a command line terminal for execution of operating system commands and language utilities such as gem, rake, etc.
IDE Customization Setup your development environment exactly the way you want it by extending the core capabilities through scripting of custom commands. Studio ships with hundreds of commands but always presents them in context based on the type of file you are editing.
...

Web Site: http://aptana.com/

Related: How to Add code assist for jQuery in Aptana

Thursday, June 16, 2011

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition()

The post "Simple Geolocation API demo" show how to get one-shot position requests using Geolocation API, navigator.geolocation.getCurrentPosition(). We can get repeated position updates using navigator.geolocation.watchPosition().

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function htmlonload(){


if (window.navigator.geolocation) {
 navigator.geolocation.watchPosition(successCallback, errorCallback);
} else {
 alert("Sorry! your browser does not support Geolocation API.");
}
}

function successCallback(position){
var msg ="";

msg += "Latitude: " + position.coords.latitude + "<br/>";
msg += "Longitude: " + position.coords.longitude + "<br/>";
msg += "Accuracy: " + position.coords.accuracy + "<br/>";
msg += "@" + position.timestamp;

  changeText("MyText", "My Location: " + msg);
}

function errorCallback(error) {
changeText("MyText", "Error: " + error);
}

function changeText(id, text){
document.getElementById(id).innerHTML = text;

}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body onload="htmlonload();">
<h1>Simple Geolocation API demo</h1>
<div id="MyText">Waiting...</div>

</body>
</html>

Get repeated position updates using Geolocation API, navigator.geolocation.watchPosition(), run on Android device

Tuesday, June 14, 2011

Mobile optimized HTML with meta viewport

Simple HTML with <meta name="viewport"> tag to make a web page optimized for mobile device.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<title>Test viewport</title>
</head>
<body>

<h1>Test: with viewport on mobile device</h1>


</body>
</html>

With <meta name="viewport"> tag

Without <meta name="viewport"> tag

Javascript to change text

Example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function htmlonload(){
 changeText("MyText", "text changed");
}

function changeText(id, text){
 document.getElementById(id).innerHTML = text;
}

</script>
<meta charset="UTF-8">
<title>Test Text: Javascript to change text</title>
</head>
<body onload="htmlonload();">
<h1>Test Text: Javascript to change text</h1>
<div id="MyText">Hello All</div>

</body>
</html>

Output:

YouTube Data API

If you’re just getting started with the YouTube Data API and want an overview of what it offers, or if you have a particular interest developing apps for content curation, please do check out the session video embedded!

Sunday, June 12, 2011

Get details of PositionError object

PositionError object defined at W3C Geolocation API, it hold properties of code and message of the error.

The code attribute must return the appropriate code from the following list:

PERMISSION_DENIED (numeric value 1)
The location acquisition process failed because the application origin does not have permission to use the Geolocation API.
POSITION_UNAVAILABLE (numeric value 2)
The position of the device could not be determined. For instance, one or more of the location providers used in the location acquisition process reported an internal error that caused the process to fail entirely.
TIMEOUT (numeric value 3)
The length of time specified by the timeout property has elapsed before the implementation could successfully acquire a new Position object.

The message attribute must return an error message describing the details of the error encountered. This attribute is primarily intended for debugging and developers should not use it directly in their application user interface.

example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
 alert("Sorry! your browser does not support Geolocation API.");
}

function successCallback(position){
 var msg ="";

 msg += "Latitude: " + position.coords.latitude + "\n";
 msg += "Longitude: " + position.coords.longitude + "\n";
 msg += "Accuracy: " + position.coords.accuracy;

 alert(msg);
}

function errorCallback(error) {
 switch (error.code) {
  case error.PERMISSION_DENIED:
  alert("PERMISSION DENIED: " + error.message);
  break;
 case error.POSITION_UNAVAILABLE:
  alert("POSITION UNAVAILABLE: " + error.message);
  break;
 case error.TIMEOUT:
  alert("TIMEOUT: " + error.message);
  break;
 }
}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body>
<h1>Simple Geolocation API demo</h1>


</body>
</html>

output:

Saturday, June 11, 2011

Simple Geolocation API demo, one-shot position requests.

It's a simple HTML with Javascript to get user current position using W3C Geolocation API.

Geo.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
alert("Sorry! your browser does not support Geolocation API.");
}

function successCallback(position){
var msg ="";

msg += "Latitude: " + position.coords.latitude + "\n";
msg += "Longitude: " + position.coords.longitude + "\n";
msg += "Accuracy: " + position.coords.accuracy;

alert(msg);
}

function errorCallback(error) {
alert(error);
}

</script>
<meta charset="UTF-8">
<title>Simple Geolocation API demo</title>
</head>
<body>
<h1>Simple Geolocation API demo</h1>


</body>
</html>

Result:
Run in Chrome under Ubuntu Linux on desktop PC - function errorCallback() is called with error of PositionError! (Refer to Get details of PositionError object)

Fail to run Geolocation API on desktop running Chrome

Run in Opera mobile on Android phone - function successCallback() is called with my position.
(To test the HTML on Android mobile, simple copy the HTML file to SD Card, and open with browser)

W3C Geolocation API

W3C Geolocation API specification defines an API that provides scripted access to geographical location information associated with the hosting device.

link:
- http://www.w3.org/TR/geolocation-API/

next:
- A Simple Geolocation API demo

Tuesday, June 7, 2011

World IPv6 Day, less than 24hr from now

Less than 24 hours from now, at midnight UTC on June 8 (Tuesday afternoon in the U.S., Wednesday morning in Asia), all the participants, more than 400 organizations, will enable IPv6 on their main websites for 24 hours. For Google, this will mean virtually all our services, including Search, Gmail, YouTube and many more, will be available over IPv6.

In all likelihood, you (and me) won’t even notice the test. The vast majority (99.95%) of people will be able to access services without interruption: either they’ll connect over IPv6, or their systems will successfully fall back to IPv4. However, as with any next-generation technology, there may be teething pains. it is estimated that 0.05% of systems may fail to fall back to IPv4, so some people may find Google, Facebook, Yahoo, Bing and other participating websites slow or unresponsive on World IPv6 Day. This is often due to misconfigured or misbehaving home networking equipment, such as home routers, that can make a computer think it has IPv6 connectivity when in fact it’s not working.

know more: Official Google Blog

Sunday, June 5, 2011

Mongoose: a easy web server

Mongoose is easy to use web server. It also can be used as embedded web server library to provide a web interface to applications.

Mongoose executable does not depend on any external library or configuration. If it is copied to any directory and executed, it starts to serve that directory on port 8080 (so to access files, go to http://localhost:8080). If some additional config is required - for example, different listening port or IP-based access control, then a mongoose.conf file with respective options can be created in the same directory where executable lives. This makes Mongoose perfect for all sorts of demos, quick tests, file sharing, and Web programming.

Features

Crossplatform - works on Windows, MacOS and most flavors of UNIX
CGI, SSL, SSI, Digest (MD5) authorization, resumed download, aliases
IP-based ACL, Windows service, GET, POST, HEAD, PUT, DELETE methods
Small footprint: executable size is 40 kB on Linux 2.6 i386 system
Embeddable with simple and clean API. Source is in single .c file to make things easy
Python bindings

Project Home:
- Mongoose - easy to use web server - Google Project Hosting

Saturday, June 4, 2011

PhoneGap: Open Source Mobile Framework support iOS, Android, Blackberry, WebOS amd Symbian.

PhoneGap is an HTML5 app platform that allows developers to author native apps with web technologies and get access to APIs and app stores. It leverages web technologies; such as HTML and Javascript.

Build apps once with web-standards: base on HTML5, Javascript.
Wrap it with PhoneGap: using the free open source framework or PhoneGap build to get access to native APIs.
Deploy to mutiple platforms: bridge web apps and mobile devices.

- http://www.phonegap.com/

Friday, June 3, 2011

JavaScript: Alert

example:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 alert("Hello, i can code!");
</script>
<meta charset="UTF-8">
<title>JavaScript: Alert</title>
</head>
<body>
<h1>JavaScript: Alert</h1>


</body>
</html>

HTML5/CSS3: Color with transparency, or opacity

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
 background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png");
}

.hsla_270_100_10_50 {
 color:hsla(270, 100%, 10%, 0.5);
}
.hsla_270_100_50_50 {
 color:hsla(270, 100%, 50%, 0.5);
}

.hsl_270_100_10 {
 color:hsl(270, 100%, 10%);
}
.hsl_270_100_50 {
 color:hsl(270, 100%, 50%);
}

.rgb_255_0_0{
 color:rgb(255, 0, 0);
}

.rgba_255_0_0_50{
 color:rgba(255, 0, 0, 0.5);
}

</style>
<meta charset="UTF-8">
<title>HTML5/CSS3: Color with transparency, or opacity</title>
</head>
<body>
<h1 class="hsl_270_100_10">color:hsl(270, 100%, 10%);</h1><h1 class="hsla_270_100_10_50">color:hsla(270, 100%, 10%, 0.5);</h1>
<h1 class="hsl_270_100_50">color:hsl(270, 100%, 50%);</h1><h1 class="hsla_270_100_50_50">color:hsla(270, 100%, 50%, 0.5);</h1>
<h1 class="rgb_255_0_0">color:rgb(255, 0, 0);</h1><h1 class="rgba_255_0_0_50">color:rgba(255, 0, 0, 0.5);</h1>

</body>
</html>

HTML5/CSS3: Color with transparency, or opacity

CSS3 color using hsl

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hsl_0_100_10 {
 color:hsl(0, 100%, 10%);
}
.hsl_0_100_50 {
 color:hsl(0, 100%, 50%);
}
.hsl_0_100_90 {
 color:hsl(0, 100%, 90%);
}

.hsl_90_100_10 {
 color:hsl(90, 100%, 10%);
}
.hsl_90_100_50 {
 color:hsl(90, 100%, 50%);
}
.hsl_90_100_90 {
 color:hsl(90, 100%, 90%);
}

.hsl_180_100_10 {
 color:hsl(180, 100%, 10%);
}
.hsl_180_100_50 {
 color:hsl(180, 100%, 50%);
}
.hsl_180_100_90 {
 color:hsl(180, 100%, 90%);
}

.hsl_270_100_10 {
 color:hsl(270, 100%, 10%);
}
.hsl_270_100_50 {
 color:hsl(270, 100%, 50%);
}
..hsl_270_100_90 {
 color:hsl(270, 100%, 90%);
}
</style>
<meta charset="UTF-8">
<title>CSS Color using hsl</title>
</head>
<body>
<p class="hsl_0_100_10">color:hsl(0, 100%, 10%);</p>
<p class="hsl_0_100_50">color:hsl(0, 100%, 50%);</p>
<p class="hsl_0_100_90">color:hsl(0, 100%, 90%);</p>

<p class="hsl_90_100_10">color:hsl(90, 100%, 10%);</p>
<p class="hsl_90_100_50">color:hsl(90, 100%, 50%);</p>
<p class="hsl_90_100_90">color:hsl(90, 100%, 90%);</p>

<p class="hsl_180_100_10">color:hsl(180, 100%, 10%);</p>
<p class="hsl_180_100_50">color:hsl(180, 100%, 50%);</p>
<p class="hsl_180_100_90">color:hsl(180, 100%, 90%);</p>

<p class="hsl_270_100_10">color:hsl(270, 100%, 10%);</p>
<p class="hsl_270_100_50">color:hsl(270, 100%, 50%);</p>
<p class="hsl_270_100_90">color:hsl(270, 100%, 90%);</p>

</body>
</html>

Using simple color in CSS3

example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
 background-color:rgb(33.3%,33.3%,33.3%);
}
h1 {
 background-color:rgb(45%,45%,45%);
 color:rgb(100%,100%,100%);
}
</style>
<meta charset="UTF-8">
<title>CSS Color</title>
</head>
<body>
<h1>CSS Color</h1>
http://icancode-4-web.blogspot.com/

</body>
</html>

Wednesday, June 1, 2011

YouTube's iframe Player

Google I/O 2011: YouTube's iframe Player: The Future of Embedding

Jeffrey Posnick, Jarek Wilkiewicz, Greg Schechter

YouTube players allow for video playback in web applications. The latest YouTube's embedded iframe player supports both Flash and HTML5 video and exposes a rich API which lets you control the YouTube playback experience. We'll give you the details on how the API was developed, and show you how it can power the videos on your own website.

Set Width and Height of HTML5 embedded Video

example:

<video src="http://people.opera.com/shwetankd/webm/sunflower.webm"
 controls autoplay loop> 
<p>Your browser doesn't support WebM format.</p> 
</video> 
<video src="http://people.opera.com/shwetankd/webm/sunflower.webm"
 controls autoplay loop width="320" height="240"> 
<p>Your browser doesn't support WebM format.</p> 
</video>

Set Width and Height of HTML5 embedded Video