Google Maps Operation aborted on IE


Written on October 30, 2008 – 10:33 pm | by Rene

If you are getting an annoying message like this

“Internet Explorer cannot open the Internet site” “Operation aborted”

When trying to see a web page that contains a google map. And right after the message pop ups Internet Explorer shows an empty page here are some tips to help you fixing this issue

First thing you’ll have to do. Is to move all the code used to generate the map to a function and call it once the page is loaded

  1.  
  2. function loadMap() {
  3.         // JS code to create your map
  4. }
  5. window.onload=function() {
  6.         loadMap();
  7. }
  8.  

If you are using prototype you can use

  1.  
  2. document.observe("dom:loaded", loadMap );
  3.  
  4. OR
  5.  
  6. Event.observe(window, ‘load’, loadMap, false);
  7.  

Or you can add an onload attribute to your body tag

  1.  
  2. <body onload="loadMap()">
  3.  

If you are using polylines you should add vml namespace to your header and should look like this

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  5. <style type="text/css">
  6. v\:* {
  7. behavior:url(#default#VML);
  8. }
  9. </style>
  10.  

Loading the javascript needed to generate the map as an external file , and adding defer attribute so internet explorer will wait until it loads the page before executing the Javascript. It has the same effect than moving your JS code to the bottom of the page.

  1.  
  2. <script src="maps.js" type="text/javascript"  defer="defer"></script>
  3.  

It can be also a problem with a base tag messing wiht IE more info on http://www.shauninman.com/archive/2007/04/13/operation_aborted

Protect web pages with username/password


Written on September 29, 2008 – 6:59 pm | by Rene

If there some web pages you want to protect with username/password, all you have to do is to create a file called .htaccess under the directory to protect with the following lines:

  1.  
  2. AuthUserFile /path/to/htpasswd/.htpasswd
  3. AuthGroupFile /dev/null
  4. AuthName "Restricted Directory"
  5. AuthType Basic
  6.  
  7. <Limit GET POST>
  8. require valid-user
  9. </Limit>
  10.  

Replace /path/to/htpasswd/ with the .htpasswd path.
Replace Restricted Directory with the text you want as title of the prompt window.

Then you have to create the .htpasswd file using the following command:

htpasswd -c .htpasswd user_name

Execute it under the directory to protect or add the full path to .httpasswd and replace user_name by the username you want to use, you will be asked to enter the password and the file will be created.

Notes: This instruction are for linux/unix systems using apache web server, the dot means hidden files on linux.

Prototype Compressed


Written on June 28, 2008 – 8:25 pm | by Rene

I am a prototype user, but i want to save some bandwidth using a compressed version, so i start looking for it and i found a compressed version called protopack it includes different versions, just spaces removed ( no eval required ), encrypted(eval required) and gziped version for both. i prefere the just spaces removed version since it dosen’t require use of eval.

Another good option is to use the Google AJAX Libraries API that serves a compressed version of prototype that will be cached by a year and sent with compression headers , you can include it using the full url or the Googles’s API

  1.  
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  3.  
  4. OR
  5.  
  6. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  7. <script type="text/javascript">
  8. google.load("prototype", "1.6.0.2");
  9. </script>
  10.  
  11.  

You can find compressed versions of scriptaculous, jQuery, MooTools, dojo as well. The bad thing is there are no https support so it wont work for secure sites.

Google Developer Day 2008 – Mexico City


Written on June 24, 2008 – 8:46 am | by Rene

Yesterday, Monday 23 2008 I have the opportunity to assist to the Google Developer Day Mexico City, the first two talks were about Google and the Mexican market and an overview of their new product for developers ( android, maps, open social, etc. ) this first two talks were in Spanish, after a launch it was a breakout with 4 different options, the talks i have the opportunity to go were:

  • Open Social introduction by Chris Schalk: Open Social is a technology that allow us to create applications for social networks with the advantage it will run on every platform that supports open socials ( Hi5, Orkut, IGoogle, Linkedin ) the talk was about Were Open Social is going, what can we do and what to expect from it, Google friend connect,, how to create some basic application and how to implement on our how servers.
  • IGoogle + gadgets by Bruno Bowden: IGoogle is you own personalized start page where you can add a lot of gadgets to it ( weather, jobs gmail, etc. ) This talk was about creating gadgets for IGoogle , and the new support of Open Social and the new canvas mode
  • Gears by Dion Almaer: this was the talk i like the most, i really like the idea that we can use gears to create an offline version or speed a site up like wordpress.com is doing, but when i got home and try to install gears on my machine i realized that Linux 64 bits is not supported :-(
  • Google Maps API Advanced by Pamela Fox: This talks was about using tile layers with Google maps so we can use our own maps, images or anything we want to zoom in using Google maps, right now i am using Zoomifyer for this purpose but i hope with this info move to Google maps. pretty cool!

Test your sites on IE from linux


Written on June 3, 2008 – 11:12 pm | by Rene

I work all the time on Linux, but unfortunately there are some bugs that happened just for Internet Explorer so i used to reboot, test on windows, fix it, and then reboot and continue working on linux.

This process is annoying reboot, fix, test, etc. but thanks to Wine. We can install Internet Explorer on Linux, for that we can use:

IEs4Linux this script can install several versions of IE 5, 5.5, 6 even you can install IE 7 (not fully supported)

Here are some screenshots of the process and IE running

Another option is to use Wine-Doors, it’s an script that help us installing window’s software like Ares, Flash 8, Internet Explorer 6 etc.

wine-doors-3

With the previous options IE not always runs like on windows. There is another option running windows under Linux as a virtual machine for that purpose you can use virtual box, qemu, vmware.

My choose is Virtual Box Open Source Edition, here is a good tutorial on how to install it and some screenshots of my virtual box running IE6 and IE7

Virtual Box

Configure Apache to serve PERL pages ( Ubuntu )


Written on May 30, 2008 – 5:59 pm | by Rene

I just reinstalled my ubuntu distribution, and have to configure apache to serve perl pages outside of the cgi-bin directory, after a little bit of googling i found the solution.

You have to edit the /etc/apache2/apache2.conf and add to it the following lines.

  1.  
  2. AddHandler cgi-script .cgi .pl
  3. <Files ~ "\.pl$">
  4. Options +ExecCGI
  5. </Files>
  6. <Files ~ "\.cgi$">
  7. Options +ExecCGI
  8. </Files>
  9.  

Stop apache showing incomplete urls


Written on May 22, 2008 – 9:51 pm | by Rene

Apache was showing files even if i didn’t put the extension on the url, that behavior was messing with a mod rewrite rule i was working on. To solve this we just add the line below to the .htaccess file and that’s it apache will stop showing incomplete urls

  1. Options -MultiViews
  2.  

Vaga – free icon set


Written on April 8, 2008 – 11:40 am | by Rene

Today i found on the web a free icon set called vaga, that you can use for personal or commercial projects, it contains 60 icons 16×16

Show videos on your site using PERL and Youtube API


Written on April 1, 2008 – 11:34 pm | by Rene
This tutorial uses an old Youtube API, after google acquired Youtube a new API was released

In this brief tutorial i will show you how to show videos from youtube on you web page using PERL and Youtube API, the idea of the script is that it will show by default the favorites videos of some users, and you will be able to navigate to the tags you specify.

For this script we will use some libraries from the CPAN:

  • CGI we will use to get the data send by GET
  • Template toolkit This is an excellent template library
  • XML:DOM this library will help us to parse the XML file that is returned by youtube
  • LWP::UserAgent This is needed by XML:DOM to parse the files in remote locations
  • Unicode::String We will use this to convert data to UTF8

Click here to see this script in action.

Download the code

index.pl this is the perl script.

  1. #!/usr/bin/perl
  2.  
  3. use CGI;
  4. use Template;
  5. use XML::DOM;
  6. use LWP::UserAgent;
  7. use POSIX qw(strftime);
  8. use Unicode::String;
  9.  
  10. # you have to sign up to get a developer id
  11. my $devId = ‘developerid’;
  12. # we will show the favorites videos of this user as front page
  13. my $userFavorites = ’someuser’;
  14. # this is an array of the tags we will allow to navigate throw
  15. my %tags = (
  16.         ‘tlaxcala’=>‘Tlaxcala’,
  17.         ‘huamantla’=>‘Huamantla’,
  18.         ‘huamantlada’=>‘Huamantlada’,
  19.         ‘feria huamantla’=>‘Feria Huamantla’,
  20.         ‘cacaxtla’=>‘Cacaxtla’,
  21.         ‘apizaco’=>‘Apizaco’,
  22.         ‘tlaxco’=>‘Tlaxco’,
  23.         ‘feria tlaxcala’=>‘Feria Tlaxcala’
  24. );
  25.  
  26. my $query = new CGI;
  27. my $action = $query->param(‘action’);
  28.  
  29. my @videos = ();
  30. my $total = 0;
  31. my $values = {};
  32. my $url;
  33. my $tt = Template->new;
  34.  
  35. print "Content-type: text/html;charset=UTF-8\n\n";
  36.  
  37. SWITCH:{
  38.         if( $action eq ‘view’ ) {
  39.                 $values{‘video’}=$query->param(‘video’);
  40.                 my @comments = ();
  41.                
  42.                 # here we start parsing the XML
  43.                 my $parser = XML::DOM::Parser->new();
  44.                 my $doc = $parser->parsefile(‘http://www.youtube.com/api2_rest?method=youtube.videos.get_details&dev_id=FIq6LWxC3RE&video_id=’ . $values{‘video’} );
  45.                 # we put this on eval to avoid errors
  46.                 eval{
  47.                         # here i add all the commets to an array
  48.                         foreach my $comment ($doc->getElementsByTagName(‘comment’)){
  49.                                 my @date = localtime( $comment->getElementsByTagName(‘time’)->item(0)->getFirstChild->getNodeValue );
  50.                                 push @comments, {
  51.                                         author=>Unicode::String::utf8($comment->getElementsByTagName(‘author’)->item(0)->getFirstChild->getNodeValue),
  52.                                         text=>Unicode::String::utf8($comment->getElementsByTagName(‘text’)->item(0)->getFirstChild->getNodeValue),
  53.                                         time=>strftime( ‘%r’, @date ),
  54.                                         date=>strftime( ‘%d-%m-%Y’, @date )
  55.                                 };
  56.                         }
  57.                        
  58.                         # here i format the video time
  59.                         my( $seconds,$hours,$minutes );
  60.                         $seconds = $doc->getElementsByTagName(‘length_seconds’)->item(0)->getFirstChild->getNodeValue;
  61.                         ( $hours, $seconds ) = ( int( $seconds/3600 ), $seconds % 3600 );
  62.                         ( $minutes, $seconds ) = ( int( $seconds/60 ), $seconds % 60 );
  63.                        
  64.                         # here i create an array of the data i will use and show the page using template toolkit
  65.                         my %data = (
  66.                                 video=>$values{‘video’},
  67.                                 title=>Unicode::String::utf8($doc->getElementsByTagName(‘title’)->item(0)->getFirstChild->getNodeValue),
  68.                                 author=>Unicode::String::utf8($doc->getElementsByTagName(‘author’)->item(0)->getFirstChild->getNodeValue),
  69.                                 rating_avg=>$doc->getElementsByTagName(‘rating_avg’)->item(0)->getFirstChild->getNodeValue,
  70.                                 tags=>Unicode::String::utf8($doc->getElementsByTagName(‘tags’)->item(0)->getFirstChild->getNodeValue),
  71.                                 description=>Unicode::String::utf8($doc->getElementsByTagName(‘description’)->item(0)->getFirstChild->getNodeValue),
  72.                                 time=>sprintf( ‘%02s:%02s:%02s’, $hours,$minutes, $seconds),
  73.                                 comments=>\@comments
  74.                         );
  75.                                
  76.                         $tt->process( ‘videos_view.tt’, \%data ) || die $tt->error;
  77.                 };
  78.                 last SWITCH;
  79.         }
  80.  
  81.         $values{‘page’}=$query->param(‘page’);
  82.         $values{‘tag’}=$query->param(‘tag’);
  83.  
  84.         if( $values{‘tag’} eq ) {
  85.                 # i show the favorites of the user
  86.                 $url=‘http://www.youtube.com/api2_rest?method=youtube.users.list_favorite_videos&dev_id=FIq6LWxC3RE&user=’ . $userFavorites;
  87.         } else {
  88.                 $values{‘page’}=‘1′ if( $values{‘page’} eq );
  89.                 # here i get videos by tab
  90.                 $url=‘http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=FIq6LWxC3RE&tag=’ . $values{‘tag’} . ‘&page=’ . $values{‘page’} . ‘&per_page=20′;
  91.                 # since the api dosent support paging, i see if the next xml has data, to show next link
  92.                 $nextXML=‘http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=FIq6LWxC3RE&tag=’ . $values{‘tag’} . ‘&page=’ . ( $values{‘page’} + 1 ) . ‘&per_page=20′;
  93.         }
  94.         my $parser = XML::DOM::Parser->new();
  95.         # we put this on eval to avoid errors
  96.         eval {
  97.                 my $doc = $parser->parsefile($url);
  98.                
  99.                 # here i create an array with the info for videos
  100.                 foreach $video ($doc->getElementsByTagName(‘video’)){
  101.                         push @videos, {
  102.                                 ‘author’=>Unicode::String::utf8($video->getElementsByTagName(‘author’)->item(0)->getFirstChild->getNodeValue),
  103.                                 ‘id’=>$video->getElementsByTagName(‘id’)->item(0)->getFirstChild->getNodeValue,
  104.                                 ‘title’=>Unicode::String::utf8($video->getElementsByTagName(‘title’)->item(0)->getFirstChild->getNodeValue),
  105.                                 ‘length_seconds’=>$video->getElementsByTagName(‘length_seconds’)->item(0)->getFirstChild->getNodeValue,
  106.                                 ‘rating_avg’=>$video->getElementsByTagName(‘rating_avg’)->item(0)->getFirstChild->getNodeValue,
  107.                                 ‘rating_count’=>$video->getElementsByTagName(‘rating_count’)->item(0)->getFirstChild->getNodeValue,
  108.                                 ‘description’=>Unicode::String::utf8($video->getElementsByTagName(‘description’)->item(0)->getFirstChild->getNodeValue),
  109.                                 ‘view_count’=>$video->getElementsByTagName(‘view_count’)->item(0)->getFirstChild->getNodeValue,
  110.                                 ‘upload_time’=>$video->getElementsByTagName(‘upload_time’)->item(0)->getFirstChild->getNodeValue,
  111.                                 ‘comment_count’=>$video->getElementsByTagName(‘comment_count’)->item(0)->getFirstChild->getNodeValue,
  112.                                 ‘tags’=>Unicode::String::utf8($video->getElementsByTagName(‘tags’)->item(0)->getFirstChild->getNodeValue),
  113.                                 ‘url’=>$video->getElementsByTagName(‘url’)->item(0)->getFirstChild->getNodeValue,
  114.                                 ‘thumbnail_url’=>$video->getElementsByTagName(‘thumbnail_url’)->item(0)->getFirstChild->getNodeValue
  115.                         };
  116.                 }
  117.                 if( defined( $nextXML ) ){
  118.                         my $doc2 = $parser->parsefile($nextXML);
  119.                         $total = @{ $doc2->getElementsByTagName(‘video’) };
  120.                 }
  121.                
  122.         };
  123.         my %data = (
  124.                 total=>$total,
  125.                 tag=>$values{‘tag’},
  126.                 tags=>\%tags,
  127.                 videos=>\@videos,
  128.                 page=>$values{‘page’}
  129.         );
  130.         # i show the page using template toolkit
  131.         $tt->process( ‘videos_list.tt’, \%data ) || die $tt->error;
  132.  
  133. }
  134.  

videos_list.tt The template where we see the list of videos.

  1.  
  2. <ul id="videosList">
  3. [% FOREACH videos %]
  4.   <a href="index.pl?action=view&amp;video=[% id %]"><img src="[% thumbnail_url %]" /></a>
  5.   <h2><a href="index.pl?action=view&amp;video=[% id %]">[% title %]</a></h2>
  6.   <p>[% description %]</p>
  7.  </li>
  8. [% END %]
  9. </ul>
  10.  
  11.  
  12. <div align="center">
  13.  [% IF tag || ( page>1 && total>0 ) %]
  14.  [% IF ( page > 1 ) %]
  15.   <a href="index.pl?tag=[% tag %]&amp;page=[% (page - 1) %]" alt="Previous" title="Previous">Previous</a>
  16.   [% END %]
  17.   [% IF total>0 %]
  18.    <a href="index.pl?tag=[% tag %]&amp;page=[% (page + 1) %]" alt="Next" title=‘Next’>Next</a>
  19.   [% END %]
  20.  
  21.  
  22.  
  23.  [% END %]
  24.  
  25.  [% IF tag == '' %]Favorites[% ELSE %]<a href="index.pl">Favorites</a>[% END %]
  26.  [% FOREACH key = tags.keys %]
  27.   || [% IF tag == key %][% tags.$key %][% ELSE %]<a href="index.pl?tag=[% key %]">[% tags.$key %]</a>[% END %]
  28.  [% END %]
  29. </div>
  30.  

videos_view.tt The template where we see a specific video.

  1.  
  2. <h1>[% title %]</h1>
  3.  
  4. <div align="center">
  5. <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/[% video %]"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/[% video %]" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
  6. </div>
  7.  
  8. <strong>Author:</strong> <a href="http://www.youtube.com/user/[% author %]" target="_blank">[% author %]</a>
  9.  
  10. <strong>Rating:</strong> [% rating_avg %]
  11.  
  12. <strong>Tags:</strong> [% tags %]
  13.  
  14. <strong>Time:</strong> [% time %]
  15.  
  16. [% description %]
  17. </p>
  18.  
  19. [% IF comments.size > 0 %]
  20.  <h2>Comments</h2>
  21.   [% FOREACH comment=comments %]
  22.    <div class=‘textoComentarios’>[% comment.text %]</div>
  23.  
  24.    <div class=‘pieComentarios’>
  25.    | By <a href=‘http://www.youtube.com/user/[% comentario.author %]‘>[% comment.author %]</a> | [% comment.date %] | [% comment.time %] |
  26.  
  27.  
  28.   </div>
  29.  [% END %]
  30. [% END %]
  31.  

Wordpress 2.5


Written on March 31, 2008 – 11:00 pm | by Rene

Wordpress 2.5 have been released, and i have just upgraded this blog to use this new version, i really like it! it looks a lot cleaner, includes built in gallery support, and a lot of new features that you can read here

Wordpress 2.5