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

Posted in Resources | No Comments »

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.  <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.  

Tags: , ,

Posted in APIs, PERL | 1 Comment »

Wordpress 2.5


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

Wordpress 2.5 have been released, and i have just uploaded 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

Tags: ,

Posted in CMS | No Comments »

Force download in apache


Written on February 27, 2008 – 12:31 am | by Rene

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

Posted in Apache | No Comments »

Configure ubuntu to use mod_rewrite


Written on February 12, 2008 – 11:58 pm | by Rene

To enable mod_rewrite on Ubuntu is pretty easy what we have to do is, first we enable the apache module for mod rewrite with this line.

  1.  
  2. sudo a2enmod rewrite
  3.  

After that we have to edit the file /etc/apache2/sites-avalible/default, then we look for this:

  1.  
  2. <Directory /var/www/>
  3.     Options Indexes FollowSymLinks MultiViews
  4.     AllowOverride None
  5.     Order allow,deny
  6.     allow from all
  7.     # This directive allows us to have apache2’s default start page
  8.     # in /apache2-default/, but still have / go to the right place
  9.     #RedirectMatch ^/$ /apache2-default/
  10. </Directory>
  11.  

And then we replace “AllowOverride None” by “AllowOverride All”, this line tells apache to read the .htaccess file, that is the file where we will put our rewrite rules.

  1.  
  2. <Directory /var/www/>
  3.     Options Indexes FollowSymLinks MultiViews
  4.     AllowOverride All
  5.     Order allow,deny
  6.     allow from all
  7.     # This directive allows us to have apache2’s default start page
  8.     # in /apache2-default/, but still have / go to the right place
  9.     #RedirectMatch ^/$ /apache2-default/
  10. </Directory>
  11.  

finally we just reload apache

  1.  
  2. /etc/init.d/apache2 restart
  3.  

now we have pretty urls for our sites. :)

Posted in Apache | No Comments »

Send a post request to a popup


Written on January 26, 2008 – 1:11 am | by Rene

Today i want to send the post request from a form to a pop up window and the solution is pretty simple first we have to create our form and then we add a target attribute where we specify the name that our popup window will have second we add a onsumbit call to the form that will popup the new window and submit the form we also have to assign and id to our form that will be usefull when calling the function that popup the windows

  1.  
  2. <form action="index.php" method="post" target="windowName" onsubmit="return postPopup();" id="postForm">
  3.  <input type="text" name="value1" />
  4.  <input type="text" name="value2" />
  5.  <!– put all the form elements here –>
  6.  <input type="submit" />
  7. </form>
  8.  

  1.  
  2. <script type="text/javascript">
  3. function postPopup( formElem ) {
  4.         // here we popup the new window, the second attribute have to be the same as the form target attribute
  5.         window.open( ”, ‘windowName’, ‘width=800, height=400, resizable=yes, scrollbars=yes, toolbar=no, location=no, directories=no, status=no, menubar=no’ );
  6.         // we submit the form 50 milliseconds after so the browser creates the popup
  7.         setTimeout("document.getElementById(’postForm’).submit();",50);
  8.         // we stop the regurar form submit
  9.         return false;
  10. }
  11. </script>
  12.  

Posted in Javascript | No Comments »

Real housewives write extensions.


Written on December 12, 2007 – 1:48 am | by Rene

One of the firefox extensions that i have installed is View Source Chart wich as said on the extension page “Draws A Color-Coded Chart of a Web Page’s Source Cod” what i like about it, is that it displays the html generated by javascript and the original code, not only the code viewable with the “view source” option.

i was using it when i realized that at the very bottom there is a hided message “Real housewives write extensions”, i attached an image of that message

viewsourcechart

Posted in Firefox | 2 Comments »

What is this?


Written on September 18, 2006 – 11:20 pm | by Rene

What is this all about?

Well i am a Mexican computer science engineer, focused on web development, i like to work with perl, php, css, xhtml, javascript, ajax, etc. and this will be my playground. Where i will put my experiences while i am working, learning and living from web development.

My first languaje is not english, so if something is not well written please let me know

Posted in General | No Comments »