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:

#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

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:

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

eg,remove xref streams from PDF:

qpdf  input.pdf --ignore-xref-streams  output.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

gem install origami

The full source is here.

Sample code to sign a PDF using Origami:

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')

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.

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

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.

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:

Here is the CSS for the above tool tip

.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)

Here is the CSS for the above image

.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;

}

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) :

.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:

.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:

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

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:

<!DOCTYPE html>
<html xml:lang="en" lang="en">

Meta tags:

<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:

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

Thanks

Sajith

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/

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.