Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language. Android offers a custom plugin for the Eclipse IDE, called Android Development Tools (ADT), that is designed to give you a powerful, integrated environment in which to build Android applications.

Android 2.1 on Emulator

This tutorial is intended for new developers that want to start developing Android applications using Eclipse IDE. To start develop, you have to install Java platform (JDK)  first and then  install the Eclipse,  Android SDK and the  Android Development Tool (ADT) plugin for Eclipse.

Download and Install JDK

Download and install the latest JDK (JDK 1.6 Update 18) from JDK download page

Download and Install Eclipse IDE

Download and install Eclipse Classic 3.5 (Galileo) from Eclipse download page. You can also use the  Java or RCP version of Eclipse.

Download and Install Android SDK Starter Package

The Android SDK starter package includes only a single component, the latest version of the SDK Tools. Included in that component is a tool called Android SDK and AVD Manager that you can use to download other components from the SDK repository site.

• Download the latest Android SDK  starter package  from the SDK download page.
• Unpack the archive to a suitable location on your machine. By default, the SDK files are unpacked into a directory named  android-sdk-<machine-platform> . For example, on Windows platform the directory will be android-sdk-windows.


Android SDK

Add Android Platforms to Your SDK

To add one or more Android platforms (for example, Android 1.6 or Android 2.1) to your SDK, use the Android SDK and AVD Manager, included in the SDK starter package. It is recommended  to download multiple platforms, so that you can build your application on the lowest version you want to support, but test against higher versions that you intend the application to run on.

• Launch the Android SDK and AVD Manager on Windows by executing SDK Setup.exe at the root of the SDK directory. On Mac OS X or Linux, execute the android tool in the /tools/ folder.
• On Available Packages menu, select the platforms to download (1.1 to 2.1).



• If you find error on HTTP SSL while fetching the repository url , try to use http instead of https by checking the Force https://… sources to be fetched using http://… option on Settings menu.



• Click Install Selected and then select Accept All to accept selected packages.
• Click Install Accepted button to start download and install the selected packages.

Download and Install ADT Plugin

To install  the ADT Plugin, you can take advantage of the Eclipse remote update feature. By setting up a remote update site, you can easily download, install, and check for ADT updates. Alternatively, you can download the latest ADT to your development computer as a local site archive.

• Launch Eclipse, then select Help –> Install New Software.



• In Available Software dialog, click Add
• Enter a name for the remote site (ex: Android Plugin) in the Name field and in the Location field, enter this URL:
  https://dl-ssl.google.com/android/eclipse/
  and then click OK. If you have trouble acquiring the plugin, you can try using ‘http’  instead of  ’https’  in the URL.



• Select the checkbox next to Developer Tools, which will automatically select the nested tools Android DDMS and Android Development Tools and then click Next.



• On the next dialog, click Next to read and accept the license agreement and install any dependencies, then click Finish.
• Restart Eclipse
• To check whether the ADT has been installed correctly, try to create a new project by select File > New > Project., you shoud find Android Project listed on project wizard.

There are two Adsense for Maps products  provided by Google to monetize Google Maps API application:

• Advertising alongside local bussines search result using the GoogleBar that requires your Adsense account be enabled for Adsense for Search
• Advertising based on map viewport using the Maps Ad Unit that requires your AdSense account be enabled for Adsense for Content.

Advertising using the GoogleBar

Adsense using the GoogleBar

var map;
if (GBrowserIsCompatible()) {
    var mapOptions = {
         googleBarOptions : {
                 style : 'new',
                 adsOptions: {
                      client: 'your-publisher-id',
                      channel: 'your-ads-channel-id',
                      adsafe: 'high',
                      language: 'en'
                 }
         }
    }

    map = new GMap2(document.getElementById('map'), mapOptions);
    map.setCenter(new GLatLng(27.6648274, -81.5157535), 12);
    map.setUIToDefault();
    map.enableGoogleBar();
}

Line 06: adsense options:
Line 07: your adsense publisher ID
Line 08: your adsense for search channel (optional)
Line 09: ad safety level (optional)
Line 10: language in which to display results

Advertising using the Maps Ad Unit

Adsense using Maps Ad Unit

var adsManagerOptions = {
  maxAdsOnMap : 2,
  style: 'your-ads-unit',
  channel: 'your-ads-channel-id'
};

var publisherID = 'your-publisher-ID';

adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();

Line 01: specify ads options
Line 02: maximum number of ads
Line 03: your ads unit
Line 04: your ads channel id
Line 07: specify your publisher id
Line 09: construct the  GAdsManager object
Line 10: enable ads

Sometimes when creating a new page, we do not want the page appears on the page navigaton menu. WordPress itself does not provide that option when creating a new page. To apply it, we must change it manually in the header.php file located in the current active theme directory.

How to apply:

• Create a new page and publish it
• Edit the  header.php file located in the current active theme directory
• Find the wp_list_pages function, add the argument exclude = id, where id is the id of the page that will be excluded. Use commas to separate each id if you want to exclude more than one pages, e.g. wp_list_pages ( ‘exclude = 20,21′).
• To get the id of each page, go to the Edit Page menu, place the cursor on the edit link and get the id of the page found on the page url (wp-admin/page.php?action=edit&post=20).

In my previous tutorial, i’ve explained the basic usage of Flowplayer as your web video player. In this tutorial, i’ll will show you a little bit advanced usage of Flowplayer combined with Jquery Tools. JqueryTools is used to overlay video with a simple apple effect. This feature is usefull when making a video gallery, where users directly play a video in larger size in an overlay mode without having to move to a new page.

Overlay Video

How to Setup

Flowplayer

Follow the instructions in my previous tutorial to setup Flowplayer

JQuery Tools

• Download Overlay component from Jquery Tools download’s page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2) as a single file (20.82 kb) or as a separated file (1.59 kb) if you already have jQuery.


Download Overlay Component

• Include the jquery.tools.min.js with in the HEAD section of your HTML

<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>

or

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>

How to Use

To overlay a video,   use two div containers, one is for displaying video information (title and duration) and a splash image  as a video’s thumbnail and the second is for overlaying the video. To get thumbnail and duration of a video, you can use mplayer tool as explained here.

Overlay Single Video Player

View Demo

HTML

<div class="video" style="background-image:url(images/splash_01.jpg)">
        <a href="#" rel="#orel">
            <img src="images/play.png" alt="play" title="play" border="0">
        </a>
        <div class="info">
            PMDG Virtual Cockpit
            <span>00:27</span>
        </div>
</div>

<div id="orel" class="overlay"><a href="video/video01.flv" id="player"></a></div>

line 01: container for video information, splash image, play button, and video title and duration.
line 02: trigger button (play button), the button image is inside the a tag that has rel tag (orel) that match with the video overlay container’s id (line 11)
line 11: container for video overlay

CSS

div.overlay {
	z-index:9999;
	padding:40px;
	width:476px;
	display:none;
	background-image:url(../images/gray.png);
}
div.overlay div.close {
	background:url(../images/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px;
	width:35px;
	height:35px;
	cursor:pointer;
}
div.overlay a {
	height:370px;
	display:block;
}
div.video {
	height:150px;
	width:200px;
	border:2px solid #fff;
	outline:1px solid #ccc;
	-moz-outline-radius:4px;
	cursor:pointer;
	text-align:center;
	float:left;
	margin:5px;
}
div.video img {
	margin-top:50px;
}
div.video div.info {
	height:40px;
	background:#000 url(../images/h80.png) repeat-x;
	opacity:0.7;
	color:#fff;
	margin-top:2px;
	text-align:left;
	padding:5px 5px;
	font-family:"bitstream vera sans","trebuchet ms";
	font-size:11px;
	border-top:1px solid #ccc;

}
div.video div.info span {
	color:#99FF99;
	display:block;
}

The CSS style definition for vide overlay

JavaScript

$(function() {
      var player = $f("player", "swf/flowplayer-3.1.5.swf");

      $('a[rel]').overlay({
            expose: '#111',
            effect: 'apple',

            onLoad: function() {
                 player.load();
            },

            onClose: function() {
                player.unload();
            }
       });
});

line 02: install flowplayer into it’s container
line 04: the overlay function, fired when user clicks on play button
line 05: expose color
line 06: overlay effect
line 08: load the player
line 12: unload the player when user clicks on close button

Overlay Multiple Player

View Demo

<div style="float:left">
   <div class="video" style="background-image:url(images/splash_01.jpg)">
      <a href="#" rel="#orel1">
         <img src="images/play.png" alt="play" title="play" border="0">
      </a>
      <div class="info">
          PMDG Virtual Cockpit
          <span>00:27</span>
       </div>
   </div>

   <div id="orel1" class="overlay"><a href="video/video01.flv" class="player"></a></div>
</div>

<div style="float:left">
   <div class="video" style="background-image:url(images/splash_02.jpg)">
       <a href="#" rel="#orel2">
          <img src="images/play.png" alt="play" title="play" border="0">
       </a>
       <div class="info">
            PMDG Virtual Cockpit - Dark
            <span>02:38</span>
       </div>
    </div>

    <div id="orel2" class="overlay"><a href="video/video02.flv" class="player"></a></div>
</div>

line 01: container for video 1
line 03: rel tag must have a unique value for each video (orel1 & orel2 for the two videos)
line 12: overlay container, it’s id must match the rel tag in line 03
line 15: container for video 2

CSS

Look at example 1

JavaScript

$(function() {
    $("a[rel]").overlay ({
         effect: 'apple',
	 expose: '#111',

         onLoad: function(content) {
             this.getOverlay().find("a.player").flowplayer(0).load();
         },

         onClose: function(content) {
              $f().unload();
         }
     });

     $("a.player").flowplayer("swf/flowplayer-3.1.5.swf");
});

line 07: load video, overlay function looks for a element with player class name within it’s container to load the video
line 11: unload video
line 15: install flowplayer

Mplayer is a free and open source media player that available for all major operating systems including Windows, Unix and Mac OS X. Basically Mplayer is a command line application but it also has GUI front end that differs to its supported operating system.

In PHP, we can execute Mplayer’s command line to get thumbnail and duration of a video file.

The basic command line to get thumbnail is:

[lorenz@localhost] mplayer -ss <position> videofile – frames <numofthumb> -nosound -vo jpeg<:outdir=path/to/outdir>.

where:

position, is seek position in seconds or in hh:mm:ss when the thumbnail is taken
videofile, is the video file or path to video file
numbofthumb,  is the number of thumbnail created
utdir=path/to/outdir, is the output directory. If the outdir is not specified, the default current working directory will be the output directory, make sure the output directory is writetable.

Example

[lorenz@localhost] mplayer -ss 10 video.flv -frames 1 -nosound -vo jpeg:outdir=/home/lorenz/video

The command above will create one thumbnail from video.flv at 10th second position, the output directory is /home/lorenz/video. The resulted thumbnail filename will be 00000001.jpg and will increase in accordance with number of thumbnail created, -frames 10 will result ten thumbnails with filename starts from 00000001.jpg to 00000010.jpg.

To execute in PHP, use exec command

exec("mplayer -ss 10 video.flv -frames 1 -nosound -vo jpeg:outdir=/home/lorenz");

The basic command line to get duration is:

[lorenz@localhost] mplayer -vo null -ao null -frames 0 -identify video.flv

The command above will output a lot of video information, the video duration is on ID_LENGTH=duration line.
To get the duration in PHP, we have to extract ID_LENGTH line from the output string.
The PHP code :

exec('mplayer -vo null -ao null -frames 0 -identify video.flv', $output);

while (list($key, $value) = each($output)) {
      if ($length = strstr($v, "ID_LENGTH=")) break;
}

$data       = explode('=', $length);
$duration   = $data [1];

Google Static Map lets you embed Google map image in your own web pages without using Javascript or any dynamic loading page. The static map created on your page based on URL parameters sent through a standard HTTP request. You create the URL with it’s required parameters and place it within an <img> tag.

GStaticMap is a Wordpress plugin that lets you embed Google static map easily in your blog pages without using an <img> tag. To embed a map, just include the gsmap tag with it’s paramaters (optional) in every pages you want to embed. The plugin has  default parameters that can be set using it’s settings form on administration panel. For more information about this plugin, please refer to i’ts documentation page. Below are two examples to embed a map.

Using default tag without parameters.

Note that the default tag doesn’t use parameters, the parameters are loaded automatically from default parameters set in settings panel.

Using parameters that specify the center location, zoom factor and map type.

Download: gstaticmap-1.0.0.zip

Google Chrome is a simple and fastest web browser that are getting popular today. According to data from the research company Net Applications, by the end of December 2009, Google Chrome browser’s market share exceeded that of Apple’s Safari browser for the first time, ranking third.

Since Google Chrome has been released with extensions, there are about 2000 extensions have been made by developers around the world. Below are the top ten most popular extensions so far:

1. AdBlock.


AdBlock Extension

Blocks advertisements on all web pages just like the most popular Firefox extension, AdBlock Plus.

Current version is 1.3.10 (Feb 1, 2010).

2. Google Mail Checker.


Google Mail Checker Extension

Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox.

Current version is 3.0 (Dec 19, 2009)

3. IE Tab.


IE Tab Extension

Displays web pages in a Chrome tab using Internet Explorer. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files.

Current version is 1.0.11208.1 ( Dec 8, 2009)

4. Google Translate.


Google Translate Extension

Translates  entire webpages into a language of your choice with one click.

Current version is 1.1.5 (Dec 17, 2009)

5. AdThwart.


AdThwart Extension

Blocks advertisements using Firefox AdBlock Plus filter engine.

Current version is  0.7.5 (Feb 1, 2010)

6. FastestFox.


FastestFox Extension

Makes browsing faster by  speeding up repetitive tasks, get auto-loading of next page, improved searching, and more.

Current version is 0.30 (Jan 29, 2010).

7. Add to Amazon Wishlist.


Add to Amazon Wishlist Extension

Adds any item from any website to Amazon Wishlist with one simple click, making it easier than ever to keep track of all the items you wish for, all in one place.

Current version is 1.0.0.0 (Jan 01, 2010)

8. Docs PDF/PowerPointViewer


Docs PDF/PowerPoint Viewer Extension

Enable  automatic preview of pdfs, powerpoint presentations, and other documents in Google Docs Viewer.

Current version is 1.5.3 (Dec 10, 2009)

9. Xmarks Bookmark Sync


Xmark Extension

Bookmark your bookmarks across computer and browsers.  Xmarks is also available for Firefox, Safari and IE.

Current version is 0.5.65  (Jan 16, 2010)

10. RSS Subscription Extension


RSS Subscription Extension

Enable Chrome to  auto-detects RSS feeds on the page you are reading and upon finding one will display an RSS icon in the Omnibox, allowing you to click on it to preview the feed content and subscribe.

Current version is 2.0.3 (Jan 30, 2010)

Flowplayer is a free video player for the web that is used to embed video streamson a web page. Flowplayer is highly skinnable and extendable. You can customize it’s look and feel and also extend it’s functionality using available plugins. If you are an expert in JavaScript or ActionScript programming, you can even create your own plugins according to your needs. There are two types of Flowplayer’s plugin, the JavaScript plugin that works outside the player and Flash plugin that works inside the player.

Flowplayer

Flowplayer is released in two versions:

• Open source (free) version (released under the GPL license).  In this version, the Flowplayer branding (logo) is always visible on the player, you can’t remove the logo.
• Commercial version. In this version  you can remove the Flowplayer logo and place your own logo on the video.

Current version of the time of this writting is version 3.1.5 which can be downloaded here.

Browser Compatibility
Flowplayer API and JavaScript plugins are dependent on JavaScript 1.5 which is supported by following browsers:

• Internet Explorer 6.0+
• Firefox FF 2+
• Safari 2.0+
• Opera 2.0+

Supported Flash Player: 9.0+

Supported video formats
Currently Flowplayer support three video formats:

• Flv
• H.264
• Mp4

Using Flowplayer

Download and install Flowplayer

• Download the free version of Flowplayer (flowplayer-3.5.1.zip (161.2 kB))
• Extract and copy flowplayer-3.1.5.swf and flowplayer-3.1.4.min.js into your web application directory
• Include the flowplayer-3.1.4.min.js in the HEAD section of your HTML file

<script src="scripts/flowplayer-3.1.4-min.js" type="text/javascript"></script>

Setup Video Container

To use Flowplayer, you have to setup a HTML element as a video container on your page. The element can be any HTML tag, but the most commonly used tags are anchor (A) and DIV.

<a  href="videos/video01.flv" style="display:block;width="400px"; height="300px" id="player">

Install Flowplayer

<script language="javascript>
	flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

To install Flowplayer, we call the JavaSript function ‘flowplayer‘ that has two arguments. The first argument ‘player‘ is the id of HTML element that used as video container and the second argument is the path to Flowplayer (swf file).

Syntax:

flowplayer(’elemntId’, ‘pathtoswf”, config)

where:
elementId is the id of video container
pathtoswf is the path to Flowplayer
config is player configuration

more information about ‘flowplayer’ function can be read here

Examples

1. Single Player

<a href="video/video01.flv" style="display:block; width:400px; height:300px;" id="player">
<script language='javascript'>
        flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

View live demo

2. Multiple Player

<a class="player" href="video/video01.flv" style="display:block; width:400px; height:300px">
<a class="player" href="video/video02.flv" style="display:block; width:400px; height:300px">

<script language="javascript">
       flowplayer("a.player", "swf/flowplayer-3.1.5.swf");
<script>

On the example above, we use two video player on the same  page, each A tag is assigned ‘player’ CSS class name, which is defined in CSS section below.  The first argument of ‘flowplayer’ function is ‘a.player’ that takes  format tagName.className which means that all A tagsthat have ‘player‘ class name will be used as video container.

.player {
      display:block;
      width: 400px;
      height: 300px;
      float: left;
      margin-left: 10px;
}

View live demo

3. Using Splash Image

Splash image can be used as a preview of video content and also allow us to setup the Flowplayer instance so it is not activated until the user clicks on the image.

<a href="video/video01.flv"  style="display:block;width:400px;height:300px" id="player">
   <img src="images/splash_01.jpg" alt="PMDG MD11 Cockpit">
</a>

<script language="javascript">
      flowplayer("player", "swf/flowplayer-3.1.5.swf");
</script>

View live demo

4. Using Clips

Clips represent movies to play in Flowplayer. Clips can also be provided as a Playlist with a series of clips that will be played in sequence. Clip and Playlist are objects of Player.

<div style="display:block; width:400px; height:300px" id="player"></div>

<script language="javascript">
        flowplayer("player", "swf/flowplayer-3.1.5.swf", {
            clip: { url: 'video/video01.flv',
                    autoPlay: false
            }
        });
</script>

On the example above, we use DIV tag as video container. By using DIV, we can’t define the video url using href like in our previous examples that using A tag. The video url is defined within Clip object and we also set the autoPlay to false that indicating the player should not start playback immediately upon loading.

View live demo

Chromed Bird is a Chrome extension that allows you to follow your timelines and interact with your Twitter account from Google Chrome browser. Current version of the time of this writing is 1.5.0 (2010-01-24).

Chrome Bird

Features:

• Follow your timelines and navigate through your tweets;
• Compose, reply, RT, share, favorite and delete tweets;
• Create short URLs within the extension;
• Track read / unread tweets;
• Notify user whenever new tweets arrive;
• The extension updates itself as soon as new versions are available;
• Tweets caching to avoid hitting Twitter’s API rate limit.

Compatibility
Currently (1.5.0) only for Chrome Beta and Dev channel releases.

Download

Chrome Bird 1.5.0

This is a simple PHP script to empty all tables in a MySQL database. This script first will list all tables in a database using ‘SHOW TABLES‘ statement then it will empty  each table using  ’TRUNCATE TABLE‘ statement.

$con = mysql_connect('dbhost','dbuser','dbpassword');

if (!$con) die("Can't connect to database!");

mysql_select_db('dbname');

$res = mysql_query('SHOW TABLES', $con);

while ($row = mysql_fetch_array($res, MYSQL_NUM))
{
  $res2 = mysql_query("TRUNCATE TABLE `$row[0]`", $con);
}

About TRUNCATE Statement

For an InnoDB table before version 5.0.3, InnoDB processes TRUNCATE TABLE by deleting rows one by one. As of MySQL 5.0.3, row by row deletion is used only if there are any foreign key constraints that reference the table. If there are no foreign key constraints, InnoDB performs fast truncation by dropping the original table and creating an empty one with the same definition, which is much faster than deleting rows one by one.