My Web Experiences http://www.mywebexperiences.com A web development blog Tue, 30 Sep 2008 01:01:33 +0000 http://wordpress.org/?v=2.6.2 en Protect web pages with username/password http://www.mywebexperiences.com/2008/09/29/protect-web-pages-with-usernamepassword/ http://www.mywebexperiences.com/2008/09/29/protect-web-pages-with-usernamepassword/#comments Tue, 30 Sep 2008 00:59:37 +0000 Rene http://www.mywebexperiences.com/?p=56 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.

]]> http://www.mywebexperiences.com/2008/09/29/protect-web-pages-with-usernamepassword/feed/ Prototype Compressed http://www.mywebexperiences.com/2008/06/28/prototype-compressed/ http://www.mywebexperiences.com/2008/06/28/prototype-compressed/#comments Sun, 29 Jun 2008 02:25:42 +0000 Rene http://www.mywebexperiences.com/?p=40 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.

]]> http://www.mywebexperiences.com/2008/06/28/prototype-compressed/feed/ Google Developer Day 2008 - Mexico City http://www.mywebexperiences.com/2008/06/24/google-developer-day-2008-mexico-city/ http://www.mywebexperiences.com/2008/06/24/google-developer-day-2008-mexico-city/#comments Tue, 24 Jun 2008 14:46:05 +0000 Rene http://www.mywebexperiences.com/?p=38

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!
]]> http://www.mywebexperiences.com/2008/06/24/google-developer-day-2008-mexico-city/feed/ Test your sites on IE from linux http://www.mywebexperiences.com/2008/06/03/test-your-sites-on-ie-from-linux/ http://www.mywebexperiences.com/2008/06/03/test-your-sites-on-ie-from-linux/#comments Wed, 04 Jun 2008 05:12:11 +0000 Rene http://www.mywebexperiences.com/?p=27 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]]> http://www.mywebexperiences.com/2008/06/03/test-your-sites-on-ie-from-linux/feed/ Configure Apache to serve PERL pages ( Ubuntu ) http://www.mywebexperiences.com/2008/05/30/configure-apache-to-serve-perl-pages-ubuntu/ http://www.mywebexperiences.com/2008/05/30/configure-apache-to-serve-perl-pages-ubuntu/#comments Fri, 30 May 2008 23:59:17 +0000 Rene http://www.mywebexperiences.com/?p=33 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.  
]]> http://www.mywebexperiences.com/2008/05/30/configure-apache-to-serve-perl-pages-ubuntu/feed/ Stop apache showing incomplete urls http://www.mywebexperiences.com/2008/05/22/stop-apache-showing-incomplete-urls/ http://www.mywebexperiences.com/2008/05/22/stop-apache-showing-incomplete-urls/#comments Fri, 23 May 2008 03:51:20 +0000 Rene http://www.mywebexperiences.com/?p=32 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.  
]]> http://www.mywebexperiences.com/2008/05/22/stop-apache-showing-incomplete-urls/feed/ Vaga - free icon set http://www.mywebexperiences.com/2008/04/08/vaga-free-icon-set/ http://www.mywebexperiences.com/2008/04/08/vaga-free-icon-set/#comments Tue, 08 Apr 2008 17:40:13 +0000 Rene http://www.mywebexperiences.com/?p=23 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

]]> http://www.mywebexperiences.com/2008/04/08/vaga-free-icon-set/feed/ Show videos on your site using PERL and Youtube API http://www.mywebexperiences.com/2008/04/01/show-videos-on-your-site-using-perl-and-youtube-api/ http://www.mywebexperiences.com/2008/04/01/show-videos-on-your-site-using-perl-and-youtube-api/#comments Wed, 02 Apr 2008 04:34:47 +0000 Rene http://www.mywebexperiences.com/?p=12 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.  <li>
  5.   <a href="index.pl?action=view&amp;video=[% id %]"><img src="[% thumbnail_url %]" /></a>
  6.   <h2><a href="index.pl?action=view&amp;video=[% id %]">[% title %]</a></h2>
  7.   <p>[% description %]</p>
  8.  </li>
  9. [% END %]
  10. </ul>
  11.  
  12.  
  13. <div align="center">
  14.  [% IF tag || ( page>1 && total>0 ) %]
  15.  [% IF ( page > 1 ) %]
  16.   <a href="index.pl?tag=[% tag %]&amp;page=[% (page - 1) %]" alt="Previous" title="Previous">Previous</a>
  17.   [% END %]
  18.   [% IF total>0 %]
  19.    <a href="index.pl?tag=[% tag %]&amp;page=[% (page + 1) %]" alt="Next" title=‘Next’>Next</a>
  20.   [% END %]
  21.  
  22.  
  23.  
  24.  [% END %]
  25.  
  26.  [% IF tag == '' %]Favorites[% ELSE %]<a href="index.pl">Favorites</a>[% END %]
  27.  [% FOREACH key = tags.keys %]
  28.   || [% IF tag == key %][% tags.$key %][% ELSE %]<a href="index.pl?tag=[% key %]">[% tags.$key %]</a>[% END %]
  29.  [% END %]
  30. </div>
  31.  

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. <p>
  17. [% description %]
  18. </p>
  19.  
  20. [% IF comments.size > 0 %]
  21.  <h2>Comments</h2>
  22.   [% FOREACH comment=comments %]
  23.    <div class=‘textoComentarios’>[% comment.text %]</div>
  24.  
  25.    <div class=‘pieComentarios’>
  26.    | By <a href=‘http://www.youtube.com/user/[% comentario.author %]‘>[% comment.author %]</a> | [% comment.date %] | [% comment.time %] |
  27.  
  28.  
  29.   </div>
  30.  [% END %]
  31. [% END %]
  32.  

]]> http://www.mywebexperiences.com/2008/04/01/show-videos-on-your-site-using-perl-and-youtube-api/feed/ Wordpress 2.5 http://www.mywebexperiences.com/2008/03/31/wordpress-25/ http://www.mywebexperiences.com/2008/03/31/wordpress-25/#comments Tue, 01 Apr 2008 04:00:43 +0000 Rene http://www.mywebexperiences.com/?p=20 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]]> http://www.mywebexperiences.com/2008/03/31/wordpress-25/feed/ Force download in apache http://www.mywebexperiences.com/2008/02/27/force-download-in-apache/ http://www.mywebexperiences.com/2008/02/27/force-download-in-apache/#comments Wed, 27 Feb 2008 05:31:04 +0000 Rene http://www.mywebexperiences.com/2008/02/27/force-download-in-apache/ if you want to force certain kind of files to pop up the save as dialog box, you have to add the AddType directive with the value application/octet-stream to the .htaccess file like this:

  1.  
  2. AddType application/octet-stream .csv
  3. AddType application/octet-stream .xls
  4. AddType application/octet-stream .doc
  5. AddType application/octet-stream .avi
  6. AddType application/octet-stream .mpg
  7. AddType application/octet-stream .mov
  8. AddType application/octet-stream .pdf
  9.  

and that’s all, now everything works fine

]]> http://www.mywebexperiences.com/2008/02/27/force-download-in-apache/feed/