Important Note

It’s very important to say that the following results are dependant from the machine and the environment!

Source Code

Here’s the PHP source code.

function divide($n = 1) 
{
	$a = microtime(true);
	for ($i = 0; $i < $n; $i++) {
		300/2;
	}
	echo microtime(true) - $a;
}
 
divide(100);
//divide(1000);
//divide(10000);
//divide(100000);
//divide(1000000);
//divide(10000000);

and bitwise …

function bitwise($n = 1)
{
	$a = microtime(true);
	for ($i = 0; $i < $n; $i++) {
		300 >> 1;
	}
	echo microtime(true) - $a;
}
 
bitwise(100);
//bitwise(1000);
//bitwise(10000);
//bitwise(100000);
//bitwise(1000000);
//bitwise(10000000);

Note that each method was called 6 times with the same parameter. This means that divide(100) was called 6 times and then I used the average value of these six times.

Results

I said back then in my binary search post, that in PHP the bitwise operator “>> 1″ is not faster than the typical division with the “/” operator. However the results tells us that using bitwise division is slightly faster, as you can see at the diagram bellow.

n		">>"			"/"
100		0.0002334912618		0.000311803817749
1000		0.001911004384359	0.007335503896078
10000		0.013423800468445	0.039460102717081
100000		0.14417803287506	0.21413381894429
1000000		1.15839115778605	1.17152162392935
10000000	10.556711634		11.0911625623705

Bitwise division is slightly faster!

Conclusion

Although bitwise division is a bit faster the difference is so small that you should work with very large data in order to gain some performance.

Related posts:

1. JavaScript Performance: for vs. while
2. Firebug’s console.time() accuracy
3. jQuery live() vs bind() performance

var a = 5;
 
function f() { return a; } // returns 5

Thus f will return the value of “a” which equals to 5. You can also change the value of the global variable in the function body.

var a = 5;
function f() { a = 10; return a; }
console.log(a); // equals to 10

Now after we call the function f the value of “a” will equal to 10. This is because we reference the global variable “a” into the function body without using the keyword “var”. This means that if you put the “var” keyword the variable “a” inside the function body is no longer the same variable as the variable defined outside the body. It becames “local” and it’s visible only inside the function.

Objects & JavaScript

Actually in JavaScript functions can be also objects. Any variable defined with the “var” keyword becomes private, because it’s only visible inside the function body, while by using the “this” keyword we can define global variables visible outside the function body. Let’s see na example.

var f = function() 
{
	var a = 10;
	this.b = 5;
}
 
var myfunc = new f();
myfunc.a; // is undefined because a is private
myfunc.b; // equals to 5 because b is public

Public and Private Methods in JavaScript

As you may know in JS you can define functions inside other functions. Actually this is how you can define classes in JavaScript.

var myClass = function() 
{
	var f = function() {
		return 10;
	}
}

But this in fact defines a local (private) function into myClass and we cannot access it from the outside world. Here’s a fully functional class with one public and one private method.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
 
	// private method
	var b = function() {
		return 5;
	}
}
 
var c = new myClass();
c.a(); // will return 10
c.b(); // is undefined, because is private

Accessing Private Methods from Public Methods

Easily we can access private methods from public ones.

var myClass = function()
{
	// public method
	this.a = function() {
		return b();
	}
 
	// private method
	var b = function() {
		return 5;
	}
}

However accessing public mtehods in private ones is more difficult. That’s because we cannot use “this” into the private methods, just because “this” refers to the private method
itself and not to the global method, which is “myClass” in our case.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
 
	// private method
	var b = function() {
		return this.a(); // this will result in an error
	}
}

Accessing Public Methods from Private Methods

To access public methods in private methods you need to define a variable that points to the global “this” object.

var myClass = function()
{
	var self = this; 
 
	// public method
	this.a = function() {
		return 10;
	}
 
	// private method
	var b = function() {
		return self.a(); // this will return 10
	}
}

This variable gives you the bridge between private methods and global “this” pointer.

Related posts:

1. Object Oriented JavaScript: Inheritance
2. Some Notes on the Object-oriented Model of PHP
3. Quick Look at JavaScript Objects

JavaScript, being a functional language, differs from most of the procedural/object oriented languages we know. The object oriented approach in JavaScript is rather strange. However there is much power in making objects! The syntax is really odd and there are several approaches.

Literal Notation

As many of you may know the most used notation is the JSON (JavaScript Object Notation).

{ 'key1' : 'val1'
, 'key2' : 'val2'
, 'key3' : 'val3'
}

Of course this is the very basic example. You can use as value any JavaScript object – another similar object or a function.

{ 'key1' : 'val1'
, 'key2' : { 'inner_key1' : 'inner_val1' }
, 'key3' : function() {
			return 10 + 5;
		 }
}

The two examples above are showing an anonymous object in JavaScript, but you can assign this code to some variable.

var myObject = 
	{ 'key1' : 'val1'
	, 'key2' : 'val2'
	, 'key3' : 'val3'
	}

or

var myObject =
	{ 'key1' : 'val1'
	, 'key2' : { 'inner_key1' : 'inner_val1' }
	, 'key3' : function() {
				return 10 + 5;
			 }
	}

and then you can call the properties of these objects with the ‘.’ operator:

myObject.key1;
myObject.key2.inner_key1;
myObject.key3();

So far so good – this is the literal object notation in JavaScript. However there is another “objects” in JavaScript.

Objects and Functions in JavaScript

Actually in JS the functions are also objects (classes). So you can define a function and then define another function inside or use the “this” operator.

var a = function(name)
{
	this.name = name;
 
	this.print = function() {
		alert(this.name);	
	}
}

Then you can make a new instance of this “class”.

var myObject = new a('hello world');
var anotherObject = new a('some test');
 
myObject.print(); // will print the string "hello world"
anotherObject.print(); // will print the string "some test"

Thus the function “a” defined within the code “var a = function(name) …” is a class in JavaScript. You can make instances (objects) of this class with the “new” operator.

You can use another notation for defining the function “a”, so both can be used and it’s up to you to decide which one is more convenient.

function a(name) 
{
	this.name = name;
 
	this.print = function() {
		alert(this.name);	
	}	
}

Prototypes

JS gives you more power. In most of the languages you’ve to define the class first and then make objects. In JS you can define a “class” then make some objects and then add some properties to the class by using the prototype.

var a = function(name) 
{
	this.name = name;
}
 
var myObj = new a('hello world');
 
a.prototype.print = function() {
	alert(this.name);	
}
 
myObj.print();

So you can see how you can add functions and properties to an already defined class using the prototype. Thus you can call the “print” function on the myObj object.

Inheritance

The prototype built-in property can be used to make use of one of the main OOP features – inheritance.

var SuperClass = function()
{
	this.superFunction = function() {
		return 'function in Super Class';	
	}
}
 
var sup = new SuperClass();
sup.superFunction(); // will return the string "function in Super Class"

Now you can add one more class and set its prototype to the SuperClass

var SubClass = function()
{
	this.subFunction = function() {
		return 'function in Sub Class';	
	}	
}
 
SubClass.prototype = new SuperClass();

Thus you make SubClass inherit from SuperClass. Now you can call the SuperClass properties from any SubClass object.

var sub = new SubClass();
sub.superFunction(); // will return the string "function in Super Class"
sub.subFunction(); // will return the string "function in Sub Class"

Even more! You can add properties to the super class with prototype.

SuperClass.prototype.myFunc = function() {
	return 'my new function';	
}

And then call it from the sub class:

sub.myFunc(); // will return the string "my new function"

Override a Function

What happens if you have the same function name in both classes. Actually this overrides the method in the sub class.

var SuperClass = function()
{
	this.myFunc = function() {
		return 'function in Super Class';	
	}
}
 
var SubClass = function()
{
	this.myFunc = function() {
		return 'function in Sub Class';	
	}	
}
 
SubClass.prototype = new SuperClass();
 
var sub = new SubClass();
sub.myFunc(); // will return the string "function in Sub Class"

while

var sup = new SuperClass();
sup.myFunc(); // will return the string "function in Super Class"

Conclusion

Now you know there are classes, inheritance and overrides in JavaScript – thus you can improve your object oriented JavaScript!

Related posts:

1. OOP JavaScript: Accessing Public Methods in Private Methods
2. Some Notes on the Object-oriented Model of PHP
3. Quick Look at JavaScript Objects

Usually when you use an IFRAME tag to link an external source the page that’s referenced by the SRC attributes is loaded at the top left corner. This is the default behavior, but sometimes you’d like to show to your users not the entire page from the top left corner, but to show only part of the external page instead.

In most of the cases the reference is external and you don’t have control over the external page. Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they’re all a bad solution, because the scrolling occurs only after the page is loaded.

The Solution

You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.

Here’s an example:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}
 
#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>

Example with the awesome Yahoo! Homepage:

Related posts:

1. Scroll the page with JavaScript
2. remove iframe border on IE
3. CSS default position value

You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

fig. 1 - Facebook Attach a Link Prompt Screen

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

fig. 2 - Facebook Attached Link Screen

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:

<meta property="og:image" content="http://b.vimeocdn.com/ts/572/975/57297584_200.jpg" />

And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

fig. 3 - Vimeo Thumb

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format.

Meta Tags and The Open Graph Protocol

By default meta tags contain various information about the web page. They are not visible in the webpage, but contain some info about it. The most common meta tags are the title, description and keywords tags. They of course contain the title of the page, not that this can be different from the <title> tag, a short description of the page and some keywords describing the content of the page. They are well known also because the search engines make use of them when trying to collect information about the page and the process of SEO passes through it.

However the default HTML meta tags cannot contain everything. Thus for example you cannot point the preferable thumbnail for a webpage. The solution is the Open Graph Protocol. It comes with meta tags that can contain more and more valuable info. Such a tag is the og:image meta tag. Note that all the Open Graph (og) meta tags are defined by the og: prefix before the entity name. Thus og:image comes for images, while og:longitude for geo positioning.

That’s really useful, but how you can read them?

PHP, Meta Tags and Regexps

When you try to read information from a webpage source the first possible path is by using regular expressions. However PHP is smart enough to offer you some useful functions. Such a function is get_meta_tags(). As you may guess this method reads the meta tags by given URL.

$a = get_meta_tags('http://vimeo.com/10758212');
var_dump($a);

However this method can’t read Open Graph tags. So finally you’ve to use some regexps.

preg_match('/<meta property="og:image" content="(.*?)" \/>/', $source, $matches);

Now you can grab the og:image tag. And even more – grab every image (<img>) from that page.

preg_match_all('/<img src="(.*?)"/', $source, $m);

Related posts:

1. How to Sanitize User Input in PHP?
2. Automatically Upload Images with PHP Directly from the URI
3. HTML Tags: <base>

First of all what do we have? There is a vector shape, which may represent a map, which we’d like to convert into a GEO map. In other words there is a SVG file containing the source shape, that you’d like to convert in geoJSON or whatever collection of geo points. This is not trivial, of course, first of all because there’s no an algorithm or automation that can do this, and because everybody knows that the resulting map will be only approached, but will never be so accurate as the vector shape. This is because in a vector shape you may contain Bézier Curves, which I’ll show a little bit later in this post, that are difficult to represent in geo coordinates.

So the first task will be to find an approaching algorithm. However there are two things that are optimistic:

1. You can’t effectively represent Bézier curves in geo coordinates, but even if you could do it there’s no practical need, because the collection of geo coordinates will be huge and this will slow down you’re application. Remember that geoJSON is yet again possibly used by your browser and the amount of geo points will be proportionally slowing down the app.
2. As you may know Google’s visualization map is representing the World’s countries again with quite approached maps. Take a look at the following image – the country borders are quite sharpened:

So far we know that we need an approaching algorithm that will convert vector lines and possibly curves in geo coordinates, but before we proceed we’ve to understand the SVG format.

SVG Format and Possible Approaches

Let me give you an example of a SVG file. By opening such file with a text editor you can see the file format:

M76.484,153.703c-0.86-0.27-3.816,0.199-4.002-1.055
	c-0.049-0.328-1.109-1.799-1.512-1.824c-0.647-0.04-5.182,1.896-5.219,2.013c-0.051,0.161,0.928,0.627,0.319,0.832
	c-0.028-0.003-0.716-0.36-0.816-0.334c-0.13,0.034-0.262,0.834-0.363,0.771c-0.176-0.24-0.179-0.48-0.007-0.719
	c-0.986-0.764-0.345,0.764-0.526,0.764c-0.771,0,0.184-0.849-0.675,0.037c-2.13-0.433-2.267-0.756-4.129-2.754
	c-1.329-1.42,0.383-8.158-1.571-8.535c-2.223-3.153-6.413-3.037-8.806-5.037c0.107-0.278,0.201-0.563,0.282-0.853
	c0.369,0.372-4.136-0.768-4.373-0.862c-1.498-0.604-3.574-0.133-4.656,0.355c-0.028-1.22,0.171-2.329-0.593-3.027
	c0.588-2.548-0.652-4.752-2.98-4.199c-0.443-1.354,0.142-0.868-1.171-1.483c-0.154-2.069,2.703-7.729-2.239-8.185
	c2.009-3.137-6.201-0.985-6.627-3.125c-0.14-0.703-5.574,1.563-5.752,0.192c-0.39-2.987-4.411-2.185-5.371-3.372
	c0.518,0.641-6.067,1.078-5.645,0.85c-0.118,0.063-1.38,5.328-1.307,4.994c-0.457,2.076,3.774,9.01,2.893,9.625
	c-0.495,0.347-3.159,6.972-1.295,8.588c-0.59-0.512,2.894-0.209,3.163-0.129c1.333,0.396,3.091,1.66,3.469,3.176
	c0.52,2.486-0.793,2.359-2.357,3.013c-0.658,0.274-2.289,6.779-2.368,7.461c-0.319,2.747-1.413,4.468-1.264,7.483
	c0.098,1.984-0.368,2.326,0.891,4.287c1.933,3.004,2.018,2.57,2.178,5.813c-0.127,1.556-1.742,3.565-1.568,5.388
	c0.074,0.77,0.485,2.028,0.235,2.795c-0.286,0.875-1.936,1.557-1.573,2.627c3.253-2.051,4.522,3.092,8.168,2.83
	c0.958-0.069,3.996,1.508,4.536,1.938c1.437,1.12,2.39-1.618,3.232-1.618c-1.037,0,3.461,2.315,2.95,1.774
	c0.828,0.873,3.852-0.123,5.026,0.304c2.416,0.881,6.011-1.386,7.227-2.174c1.616-1.048,3.15-1.38,4.396-2.816
	c0.639-0.737,2.375-4.448,3.254-4.366c0.354,0.032,0.59,1.01,1.06,0.652c0.163-0.126-1.075-2.664,0.689-2.664
	c0.935,0,4.283-2.113,3.799-3.344c-1.384-3.521,4.799-1.365,6.683-1.926c0.335-0.1,7.816-8.23,7.865-8.641
	C70.216,157.721,77.5,154.025,76.484,153.703C76.247,153.629,76.721,153.777,76.484,153.703z

This text represent this shape:

First thing to notice is there are things quite different from the HTML markup. Of course this things are noticeable. There is a M, c and z where the first two are followed by some numbers. What are these characters? Well lets see at W3.org. There are lots of SVG specific commands, but we need to understand only few of them.

1. M (absolute) m (relative) – moveto

Start a new sub-path at the given (x,y) coordinate. M (uppercase) indicates that absolute coordinates will follow; m (lowercase) indicates that relative coordinates will follow. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto.

2. Z or z – closepath

Close the current subpath by drawing a straight line from the current point to current subpath’s initial point. Since the Z and z commands take no parameters, they have an identical effect.

3. C (absolute) c (relative) – curveto (x1 y1 x2 y2 x y)+

Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

4. L (absolute) l (relative) – lineto (x y)+

Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. L (uppercase) indicates that absolute coordinates will follow; l (lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.

1. Bézier Curves

So far we know that the especially the c command draws a curve – a Bézier curve. But what is a Bézier curve anyway? Here’s a little explanation you can find at Wikipedia. Here’s an example of a cubic Bézier curve:

First thing we see is that here there are four points – p0, p1, p2, p3. The curve between p0 and p3 is defined by them and the two control points – p1 and p2. To be more precise let me show you an animation of how this curve is constructed:

This is the way the red line is constructed with the help of the green and blue lines, and of course the points p1 and p2. The result is a smooth line that’s often used in animation and shapes. This is our case. As you’ve seen the example above is constructed only with curves.

Before we proceed let me say that there are lots of types of Bézier curves not only cubic. Here they are:

1.1. Linear Bézier curve

1.2. Quadratic Bézier curve

1.3. And event Higher-order curves:

2. What You Need To Know About The SVG Format

However the most important thing to know is the heart of SVG curve format. First you MOVE to a point with the M command. Lets see how does it look in our case:

M76.484,153.703 – This simply means: move to the point with coordinates (76.484, 153.703)

The next step is to draw a curve. We’ve seen that a cubic curve is defined by four points – p0, p1, p2 and p3, but what we have in the SVG format:

c-0.86-0.27-3.816,0.199-4.002-1.055

Here there are only three points (-0.86, -0.27), (-3.816, 0.199), (-4.002, -1.055) – not four. Well these are only the last three points, the first one is the one defined by the M command. Next thing to know is that the M command defines an absolute point in the canvas of the SVG file, while the c (shouldn’t be mistaken with C) is a relative curve. This means that if the p0 is the point (76.484, 153.703), the p1 point is relative to it with small difference in coordinates – (-0.86, -0.27).

However the most important thing to know is that after drawing the curve:

At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

This is extremely important! This means that the last point of this curve becomes the p0 of the next curve, and the three points of the second curve, in our case:

c-0.049-0.328-1.109-1.799-1.512-1.824

are relative to the last (x, y) of the previous curve – (-4.002, -1.055). Without this you cannot convert any SVG shape into geo coordinates.

3. Lines Instead of Curves

OK, I said about an approaching algorithm, that is only approaching the curved vector shape. This means that I can simply replace the curves with lines. Thus I’ve to change to SVG file format from using the c command to the l command, as l is also relative. The curve:

M76.484,153.703 c-0.86-0.27-3.816,0.199-4.002-1.055

will become

M76.484,153.703 l-4.002-1.055

and so forth. This will result into the more sharpened shape:

However this is again a SVG file and no Geo coordinates are present. To end up with this there’s a tiny PHP script that collects all the last pairs from the c commands and converts them to Geo Coordinates relative to the World’s center – (Lat, Lon) = (0, 0).

<?php
 
$str = '-0.86-0.27-3.816,0.199-4.002-1.055
c-0.049-0.328-1.109-1.799-1.512-1.824c-0.647-0.04-5.182,1.896-5.219,2.013
c-0.051,0.161,0.928,0.627,0.319,0.832c-0.028-0.003-0.716-0.36-0.816-0.334
c-0.13,0.034-0.262,0.834-0.363,0.771c-0.176-0.24-0.179-0.48-0.007-0.719
c-0.986-0.764-0.345,0.764-0.526,0.764c-0.771,0,0.184-0.849-0.675,0.037
c-2.13-0.433-2.267-0.756-4.129-2.754c-1.329-1.42,0.383-8.158-1.571-8.535
c-2.223-3.153-6.413-3.037-8.806-5.037c0.107-0.278,0.201-0.563,0.282-0.853
c0.369,0.372-4.136-0.768-4.373-0.862c-1.498-0.604-3.574-0.133-4.656,0.355
c-0.028-1.22,0.171-2.329-0.593-3.027c0.588-2.548-0.652-4.752-2.98-4.199
c-0.443-1.354,0.142-0.868-1.171-1.483c-0.154-2.069,2.703-7.729-2.239-8.185
c2.009-3.137-6.201-0.985-6.627-3.125c-0.14-0.703-5.574,1.563-5.752,0.192
c-0.39-2.987-4.411-2.185-5.371-3.372c0.518,0.641-6.067,1.078-5.645,0.85
c-0.118,0.063-1.38,5.328-1.307,4.994c-0.457,2.076,3.774,9.01,2.893,9.625
c-0.495,0.347-3.159,6.972-1.295,8.588c-0.59-0.512,2.894-0.209,3.163-0.129
c1.333,0.396,3.091,1.66,3.469,3.176c0.52,2.486-0.793,2.359-2.357,3.013
c-0.658,0.274-2.289,6.779-2.368,7.461c-0.319,2.747-1.413,4.468-1.264,7.483
c0.098,1.984-0.368,2.326,0.891,4.287c1.933,3.004,2.018,2.57,2.178,5.813
c-0.127,1.556-1.742,3.565-1.568,5.388c0.074,0.77,0.485,2.028,0.235,2.795
c-0.286,0.875-1.936,1.557-1.573,2.627c3.253-2.051,4.522,3.092,8.168,2.83
c0.958-0.069,3.996,1.508,4.536,1.938c1.437,1.12,2.39-1.618,3.232-1.618
c-1.037,0,3.461,2.315,2.95,1.774c0.828,0.873,3.852-0.123,5.026,0.304
c2.416,0.881,6.011-1.386,7.227-2.174c1.616-1.048,3.15-1.38,4.396-2.816
c0.639-0.737,2.375-4.448,3.254-4.366c0.354,0.032,0.59,1.01,1.06,0.652
c0.163-0.126-1.075-2.664,0.689-2.664c0.935,0,4.283-2.113,3.799-3.344
c-1.384-3.521,4.799-1.365,6.683-1.926c0.335-0.1,7.816-8.23,7.865-8.641';
 
 
$matches = explode('c', $str);
 
$temp = array();
foreach ($matches as $k => $v) {
    // get the new relative point
    $s = $v;
 
    // a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);
 
 
    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }
 
    echo '[', ($m[5]), ', ', ($m[6]), '],<br />';
 
    // save the last point
    $temp = array($m[5], $m[6]);
}

Final Adjustments

I guess you don’t need any shape in the World’s center as you may not need it in the same scale. There are two things to do. First you can scale the map by multiplying by a factor every point:

// a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);
 
    // multiply by some factor
    $m[5] *= 0.05;
    $m[6] *= -0.05;
 
    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }

and than you can move the shape all over the world by adding some offset to the resulting point:

echo '[', ($m[5]-38.9), ', ', ($m[6]+10.7), '],<br />';

Further Researches

Here we just substitute the curves with lines, which is the most primitive approach. What about substituting each curve with corresponding two lines, or three lines. The resulting shape will be far more accurate in compare with the source “curved” shape. So there are still lots of things to be done. However this may help you do the job.

Related posts:

1. You should not insert an “a” tag in another “a” tag! …
2. HTML5 geolocation – What If the User Doesn’t Share His Position?
3. How to Collect the Images and Meta Tags from a Webpage with PHP

Perhaps you think of onfocus and onblur events as a default behavior existing in any web page. This is not quite true! Onfocurs and onblur are well known in web developing (js) and are fired, of course, when the user tries to point something or leaves some element. Onfocurs is fired when the user either goes to an element with the Tab button on with the mouse. When the element is on focus, evidently, the onfocus event is fired. Actually you can see which element is on focus, like an anchor or input, when the element is outlined by the browser by default. In the same scenario, when some element has been on focus and than the user switches to another element, the onblur event is fired. Thus you may guess that this element is no longer on focus.

This in general are the onfocus/onblur events. The interesting part is that by default are known as built-in events in every page, but that is wrong.

Where Are My Events?

A typical use case is to take the code from some web page, where you’re sure this works perfectly, you can focus and blur element with no obstacle, but once you paste it inside your markup everything’s going wrong. Imagine you’ve the following markup (a typical search box text):

<input type="text" onblur="if(this.value=='') this.value = 'Search in This Site';" onfocus="if(this.value=='Search in This Site') this.value = '';" />

This works perfectly until you paste it to your site. And than nothing works correctly. Why? Where’s the problem?

Make Them Work

Actually the problem isn’t hiding somewhere in the markup above. It’s in the HTML definition. There are lots of web pages using strict HTML definition, that looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	...
</head>
<body>
	...

while you’ve to use the pure HTML definition to make onfocus/onblur work.

You’ve to switch to:

<html>
<head>
	...
</head>
<body>
	...

Than you can continue using these useful events!

Related posts:

1. How to Sanitize User Input in PHP?
2. jQuery live() vs bind() performance
3. 2xjQuery: Select a Selector

Most of the mobile devices today support GPS geo tagging. In fact most of them come bundled with navigation software that uses GPS and therefore all the pictures and (maybe) videos can be geo tagged. But as expected different vendors come with different support and formats.

iPhone OS comes with geotagging both on video and image files, while the latest Android and Symbian (the Nokia main OS for smartphones) can geo tag only images.

Even more – until recently Symbian didn’t support any geotagging before the installation of an additional software – such as Location Tagger . So generally the things are quite simple:

1. iPhone OS geotags both video and image files;
2. Android geotags only images;
3. Symbian geotags only images – and on some devices this is possible only after installing a software;

This is in breve the state of mobile device geotagging!

Why Use GPS Data?

Perhaps one of the main reasons why not support geotagging especially on video files can be the usage of those geo tags. First of all what a geotag means?





You may know that even Android doesn’t “geotag” videos this is not quite true. Because after using you gallery you can see where those videos are shot. This is fantastic, but actually the real information about where the video has been taken is not into the video file, but it’s in an additional log file that keeps it. Thus actually the video files doesn’t know the geo coordinates.

Here comes the problem with video format, because you cannot be sure that every format supports tags that can keep geo coordinates. Actually quicktime’s MOV can store them, while Symbian’s 3GP cannot. In fact Symbian cannot store any geo information about video files!

So now we’ve at least three different formats for each of those three vendors.

1. quicktime for iPhone
2. mpeg-4 with Android
3. 3gp with Symbian

For now I can only say that iPhone can keep the geotag into his video files.





But let me return to the question – why we need this geo tags? Until the video file is on the mobile device – there’s no problem. But once you try to download it – whether on Flickr, YouTube, Picasa, etc. you’ll lose any geo information if it’s not into the file tags. And of course if the above sites can’t read it!

The general reason to store this data into the file is to move it along with the file. Once you move this file from your mobile device to a web platform you’ll see where the file has been created.

EXIF, Exiftool and PHP’s exif_read_data

There are several tools to read geotags. For images, and here we talk only for JPEGs, this is the EXIF information. You can download the exif command line program and try to reed data with it:

exif filename.jpg

Which can result in something like that:

Manufacturer        |Nokia                                                     
Model               |E71                                                       
Orientation         |top - left                                                
x-Resolution        |300.00                                                    
y-Resolution        |300.00                                                    
Resolution Unit     |Inch                                                      
YCbCr Positioning   |centered                                                  
Compression         |JPEG compression                                          
x-Resolution        |72.00                                                     
y-Resolution        |72.00                                                     
Resolution Unit     |Inch                                                      
FNumber             |f/3.2                                                     
Exif Version        |Exif Version 2.2                                          
Date and Time (origi|2011:01:24 12:15:01                                       
Date and Time (digit|2011:01:24 12:15:01                                       
ComponentsConfigurat|Y Cb Cr -                                                 
Aperture            |3.20 EV (f/3.0)                                           
Light Source        |0                                                         
Flash               |Flash did not fire, auto mode.                            
Focal Length        |4.9 mm                                                    
FlashPixVersion     |FlashPix Version 1.0                                      
Color Space         |sRGB                                                      
PixelXDimension     |2048                                                      
PixelYDimension     |1536                                                      
Custom Rendered     |Normal process                                            
Exposure Mode       |Auto exposure                                             
White Balance       |Auto white balance                                        
Digital Zoom Ratio  |1.00                                                      
Scene Capture Type  |Standard                                                  
GPS tag version     |0x02, 0x02, 0x00, 0x00                                    
North or South Latit|N                                                         
Latitude            |42.00, 39.00, 24.67                                       
East or West Longitu|E                                                         
Longitude           |23.00, 21.00, 28.45                                       
Altitude reference  |0x00                                                      
Altitude            |625.50

While for video files (iPhone) exif cannot help you, this is possible through Exiftool. With it you can read even iPhone video geotags:

./exiftool filname.mov

In addition this information can be read with PHP via exif_read_data:

$info = exif_read_data('filename.jpg');
var_dump($info);

And this will give you not only standard tags, but geo tags too.

Related posts:

1. Few Thoughts on Web Video
2. Video sites must use … mp4 and only mp4!
3. Download Files with Zend Framework

It’s really full of video sharing websites out there, but in fact almost all of them use Flash player to display their video files. This is the reality now, but with the coming of HTML5, perhaps the things are changing a bit!

First of all if you start dealing with video sharing platforms the first thing to do maybe is to find a good Flash (.flv) player and to convert all your video content in FLV.

Few things to know with Flash video players:

1. The user can play those videos only after installing the Flash Plugin to his browser;
2. The video must be encoded either in FLV (or FLash Video) or in MPEG-4 with h.264 codec. Only than the Flash player can play it;

The HTML5, which can be described as variety of new “things” in the HTML comes with a native <video> tag. Something like the <img> tag where you can just point the source of the image in the src attribute.

First Question – How Does it Look Like?

To get more fluent with the <video> tag you must simply thing of it as a “complex” <img> tag. You just point to the video and the browser will do the rest. To be more exact let me send you to the w3schools page, but the important thing as they say:

Until now, there has never been a standard for showing video on a web page.

However to start from somewhere here’s a little snippet showing you the basic, but very basic usage of the HTML5 video tag:

<video src="path_to_the_video" controls="controls"></video>

Second Question – Is Every Video Playable?

But of course not! There are different browser – different video formats. Currently there are three formats, supported by the different browsers.

1. H.264
2. VP8
3. Theora

Note that these are video codecs and a video files does not consists of only a video codec, but also of an audio codec. This makes the video file a container of several things. As you may know already H.264 is used with MPEG-4 video format, which results in .mp4 extended files, Theora is used in OGG, which are all those .ogg files out in the web, and finaly VP8 is used in WebM … or in .webm videos.

First thing to know FLV files (.flv) can also be encoded with H.264. Actually Flash player has a h.264 decoder so this makes it possible to play both .mp4 and .flv files encoded with H.264.

Second thing to notice – where are those .webm files? I’ve never seen them!

Third Question – What is WebM and VP8?

Behind WebM and VP8 is Google. This is a new video format based again on Theora. Actually it pretends to be as good in compressing as H.264, which by the way is meant to be the best. But let me take a look at Nettuts+:

VP8, a relatively new codec, is the brainchild of On2 — the same guys behind Theora. Google acquired On2 in 2010, and opened up all the underlying patents for the codec into the public domain.

WebM, the container of choice for most current browsers, utilizes VP8 for compressing its video content and Vorbis for its audio. It produces content similar in quality to H.264.

It is completely royalty free, now and for the future. On the downside, though, it has limited hardware decoding support as well as third party device/mobile support.

Final Question – How Can I Convert a Video in WebM?

This answer is given by this article, where as it is said after having the ffmpeg version >= 0.6 you simply can use this command:

ffmpeg -i girltalk.mp4 -f webm -vcodec libvpx -acodec libvorbis -aq 90 -ac 2 girltalk.webm

Conclusion

It’s interesting to see what will happen one day. There is going to be either a harmonious life in the web video field or the codecs/formats will be as much as the browser? Who knows?

Related posts:

1. Video sites must use … mp4 and only mp4!
2. Does Firefox play mp4 h.264 within the HTML5 video tag?
3. How to Make MP4 Progressive with qt-faststart

The last few months I was searching about some kind of mobile interface of Google Analytics for my Nokia e71. However I did not find one?! Please correct me if I’m wrong.

In the same time I knew there is a GA API, which is free to use, so finally I wrote a tiny web app allowing the reading of basic information about your Google Analytics accounts.

Note that your username and password are NOT SAVED! However it’s up to you to try.

An important note is that the API has a limitation in requests so yet again, it’s possible to be unavailable in case of too many requests.

Visit with Your Mobile Browser

this link:

http://www.stoimen.com/ga/

Note that I made it primary about my Nokia, so any screenshots will be welcomed as well.

It is still beta so be careful. In fact any suggestions are welcome. Either for improving the security and error handling as well as new data exports.

There are lots of things to be done, but this is really basic.

Related posts:

1. Google Closure Compiler?
2. Google Closure Compiler doesn’t work?!
3. Retrieving YouTube Channel’s Videos with Zend_Gdata_YouTube