He always hates newest technologies and considers that pure programming with no libraries and frameworks is the masterpiece of coding and only way to show his greatness. Any mention of a library name results in something like “blah, this sucks” with no explanation why. However most often the reason is “because it’s slow” with no examples of how slow actually this library is – he does not make any performance tests at all. Always prefers to write his own pure “javascript” or “php” based code/library because he thinks this is the cutting edge of modern technology.

2. He hates helping and talking to clients

Always after a phone call with a client he’s angry, because “the sutpid client” doesn’t understand his way of brilliant thinking. He thinks that a project must exists just to show what a “good” developer he is and how much he knows, not because the product will be someday, somehow used by poor clients.

3. He loves to see how others make mistakes

Bugs by other developers are always accepted with a smile with some words like “I told you”. He doesn’t think bugs will be comited if he were the developer. However bugs in his code are always accepted and explained as misconseption of the client!

4. Always negative at meetings

Whatever solution is proposed on a meeting he’s negative. But he doesn’t propose his own solution. Typically a bad team member is always trying to say “whatever solution you get I’m telling you that there are some pitfalls”.

5. He hates interviews

Because he thinks he’s the best programmer in the world, he hates going to interviews. His behaviour on interviews is always like “you know less than me and I don’t know why I’m here”. However once he gets the job he behaves with his boss like “I’m making you a favor to receive a salary from you!”

Advice: To avoid working with such jerks try to spot them on the interview. If he tells you that your choice of library and technology sucks you should better get another candidate.

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

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.

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.

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!

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.

Example with the awesome Yahoo! Homepage:

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.

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.

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

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

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('//', $source, $matches);

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

preg_match_all('/

Related posts:

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


]]>
			/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/feed/
		6
		
		
		
		/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/
		/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/#comments
		Fri, 11 Feb 2011 08:30:11 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2174
		Continue reading From SVG to Geo Coordinates – A Complete Guide →


Related posts:

You should not insert an “a” tag in another “a” tag! … 
Computer Algorithms: Data Compression with Relative Encoding 
Scroll an IFRAME Content to a Predefined Position 
How to Collect the Images and Meta Tags from a Webpage with PHP 


]]>
				Why This Task Is Not Trivial?
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:

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.
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).
 $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]), '],
';

    // 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), '],
';

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:

You should not insert an “a” tag in another “a” tag! … 
Computer Algorithms: Data Compression with Relative Encoding 
Scroll an IFRAME Content to a Predefined Position 
How to Collect the Images and Meta Tags from a Webpage with PHP 


]]>
			/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/feed/
		3
		
		
		
		/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/
		/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/#respond
		Wed, 09 Feb 2011 14:11:48 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		

		/?p=2160
		Continue reading Wanted – onfocus/onblur. Why They Don’t Work Always! →


Related posts:

How to Sanitize User Input in PHP? 
jQuery live() vs bind() performance 
2xjQuery: Select a Selector 
Google Closure Compiler doesn’t work?! 


]]>
				On Focus

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


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:



	...


	...

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


	...


	...

Than you can continue using these useful events!

Related posts:

How to Sanitize User Input in PHP? 
jQuery live() vs bind() performance 
2xjQuery: Select a Selector 
Google Closure Compiler doesn’t work?! 


]]>
			/2011/02/09/wanted-onfocusonblur-why-they-dont-work-always/feed/
		0
		
		
		
		/2011/02/04/reading-gps-latitude-and-longitude-from-image-and-video-files/
		/2011/02/04/reading-gps-latitude-and-longitude-from-image-and-video-files/#comments
		Fri, 04 Feb 2011 10:16:14 +0000
		
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		/?p=2153
		Continue reading Reading GPS Latitude and Longitude from Image and Video Files →


Related posts:

Few Thoughts on Web Video 
Video sites must use … mp4 and only mp4! 
Download Files with Zend Framework 
Check YouTube Video Existence with Zend_Gdata_YouTube 


]]>
				The State of GPS Data from Mobile Devices
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:

iPhone OS geotags both video and image files;
Android geotags only images;
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.

quicktime for iPhone
mpeg-4 with Android
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:

Few Thoughts on Web Video 
Video sites must use … mp4 and only mp4! 
Download Files with Zend Framework 
Check YouTube Video Existence with Zend_Gdata_YouTube 


]]>
			/2011/02/04/reading-gps-latitude-and-longitude-from-image-and-video-files/feed/
		9