Interesting CSS styles

I thought I should write a post about the interesting CSS styles. But now I remember only a few styles which are something different, I will add more styles later.
1. selection style
::selection {
  background: #ffb7b7; /* Safari */
}
::-moz-selection {
  background: #ffb7b7; /* Firefox */
}

You can use these styles to change the text selection color. For example to see the text selection in red color, select the following line:
You will see text selection color as red for this line. Just try!
Select me! You will see text selection color as green for this line
Now try this line! You will see text selection color as blue
How is it? Cool uh!

I will add more styles to this post when I find something different.
Read More...

Google Chart

I had a plan to add analytics to FlamesGame. But what anlytics? number of users, region, or something else, I got confused. At last I decided to show the percent of results the users are getting.

Then I started searching for any open source application or public API which provides or create chart. And I got Google Chart. Google provides a chart wizard, using that you can customize your chart. You just need to pass the data to the Google chart API and it will return the chart as an image.

Finally I implemented the Analytics using Google chart.
Read More...

XUI JS

XUI is a light weight JS framework for mobile web. XUI mainly used with PhoneGap for Mobile app development. I used XUI for developing an PhoneGap android app for FlamesGame.

If you are implementing a mobile app using Phonegap, for the JS framework it is better to use a light weight JS framework. jQuery will be heavy for developing mobile app, but now they have jQuery for mobile also.

I added the fade in effect using the tween method of XUI. You'llget more animations from http://xuijs.com/docs/fx

Read More...

Phonegap

Phonegap is a mobile app framework which supports multiple mobile platforms (iOS, Android, Symbian, etc.). We can develop phonegap mobile app using HTML + CSS + JS. Phonegap will convert the app into native application.

You can download the latest Phonegap framework from Phonegap website.

I developed a phonegap mobile app for Android, so this post will be related with how I used Phonegap to implement an Android app.

You will get the instruction to set up Phonegap for Android application from this link. This will make you capable of atleast creating a 'Hello world' application for Android using phonegap.

So we can use HTML, CSS and JS for developing a phonegap android app. But which JS framework we'll use, Jquery? Then there is an issue - jQuery is developed for the web app, it will be too heavy for a mobile app. So I used a lighweight JS framework called XUI JS framework.

There are many other JS frameworks for mobile apps. Take a look at those JS Frameworks which Phonegap supports.

Phonegap gives access to use many mobile features like vibrator, accelero meter, contacts, etc. Phonegap have a good API for those featutres. I implemented two features from this API:

  1. Vibrator:
    • navigator.notification.vibrate(100);
    • This will provide a vibration of 100 milli seconds.
  2. Notification:
    • navigator.notification.activityStart();
    • This will show a dialog box with the 'Please wait' message.
    • navigator.notification.activityStop();
    • This will hide the dialog box.
You can download and test the application I created (FlamesGame for Android) from here.
Read More...

Setup Android Development Environment

In my previous post I mentioned that I created a web application for Flames Game. So I was thinking about anything I can add to it apart from some new feature. Suddenly I got an idea to create an Android app. Actually I don't have any experience in Android app creation, but I have experience in Mobile app development with iPhone IOS and PhoneGap. The feature of PhoneGap is that it is a cross mobile framework. So I thought of developing Android app for FlamesGame using PhoneGap.

First I had to setup the development environment for Android. There is a good documentation in the Android website (Android Setup Documentation) which directs you to install/setup the environment. So I just mention what I did for the setup:


Then I created a new Android application by the guidance of this document. But I faced some issues while developing the app.
  1. Create an AVD: I was not able to create the AVD because while creating a new AVD it will ask for the target device, and it was a select box with empty option. Then I googled and found that I have to download the target Android API from the 'Available packages' section just below the 'virtual devices'. After installing those packages, I created the AVD.
  2. Change Android Emulator Language: The default language for the emulator was Chinese. I changed the language from the emulator itself by going to settings -> Language & Keyboard and check the Android Keyboard option.

Now I have a FlamesGame App for Android. So I tried to publish this app to the Android Market. But for publish a Android app you have register as a Android developer. So I uploaded the Android app for FlamesGame to the FlamesGame site.

Read More...