Wednesday, January 30, 2013

comment_icon 0 Getting Started With Firefox OS

In this Tutorial We are going to see the How we can start the Development with FireFox OS and then we Build a Sample Application.
Firfox O.S. completely focus on the Web Applications,so you need not to learn anything new if you are a Web geek .

PreRequsite :

Firfox O.S. completely focus on the Web Applications,so you need not to learn anything new if you are a Web geek .
if you are familar with the following term you can jump start .otherwise you can just follow the steps and when you feel free try to learn something about these terms.
  1. HTML 5
  2. Java script
  3. CSS
  4. Git and Github
  5. simulator : for Testing Apps

Lets Start by setting upp the environment for our Tutorial.

  1. if you are familer with Git and git hub you can skip these step , otherwise go to the Git and Github download Git and create a free account at Github . After this just follow the instruction for Setup - Git
  2. There are few Templates already available for developemnt so we are going to start with a basic template. you can get it from Mozila-app-stub or you can clone it directly to your system using the following command (in command myweatherapp is the app name you can give it any name).
    $ git clone myweatherapp
  3. Download and Install Node.js. After the installation just open command prompt(windows)or shell(gitor any other terminal) and type following command
    npm install -g volo
    .This will install volo utility, which is required to complete this Tutorial.
  4. Download Bootstrap . we can do this by using volo add command . the command is shown below .
    volo add bootstrap
    it download the bootstrap from git and add it to your project make sure you run this command from project directory as shown in image . for dependency and global name just hit enter.
  5. Download and add Underscore.js its the Javascript libarary. you can do it using volo command just like we did in above step
    volo add underscore
  6. download modernizr.js and copy it into js/lib folder
  7. Download Bootstrap zip extract it and copy css/bootstrap.css into to our www/css directory
  8. Download and Install the Firefox simulator

Lets Begin to Code

you can find the source files under myweatherapp/www directory.
  1. Edit Index.html

    open the Index.html in any text Editor and copy paste the following script
        <meta charset="utf-8">
        <title>My Weather App</title>
        <meta name="description" content="">
        <!-- Mobile viewport optimized: -->
        <meta name="viewport" content="width=device-width">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory: -->
        <!-- Do not add any other CSS here, instead @import it in app.css.
    It will be inlined when building. That way it will
    automatically be minified. -->
        <link rel="stylesheet" href="css/app.css">
        <!-- All JavaScript at the bottom, except this Modernizr build.
    Modernizr enables HTML5 elements & feature detects for optimal performance.
    Create your own custom Modernizr build: -->
        <script src="js/lib/modernizr-2.5.3.min.js"></script>
            <div class="content">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#forecast">Forecast</a></li>
            <li><a href="#settings">Settings</a></li>
          <div class="tab-content">
            <div class="tab-pane active" id="forecast">
              <h1>What's the Forecast?</h1>
              <h2 class="name"></h2>
              <section class="day1">
                <p class="low">Low: <span></span></p>
                <p class="high">High: <span></span></p>
              <section class="day2">
                <p class="low">Low: <span></span></p>
                <p class="high">High: <span></span></p>
            <div class="tab-pane" id="settings">
              City, zip code, or place: <input type="text" name="place" />
                <button class="btn save">Save</button>
        <!-- JavaScript at the bottom for fast page loading: -->
        <!-- Using require.js, a module system for javascript, include the
    js files. This loads "main.js", which in turn can load other
    files, all handled by require.js: -->
        <script type="text/javascript"
  2. Edit js/app.js

    To add any javascript libarary to our code we Define the require.js using the folloing statement
    define(function(require) { }
    and put our code insde it. to use any javascript libaray we use the require function function. if you remeber we downloded the underscore.js in setup steps now we add the library by following command
    var _ = require('underscore'); 
     //simillary we add the bootsrap-tab libaray
    Now we open the app.js and replace the code with the following code.
        baseUrl: 'js/lib',
        paths: {'jquery':
    // When you write javascript in separate files, list them as
    // dependencies along with jquery
    define("app", function(require) {
        var $ = require('jquery');
    var _ = require('underscore');
        function fetchForecast(woeid) {
            var query = escape('select item from weather.forecast where woeid="' + woeid + '"');
            var url = ("" +
                       query +
            $.getJSON(url, function(data) {
                var item =;
                var forecast = item.forecast;
                for(var i=0; i<forecast.length; i++) {
                    var el = $('.day' + (i+1));
                    el.find('.high span').text(forecast[i].high);
                    el.find('.low span').text(forecast[i].low);
                $('.nav-tabs a:first').tab('show');
        fetchForecast(localStorage.placeWoeid || '2480894');
        $('.nav-tabs a').click(function(e) {
        $('#settings').click(function(e) {
            var place = $('#settings input[name=place]').val();
            var query = "places.q('" + escape(place) + "')";
            var url = ('' + query +
            $.getJSON(url, function(data) {
                if(data.count !== 0) {
                    var p =[0];
                   localStorage.placeWoeid = p.woeid;
  3. Now we add some CSS to our code .so open css/app.css folder and replace the code with following
    /* Tip: Use "@import" to add styles instead of adding 's in your
       HTML, and volo will inline it when building for production */
    /* Styles for the installation button */
    @import "install-button.css";
    /* Your styles here */
    @import "bootstrap.css";
    /* @import "bootstrap-responsive.css"; */
    body {
        background-color: #d3dde5;
    .day1 {
        margin-top: 1em;
    #forecast p {
        margin: 1em;
    .nav-tabs {
        margin: 0;
    .content {
        padding-top: 1em;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #d3dde5 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d3dde5)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#d3dde5 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ffffff 0%,#d3dde5 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3dde5',GradientType=0 ); /* IE6-9 */
    .content h1 {
        margin: .25em 0;
    section p, #settings {
        font-size: 1.25em;
    .tab-content {
        padding: 1em;

Debug, Build and Deploy

  • Debug:

    to dubeg our app we launch server through volo command . as shown below
    volo serve
    once you see in terminal starting web server at http://localhost:8008. you can open browser like chrome or mozlia (updated version) or you can launch the simulator by going through Menu in Mozila as shown below
    it will launch the firefox simulator with dashboard. in the Dashboard ,at field next to Add directory type
    and click Add URL . it will launch simulator and add your application to it as show in picture . just swipe screen untill you see your app.
  • Now you can open and Test your App. if it works well you can move to next step oterwise just check your code and steps again, to stop server press Ctrl+C
  • Time to Build The App

    To build the Application use the volo command as show below
    volo build
    it will build the app abd place it intowww-built directory
  • Once the build get successfull now we can Run the our built app using the following command
    $ volo serve base=www-built
    now see the simultor app again . hope you successfully built the App . final output of App will be shown here.
  • Lets Deploy :)

    Now we are done with built and we tested it so now we can deploy our app to Github its free so if you don't have account get one for you and follow the command given below
    volo ghdeploy
    it will ask you to give name for repo you can hit enter if you want repo with same name as project or you can give name. if repo doesn't exist already it ask is this repo private just type n and hit enter . Now it will upload files on git so just wait untill it asks your password for authentication .
  •  Download Source Code

    Sunday, January 27, 2013

    comment_icon 0 Download IBM DB2 10.1

    Today a guy  ask me where i can download IBM DB2  ? its  free or not ? So i thought that the same question must be coming to diff. students too who are working on TGMC or some other projects. So here is Answer for both question.

    IBM DB2 comes in two versions

    1. commercial version
    2.  Express-C where C stands for community edition its for developers and students and as IBM says

    Free to develop, free to deploy, free to distribute
    So you can download it free from the link given below .

    you just need to login with your IBM  account . if you don't have one just relax you can create it ,it's free .

    feel free to ask if you have any doubt subscribe for updates .

    Saturday, January 26, 2013

    comment_icon 0 Interesting Facebook Graph Search terms

    Facebook Recently Launched its New Graph Search by which you can search things in simple English or your language  and then you can filter them to on different parameters .

    how to use facebook graph search
    This search can be utilized in different ways depending on your Interests .


    Search For Singles in your Locality : just type following search term: 
    Single females who live in " locality"     (  like..  Single females who live in New Delhi, India )
    gives result :

    Then you can apply different filter on them.

    Age Range
    Religious Views
    Political Views
    Employer Location
    Time Period
    Class Year

    Admins of
    Members of
    Apps They Use
    Tagged in
    Commented on
    Interacted with
    Birth Year
    Current City
    Live Near
    Relationship with
    Married to
    Engaged to
    Partners with
    Relatives of
    Parents of
    Stepparents of
    Siblings of
    Children of
    Cousins of

    Other Useful terms you wanna try :
    People who work at IBM in Chennai, Tamil Nadu 
    Photos of Sachin Tendulkar 

    And My Favouraite one :
    Current cities of my friends 

    How to get it ?

    Wednesday, January 23, 2013

    comment_icon 0 Mozila's Reveals its Mobile with Firefox OS

    A New Era of Open Source Mobile Development is gonna starts now with the Launch of Mozila's FireFox OS. Google gets competitor. Mozila always famous for its open source development Reveals its New Mobile with its own New O.S. Have look because You gonna love it .

    Firefox os app screen
    Firefox os home screen

    Firefox os music app screenFirefox os

    Phone Specifications

    The Keon model
        CPU Qualcomm Snapdragon S1 1Ghz
        UMTS 2100/1900/900 (3G HSPA)
        GSM 850/900/1800/1900 (2G EDGE)
        Screen 3.5″ HVGA Multitouch
        3 MP Camera
        4GB ROM, 512 MB RAM
        MicroSD, Wifi N, Light and proxmity Sensor, G-Sensor, GPS, MicroUSB
        1580 mAh battery
        Over the air updates
        Unlocked, add your own SIM card
    The Peak model
       CPU Qualcomm Snapdragon S4 1.2Ghz x2.
       UMTS 2100/1900/900 (3G HSPA).
       GSM 850/900/1800/1900 (2G EDGE).
       Screen 4.3″ qHD IPS Multitouch.
       Camera 8 MP (back) + 2 MP (front).
       4 GB (ROM) and 512 (RAM).
       MicroSD, Wifi N, Light and proxmity Sensor, G-Sensor, GPS, MicroUSB, Flash (camera).
        Battery 1800 mAh.

    Opportunity For Developers :

    Mozilla gives a Completely New market for App developer where the can publish there app. The Best Thing Supports HTML 5 Good For web developer Now they can also jump in Mobile Development
       Useful Links For Developers  :

    Sunday, January 13, 2013

    comment_icon 1 How to make SanDisk USB Bootable windows 7

    Few days back i needed to format my Laptop , but i didn't had windows disk so i decided to go for USB Boot . i tried so many times by formatting disk into NTFS and copying all windows 7 files in USB drive but nothing worked . finally i searched all over net and found a solution which worked for me . so here it is .

    Step 1 : backup all your USB data because its gonna format this.
    Step 2:  goto run type cmd and run command prompt as administrator.
    Step 3: Now type all the commands as it is shown .
    Step 4: type diskpart  and hit enter
    Step 5: type list disk . it shows the list of disks. make sure you able identify your USB drive (see the size and free space).
    Step 6: type select disk  # (where # represents your disk number , for me its 1)
    making sandisk bootable
    from step 4 to 6
     Step 7: type clean (Clean : removes any existing partitions from the USB disk, including any hidden sectors)
     Step 8:type Create Partition Primary (it Creates a new primary partition with default parameters)
     Step 9:type Select Partition 1 (Focus on the newly created partition).
     Step10: type Active (Sets the in-focus partition to active, informing the disk firmware that this is a valid system partition)
     Step11:Format FS=NTFS (Formats the partition with the NTFS file system. This may take several minutes to complete, depending on the size of your USB key.)
    Step12:Assign (Gives the USB drive a Windows volume and next available drive letter, which you should write down. In our case, drive “J” was assigned.)
    Step13:Exit (Quits the DiskPart tool)
    Step 14 :Now go into the directory where you copied all your windows 7 files ( in command prompt ). open boot directory(cd boot) . and type the  command as 

    Bootsect.exe /nt60 J: (where ‘L’ is the drive letter assigned to your USB key from the previous step)
    Bootsect infuses boot manager compatible code into your USB key to make it a bootable device. 

    Now copy all windows 7 files to USB drive , no need to use command prompt  you can do it using copy paste option. Have fun installing windows.