thasha.in.wonderland

Flashback – Optimus Alive 2011

2011-07-11T00:37:00.001+01:00

Hello all! I have been gone for a long time, but not without a reason. I had (and still have) a lot of new challenges.

The most recent is an Android application for a very awesome action called Flashback which took place during Optimus Alive Festival in Lisbon (Alges).

The idea is simple but great. We have 32 Android mobiles running (my) special app. They all are mounted on a round stage. People willing to have taken a picture pose in the center. Next, at the right moment, all mobiles take a picture at once. All pictures are send to a computer behind the stage where our small post-production team puts them together . In effect we have 360 degrees matrix effect movie – complete 3D experience that may be shared later will friends using social networks.

Below some pictures and links to information about the event.

Promotional video for Flashback event: http://flashback.optimus.pt/home.php

People really enjoy this new experience.

Our stage just opposite to the main stage...

…and on the main stage stars like Foo Fighters :)

Great initiative for all art lovers.

2011-02-03T00:11:00.001Z

For all programmers (and not only) who already glued to their chairs. Now you don’t need to force yourself to look away from your computer screen. 17 grates museums from around the world are in front of you.
http://www.googleartproject.com/

Introduction to Moose

2011-02-01T23:16:00.001Z

Now I’m Perl programmer :) and some time ago I was asked to prepare short intro to Moose.
Since Perl is only a bit object-oriented language, Moose enables object oriented features similar to those existing in languages like C++ or Java.
I’m also quite a new to this topic, so the intro is really simple. Here are some code snippets that I used for this presentation.

(BTW: for those who are new to Perl I have a nice link: http://www.netalive.org/tinkering/serious-perl/).

Introduction to Moose

View more presentations from thashaa.

New Year's Promise: become a better web developer.

2011-01-25T22:40:00.001Z

Every January there is a time to do a new year’s promise to yourself. One may want to loss some weight somebody else to gain some, but there are still some crazy people who want to code better. Code better for them self, for everyone for better web.
Still, new year’s promises are known as difficult to keep. If you are one of those, who always find excuses I will deprive you of one. Here is the list of the best online web development courses - all for free and at any time you want.

IBM developerWorks
Great library of technical content (BTW promoting IBM products).
Web development sections covers topics like Ajax, JavaScript, Web 2.0 and cutting-edge technologies like Cloud Computing and HTML5.
Besides resources IBM hosts developers community.
http://www.ibm.com/developerworks/web/

Yahoo Developer Network
Another good place for those who are hunting for web development knowledge. Library includes resources about Design Pattern, Flash, Java, PHP, Python, Ruby, JavaScript, .Net and Flash. Besides there is a good documentation for great Yahoo APIs.
http://developer.yahoo.com

A list apart - For people who makes websites...
is the slogan of this site. In the Code section there is a bunch of articles related to web development like CSS, HTML and HTML5 and also server-side technologies. But that is not all what it offers. Worth to check out.
http://www.alistapart.com/topics/code/

Google Code University
Google is known from taking part in all possible Internet initiatives. This time it offers good and still growing course library. Among other things - HTML5 and security of internet applications.
http://code.google.com/edu/

Dev.Opera
Library full of articles related to different Opera technologies and general topics of web development like HTML5, CSS, JavaScript.
http://dev.opera.com

W3Schools
is, and always was, a great resource for studying many web technologies covering most XML - based technologies, JavaScript, web-services and server-side programming like PHP, MySQL and .Net. All tutorials are complete, have links to documentations and code playground.
http://www.w3schools.com/

Webmonkey
Tutorials on Webmonkey are another great database of knowledge. It will help you to learn JavaScript and JavaScript frameworks, CSS and HTML 5, as well as basic web server configuration and web design. In general - everything you may need in your daily life.
http://www.webmonkey.com/tutorials/

MySQL part 3: optimization hints.

2010-09-20T11:39:00.000+01:00

Database performance is very important for achieving maximal ergonomics of the website. Everyone knows that one of the most important usability condition is the response time. Everyone knows also that the database may be the bottleneck. In the worst case it may even cause inaccessibility of the website.

Let’s have a closer look at this problem.

I used again my sample The Lost database but with greater number of records (the table pictures has now 1 000 000 records and the table people_pictures has 3 000 000 records).

The size of the database is now 118,3 Mb.

Here you can find a simple PHP script to generate such number of records.

Imagine that now we are about to create a simple website for this collection. The typical queries we could use are as follow:

Query 1: Show all types and the number of pictures of each type. (We want to use this for creating a side menu where the type’s names with the links and the number of pictures will be given in brackets for every type.)

select types.name, count(pictures.id) from types, pictures where pictures.type_id=types.id group by types.name;

Query 2: Show all characters with the number of pictures in which they are tagged. (This query can be also used for another type of side menu.)

select people.name, count(people_pictures.id) from people join people_pictures on (people.id=people_pictures.people_id) group by people.name;

Query 3: Show 20 newest pictures (the creation date counts) with all characters tagged in every picture (it can be the main element on the website).

select filename, group_concat(name) from people_pictures join pictures on (people_pictures.picture_id=pictures.id) join people on (people_pictures.people_id=people.id) group by filename order by date limit 1,20;

These queries are very simple but they perform very bad. (On my computer: query1 – 22s, query2 – 84s and query3 reaches the time-out – 240s).

Design makes difference

At the beginning let’s have a look at the types we use. I purposely created the first version of database with the “default” types and sizes. Most of them we can substitute with something less heavy. For example: for the tables types, places and people the id column will rather not have more than 100 rows, so we can use TINYINT instead of INT. We can also limit all the columns name to 25 characters. All changes in the pictures below:

This way we already earn some time for first two queries. Query1 takes now 2s and Query2 26s. Query 3 still reaches the time limit.

More information about MySQL data types is here.

Indexes

Indexes should be created carefully. In most cases, added correctly, may dramatically speed up the queries. Generally speaking we should create indexes on these columns that we use for JOINs and clauses WHERE, ORDER BY and GROUP BY.

Query 3 joins tables people_pictures with people and pictures (relation many-to-many). It seems reasonable to create indexes on columns people_id and picture_id in people_pictures table. The result set is grouped by pictures.filename and ordered by pictures.date. We can create more two indexes on these columns. Such modification decrease the execution time to 196 s.

In some cases, indexes may provoke increase of execution time. Let’s have a look at Query 1. It uses column pictures.type_id to join pictures with their types. However if we create index on pictures.type_id we notice that the execution time for this query increases to 13s .

Using indexes for joining dictionary-like tables produces overhead. The index may take more space that the actual table data. In such cases it is faster to read sequentially from table, because this minimizes disk seeks (especially when the dictionary table is short).

For Query 1 we can just delete the index from pictures.type_id. But what happened when we use the same index in few queries and it increase the execution time only for some of them? Fortunately there is an easy solution. We can modify the query by adding ignore index hint.

The final results of this optimization phase are Query1: 2s, Query 2: 20s and Query3: 196s - still too much.

This is what we can achieve optimizing on spec. The better way is to look closer at every particular query.

Some useful links:

Explain and other techniques.

One of the most powerful tool for optimizing is EXPLAIN statement. It helps to analyze particular queries by showing the their execution plan.

Query 1

Let’s have a look at the EXPLAIN output for this query.

id	select_type	table	type	possible_keys	key	key_len	ref	rows	Extra
1	SIMPLE	pictures	ALL	NULL	NULL	NULL	NULL	1000000	Using temporary; Using filesort
1	SIMPLE	types	ALL	PRIMARY	NULL	NULL	NULL	4	Using where; Using join buffer

From the query execution plan we can see that unnecessary file sort is used. This is caused by GROUP BY clause. If you use GROUP BY, output rows are sorted according to the GROUP BY columns as if you had an ORDER BY for the same columns. To avoid the overhead of sorting that GROUP BY produces, add ORDER BY NULL.

Most of the execution time is taken to process the pictures table, while the one that is more interesting for this query is the types table.

To overcome this we can provide an extra column to the types tables – types._count. Every time a picture is added, deleted or updated this column will be updated as well for a proper picture type. This way it will store the current number of pictures for every type.

To keep the data coherent we can use procedures and triggers that works inside the database and are not depended on any external interface.

We need two procedures – one to increase the counter of 1 another to decrease it of 1.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `inc_pictures_type_counter`(IN type_id INT)
BEGIN
UPDATE types SET _count=_count+1 WHERE id=type_id;
END

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `dec_pictures_type_counter`(IN type_id INT)
BEGIN
UPDATE types SET _count=_count-1 WHERE id=type_id;
END

Now triggers. When we add a new picture of certain type the database has to call the procedure increasing the counter for that type - inc_pictures_type_counter.

DROP TRIGGER IF EXISTS lost.on_insert_picture_type
CREATE TRIGGER lost.on_insert_picture_type AFTER INSERT ON lost.pictures
 FOR EACH ROW BEGIN
  CALL inc_pictures_type_counter(NEW.type_id);
END

When we delete a picture the database has to call the procedure decreasing the counter - dec_pictures_type_counter.

DROP TRIGGER IF EXISTS lost.on_delete_picture_type
CREATE TRIGGER lost.on_delete_picture_type AFTER DELETE ON lost.pictures
 FOR EACH ROW BEGIN
  CALL dec_pictures_type_counter(OLD.type_id);
END

When the type of a picture is updated the database has to call the dec_pictures_type_counter for the old type and then inc_pictures_type_counter for the new type.

DROP TRIGGER IF EXISTS lost.on_update_picture_type
CREATE TRIGGER lost.on_update_picture_type AFTER UPDATE ON lost.pictures
 FOR EACH ROW BEGIN
  CALL dec_pictures_type_counter(OLD.type_id);  
  CALL inc_pictures_type_counter(NEW.type_id);
END

The new version of Query 1 uses only one table:

select name, _count from types;

and take less than 0,0001 s.

Query 2

The execution plan for this query:

id	select_type	table	type	possible_keys	key	key_len	ref	rows	Extra
1	SIMPLE	people	ALL	PRIMARY	NULL	NULL	NULL	12	Using temporary; Using filesort
1	SIMPLE	people_pictures	ref	people_id	people_id	1	lost.people.id	250000

Here we can see that the database first reads all people.id and then the table people_pictures is searched for rows where people_pictures.people_id is equal to current people.id. It means that the huge people_pictures table is searches 12 times and every time approximately 250000 rows are processes.

Of course we sense that it would be faster to process the huge table once and join it with people table when necessary. Let’s try to create new version of Query 2 that works this way:

select name, count(people_id) from people_pictures left join people on (people_pictures.people_id=people.id) group by people_id;

This query takes 1,5s and the query execution plan is now as follow:

id	select_type	table	type	possible_keys	key	key_len	ref	rows	Extra
1	SIMPLE	people_pictures	index	NULL	people_id	1	NULL	3000000	Using index
1	SIMPLE	people	eq_ref	PRIMARY	PRIMARY	1	lost.people_pictures.people_id	1

The people_pictures table is processed one time. Anyway the execution time is a bit too long. For this query we can use SQL_CACHE. The result set of this query will be cached and recomputed only in case, when any of involved tables changed. (If the caching mode is set to query_cache_type = 2 then you can use the SQL_CACHE hint to tell MySQL which queries to cache.) With the SQL_CACHE hint the execution time is minimized to less than 0,0001 s.

Query 3

Query 3 is the most complex and takes much more time then the others. Let’s see its execution plan:

id	select_type	table	type	possible_keys	key	key_len	ref	rows	Extra
1	SIMPLE	people	ALL	PRIMARY	NULL	NULL	NULL	12	Using temporary; Using filesort
1	SIMPLE	people_pictures	ref	picture_id,people_id	people_id	1	lost.people.id	250000
1	SIMPLE	pictures	eq_ref	PRIMARY	PRIMARY	3	lost.people_pictures.picture_id	1

The first used table is people. The optimizer reads people_pictures table for every people.id – 12 times. Only then the people_pictures is joined with pictures.

Since we want to limit the result set to pictures that fulfill certain condition it seems more reasonable to use the table pictures as first. Then we can join only these rows that left with the other two tables. The new version of Query 3 may be like this:

select filename, group_concat(people_id) from pictures left join people_pictures on (people_pictures.picture_id=pictures.id) left join people on (people_pictures.people_id=people.id) group by filename order by date limit 1,20;

The time of this query is 42,5 s.

Not bad, but also not good enough. The execution plan:

id	select_type	table	type	possible_keys	key	key_len	ref	rows	Extra
1	SIMPLE	pictures	index	NULL	date	8	NULL	7	Using temporary
1	SIMPLE	people_pictures	ref	picture_id	picture_id	3	lost.pictures.id	3
1	SIMPLE	people	eq_ref	PRIMARY	PRIMARY	1	lost.people_pictures.people_id	1	Using index

If we think more about it, we may notice, that it maybe better to choose only newest 20 pictures from people_pictures and join the people table with it. This way we could replace one conjunction with subquery. It would be something like this:

select picture_id, group_concat(name) from people_pictures join people on (people_pictures.people_id=people.id) where picture_id in (select id from pictures order by date desc limit 1, 20) group by picture_id;

“Would be” - because MySQL doesn’t allow LIMIT statement in subqueries.

The thing we can do is to split these to two queries and join them in e.g. PHP like this:

$db=new PDO('mysql:host=localhost;dbname=lost-basic', 'root', '', array(PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

$query = 'select id from pictures order by date desc limit 1, 20;';
$res=$db->query($query);

$pictures_array=array();

foreach($res as $row){
	foreach($row as $value){
		$pictures_array[]=$value;
	}	
}

$pictures = implode(', ', $pictures_array);

$query = "select picture_id, group_concat(name) from people_pictures join people on (people_pictures.people_id=people.id) where picture_id in ($pictures) group by picture_id";
$res=$db->query($query);
$res->setFetchMode(PDO::FETCH_NUM);
$res->fetchAll();

$db=null;

This works really fine and takes only 0,003 s.

Summary

As we can see there are many factors that influence the performance of the database but also many solutions for improving the execution time. We manage to decrease time for all queries to less than 0,01 s.

These above ideas are just few from many others. It is very important is to observe the slow queries log. Such queries maybe then analyzed using EXPLAIN statement and then best solution for particular query can be used.

Some other useful information here:

MySQL part 2: a bit more advanced JOINs.

2010-09-15T22:04:00.000+01:00

Last time I explained the very basics of JOINs. Now I will go a bit more further and show how to build more advanced queries. (I will continue on the same database.)

First let’s remind the clauses order in the SELECT query:

SELECT

FROM table_references

WHERE where_condition]

[GROUP BY {col_name | expr | position}

[ASC | DESC], ... [WITH ROLLUP]]

[HAVING where_condition]

[ORDER BY {col_name | expr | position}

[ASC | DESC], ...]

[LIMIT {[offset,] row_count | row_count OFFSET offset}]

WHERE indicates the condition or conditions that rows must satisfy to be selected. GROUP BY must be used with any aggregating functions to group the resultset by one or more columns. HAVING works only with GROUP BY and should be used only with aggregation functions (while the WHERE clause cannot). ORDER BY is used to order the result set by a desired column or columns.

Many-To-Many

Let’s choose all pictures with a list of people tagged on each of them. This is a many-to-many relation that requires two joins.

select filename, name from people_pictures join pictures on (people_pictures.picture_id = pictures.id) join people on (people_pictures.people_id=people.id);

picture1.jpg	Jack
picture1.jpg	Ben
picture1.jpg	Claire
picture2.jpg	John
picture2.jpg	Jack
picture2.jpg	Ben
picture3.jpg	Jin
picture3.jpg	Jack
picture5.jpg	John
picture5.jpg	Sun

The result set has many rows with the same filenames. Sometimes this can be a disadvantage. There is an easy way to show every picture with coma-separated list of tagged characters. For that we can use group_concat function with GROUP BY clause:

select filename, group_concat(name) from people_pictures join pictures on (people_pictures.picture_id = pictures.id) join people on (people_pictures.people_id=people.id) group by filename;

picture1.jpg	Jack,Claire,Ben
picture2.jpg	Ben,Jack,John
picture3.jpg	Jack,Jin
picture5.jpg	Sun,John

If we need to exclude some results on some conditions we can use HAVING clause. Let’s choose only the pictures with at least three people tagged on them.

select filename from people_pictures join pictures on (people_pictures.picture_id = pictures.id) join people on (people_pictures.people_id=people.id) group by filename having count(name)>2;

picture1.jpg

picture2.jpg

We can also find all pictures with Jack.

select filename from people_pictures join people on (people_pictures.people_id = people.id) join pictures on (people_pictures.picture_id=pictures.id) where name = 'Jack';

picture1.jpg

picture2.jpg

picture3.jpg

At the end let’s find the most tagged character.

select people.name from people_pictures join people on (people_pictures.people_id = people.id) group by people_id order by count(people_id) desc limit 1;

Jack

All above examples work just fine for small database. However the loading time grows with the number of records. Next time I will show how to optimize such queries to keep the loading time reasonable .

MySQL part 1: JOINs in a nutshell.

2010-09-14T21:58:00.000+01:00

Recently I decided to go more deep in the topic of MySQL optimization. However, to start working on this issue I needed to organize my expertise in this field. This way this short “memo” is created. Maybe it will be useful for somebody…

So, here we go.

First of all, we need some sample database. I love The Lost series, so I thought up a database for storing pictures of the main characters.

The information we want to save in this database are as follows:

Every picture has a file name and a date when it was taken.
Every picture may be associated a type and a place where it was taken.
Additionally every character can be tagged on several pictures, and every picture can be tagged with several characters (many-to-many)

Here you can find the SQL script for this DB.

To warm up let’s start with something simple…

We have to choose pictures and the types related to them (only if the picture has a type). We can do it in two ways:

using WHERE:

select filename, name from pictures, types where pictures.type_id=types.id;

or using JOIN:

select filename, name from pictures join types on (pictures.type_id = types.id);

In both cases the result set will be:

picture1.jpg	funny
picture5.jpg	funny
picture4.jpg	landscape
picture2.jpg	misc

In this case WHERE and JOIN work well, however they work like intersection.

LEFT JOIN

Imagine situation when you need all pictures. Doesn’t matter if they have a type. In such case you can use LEFT JOIN (what means, that the query returns all rows from the left table, even if there are no matches in the right table).

select filename, name from pictures left join types on (pictures.type_id = types.id);

picture1.jpg	funny
picture2.jpg	misc
picture3.jpg
picture4.jpg	landscape
picture5.jpg	funny

RIGHT JOIN

We can also do something opposite: chose all types and join the pictures that belongs to them:

select filename, name from pictures right join types on (pictures.type_id = types.id);

This time we used RIGHT JOIN (the query returns all rows from the right table, even if there are no matches in the left table).

picture1.jpg	funny
picture5.jpg	funny
picture4.jpg	landscape
picture2.jpg	misc
	portrait

In most cases we can use LEFT or RIGHT JOIN to get the same results (anyway it is recommended using LEFT JOIN).

select filename, name from types left join pictures on (pictures.type_id = types.id);

picture1.jpg	funny
picture5.jpg	funny
picture4.jpg	landscape
picture2.jpg	misc
	portrait

NATURAL JOIN

Another type of join is NATURAL JOIN. We can use it in case when we want to join two (or more) tables using columns with the same names. NATURAL JOIN works without any join condition. (You must be careful: if you have a habit to name primary key column “id”, MySQL may use this column to create the conjunction.)

select filename, name from pictures natural join places;

picture1.jpg	Los Angeles
picture2.jpg	Sydney
picture4.jpg	Sydney
picture3.jpg	The Island

In this case both tables have a column named “place_id” and this column is used to create relationship.

At the end it is worth mentioning INNER and CROSS JOIN. In MySQL they are equivalent to each other and produce exactly the same result as JOIN.

You can find more about JOINs here:

Wave blogging… and how it leads me to create my first robot.

2009-12-14T16:48:00.001Z

Some time ago I have created a “wave” with some funny stuff to share it among my friends. It is working OK, every one of us can put something funny or comment it. But for me there is one missing feature. I cannot directly embed that wave on my blog. (Since I have two blogs, I would prefer also to have choice where exactly I wish to publish this wave.) I would not mind also to give me friends, or everyone, a possibility to comment it.

Since both, Blogger (that I use) and Wave, are from Google, it seemed that they should work already together, but the reality is different.

In the Google Wave Developer Preview video we could see a robot that publish a wave on a special blog . It was bloggy (currently blog-wave@appspot.com ). It evaluates now a bit and the last working version publish the blog on http://blog-wave.appspot.com/your_wave_nickname. Currently is not working.

In the meantime a special kind of user - public@a.googlewave.com - has been created. It changed recently to easypublic@appspot.com and gives access to everyone who find the wave . (To find public waves search for group:public.)

There is also a possibility to embed a wave in desired website using JavaScript. Very good tutorial about it is here: http://code.google.com/intl/pl/apis/wave/embed/guide.html. The one thing here is that we need to know an id of the wave we want to embed. For that exist already some solutions e.g. robot embeddy (embeddy@appspot.com) that generates the whole JavaScript with the wave id included.

With a small template modification it is also possible to embed a wave inBlogger. We only need to keep in mind that the div id must be unique. The modification can be e.g. as follow:

In head section of the template:

<script>
function showWave(elementId, waveId){
  document.write("<div id="+elementId+"></div>");
  var wave =new WavePanel('https://wave.google.com/wave/');
  wave.setUIConfig('white', 'black', 'Arial', '13px');
  wave.loadWave(waveId);
  wave.init(document.getElementById(elementId));
}
</script>

Since the template is already modified, it is enough just one line of code to embed a wave:

<script>
showWave('unique div id ','googlewave_id…');
</script>

This is working really fine but it is not the same as publishing from a blip.

Google Wave is almost ideal to create extensions for it. I decided to try to create a robot that will help to publish a wave on a Blogger blog. This robot lives under blogroby@appspot.com.

The source code of this robot is here: https://code.google.com/p/blogroby/source/browse/#svn/trunk If someone feels like to extend it, is very welcome.

This robot involves Google Appengine, Blogger API and AuthSub authorization. Describing everything step by step would be a bit complicated. I will just highlight some issues and give links to all the documentation.

My robot consists of two parts. Blogroby.py which is the real robot and Publish.py which is responsible for creating a draft posts with embedded wave.

The only thing what blogroby actually does is to create a link that will authorize publish.py (that lies under http://blogroby.appspot.com/) to the Blogger service. For authorization AuthSub proxy is used, so you newer pass your password to my application. (More about the authorization here: http://code.google.com/intl/pl/apis/blogger/docs/1.0/developers_guide_python.html#Authenticating)

This link passes also a wave id to the publish.py.

Publish.py is a simple Python webapp framework application. (http://code.google.com/intl/pl/appengine/docs/python/gettingstarted/usingwebapp.html) This script first prints a list of your blogs and ask on which blog you want to embed a wave. You choose one blog by clicking its name and then a draft post is created. To avoid double authorization I keep Auth Session Token in session, and since webapp doesn’t support session I used GAEUtilities for that (http://code.google.com/p/gaeutilities/).

That’s it . Enjoy.

PS. I noticed problems with getting blog list when even one blog’s name have any national character.

The wave below demonstrates blogroby. (Visible only for those who are currently logged into Google Wave.)

Google Maps car on my street.

2009-10-17T22:25:00.001+01:00

And this how it really looks like….

CakePHP 1.2 - dynamical validation rules.

2009-10-14T18:26:00.001+01:00

Many times we need to use one model in many forms with different validation rules. This is not only the case when we have a form to add some information and a form to edit this information (then we can use on create and on update). For example: we have one User model and two different forms to add a user. During the registration a user can subscribe for a basic account or for an extended account. For the basic account is enough that the user will input just the username and password. For extended account the user is obligated to give also his personal data. To distinguish between these requests there is a checkbox (isextended) that the user can select if he wants to subscribe for extended account.

The problem appears while validating this form. How to indicate that the personal data is required in case the user is subscribing for extended account…? If we mark these fields as required in the model (var $validate) the validation rules will apply also if the user subscribe only for basic account. Consequently if the user subscribe for the basic account the form will not validate.

Well, the solution for the problem is very simply.

In the User model the var $validate table must have only rules for these fields that must validate always.

var $validate = array(
  'username' => array(
    'between' => array(
      'rule'      => array('between', 6, 20),
      'required'  => true,
     ),
  ),
  'password' => array(
    'empty' => array(
      'rule'      => 'notEmpty',
      'required'  => true,
    ),
  ),
);

Then we create another table with the same structure for example: $validate_extended with rules that must validate on some conditions – extended account.

var $validate_extended =array(
  'name' => array(
    'maxLength' => array(
      'rule'      => array('maxLength', 128),
      'required'=>true,
    ),
  ),
  'address' => array(
     'empty' => array(
      'rule'      => 'notEmpty',
      'required'  => true,
    ),
  ),
);

The validation is carried out just before save(). Therefore we can read from the $this->data[‘User’][‘isextended’] and if the request is for extended account we merge these two validation tables in one $validate.

class UsersController extends AppController {
(...)
function add() {
  if (!empty($this->data)) {

  if($this->data['User']['isextended']==1){
   $this->User->validate=array_merge($this->User->validate, $this->User->validate_extended);	
  }
	(...)		
  if ($this->User->save($this->data)) {...}
}
}
}

Enjoy.

Monopoly – first shots.

2009-09-09T15:09:00.001+01:00

Despite the first announcements the game is “working” already. Unfortunately “working” does not mean you can play it. The servers are overloaded and 99% of the time they don’t respond.

With a huge dose of patience I manage to find a street to buy, and… I have got stuck in user registration form for last 30 minutes.

First impressions: looks nice, pity it is not possible to play, the registration form has some small bugs (i.e. after reload remembers you password while didn’t remember you nick name.

First pictures:

Sadly, on the official blog there are many comments saying that there are much more bugs in the game. Maybe Google or Hasbro rush into making it available for public...

Edit: Perhaps a big reset is coming.

Tomorrow I will be lost (to the world)…

2009-09-08T17:40:00.001+01:00

…and my project with me. Everything because of Google: http://blog.monopolycitystreets.com/

So, see you tomorrow on http://www.monopolycitystreets.com/.

CakePHP 1.2 – Introduction to Ajax

2009-08-31T20:47:00.001+01:00

After I have finished reading the Ajax Helper section in the Cookbook I felt unsatisfied - it lacks more complex examples. To understand it better I played a bit with it. Below example is a compilation of my conclusions.

We have two simple models linked with one relation: every User belongs to a City.

The goal is to display all Users in a select box. Every time a user is selected, user’s city appears below the control.

DB tables for this example:

CREATE TABLE IF NOT EXISTS `cities` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO `cities` (`id`, `name`) VALUES
(1, 'Warsaw'),
(2, 'Paris'),
(3, 'Lisbon');

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `city_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO `users` (`id`, `name`, `city_id`) VALUES
(1, 'Anna', 1),
(2, 'Georges', 2),
(3, 'Rui', 3);

First of all, we have to generate every model, view and controller using the cake bake.

Secondly, we have to prepare the view: views/users/index.ctp

<!-- 
Cake uses Prototype for Ajax operations, 
so first of all we need to link it to the 
desired view.
-->
<?php echo $javascript->link('/js/prototype'); ?>

<!--
Create select box.
-->
<?php echo $form->select('user',$users_list);?>

<!-- 
Create div for Ajax update. 
Inside this div there is a tiny gif indicating
that the update is loading.
-->
<div id='city'>
<img src="/ajax/img/progress.gif" alt="progress" id="progress" style="display:none">
</div>

<!-- 
Ads observer to the select box, when the select 
box is updated call the function specified by 
'url' property.
While loading the Ajax update enable visibility 
of 'indicator'.
-->

<?php
echo $ajax->observeField('user', array(
	//function called by Ajax
	'url' =>'getCity',
	//id of element to be updated
	'update' => 'city',
	//enable visibility of indicator 
	'indicator'=>'progress',
	));
?>

Then we need to take care about the controller: controllers/user_controller.php. First, we have to add the needed helpers and components:

var $helpers = array('Html', 'Form', 'Javascript','Ajax');
var $components = array('RequestHandler');

…and then we need to prepare data to populate our select box.

function index() {
	(...)
	$users_list=$this->User->find('list');
	$this->set('users_list', $users_list);
}

In the last step for the controller we create a function that handle the Ajax request:

function getCity($id=null){
	if(!empty($this->data['user'])){
		$user=$this->User->read(null, $this->data['user']);
		$this->set('city',$user['City']['name']);
	}
	else{
		$this->set('city'," ");
	}
}

Update: Here I should mention that this view will be also accessible browser window. To avoid it we should check first if the request is really an Ajax request:

function getCity($id=null){
  if($this->RequestHandler->isAjax()){
    if(!empty($this->data['user'])){
	$user=$this->User->read(null, $this->data['user']);
	$this->set('city',$user['City']['name']);
    }
    else{
	$this->set('city'," ");
    }
  else{
      $this->Session->setFlash(__('Invalid request', true));
  }
}

Finally, we need to create a view for getCity() - views/users/get_city.ctp. This view will be loaded inside the defined tag in the index view.

<?php echo $city; ?>

As a result every time we select a user from the select box the city of the selected user should appear below preceded by a progress indicator.

BTW: nice loading indicators generator: http://www.webscriptlab.com/

WOW !! I got Google Wave sandbox account.

2009-08-24T18:15:00.001+01:00

… and you cannot imagine how I’m happy with this fact.

From the beginning it was a bit hard to discover how to really use it. I went back to the movie from Google IO and start repeat what they do in the movie and play a little bit with this. I really start appreciating the new way of communications.

As far I’ve tested it, the core functionality works already fine. Anyway, some features didn’t work for me at all. For example Insert Search Map function used the way it was shown in the movie displays always Australia. (what, in fact, is not so big surprise for me ;)). It freeze also many times .

The first excitement and the real challenge will be to create my first gadget, which is basically my goal. But that must be postponed since the main app is not ready yet.

What are my doubts about it is that it may be difficult to use for a “not-computer” people. I mean the whole idea is completely new, and is great, but it is also difficult to compare to anything else and it may be difficult to understand, especially beyond the basic functionality. And a big part of the power of Google Wave lies in extensions that, at this moment, are far to tricky to use.

However, the real value of Google Wave is a team work/communications which is difficult to discover without “a team” and my contact list remain empty (not to mention 3 robots which I played with) That’s why I wish to invite everyone who has a wave account, want to test it and has the same problem. Please, let me know by sending a comment here or e-mail. And I have to return to the cake…

Cake PHP 1.2 - Applying CSS to forms.

2009-07-30T20:24:00.001+01:00

Today I will explain in a nutshell how to apply a css style to a form generated by the Form Helper. My form is very simple and serves as a registration form. You can find how to create a model and a controller for such form here: http://planetcakephp.org/aggregator/items/1620-creating-a-community-in-five-minutes-with-cakephp. Therefore, I will focus only on how to apply some css to this form.

My form has only 4 required fields and is generated by the following view:

<div class="users form">	
<?php echo $form->create('User', array('class'=>'form'));?>
<p class="formtitle">Sign Up</p>
<fieldset>
	<legend class="formtitle">Please complete the form below.</legend>
	<?php
		echo $form->input('username',  array( 
			'label' => 'Login', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('password',  array( 
			'label' => 'Password', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('password_confirm', array(
			'label' => 'Confirm password', 
			'type'=>'password', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('name',  array( 
			'label' => 'Name', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('surname',  array( 
			'label' => 'Surname', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('email',  array( 
			'label' => 'E-mail', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('city_id',  array( 
			'label' => 'City', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror')));
	?>
</fieldset>	
<?php echo $form->end('Submit');?>
</div>

Some explanations:

To add a class to a form tag:

$form->create('User', array('class'=>'form'))

generates:

<form class="form" id="UserAddForm" method="post" action="/kultura/users/add">

To add a class to an input:

echo $form->input('username',  array( 
			'label' => 'Login', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));

generates this:

<div class="formfield required">
<label for="UserUsername">Login</label>
<input name="data[User][username]" type="text" maxlength="20" value="" id="UserUsername" />
</div>

An error in this case will appear in:

<div class=”formerror”></div>

A sample css style may look like this:

.form{
	font-family: Verdana;    
	font-size:1em;
	margin:1em;
	padding:1em;	
}

.form p.formtitle{
	color: #026475;
	font-size:1.3em;
	font-weight: bold;
}

.form fieldset{
	width:40em;
	border:1px solid #FFE545;	
	background-image: url(../img/Contact.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.form fieldset legend{
	color: #026475;
}

.formfield{
	width:30em;
	padding:5px;
}

.formfield label{
	display:block;
	float:left;
	width:12em;
	padding:1px;
	color:#C2A34F;
	text-align:right;
}

.formfield input, .formfield  select{
	padding:0.15em;
	width:14em;
	border:1px solid #ddd;
	background:#FEFBAF;
	
	font-family: Verdana;    
	font-size:1em;
	
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}

.formfield input:hover, input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
} 

.required input {
	border:1px solid #FBB829;
}

.form .submit input{
	font-family: Verdana;    
	font-size:1em;
	margin-top: 0.3em;
}

.formerror{
	position:relative;
	left:12.1em;
	color:#FBB829;
}

The result:

More interesting sources about how to use css with forms:

Very interesting article about forms design patterns:

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/?cp=9

and, b.t.w., some hint how to do CakePHP forms more secure using Security component:

http://teknoid.wordpress.com/2008/11/05/make-your-cakephp-forms-a-lot-more-secure/

Enjoy!

CakePHP 1.2 - dynamic application’s homepage – another approach.

2009-07-21T18:23:00.001+01:00

One of the thing a webmaster has to deal with is to create a main page of a website. It was also my recent problem. I needed to create a prototype of app’s main page that should include some logo, some menu, the newest events (posts with event info added by users), login form and some footer. More or less such prototype:

Some ideas that I found on Internet were:

to extend Pages Controller or,
replace the default route to point to another page.

More about the above here:
http://teknoid.wordpress.com/2008/11/17/get-yourself-a-new-home-alternative-to-homectp/
http://www.phpfreaks.com/forums/index.php?topic=240370.0
http://www.phpfreaks.com/forums/index.php?topic=240370.0

I chose another solutions: the elements.

First off all we need to have some basic functionality. In my case a basic EventsController and UsersController. First step is to create a layout. It is usual that a website uses at least two layouts. One for a home page and another one (or more) for subpages.

I called my layouts: mainpage.ctp for the main and default.ctp for the rest.

To define a layout for a page we have to go to the page’s controller. In my case I had to change PageController (which by default is in cake\lib\controller folder):

function display() {
    $this->layout = 'mainpage';
    (…)
}

Creating a layout is as easy as creating a website. We can find sample file default.ctp in cake/libs/view/layouts/ and customize it for our needs. We just have to remember about some variables that carry data from controller:

$title_for_layout – page title that is defined in controller's functions.

function view($id = null) {
   $this->pageTitle ='Events';
(...)
}

$scripts_for_layout – contain external sources for example scripts or css files added by html helper.
$content_for_layout - data gathered from controller.

To create the usual html content – meta tags, charset, form etc. we can use html helper. More about it here: http://book.cakephp.org/view/206/Inserting-Well-Formatted-elements

Now is the time to create elements. I needed four. Two for menus that are more or less static and another two dynamic. First one is a login form. Another one displays newest events on the main page. The elements are placed in app/views/elemens/.

menu.ctp:

<?php echo $html->link("home", "/", array(), null, false); ?>
<?php echo $html->link("events", "/events", array(), null, false); ?>

menufooter.ctp

<?php echo $html->link("Contact Us", "/kontakt", array(), null, false); ?>
<?php echo $html->link("Terms of Service", "/zasady", array(), null, false); ?>
<?php echo $html->link("Cooperate", "/wspolpraca", array(), null, false); ?>
<?php echo $html->link("Advertise", "/reklama", array(), null, false); ?>
			
<?php 
echo $html->link(
  $html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true),   'border'=>"0")),
  'http://www.cakephp.org/',
  array('target'=>'_blank'), null, false);?>

The first two are easy and there is nothing to explain.

For user authentication I used Auth Component (http://book.cakephp.org/view/172/Authentication). The default login action is users/login.

login.ctp

<?php
$session->flash();    
$session->flash('auth');
?>
<?php  
if(!$session->check('Auth.User')){
	echo "<p>Please log in.</p>";
	echo $form->create('User', array('action' => 'login'));    
	echo $form->input('username');    
	echo $form->input('password');    
	echo $form->end('Login');
	}
else{
	echo "<p>Hello ".$session->read('Auth.User.name')."</p>";
	echo $html->link("logout", "/users/logout", array(), null, false);
}
?>

The last element – newest.ctp - must pick up some data from EventsController. For that I created a function in the controller that will provide the data for the element.

function main_show_newest(){
		$events = $this->Event->find('all', array('order' => array('Event.insert_date ASC'),'limit' => 3));
		return $events;
	}

Then in the element we use $this->requestAction('events/main_show_newest') to request data from the controller.

newest.ctp

<?php $events = $this->requestAction('events/main_show_newest');?>

<div id="newest">
<h1><?php echo __("Newest events around......") ?></h1>

<?php foreach($events as $event): ?>
<ul>
  <li>
   <div class="name"><?php echo $event['Event']['name']; ?></div>
   <div class="date"><?php echo $event['Event']['starting_date']; ?>-<?php echo $event['Event']['end_date']; ?></div>
   <?php echo $event['Event']['description']; ?>
   <?php echo $html->link("more", array( 'controller' => 'events', 'action'=>'view', 'id'=>$event['Event']['id']), null, false); ?>
  </li>
</ul>
<?php endforeach; ?>
</div>

There is also another possibility. In controller we use simply $this->paginate() and then in the element $this->requestAction('events/main_show_newest/sort:insert_date/direction:asc/limit:3').

To include an element menu.ctp to the layout use $this->element('menu').

The full mainpage layout:

mainpage.ctp

<?php echo $html->docType(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<?php echo $html->charset(); ?>
<title>	Kultura.info.pl - <?php echo $title_for_layout; ?></title>
	
<?php
 echo $html->meta('description','Best event tracker ever!');
 echo $html->meta('keywords', 'event, events');
 echo $html->css('kultura.generic');
 echo $scripts_for_layout;
?>
	
</head>
<body>
<div id="container">

<div id="header">
<?php 
echo $html->image('logo.jpg', array('alt'=> __("kultura.info.pl Strona główna", true), 'border'=>"0")); ?>
</div>

<div id="menu">
<?php echo $this->element('menu');?>
</div>
		
<div id="left">
<?php echo $this->element('login');?>
</div>
		
<div id="content">
<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>
</div>
		
<div id="footer">
<?php echo $this->element('menufooter');?>
</div>

</div>
	
</body>
</html>

The default.ctp layout at this moment has only one difference in comparison to mainpage.ctp layout: it has no login form. I use it everywhere but the main page. Because I left the name default.ctp for this layout I don’t need to declare or configure it anywhere.

And that’s it. I hope it gives a basic overview of this concept.

CakePHP 1.2 and “Cannot modify header information” warning. (Not a whitespace problem)

2009-07-17T19:10:00.001+01:00

Yesterday I spend too much time trying to solve following problem. While working with CakePHP, writing some login function, I need to use redirection.

But the redirection didn’t work:

Cannot modify header information - headers already sent by (output started at
C:\xampp\htdocs\cool\app\controllers\users_controller.php:1)

Of course I checked all my code and then looked for some solution on Internet. The one, that repeats from page to page was that there is a white space or another character after “?>”.

But not in my case.

In my app everything start to work after I changed the encoding of the files from UTF8 to ANSI. It works also with UTF8 without BOM. It seems to be more or less obvious, but without diving into the encoding issues it is difficult to explain.

And one more thing: the problem is related with PHP in general, not just CakePHP, so Cake stays blessed (so far…).

Small re-organization.

2009-07-17T18:30:00.001+01:00

Over last few weeks everything has changed. I didn’t even have time to eat (despite the fact is my another hobby).

So far, I went into the other site of the browser and I’m working on a Web 2.0 project in CakePHP. It is a nice and useful framework, but I’m just a beginner so maybe my opinion will change. Time shrinks, and I still have a lot work to do, so keep fingers for me.

Google O3D - a new web standard for 3D graphics?

2009-04-29T21:40:00.000+01:00

Since VRLM/X3D times there was no other interesting replacement for web 3D graphics. Unfortunately VRML/X3D was also not so widely used as it was expected. Perhaps it was to innovative for its times.

Around two weeks ago Google (in contribution with Khronos) released new JavaScript API for creating interactive 3D graphics applications that run directly in a browser window using a special plug-in. More information here.

At this moment there are only few configurations that are fully supported and my old hardware is not on this list. Just to get a taste of O3D I used my friend’s computer to create a simple example with o3djs.simple utility library.

example 1 example 2

It took around a quarter to create each of above examples. O3djs.simple library is anyway only for very basic use. Despite the fact, that this library is simple and does not allow many useful functions, is a bit slow. But OK, JavaScript is slow in general.

On the website there are many more advanced samples showing features that should please professionals.

At the end there are good news that should gratify both basic, and advanced graphics: there is a possibility to convert contend from few programs (e.g. Autodesk 3ds Max, Maya, and Google SketchUp) using COLLADA Converter, and load it directly in o3d.

Reading comments on Google o3d blog I saw many voices pro but also some against this new approach. One is sure: it is worthy of keeping track on it.

Simple geo-location with Google Maps API

2009-04-08T18:46:00.000+01:00

Update: Google Maps JavaScript API V2 is deprecated.

Today I decided to do something easy and a bit effective at the same time. I chose simple geo-location of visitors using Google Maps Api.

First I will explain step-by-step, as simply and short as possible, basic issues and then, in the end, I will show full working example with (I hope) easy to understand description.
To use scripts from this tutorial you only need to be familiar with basics of HTML and general idea about object oriented programming but to fully understood or extend mentioned below scripts you should know basics of JavaScript, Ajax, and XHTML.

Let's start. Enjoy!

In short Google Ajax API let you use some of google products like maps, language tools, google search or even earth your websites an easy way. Everything in advantage of Ajax.
More information here.

With Ajax web applications can retrieve data from the server in background (without reloading a website). To achieve this functionality AJAX uses XMLHttpRequest object. This is kind of API build in in web browser that makes possible to communicate with web server (over HTTP protocol) from user-side script (like the JavaScript). More about Ajax here.

Let's insert a simple google map object showing location of a visitor of this page.
In general, using Google Ajax API you don't need to operate on XMLHttpRequestobject in direct way. You will get a google object that can load particular module like maps or search to let you use its method or properties.

General application schema to use Google AJAX API is as follows:

in head section of you website you insert script that creates google object for you. ABCDEFG is a key of your website. How to obtain it will be shown later in details.
```
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
```

at this point you have already access to google object. In next step (still in a page's header) we will create main script that will create and manage with module that we want to insert in the website. Basic schema of this script is as follows:

<script type="text/javascript">
   
    //first we need to load module that we are going to use, and it's version
    google.load(module, version)
   
    //next step is to create a main function that initializes object and manage     
    //its behavior in particular place on website using DOM
    function onload(){
        if (GBrowserIsCompatible()) {
           
            var map = new google.maps.Map2(document.getElementById("map"));
            (...)
            var searchControl = new google.search.SearchControl();
            (...)
            searchControl.draw(document.getElementById("searchcontrol"));
        }    

        //now we call the main function using callback function (it's argument is      
	//another function); this function runs only once - while a document is      
	//loading
        google.setOnLoadCallback(onload);

</script>

Above code is only a frame and needs to be extended in order to work.

How to get geo-information about a visitor? Google.load includes a property google.loader.ClientLocation that stores information about the client. The most important one is client's IP adderess and geo-loaction data besed on it. From this property we can read following information:

ClientLocation.latitude — supplies the low resolution latitude associated with the client's IP address
ClientLocation.longitude — supplies the low resolution longitude associated with the client's IP address
ClientLocation.address.city — supplies the name of the city associated with the client's IP address

If the IP address is not accessible, then google.loader.ClientLocation is equal to NULL.
Much more detailed introduction to Google AJAX API here.

Now the last think that we need is to know how to use Google Map API. In short, after we have loaded map module we can simply create map object (in this case GMap2 object) a of a given size and in a given (by element id) place on the map.

var map = new GMap2(document.getElementById("map"));

In next step we need to set up this our map:

map.setCenter(new GLatLng(lat, lon), zoom);

where lat and lon are values of latitude and longitude and that we can easily read from google.loader.ClientLocation property. Zoom (as the name indicate) is a value of zoom that we can customize to make the map more/less detailed.
The last think to do is to locate a marker in the right place:

map.addOverlay(new GMarker(new GLatLng(lat, lon)));

Here it is important to remember that the GMarker must take as its argument GLatLng object that stores real geographical coordinates - not the coordinates of the map object. (Much more detiled introduction to Google MAP API here.)

Now let's take everything together!
At first we need to obtain the key. This can be done here: http://code.google.com/apis/ajaxsearch/signup.html. You need to have prepared an address of your website and own a google account. Remember, all your JavaSript code must be placed in head section of the website.
Once you obtain you own key you have to replace it in below script:

<script src='http://www.google.com/jsapi?key=KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>

//skip this in a browser that doesn't support JavaScritp
//<![CDATA[

//load map module version 2
google.load("maps", "2");

//create the main function
function OnLoad() {
        
   //checks if user's browser is supports AJAX 
   if ((GBrowserIsCompatible())) {   
           
   //set initial values for latitude, longitude and zoom
   var lon = 0;
   var lat = 0;
   var zoom = 0;

   //if google.loader is able to discover user information...
   if(google.loader.ClientLocation!=null){

      //read user's informations to following variables
      var country = google.loader.ClientLocation.address.country;
      var region = google.loader.ClientLocation.address.region;
      var city = google.loader.ClientLocation.address.city;
      lat = google.loader.ClientLocation.latitude;
      lon = google.loader.ClientLocation.longitude;
      zoom = 5;

      var locationString = country + ", " + region+ ", " + city;    
      //and now we can insert that information into element with
      //id="location"
      document.getElementById("location").innerHTML = locationString;
   }
   //otherwise print information in location div
   else{
      document.getElementById("location").innerHTML = "not supported";
   }
          
   //create a map object in element with id="map"
   var map = new GMap2(document.getElementById("map"));
   //center map to client's geographic coordination 
   //(it they exists, otherwise use initial values)
   //the last number let u customize your zoom value
   //the grater the number, the more detailed map you will have        
   map.setCenter(new GLatLng(lat, lon), zoom);           
   //add market at visitor's location
   map.addOverlay(new GMarker(new GLatLng(lat, lon)));
  
   //customize the map
   map.setMapType(G_SATELLITE_MAP);
   map.GMap2.disableGoogleBar(); 
   }
else{ 
   //insert information into element with id="location"
   document.getElementById("location").innerHTML = "AJAX not supported";
 }
}

//pass OnLoad() function to call back function
google.setOnLoadCallback(OnLoad);

//]]>
</script>

That is the JavaScript code.
Now the last thing to do is to create container elements on a website. These can be e.g:

<div id="location">loading...</div>

for location information. And for the map:

<div id="map" style="width: 180px; height: 180px; display: block;">loading...</div>

After google.setOnLoadCallback(OnLoad) has been called (at the begging of processing our website) "loading..." changes to value of locationString variable and map object. All that assuming that the JavaScript is enabled in your browser and google.loader is able to achieve user location data.

At this moment our geo-location should looks more or less like this:

As you can see, a Google logo and copyrights information doesn't look nice in a map of this size. Of course in any case we should not delete it (that's not so easy, as well). However, there is a way to change its appearance. In order to do so you should add some style information to your website style:

/*TerraMetrics*/
div#map div span{
   right: 2px;
   display:block;
   font-size:9px;
}
/*help link*/
div#map div a{
   right: 2px;
   display:block;
   font-size: 9px;
}
/*Google logo*/
div#map div a img{
   position:relative;
   left: 2px;
   bottom: 140px;
   border: 2px solid #0000FF;
}

You can always get the information about elements you haven't create using a tool like Web Developer Toolbar for Firefox. That's the effect:

You must keep in mind that google.loader.ClientLocation is only trying to guest a location based on IP address. Everything depends on what kind of Internet connection your visitor has. It may also happen that the location won't be recognized at all. Sorry. Don't be disapointed.

Of course the geo-location is not the most useful element of you website. However playing with google maps is a good exercise that let you enable some more cheerful functionality of your blog or website like presenting a weather forecast or news related with visitor's location.

Multiple Background Images CSS3 and CSS2

2009-03-01T11:24:00.001Z

Many times I wish to assign many background images with different settings to one html element. For example, I need to assign one image that will always be at the bottom on the left site, another one at the top on the right and one gradient below everything.

Despite the fact that CSS3 offers an easy way to do it, many browsers do not support it yet.

body{ 
   margin:0; 
   padding:0; 
   border:0; 
   font-family: Verdana; 
   font-size:10px; 
   background-image:url('bg2.gif'), url('bg3.gif'), url('bg1.jpg'); 
   background-repeat: no-repeat, no-repeat, repeat-x; 
   background-position:bottom left, top right, top;
}

In this code it is important to remember that last image will be load as first.

This works fine for Chrome 1.x and Safari 3.2. It works also ok for Konqueror 3.5 but it doesn’t support transparency in gif images. If one of the background elements is attached to the bottom this image is not rendered in Chrome 2 and Safari 4. It can be fixed by adding height:100%:

html{
    margin:0;
    padding:0;
    border:0;
    font-family: Verdana;
    font-size:10px;
    background-image:url(bg2.gif), url(bg3.gif), url(bg1.jpg);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: bottom left, top right, top;
    height:100%;
}

It works in Chrome 1.x, Chrome 2.x Safafi 3.2 Safari 4. An example is here.

There is also a possibility to achieve almost the same effect with CSS2 using few layers placed one above another.

<div id="wrapper1"></div>
<div id="wrapper2"></div>
<div id="wrapper3"></div>

#wrapper1, #wrapper2, #wrapper3{ 
   padding:0; 
   margin:0; 
   border:0; 
   position:absolute; 
   top:0px; 
   left:0px; 
   right:0px; 
   bottom:0px;
}
#wrapper1{ 
   background-image:url('bg1.jpg'); 
   background-color: #FFFFAA; 
   background-repeat:repeat-x; 
   background-attachment:fixed;
}
#wrapper2{ 
   background-image:url('bg2.gif'); 
   background-position:bottom left; 
   background-repeat:no-repeat; 
   background-attachment:fixed; }
#wrapper3{ 
   background-image:url('bg3.gif'); 
   background-position:top right; 
   background-repeat:no-repeat; 
   background-attachment:fixed;
}

With small changes this style works also with IE.

#wrapper1, #wrapper2, #wrapper3{   
   width:100%;   
   height:100%;
}

A CSS2 example is here.

IE6 versus position:fixed layout.

2009-02-07T18:56:00.000Z

Let’s go back to this post: Simple layout using position:fixed. Why IE6 does not support this site? Well, IE6 does not support position:fixed and skip top, bottom, left and right properties. As a result all elements appear in their normal flow. (In some cases we can use position:absolute instead position:fixed but it has some constraints).

Anyway, there is a possibility to use another famous bug (difference in interpretation of CSS parameters) from IE5 to achieve similar layout working in IE5 and IE6.

Let’s start from beginning. In 1998, when IE5 appears, most of the webmasters use HTML to create web pages. Also most of the browsers could not correctly interpret CSS1 and XHTML standards. IE5 has a bug in interpretation of a size of and element (so called box model bug) http://en.Wikipedia.org/wiki/Internet_Explorer_box_model_bug.

In IE5 width value includes also margin and padding values. Therefore, if we set width parameter to 100% and the margin and padding to 10px then the full element width will fit exactly to the window (since in other browsers which supports W3C standard the element width will extend the window by 40px).

This bug was fixed in IE6 but so many websites created for IE5 already existed that Microsoft decided to keep compliance with the old interpretation and enables a possibility to turn IE6 to render the CSS the way the IE5 does. The same happened with many different browsers that old versions didn’t support correctly W3C standards. The mode, when the browsers work as an old version, is called Quirks mode. More about it here: http://www.quirksmode.org/.

How to use quirks mode to build a layout? We can set up the content layer to make it fit to the window (with and height to 100%) and set borders to the size of menu, header and footer. Then we move this layer to the back (z-index:-1) and put header, menu and footer over it. The result will be nearly the same. We only need to make the left border the same color as menu (menu won’t be stretched between header and footer anymore) and change positioning of footer to absolute.

How to switch between the styles depending on a browser? First of all we have to assure that IE6 will turn to quirks mode. For that purpose we need to set a DOCTYPE to xhtml strict and add an xml prolog. (In this case IE7 will stay in standard mode). Then we can use conditional declaration:

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Now the only difference between this layout and that one from previous post is the lack of white space.

The second css file ie.css will be loaded only in IE6 or lower versions. In fact, even for IE6 or IE5 both of these style files will be loaded and all properties from first file will be replaced with values from the second file. That has some advantage because we don’t need to define everything again (just the differences).

The second layout and both css files are available here.

Screen shots generated on http://browsershots.org/

IE8

IE7

IE6

IE5.5

First look at Google Earth 5

2009-02-03T18:39:00.000Z

Yesterday Google announced a new version of Google Earth. Therefore it is a good time to play a bit with it. One of the new features that I was very curious about is Historical Imagery. You can turn back the time for a moment and see how some places looked before. However, the quality of the pictures and datum to which you can go back depends on the place. For European locations it starts usually after year 2000, 1999 for London. (But we can admire Sun Francisco from 1946.)

Here is an example of a building Golden Terraces in Warsaw...

19.07.02

04.06.03

18.10.06

now

Historical Imagery seems to be very interesting ,but the most famous novelty is Ocean View. Now we can dive into to the ocean, see the under sea terrain in 3D or explore new data points placed under water surface. I would recommend visiting Galapagos Region.

The last look at the island Pico...

...and jump

Btw: two shots of Building 3D View from Lisbon.

Mosteiros dos Jeronimos

Campo Pequeno.

More information about other new features, like 3D Mars and Tourning, on Offiicial Google Blog and Lat Long Blog

Simple layout using position:fixed

2009-02-02T15:01:00.000Z

This time I would like to introduce a nice and powerful property: position:fixed. Unfortunately this property is not correctly interpreted by IE-family browsers. To fully understand how it works let’s create a layout as show in the picture below:

Header, footer and menu always stay at their places. Footer is always at the bottom of the browser window, header is always at the top. The only scrollable part is content. There is also a white line-space between each element.

This template has four regions: header, menu, content and footer. We can start by adding four <div> to the body of the page:

<body>  <div id="header">header</div>
   <div id="menu">menu</div>
   <div id="content">content</div>
   <div id="footer">footer</div>
</body>

Perhaps a questions crosses you mind what is the different between <span> and <div>. A <div> is a block element which means that it takes a whole line, whereas <span> is an inline element what means that you can put many of them in one line. You can change this behavior defining a display: block|inline property.

Now we should create a style for every region:

#header {    
   background-color: #A5BEF2;
}
#menu{    
   background-color: #B9DDF9;
}
#content{    
   background-color: #E2F0FD;
}
#footer{    
   background-color: #A5BEF2;
}

At this moment our layout looks like a four stripes of different colors. Normally an element appears according to its normal flow. That means that a block element will appear below another element that was former defined in a source code. (An inline element will appear next to the previous one).
We can change this normal flow using position parameter. In this case we change to position:fixed. It means that the position of an element is described by a set of coordinates left, top, right, and bottom which values are relative to the browser window.

There are also few more properties to changing appearance of a single element: width, margin, border and padding.

Let's start with header and footer elements. The header should start at the top and be wide for the whole page. I will also set padding to 5px.

#header{    
   background-color: #A5BEF2;    
   margin: 0;    
   padding: 5px;    
   height: 40px;    
   position: fixed;    
   left: 0;    
   right: 0;    
   top: 0;
}

The footer must start at the bottom of the website, be page-wide, and 30px high.

#footer{    
   background-color: #A5BEF2;    
   position: fixed;    
   height: 30px;    
   padding: 5px;    
   bottom: 0;    
   right: 0;    
   left: 0;
}

Now is the time to set-up menu. Menu is 200px wide, starts just below header (and white space) – 52px from top and reaches footer (and white space) -42px from bottom.

#menu{    
   background-color: #B9DDF9;    
   margin: 0;    
   width: 200px;            
   padding: 5px;    
   border: 0;    
   position: fixed;    
   top: 52px;               
   left: 0;      
   bottom: 42px;        
}

At the end we need to shift content element to the left side of menu. It is also stretched between header and footer. The full width-size of menu is 210px and because I wish to achieve a white space between them the content element will start at 212 pixel.

#content{    
   background-color: #E2F0FD;    
   margin: 0;    
   padding: 5px;    
   position: fixed;    
   top: 52px;                  
   left: 212px;           
   right: 0;             
   overflow: auto;
}

Voilà!! The main layout is done.

Now we can focus on some more detailed formatting. First of all we can change a font. Because we want to use the same font for the entire page we can define it for the body tag. Now I should explain few words about inheritance. In general every element that find itself inside another one inherits a style from containing element unless it is changed by its own style. If we define a font for body, it will be used for every element, unless an element has its own font defined.

body{    
   font-family: Verdana;    
   font-size:10px;
}

Now we will define a big main header title and some sub-header much smaller and shifted to the left site. (Notice that in this case it’s much more suitable to use classes because they may be used for many elements.)

<div id="header">   
   <div class="header">Page Header</div>   
   <span class="sub_header">Some header details.</span>
   </div>

.header{    
   font-size: 25px;    
   text-decoration: bold;    
   color: #003666;
}

To achieve the shift effect for the submenu we should use position:relative. It shifts an element relative to its normal position by the values defined in top, left, right and bottom properties.

.sub_header{    
   text-decoration: bold;      
   color: #ffffff;    
   position: relative;            
   bottom: 7px;                   
   left: 45px;               
}

Now we can make a title in the main page a bit more emphasized e.g making spaces between letters.

<div id="content">   
   <h1>Lorem ipsum</h1>
   </div>

h1{    
   font-size: 12px;    
   letter-spacing: 0.3cm
}

The remaining part is a menu. To create one we can use a list and modify it with CSS.

<div id="menu">   
   <ul class="menu">      
   <li><a href="#">Lorem ipsum</a></li>      
   <li><a href="#">Fusce vulputate</a></li>      
   <li><a href="#">Donec blandit</a></li>      
   <li><a href="#">Proin nulla</a></li>      
   <li><a href="#">Nam nibh</a></li>   
</ul></div>

First, we want to remove the bullets:

.menu{    
   list-style-type: none;
}

Now we can customize the elements of this list:

.menu li {                 
   padding: 2px;    
   margin: 2px;
}

We wish also to avoid underlining a link, but make it changing color every time a cursor is over it.

.menu li a{  
   text-decoration: none;  color: #003666;
}

.menu li a:hover{  
   text-decoration: none;  color:#ffffff;
}

At this point I should explain the pseudo-classes. These are some "sub" classes of an selector that may add some special effect to an element e.g change a style of an element's child selector:first-child.
One of such pseudo-classes is :hover, that change a style of an element when the cursor is over it. That is very useful to define a link behavior, but you can use it also with other selectors.

Now let’s add some simple formatting to the footer. It looks nice when a text alignment in a footer is on opposite site to a text alignment in a header, so in this case to the right.

.footer{    
   font-size:10px;    
   text-decoration: bold;    
   color:#ffffff;     
   display:block;    
   text-align: right; 
}

Of course it is difficult to talk about an alignment of an inline element that takes only so much space as it needs for a contained element. To make an effect on text-align modification the element must be a block. Of course it can be achieved using <div> element that is a block by definition, but it is always worth to assure it (adding display:block)when we create a style for a class and we don’t know to what kind of element this class will be applied for.

The template is ready. You can see it here .

Next time I will show how to create a replacement of this layout for IE.

From beginning….(HTML and CSS in a nutshell)

2009-02-01T20:59:00.000Z

I considered, for a pretty long time, what could be my firs post. Finally, I decided to start with basics which could be only HTML and CSS. If you want to be someone more than an observer on the Internet you should know how to create a simple and valid website, that will look the same in every popular browser. This task, anyway, is sometimes more difficult that it seems to be… e.g. using position:fixed. Unfortunately this simple and powerful property is not working in IE.

Ok, let’s start with some basics of html & css. In next post I will show how to create a nice and easy layout using position:fixed, and then how to create similar one, for IE, taking into consideration its all oddities.

Here are two useful links for absolute beginners: http://www.w3schools.com/xhtml/default.asp http://www.w3schools.com/css/default.asp

A very simple website:

<!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" xml:lang="en" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="keywords" content="page content"/> 
<meta name="description" content="page description"/> 
<title>Css basics tutorial sample</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body>   
</body> 
</html>

Actually displays… nothing. All content that you see in a browser is placed between <body></body> tag. There are more tags used to show the information e.g. <h1>, <p>, <div>, and <span>. Some of them will be described later.

First of all you should declare document’s type and dtd.

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

Here you have more declarations and explanations: http://www.w3.org/QA/2002/04/valid-dtd-list.html The real document starts with <html> tag and everything must be included between <html></html>. Head includes some configurations and information for indexing engines, for example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

tells a browser that the website uses UTF-8 encoding (more encodings for example here: http://www.w3schools.com/tags/ref_charactersets.asp)

<meta name="keywords" content="page content"/>

- keywords that search engine should use to index your website (at least that was the idea few years ago)

<meta name="description" content="page description"/>

- that is short description of a website, it is also good to have, because it may appear in search results

<title>...</title>

- this is the website title that appears in a browser's toolbar

<link href="style.css" rel="stylesheet" type="text/css" />

- a link to cascade style sheet file (more about it below).

A single "style" is build as follows:

selector {property: value}

A selector can be:

existing html tag:
```
p {font-size: 10px}
```

a general class:

.big {font-size: 20px} <div class="big">Big font</div><p class="big">Big font</div>

a class of a particular tag:

p.right {text-align: right} <p class="big">Big font</p>

id:

#green{color:#006600} <p id="green">i'm green</p>

There is one important difference between id and class. Id of a given name can be use only once on one site. Therefore they can be used e.g. to build a layout. A given class can be used with many tags within one site, therefore it is very useful for formatting. If you find it may have sense, you can also use them together:

<p class="big" id="green">big&green</p>

There are three ways to insert a style to a website.

in head section of the website:

<style type="text/css" > 
  hr {color: sienna}
  p {margin-left: 20px}
  body {background-image: url("images/back40.gif")}
</style>

or as a link from external file, also in head section (I mentioned it before):
```
<link href="style.css" rel="stylesheet" type="text/css" /> 
```

or direct:

<p style="color: red">This is a paragraph</p>

That’s the basic. Now the goal is to create a layout. This will be explained next time.