How2Labs

Friday, February 22, 2013

0 Create Relationship Timeline on Facebook

In Facebook Timeline there is feature of creating a Relationship timeline By which you can see what happens between you and other person on Facebook even you can share it with your friends , customize it by uploading cover photo.

How to build it ?

1. in chat bar hover on the person name to whom with you wanna see relationship , it display a box ,click on see friendship link

2. open user profile , click on settings icon tab and then select see friendship.

1 How to Track Facebook Pending Friend Requests

facebook tirck fb tricks Pending Friend Requests track fb Requests

Finally there is A Trick by which you can track your Facebook Friend Requests and you can save your self from getting blocked for 30 days .

How This Trick Works ?

This is Just two Step Process and you need not to be a Geek for that .

Go to your Profile .

Click on Activity Log

Tab . this will open a new page. which looks something same as shown below

check on Include only Me Activity box so it will be easy to see your recent activities.

Now Scroll Down and See your sent Requests Activity . it will be something like. Abhimanyu sent Priya a friend request.

Now click the User Name and cancel Request.

Have Fun ! and don't forget to subscribe .

0 Facebook Developers Live

facebook facebook application tutorial facebook graph facebook graph tutorial tech

Today Facebook Announced Its New Section for developers Called Facebook Developers Live.it will be going live from feb. 20th. To join developers Live visit here

what it Provides For Developer ?

It provides all the resources for developing and growing your Facebook Application. Specially the most needed section of Facebook developer "Video Tutorials"

0 Are you Ready For New Ubuntu Phone ??

getting started Mobile Phone open source tech tutorial ubuntu

Recently Ubuntu Announced that its Phone will be available in market in last quarter of 2013.So Are you ready for getting hands on New Phone Experience .

At the Press Release in London Mark Shuttleworth said that

Calling the product launch a “significant next step in our history”, he also gave demo of the device

Ubuntu Phone Preview

But What's Special about Ubuntu ?

Ubuntu Provides some Features that makes your Phone Experience amazing

Access Everything by just 1 finger swipe
Full utilization of Mobile Screen
Everything on screen but Nothing shown until you Swipe
Super fast Switching Between Apps

Main features of Ubuntu Phone

Edge magic: thumb gestures from all four edges of the screen that enable users to find content and switch between apps faster than they can on other phones.
Focus on content, not the controls: immerses the user in their content. Controls only appear when they want them.
Integrated search: Search for anything that’s saved on the phone, any content from online providers like Amazon and even menu functions within applications.
HTML5 apps, web apps and native apps are equal citizens – they all get their own icons and access to system services, so the user need never know the difference.
Personalised welcome screen: a visualisation of an individual’s social interactions (infographics on calls, SMS, Twitter) – ever changing, totally personal.

Special Feature Images

Ubuntu Animated home screen With Notification

What's For Developer ?

Useful links

Get Started
resources
Publish Apps

0 Brackets : An Open Source Text Editor from Adobe

Brackets open source software tech web project website

Finally Adobe made something Open Source. Brackets is the opensource text editor specially designed for the Web developer. there are some amazing features like inline editing,live edit (preview is shown in chrome) that most of the web developer gonna love. One more thing is liked about this is that it built by using java script, html 5,CSS , So as they say

For the WEB by the WEB

Where To get it ?

you can get it here. current release it Sprint 19.

Basic features how to use ?

For inline text editing just put your mouse on the html tag like body,div,h1 etc and press CTRL+E

Live Preview

To Use the Bracket live Preview feature click on the icon in top right , just as icon highlighted in below image.

Bracket Video Demo

Bracket extensions

Bracket mainly focus on the web development and there are so many extension available to increase your productivity and performance . these extensions are categorized under different categories but there is no GUI for installing the extensions however you can manually download and copy the extension and copy them to extension directory and then browse it using menu bar.

Code/Text Editing

Select Parent: Quick way to select the block enclosing the selection
Web Fonts: Simple interface for adding/deleting/swapping Google Web Fonts in a CSS file
Kill Ring: Adds an Emacs-style kill ring to the editor.
Spell Checker: integrates the spell checker web service After The Deadline - now in beta - Supports English, German, French, Spanish and Portuguese. Note: Now compatible with brackets build >== build 0.18.x /Sprint 18

Snippets & Shorthand

Emmet/Zen Coding: Adds Emmet (Zen Coding) support to Brackets (download here).
Snippets: Assign trigger keys to insert snippets. Configurable with JSON
Prefixr: Generate browser specific CSS prefixes using the prefixr service.
Quick Markup: fast HTML markup generation as you type.
HTML Templates: Pastes in barebones HTML code for different doctypes.
Auto-match pairs: auto-complete Paranthesis, Brackets, Braces, Double and Single Quotes...

Code/Text Formatting

String Convert: Provides shortcuts for modifying and encoding strings within the editor.
Show Whitespace: Visualizes spaces and tabs
TabToSpace: Converts indentation to tabs or spaces
Align Assignments: Aligns assignment operators (equal signs)
Auto Formatter: Auto formatter for XML/HTML, CSS, JavaScript files.
Auto Indent: Indent automatically for whole file.
Beautify: Beautify HTML, CSS, and Javascript (uses js-beautify)
Remove Trailing Spaces: Removes unnecessary whitespace when saving files.
Whitespace Normalizer: Trims trailing whitespaces, transforms tabs to spaces and adds newline at the last line when saving files.

Code Generation

App Cache Buddy: Generate and validate application cache manifests.
Annotate: Generates JSDoc annotations for your functions

Language Support

JavaScript Code Hints: Code hinting (aka autocompletion) for JavaScript files in Brackets.
PHP: adds PHP function definition support to QuickOpen search

General Functionality

Extension Manager: Install, Remove, and upgrade your extensions from the cloud from inside Brackets (requires node).
Extension Toolkit An extension to make building Brackets extensions easier.
Related Files: Discovers and allows you to open related files in your project.
File Navigation Shortcuts: shortcuts for switching to next/previous editor (non-MRU order), and a version of Quick Open scoped to only open files.
Open File from URL: Opens any href and rel atribute urls in editor on ALT+0 shortcut. Currently works only with existing files.
Brackets Commands Guide: Search and execute commands by typing part of their name, similar to Quicksilver (or Sublime's Ctrl+Shift+P or Eclipse's Ctrl+3).
Open Containing Folder: Opens folder containing current file or a file/folder in Sidebar. Added keyboard shortcut CTRL+ALT+O for opening folder containing document opened in editor.
Bookmarks: Navigate within a document using bookmarks.
TestQuickly: simple extension to run unit tests with a keystroke (handy for Brackets core and extension developers)
PageSuck: prompts for a URL and pulls that page's HTML directly into the editor as a new file

Live Development

Debugger: Brackets Debugger for the Live Development browser.
Everyscrub: Everything's a scrubber! Cmd/Ctrl + drag on any number or hex color to scrub its value and update the browser in real time.
Reload in Browser: Adds a toolbar button and shortcut to reload the page in the browser
V8/Node Live Development: Updates scripts running in Node.js as you type

Visual Editing

Edge Web Fonts: Browse free fonts from the Edge Web Fonts collection, with thumbnails. Activated via CSS code hints for font-family.
Hover Preview: Displays a preview when hovering over a color value, gradient, or image filename.
CSS Exclusion Shape Viewer: Quick Edit on an exclusion shape definition in CSS displays the shape.
SVG Preview: Live preview SVG files in an inline panel while you edit them.
Markdown Preview: Live preview of Markdown files, updated as the document is edited.

External Tools

BracketLESS: Compiles LESS files to CSS on save
GitHub: Implements the GitHub API, including oAuth. Currently functionality limited to Gists.
ToGist: Create an anonymous gist from the current selection.
PhoneGap Extension for Brackets: Manage PhoneGap Build projects from Brackets.
(See also Prefixr above).

Documentation

CanIUse: An inline viewer of CanIUse.com support data.
Display Shortcuts: Display Shortcuts defined to Brackets.

Linting & Warnings

CSSLint: CSSLint your documents.
JSHint: Performs a JSHint report.
W3CValidator: Run the W3C Validator on your HTML.
(See also App Cache Buddy above).

Deprecated Extensions

Color Editor: Quick Edit on a hex/rgb/hsl color opens an inline color picker, plus a listing of all colors used in the file. (Merged into Brackets as of Sprint 17).
Color Picker: Quick Edit on a hex color opens an inline color picker. (A color picker is built into Brackets as of Sprint 17).
Editor Shortcuts: Keyboard shortcut to delete line. (This command is built into Brackets as of Sprint 15).
MDNLookup: Includes a way of creating an extensions toolbar and adding buttons to the toolbar with callbacks. Requires a slight change to the core. (Does not work in current versions of Brackets).

0 Getting Started With Firefox OS

firefox app tutorial firefox application Firefox OS firefox os tutorial

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.

HTML 5
Java script
CSS
Git and Github
simulator : for Testing Apps

Lets Start by setting upp the environment for our Tutorial.

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
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 git@github.com:mozilla/mortar-app-stub.git myweatherapp
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.
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.
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
download modernizr.js and copy it into js/lib folder
Download Bootstrap zip extract it and copy css/bootstrap.css into to our www/css directory
Download and Install the Firefox simulator

Lets Begin to Code

you can find the source files under myweatherapp/www directory.

Edit Index.html

open the Index.html in any text Editor and copy paste the following script



<html>
  <head>
    <meta charset="utf-8">

    <title>My Weather App</title>
    <meta name="description" content="">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->



    <!-- 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: www.modernizr.com/download/ -->
    <script src="js/lib/modernizr-2.5.3.min.js"></script>
  </head>
  <body>

        <div class="content">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#forecast">Forecast</a></li>
        <li><a href="#settings">Settings</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane active" id="forecast">
          <h1>What's the Forecast?</h1>
          <h2 class="name"></h2>

          <section class="day1">
            <h3>Today:</h3>
            <p class="low">Low: <span></span></p>
            <p class="high">High: <span></span></p>
          </section>

          <section class="day2">
            <h3>Tomorrow:</h3>
            <p class="low">Low: <span></span></p>
            <p class="high">High: <span></span></p>
          </section>
        </div>
        <div class="tab-pane" id="settings">
          City, zip code, or place: <input type="text" name="place" />
          <div>
            <button class="btn save">Save</button>
          </div>
        </div>
      </div>
    </div>






    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

    <!-- 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:
http://requirejs.org/docs/api.html#jsfiles -->
    <script type="text/javascript"
            data-main="js/app.js"
            src="js/lib/require.js"></script>

  </body>
</html>

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
require('bootstrap/js/bootstrap-tab');

Now we open the app.js and replace the code with the following code.

require.config({
    baseUrl: 'js/lib',
    paths: {'jquery':
            ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
             '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');
require('bootstrap/js/bootstrap-tab');

    function fetchForecast(woeid) {
        var query = escape('select item from weather.forecast where woeid="' + woeid + '"');
        var url = ("http://query.yahooapis.com/v1/public/yql?q=" +
                   query +
                   "&format=json&callback=?");

        $.getJSON(url, function(data) {
            var item = data.query.results.channel.item;
            var forecast = item.forecast;

            $('h2.name').text(item.title);

            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) {
		
        $(this).tab('show');
    });

    $('#settings button.save').click(function(e) {
       
        var place = $('#settings input[name=place]').val();
        var query = "places.q('" + escape(place) + "')";
        var url = ('http://where.yahooapis.com/v1/' + query +
                   "?appid=Zz.TvXLV34Go6RzyHMnH6scOSn_DdLYdyuJVbd6l2MLvuTAAEFIylCIj7Koo_pth7BHeGmNV5m0zdAkAY_CspQ9eKlJRlmM-&format=json&callback=?");
        
        $.getJSON(url, function(data) {
            if(data.count !== 0) {
                var p = data.places.place[0];
               localStorage.placeWoeid = p.woeid;
                fetchForecast(p.woeid);
            }
        });
    });



});

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

http://localhost:8008/

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

0 Download IBM DB2 10.1

download db2 ibm db2 software for tgmc

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 .

http://www-01.ibm.com/software/data/db2/express-c/about.html

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 .

Pages

Friday, February 22, 2013

How to build it ?

Wednesday, February 20, 2013

How This Trick Works ?

Tuesday, February 12, 2013

what it Provides For Developer ?

Growing Mobile Apps with Facebook SDKs

How to Build & Measure Mobile App Install Ads

Facebook Mobile Developer Day: Keynote

Your First Open Graph App

What is Open Graph?

Open Graph Pro Tips

Open Graph Tagging Users, Messages, and Posts

Open Graph Object and Action References

Open Graph Deep Linking for iOS

Publishing Open Graph Actions from iOS

Publishing Open Graph Actions Using the JavaScript SDK

Using the Facebook SDK for Android

Introduction to Mobile App Install Ads

Using the Facebook SDK for iOS

Facebook Mobile Developer Day: Best Practices App Panel

Facebook Mobile Developer Day: Growing Your Mobile Game

Facebook Mobile Developer Day: Q&A Wrap Up

Facebook Mobile Developer Day: Getting Started with iOS SDK

Facebook Mobile Developer Day: Getting Started with Android SDK

Facebook Mobile Developer Day: Advanced iOS SDK

Facebook Mobile Developer Day: Advanced Android SDK

Facebook Mobile Developer Day: Engaging Social Apps

Facebook Mobile Developer Day: Driving Mobile Installs

Facebook Mobile Developer Day: Morning Q&A

Facebook on PBS's America Revealed

Growing Games with Facebook

Facebook for iOS and Android Developers

Getting Started with the Facebook Platform

Introduction to the Facebook Platform

Wednesday, February 6, 2013

But What's Special about Ubuntu ?

Main features of Ubuntu Phone

Special Feature Images

What's For Developer ?

Useful links

Saturday, February 2, 2013

Where To get it ?

Basic features how to use ?

For inline text editing just put your mouse on the html tag like body,div,h1 etc and press CTRL+E

Live Preview

Bracket Video Demo

Bracket extensions

Wednesday, January 30, 2013

PreRequsite :

Lets Start by setting upp the environment for our Tutorial.

Lets Begin to Code

Edit Index.html

Edit js/app.js

Debug, Build and Deploy

Debug:

Time to Build The App

Lets Deploy :)

Sunday, January 27, 2013

For Beginners

About

Get Free Email Upadtes

Popular posts

Archive

Categories

Labels