jRecorder 1.1 is released. It is made open source and available at GitHub. Please contribute.

Connect

RSA Algorithm

Here is RSA algorithm explained in a simple way with example.

Algorithm:

  1. Find two random distinct prime numbers (usually very big) , call them P and Q
  2. Find number N = P x Q   (this N is called modulus, used in both private and public key pair)
  3. Find number Z = (P-1) x (Q-1)        (Z is called Euler’s totient function)
  4. Chose an integer E, which is co-prime to Z. (Co-prime means GCD of E and Z should be 1, means, E and Z should only be divisible by 1)  [This E will be our encryption key ]
  5. Find integer D, such a way that, ( D x E ) mod N should be 1  (D ≡ E ** -1 (mod Z) )
    This D is called multiplicative inverse of E. This D is your decrypt key (** indicates power to or raise to, eg: 2 ** 3 =  2 x 2 x 2 = 8  )

 

So, here we get E and D can be used as encryption and decryption key

Encryption key pair (E, N)

Decryption key pair ( D, N)

Here N is the modulus common for both keys.

 

Encryption

To encrypt Data

(Data ** E ) mod N => C,  the encrypted Cypher (Here ** is power to, or raise to )

Decryption

To decrypt the Cypher C

(C ** D) mod N =>  Data

 

Real life Example

  1. Find two distinctive prime number P and Q.P = 11 and Q = 13
  2. Find N = P x QN = 11 x 13 = 143
  3. Find Z = (P-1) x (Q-1)Z = 10 X 12  = 120
  4. Find E as co-prime of ZFind any co-prime of 120, E = 101   , because GCD(120, 101) = 1
  5. Find D, such that E x D mod N should be 1(D x 101 ) mod 120 => 1D =  221

We god E, D and N, so the encryption key pair is (101, 143) [E, N] and the decrypting key pair is ( 221,143) [D, N]

Lets try Encryption,

eg: We need to encryption Data = 2

Encrypted Data Cypher C = Data ** E mod N

C = 2 ** 101 mod 143

C = 2535301200456458802993406410752  mod 143  = 123

Encrypted Data C  = 123

Lets try Decryption

Data decrypted = C ** D mod N

Data decrypted = 123 ** 221 mod 143

Data decrypted =  2  (try calculating yourself, as 123 ** 221 is too big to print here)

 

A sample ruby code finding these numbers is below:

Ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#to find gcd
def gcd(a,b)
if b == 0
return a
else
return gcd(b, a%b)
end
end
#to find co-prime
def find_coprime(a,z)
if gcd(a,z) == 1
return z
end
find_coprime(a, z + 1)
end
#to find decrypt key D
while ((d*e) % z != 1) or (d == e) do
d= d+1
print d.to_s + "\n"
end

 

1 Comments

QPDF – a command line tool for PDF operations

pdf-icon

QPDF is a command line tool for creating / editing and managing PDF. This is a powerful tool manages almost all PDF operations.

You can convert one format of PDF to other, also possible bulk PDF operations.

Detailed documentation for QPDF can be found here.

eg, normalize a serialized PDF:

Shell
1
qpdf  input.pdf  --normalize-content=y  output.pdf

 

eg,remove xref streams from PDF:

Shell
1
qpdf  input.pdf --ignore-xref-streams  output.pdf

 

0 Comments

Origami – PDF library for Ruby

Origami is a ruby library for crating / editing and Managing PDF files. There is only less ruby PDF library which supports digital signature kind of feature in PDF.

Recently I have used Origami for signing a PDF document.

You can find the details of Origami library here.

Gem version of Origami library is also available in RubyGems

Shell
1
gem install origami

The full source is here.

Sample code to sign a PDF using Origami:

Ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
require 'origami'
 
#method to execute a command using shell
def command?(command)
system("which #{ command} > /dev/null 2>&1")
end
#I used qpdf to check a PDF status like whether it is linearized or xref-streamed, because Origami has no support for those kind of PDFs
raise unless command? 'qpdf'
input = "sample.pdf"
 
mypdf = Origami::PDF.read input
 
#code to convert linearized PDF
if mypdf.is_linearized?
command = "qpdf #{input} --normalize-content=y #{intermediate}"
system("#{ command} > /dev/null ")
mypdf = Origami::PDF.read intermediate
end
 
#code to convert xrefstreamed PDF
if mypdf.revisions.last.xrefstm.nil? == false
command = "qpdf #{input} --ignore-xref-streams #{intermediate}"
system("#{ command} > /dev/null ")
mypdf = Origami::PDF.read intermediate
end
 
#load certificate file
certificate_raw = File.read "server.crt"
certificate = OpenSSL::X509::Certificate.new certificate_raw
#load key file
key_raw = File.read "server.key"
key = OpenSSL::PKey::RSA.new key_raw
#signature image
imageobject = Origami::Graphics::ImageXObject.from_image_file('logo.jpg', 'jpg')
imageobject.Width = 100
imageobject.Height = 100
 
myannot = Origami::Annotation::RichMedia.new
myannot.Rect = Origami::Rectangle[:llx => 120.0, :lly => 386.0, :urx => 190.0, :ury => 353.0]
 
sigannot = Origami::Annotation::Widget::Signature.new
sigannot.Rect = Origami::Rectangle[:llx => 89.0, :lly => 386.0, :urx => 190.0, :ury => 353.0]
sigannot.Contents = "Hello World"
sigannot.Border = [ 1 , 1 , 1 ]
#add the signature page
page = Origami::Page.new
mypdf.append_page(page)
page.add_annot(sigannot)
 
mypdf.sign(certificate, key,
:method => 'adbe.pkcs7.sha1',
:annotation => sigannot,
:location => "India",
:contact => "fred@security-labs.org",
:reason => "Proof of Concept by Sajith"
)
#save the output file
mypdf.save('OUT.pdf')

 

 

 

 

3 Comments

Problem using external images in blog post

Usually when I write article, to avoid the headache of uploading an image and cropping them to fit for a post, sometime I used external image urls inside the post to make it quicker when writes.

Two weeks ago, I noticed my website showing as virus attacked in chrome, though it is loading behind the warning.

When I close examined it, the virus error was caused due to an image, loaded from an external website, which is affected by some critical virus attack. Chrome backlist those websites and using images from those website will affect your site as well.

So, the lesson 7 is, never use external images while writing blog post, though it helps you using others bandwidth. Better we compromise on that bandwidth part in ours.

 

 

0 Comments

How to parse a CSR request using openssl

Use the following command to read what is inside a CSR data

eg CSR: (from CSR Decoder)

—–BEGIN CERTIFICATE REQUEST—–
MIICzTCCAbUCAQAwgYcxCzAJBgNVBAYTAkdCMRYwFAYDVQQIEw1TdGFmZm9yZHNo
aXJlMRcwFQYDVQQHEw5TdG9rZSBvbiBUcmVudDEjMCEGA1UEChMaUmVkIEtlc3Ry
ZWwgQ29uc3VsdGluZyBMdGQxIjAgBgNVBAMTGXRlc3RjZXJ0LnJlZGtlc3RyZWwu
Y28udWswggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDWLeW88IeAIa3n
23R99i874fh0jetf+STsGPgkfGXGJ++tclKGk3MJE0ijD4PNaxGXUCNULgn2ROyy
bm5sTmGzpEOD+1AAAyV+pLQoFNkHEFuudGqVM6XkPWfqaM2vKvdzUbPPC0X/MfDF
GPxc8AY3TUM385c9c9/WOIF6NUcAvAFIQF0zG7evzJZBqDb4enUnatMSLHmxRWMi
1JeHtfLINXhNitHewEQWgIB3j1xmh7CPO5FeTb6HzQDxc+f7uMisY6s9J/Ph3GeO
CeIDooqU8jnfV5eGEzIMH5CFMZjajrNKF4DYK3YRyUI0K66+v0KILoUntEs++M20
LhOn+VE9AgMBAAGgADANBgkqhkiG9w0BAQUFAAOCAQEAUWE7oBX3SLjYNM53bsBO
lNGnsgAp1P1fiCPpEKaZGEOUJ2xOguIHSu1N1ZigKpWmiAAZxuoagW1R/ANM3jXp
vCLVBRv40AHCFsot9udrdCYjI43aDHAaYvLmT4/Pvpntcn0/7+g//elAHhr9UIoo
MZwwwo6yom67Jwfw/be/g7Mae7mPHZ2lsQTS02hEeqVynIRk2W9meQULrt+/atog
0mqJSBx0WswtHliTc+nXFpQrwFIEzVuPGCOVw7LmCfNmHNCkZVuRSJB/9MdLmrfw
chPI3NeTGSe+BZfsOtpt2/7j+bqeYKFu8B0stLoJBEnihxUoV18uZOmOeuVuX1N6
nA==
—–END CERTIFICATE REQUEST—–

Save the csr text inside a file, say mycsr.csr
From command prompt type:
openssl req -in mycsr.csr -noout -text
Here is an online tool doing the same: CSR Decoder

0 Comments

Tooltip using CSS3 – HTML5 iPhone Website Part 3

This entry is part 2 of 3 in the series HTML5 iPhone Site Development

This post is part of series HTML5 iPhone Website

How can we make a tool tip bubble using CSS3.

A tool tip is a box and an arrow at the edge pointing something. We can create this using two divs or one div and a span, one in normal mode and the other rotate through 90 degree or nearer.

html5 tool tip idea

Then, we make them rounded corners, borders, and by changing z-index, we move the smaller div behind the main div, then it will look like this:

HTML5 tooltip

 

Here is the CSS for the above tool tip

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.menutool {
position:absolute;right:10px; width: 180px;height: 61px; padding-top: 15px; padding-left: 22px; margin-top: 10px;;
background: #f0f0f0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 2px 2px 3px 1px #8c8c8c;
-moz-box-shadow: 2px 2px 3px 1px #8c8c8c;
box-shadow: 2px 2px 3px 1px #8c8c8c;
border: 1px solid #8a8a8a;
z-index: 1000;
display: none;
}
.menutool span {width: 15px; height: 15px; top: -9px ; position: absolute; right: 13px ;
-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
border-top: 1px solid #8a8a8a;
border-left: 1px solid #8a8a8a;
background: #f0f0f0;
z-index: 999;
}

Another example for tooltip bubble, (this is for bookmark tool tip for iPhone)

iphone bookmark tool tip

Here is the CSS for the above image

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.bmpopup {
background: none repeat scroll 0 0 #F0F0F0;
border: 1px solid #8A8A8A;
border-radius: 8px 8px 8px 8px;
bottom: 13px;
box-shadow: 2px 2px 3px 1px #8C8C8C;
height: 60px;
left: 16%;
margin-top: 10px;
padding: 8px 12px;
position: fixed;
text-align: justify;
width: 180px;
z-index: 1000;
display:none;
}
.bmpopup span {width: 15px; height: 15px;  bottom: -9px ; position: absolute; left: 49% ;
-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
border-right: 1px solid #8a8a8a;
border-bottom: 1px solid #8a8a8a;
background: #f0f0f0;
z-index: 999;
}

 

 

 

 

1 Comments

CSS 3.0 Tools – Don’t reinvent the wheel

This entry is part 3 of 3 in the series HTML5 iPhone Site Development

This article is part of  series, “HTML5 iPhone Website Development”

During your CSS creation, whenever  you think you need a gradient or rounder corner or a rotation, we can use the advantage of CSS3.

Don’t need to go to W3Schools or any CSS 3 documentation, that is old style :)

Use online tools, example and the one I mostly used: http://css3generator.com/

Here you can create css3 for most of the browsers support CSS3. In our case, we just need to take the web-kit part, as we are making this for iPhone. However, during your learning, better to copy full CSS, so that you can see the changes using your Firefox, I  know you will be using Firefox for development and html slicing with Firebug :)

So copy the full CSS from css3generator.com for the beginning. In the final stages of your development, you can remove unwanted css if you want this site in iPhone only.

Using this tool you can set

Border Radius, Box Shadow, Text Shadow, RGBA, Font-Face for custom fonts, Multiple Column divs, box sizing and resizing, Outlines, transitions, transformations, Selectors, Different Gradients etc.

Some output of these CSS3 looks like this:

Search box design (rounded corner and shadow) :

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.searchbox .searchtext{
border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-box-shadow: inset 0 0 5px #999;
-webkit-box-shadow: inset 0 0 5px #999;
box-shadow: inset 0 0 5px #999;
border-right: 1px solid #aeaeac;
color: #7f7f7e;
font-size: 14px;
width: 84%;
float: left;
height: 25px;
padding: 2px 2px 2px 4px;
margin-left: 4px;
margin-top: 4px;
}

Gradient Menu Background:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.menu-container ul li {
padding: 10px;
border-bottom: 1px solid #c6c6c6;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

Rounded shaped button:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a.green-button {
background: #00a943; /* Old browsers */
background: -moz-linear-gradient(top, #00a943 0%, #00a341 50%, #008d18 50%, #008d18 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a943), color-stop(50%,#00a341), color-stop(50%,#008d18), color-stop(100%,#008d18)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* IE10+ */
background: linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a943', endColorstr='#008d18',GradientType=0 ); /* IE6-9 */
border: 1px solid #848484;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
padding: 8px 15px 8px;
text-align: center;
text-decoration: none;
width: 84%;
margin: 20px 0px 20px 4%;
float: left;
}

In the next post, we can see different designs like Facebook Button, Bubble tool tips, Loading indicators etc in CSS3 in 3-4 lines

0 Comments

HTML5 iPhone site development – Part 1

This entry is part 1 of 3 in the series HTML5 iPhone Site Development

Started writing a series post after a long time for HTML5 iPhone Website Development.

Read my previous Series here:

Gmail Architecture

Online Photoshop

Basic Structure

As usual start designing your website with iPhone layout in mind. Things to remember before you design

1) iPhone support HTML5 and CSS3

2) iPhone has two orientations.

3) iPhone has no built in Menu for browser (mobile safari)

4) iPhone has a footer navigation by default in Safari

Why these things are important before we design something in Photoshop ?

Because, since iPhone has CSS3 support which has a lot of design advantages like rounded corner, gradients, rotation, dual background etc, the design can make a design which is suitable for a HTML developer to slice. In normal website development, we achieve these effects using small or big images in repeated mode. Here in CSS3.0, it all done using 2-3 lines of plain text in CSS file.

Since iPhone has 2 orientation, it is up to the product designer to decide whether we want two layouts of just one. Because iPhone can use two different CSS files for different orientation. I will cover this in coming chapters.

The number of controls or button in mobile safari browser is less, and hence we need to provide custom menus in our designs for each navigation, say go to home page, or my galleries, terms page etc. Also every click is just taps, and there is no scope for hover events, which is used in good consideration in majority of the Desktop websites.

Since safari has a footer navigation already, we can avoid many back buttons in our designs. Also can think about tools like Bookmark is placed at bottom. So, if you want to show a tool tip to bookmark your site, you can locate that tool tip button on the footer. (In coming series I will show you how quickly we can create a tool tip bubble for bookmark just with css3.o)

Special Tags

Once the design is done, before we start slicing, need to check some special tags available for iPhone (I would say for many latest handsets)

Doctype and HTML tag:

XHTML
1
2
<!DOCTYPE html>
<html xml:lang="en" lang="en">

Meta tags:

XHTML
1
2
3
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />

For iPhone, it is better to display a website in full width mode, without any zoom options, these meta tags simply does this.

The rest of the slicing, just follow typical div-css float model design (of course no table)

Continue like normal CSS slicing, and think about using CSS3.0 techniques whenever needed. All backgrounds, gradients, shadows, borders, round corners, rotations etc, use CSS3.0. In the next chapter, I will show you which are the tools we can use to create css3.0 for a particular design.  Don’t reinvent the wheel by learning all css3.0 techniques, Google is there for you :)

See you in next series post, “CSS3.0 tools – don’t reinvent the wheel”

Tips:

You can create custom bookmark icon using the following header, this is same like favicon for Desktop browsers:

XHTML
1
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>

Thanks

Sajith

 

 

0 Comments

HTML5 Audio: Browser Self Test

Created a small html5 page today to check which audio format your browser support in HTML5.

It is using a Javascript code to detect browsers audio status dynamically and show the result.

I also added 5 different audio format sample using html5 audio node, and using this you can test whether any particular format is playing or not

It works for both Desktop browsers and mobile browsers.

Here is the URL:

http://www.sajithmr.me/html5/audio/

0 Comments , , , , , , ,

Facebook changes App profile page

From February 2012 onwards, Facebook stops App profile pages. But you can still move all your page likes and users to new page (till Feb).

The new Facebook app creation flow is really confusing.

For developers, to add a app as a tab to another page, you  need to user the following URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

next parameter should be your canvas page url.

Here you can see an option to add this app to your page.

0 Comments

Install Asterisk in Mac (including Lion)

Mac port packages are available for Asterisk in mac

As a first step, do a port update to get all new packages:

port selfupdate

Step 2:

sudo port install asterisk

[This is a long process, it will start installing many dependancy packages]

Possible errors you can see:

1) Image error: /opt/local/bin/a2p is being used by the active perl5.8 port.  Please deactivate this port first, or use ‘port -f activate perl5′ to force the activation.

Solution: Check all perl version installed using the given command:

sudo port installed | grep perl

Uninstall old perl version will solve this problem.

eg: port uninstall perl5 @5.8.9_0

sudo port uninstall   perl5.8 @5.8.9_3

Also if you can run an update outdate package command, this will be alos helpful:

sudo port upgrade outdated

Continue again the command: sudo port install asterisk

2) Error: Target org.macports.configure returned: configure failure: shell command failed (see log for details).

portaudio failed to install.

Solution: Download port audio files from portaudio website.  Replace the source files of portaudio local folded  (where the error is located) and Manually install it using the following commands

sudo /usr/bin/make -j2 -w all
sudo /usr/bin/make install

After installation, link this portaudio with port installation using the following command:

port -f activate portaudio

Continue running this command: sudo port install asterisk

3) When installing Asterisk, you may get another error:

For a undefined variable: snmp/agent.c:830: error: ‘RONLY’ undeclared

Solution: Find the file snmp/agent.c and add #define RONLY 1

If Asterisk still fail to install, download the package file from asterisk website and install manually.

Before compiling this, edit makeopts file and update the line:

change “CONFIG_LDFLAGS=” to “CONFIG_LDFLAGS= /usr/lib/bundle1.o

Good luck

0 Comments

Pass parameter to an iframe embedded Fan Page in Facebook

Those who use their on hosting inside an iframe  for Facebook Fan page, there is a mechanism to pass additional parameters to your iframe page if you need to create a deep URL.

A normal Fan page of Facebook would like this:

https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX

This Url will call your domain, say example.com inside the iframe to load the page.

Each time the iframe is loaded, Facebook do a POST to this iframe URL with some data which we can use to identify the status of the user, eg, whether the user already liked this page, or any other parameter is passed through the fan page url.

Facebook keep app_data variable for developers to pass additional parameters to your iframe page.

eg: https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX&app_data=mydata

To retrieve this information, in PHP, use can use the following code:

<?php

if(isset($_REQUEST["signed_request"]))
{

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if(isset($data['app_data']))
{
$mydata = $data['app_data']; //here you can get the value you passed
}
}

?>

Check my article here  to see how you can get the ‘like’ status using PHP

Courtesy: From various online sources

Thanks
Sajith

0 Comments

jRecorder 1.1 with Preview option is released

Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

60 Comments

Started writing on Buzitweet

Buzitweet is a blogging platform where anyone can register using a Facebook account and can post your articles. No matter what topic it is, it can be programming, videos, quotes, images, pictures or any thing.

I use that platform for writing quick programming tips, and which I feel  really interesting.

Here are my recent 4 posts:

Upload File using PhoneGap

PhoneGap new version comes with upload/download file support in iPhone/Android and BlackBerry

Problem in PhoneGap accessing external URL

Article on how to access a 3rd party website content using PhoneGap (Default setting does not allow this)

Change Browser Address Location using Javascript (w/o reloading)

Article on manipulating browser address bar without reloading the page. Do not work for IE

Get filetype from header without checking extension in Unix

Get the MIME type of a file without checking the extension of the file (Good way – Unix style)

 

Thanks

Sajith

 

 

 

0 Comments

Facebook – Like to see the content

Sometime in Facebook Pages, you can see the message / banner, we have offers for you, like us to see. Or Like us to unlock the content etc. These all are for getting more likes in their Facebook page and indeed, it is a very nice idea to spread your updates among many of your Facebook Fans. Usually people won’t do the dislike option to revert it back!

The question is how can we do this ?

The trick here is, you need to create a page using iframe as you usually create FB app. In that iframe, you have your custom page fragment hosted somewhere else showing some copies/contents/offer etc.

Each time when Facebook load your url inside the iframe, Facebook do a POST to your domain signed_request as the parameter. The rest of the part you have to handle with your server side scripting.

Here mine is PHP:

<?php

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if (empty($data["page"]["liked"])) {

//write code here to show a non-liked situational contents
echo “You haven’t liked us yet”;

}
else {

//write code here to show contents for already liked people
echo “Hello Fan, here are your offers.”;

}
?>

6 Comments