Blogs, online journals and in general the 90% of the content management system, use XHTML output as markup language. Both strict and transitional version.

Often people choose to embed youtube videos in their websiste. To avoid the annoing cut & paste of the embed code given by youtube, I choose to code a simple script to replace a proprierty tag, whit the embed code.

This little piece of code, allow me to write a simple line, containing the pseudo tag youtube and a video's permalink inside and show the embeded video without copy and paste the relative code.

In the first versione of the script I just used the youtube embed code model. But the code generated using the original youtube code, is NOT HTML valid. So I decide to rewrite it more carefull, and make it XHTML valid.

Using PHP, the result is a simple mono-line script.

$result = preg_replace('#\[youtube\]http://www.youtube.com/watch\?v=(.*?)\[/youtube\]#i', '<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://www.youtube.com/v/\\1"><param name="movie" value="http://www.youtube.com/v/\\1" /><param name="wmode" value="transparent" /></object>',$testo)

Where $testo is the pattern to check.

Tags: Youtube, XHTML, Valid XHTML, PHP

Just a quick information about the XML Google mobile sitemap. The standard format will be upgradet early. The new XML Google mobile sitemap specifications are available here.

Using the new format, it must be update che number versione declaration and use the new tag

<mobile:mobile/>

For any <loc> reference. The <priority> tag is not mentioned by the new format. By the way it must be considered optional at all. Infact it give just a suggestion to Google for the content's priority. It can be different by the priority calculed by google bot.

The tag <lastmod> should be used in the right way. Expecially for really dinamic contents, like in example, a blog or online journal front page.

A little example of the new Google XML mobile sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84"
        xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
 <url>
  <loc>http://www.davidonzo.com/?mobile=1</loc>
  <lastmod>2008-09-12</lastmod>
  <mobile:mobile/>
 </url>

 <url>
  <loc>http://www.davidonzo.com/?post=890&mobile=1</loc>
  <lastmod>2008-09-11</lastmod>
  <mobile:mobile/>
 </url>

 <url>
  <loc>http://www.davidonzo.com/?post=889&mobile=1</loc>
  <lastmod>2008-09-10</lastmod>
  <mobile:mobile/>
 </url>

 <url>
  <loc>http://www.davidonzo.com/?post=888&mobile=1</loc>
  <lastmod>2008-09-09</lastmod>
  <mobile:mobile/>
 </url>
</urlset>

The changes is required in a few days. Remember, sitemap malformed will be NOT indexed by google. So, be careful and rapid!

Tags: Sitemap, XML Sitemap, Google, Mobile, Mobile Sitemap, Mobile XML Sitemap

The GD library released by the ubuntu team and available in their repository, is not compiled with all options. The imagerotate() function doesn't work at all.

In this case you have two possibilities. Download the sources from the GD official web site and compile it on your own, or use the following function.

<?
// $src_img - a GD image resource
// $angle - degrees to rotate clockwise, in degrees
// returns a GD image resource
// USAGE:
// $im = imagecreatefrompng('test.png');
// $im = imagerotate($im, 15);
// header('Content-type: image/png');
// imagepng($im);
function imageRotateBicubic($src_img, $angle, $bicubic=false) {
  
    // convert degrees to radians
    $angle = $angle + 180;
    $angle = deg2rad($angle);
  
    $src_x = imagesx($src_img);
    $src_y = imagesy($src_img);
  
    $center_x = floor($src_x/2);
    $center_y = floor($src_y/2);
  
    $rotate = imagecreatetruecolor($src_x, $src_y);
    imagealphablending($rotate, false);
    imagesavealpha($rotate, true);

    $cosangle = cos($angle);
    $sinangle = sin($angle);
  
    for ($y = 0; $y < $src_y; $y++) {
      for ($x = 0; $x < $src_x; $x++) {
    // rotate...
    $old_x = (($center_x-$x) * $cosangle + ($center_y-$y) * $sinangle)
      + $center_x;
    $old_y = (($center_y-$y) * $cosangle - ($center_x-$x) * $sinangle)
      + $center_y;
  
    if ( $old_x >= 0 && $old_x < $src_x
         && $old_y >= 0 && $old_y < $src_y ) {
      if ($bicubic == true) {
        $sY  = $old_y + 1;
        $siY  = $old_y;
        $siY2 = $old_y - 1;
        $sX  = $old_x + 1;
        $siX  = $old_x;
        $siX2 = $old_x - 1;
      
        $c1 = imagecolorsforindex($src_img, imagecolorat($src_img, $siX, $siY2));
        $c2 = imagecolorsforindex($src_img, imagecolorat($src_img, $siX, $siY));
        $c3 = imagecolorsforindex($src_img, imagecolorat($src_img, $siX2, $siY2));
        $c4 = imagecolorsforindex($src_img, imagecolorat($src_img, $siX2, $siY));
      
        $r = ($c1['red']  + $c2['red']  + $c3['red']  + $c4['red']  ) << 14;
        $g = ($c1['green'] + $c2['green'] + $c3['green'] + $c4['green']) << 6;
        $b = ($c1['blue']  + $c2['blue']  + $c3['blue']  + $c4['blue'] ) >> 2;
        $a = ($c1['alpha']  + $c2['alpha']  + $c3['alpha']  + $c4['alpha'] ) >> 2;
        $color = imagecolorallocatealpha($src_img, $r,$g,$b,$a);
      } else {
        $color = imagecolorat($src_img, $old_x, $old_y);
      }
    } else {
          // this line sets the background colour
      $color = imagecolorallocatealpha($src_img, 255, 255, 255, 127);
    }
    imagesetpixel($rotate, $x, $y, $color);
      }
    }
    return $rotate;
}
?>

This function has been taken by the official man page of the imagerotate php funciont.

Tags: PHP, gd, imagerotate

IlSilente ask me to do this tutorial (thi info maybe not true :P). We just explate how to create a reflection effect using The Gimp. Now let's see how to create a 2.0 button using the best open source (and not only) image editor.

First of all we heve to define what a 2.0 button is (almost in our concept). A 2.0 button is an image with 3D effect simulation and rounded corners. Have you a different idea? Maybe you are right, but this is my obsession :)

How To Procede

Open The GIMP and create a new image with transparent background and the dimension you prefere. By the "Select" menu, click on "Select All" (or type CTRL+A). By the same menu, click on "Rounded Rectangle" and apply it using the prefered ratio. I used the default value (50%).

The result should be something like this:

Using our prefer color, apply a background to the new selection.

Now create a new rounded selection (using the same ratio). It must be smaller than the first one and positioned at the top.

To this new selection, apply the gradient tool selecting the white color as SB and mantaining the previous FB. Drag the mouse from the bottom side of the selection to top.

Et voila! Add some text if you want. The final result is something like the image you can see at the begin of this post ;)

Tags: The Gimp

Do you love 2.0 style reflection? Somebody tell you, photoshop is needed to do it? Nothing true! Use The Gimp (the best open source image creator).

Let's see hot to do it.

Ho to procede

Create a new image using the prefered dimensions e background color. Past the image to reflect as new layer, or use the text tool to write your desire text (using Gimp any new text added is a new layer).

Don't forget to show the Layers tab, selecting it by the Dialogs menu.

Select the target layer and click on "Copy Layer" . Select the new layer (rename it if you want) and click on menu Layers >> Transform >> Rip Vertical.

Using the "Move" tool, drag the layer until the heightest side touch the bottom side of the parent layer. See the example below:

Now, always selecting the transformed layer, add a layer mask clicking right on it. Choose the first option in the dialog below.

Select as main color:

• Black for the FB (#000000)
• Withe for the SB (#ffffff)

Use the gradient tool  with the FB to SB option selected and drag a line from bottom to up to apply it. Make differents test to get the best result. At the end you'll have something similar to the first image of the post.

Tags: The Gimp

JavaScript is often used to provide more contemporary routines in the same web page. This may give problem if the function, written using a regural contruction, is able to be instanced just one time.

To avoid this limit - is a natural limit depending by the code style used by the coder - it's necessary to build an object. This will be able to create differents instances and to use methods for any instance without create conflict with other variables and functions called by others instances.

Will go to define different functions inside an object constructor called using how many instances we need to create. Any instance will be able to use all the methods defined inside the object regardless from other instances.

To have a better idea what we are talking about, let's see an easy example where use innerHTML.

function showText('text', 'id'){
  this.text = text;
  this.id   = id;
 
  this.g = function(){
    return document.getElementById(this.id);
  }
 
  this.show = function(){
    this.g.innerHTML = this.text;
  }
}

first = new showText('Hello World!','myId');
first.show();

second = new showText('Hello Web!','myOtherId');
second.show();

The example may appear poor, but using a constructor on more complex functions, your life may be better and your coding powerful ;)

Tags: JavaScript, web, Object, OOP

Now let's see how to create a WordPress plugin. Why this post? Often WP users active a plugin and use only the 5% of its features. Is not a good choise. There are people who boasts of using 50 or more plugin. IMHO they just wrong CMS :)

In any case plugins help us to make several chenges in our blogging platform without change che core code and the template used, just activating / disactivating a file by the control panel.

Now, to explane how a WP plugin can be create, we'll see the needed operation to produce a simple plugin showing a fixed text before any post. Really unusefully plugin, but with clear didactic purpose.

How To Begin

First of all, it's very important read the documentation released by the WP team, to know as well as possible all the functions availables given by the wp core.

After this, you have to know that wordpress use a single database field to activate a plugin. The informations concerning the actives plugins are stored in the wp_options table (where wp_ is just the table prefix) in correspondants of the "option_name = 'active_plugins'" value.

All plugins file are stored in /wp-content/plugins/.

Begin Writing

With our favorite text editor create a new document called myplugin.php. After the php open tag, it must be inserted some comment line that will be used by identify the plugin name, author, version and description.

<?php
/*
Plugin Name: Just a test plugin
Plugin URI: http://www.davidonzo.com/
Description: Just a simple plugin to show how wordpress plugins work and can be create.
Author: davidonzo
Version: 0.1
Author URI: http://www.davidonzo.com/
*/

• Plugin Name: choose a funny name for your plugin.
• Plugin URI: have you publishe a post or an entire web site for the plugin?
• Description: write a short description of the plugin. In one line. Break line will erase the content!
• Author: your name.
• Version: the versione number of the plugin.
• Author URI: your link.

These informations will be showed in the management plugins page of wordpress's admin control panel.

The necessaries functions

What do you need to make the plugin? We said we want to create a plugin tha add a fixed text, choosen by the user, before any post. So, we need an option where writing the text and another one where we'll use as a boolean value to make the visualization active or not.

To make it easy, we choose to save both options in just one record. Using a text separator between the string to provide a simply explode() string that extract the needed value. In this case we will use %%%.

Now, we need to know that the plugins options are stored in the same table used by WP for the others system options: wp_options. We che easly create new options just using a function available in the WP core: add_option($nameoption, $value). The option's $value will be stored in a longtext field.

During the plugin installation a new option will be created, assigning it the default values. Let's see who to do it!

function myplugin_install(){
  if(get_option('opt_myplugin' == '') || !get_option('opt_myplugin')){
    add_option('opt_myplugin', '0%%%Write some text');
  }
}

if (isset($_GET['activate']) && $_GET['activate'] == 'true') {
    myplugin_install();
}

On plugin activeting, if the option named opt_myplugin doesn't exist or is empty, the option will be added to the database with the default values.

Note that this function will be loaded for any activating action, but the default value and the option creation will be execute just at the first activation. So, deactiving the plugin, the latest values inserted will be saved and used after the new activation.

Now we need a pege inside the WP control panel, to manage the options. First of all, we add a link to the main menu of the settings page. Of couse we'll use a wp core function :)

function myplugin_config_page(){
  if (function_exists('add_options_page')){
    add_options_page('MyPlugin Menu Title',
                     'MyPlugin Option',
                     8,
                     basename(__FILE__),
                     'myplugin_config'
                     );
  }
}

To work correctly, add_option_page function need some variable.

• The title of the destination page.
• The anchor link for the title menu.
• The access level required to manage the settings.
• The file must be loaded.
• The callback function contained in the loaded file, that create the page.

Well, let's see the callback function.

function myplugin_config(){
  $active   = (myplugin_option('active') == 1) ? 'checked' : '';
  $deactive = (myplugin_option('active') == 0) ? 'checked' : '';
  print('<div class="wrap">
         <h2>MyPlugin Options Tab</h2>
          <form id="ak_sharethis" name="myplugin_cnf" action="'.get_bloginfo('wpurl').'/wp-admin/index.php" method="post">
            <p>By this page it\'s possibile configure the plugin. Setup the following options to start testing how a wordpress plugin works!</p>
           <fieldset class="options">
            <p>Show some content before any post?</p>
               <ul>
                 <li>
                   <input type="radio" name="c_before_post" value="1" id="c_before_post_yes" '.$active.' />
                     <label for="c_before_post_yes">Yes</label>
                 </li>
                
                 <li>
                   <input type="radio" name="c_before_post" value="0" id="c_before_post_no" '.$deactive.' />
                     <label for="c_before_post_no">No</label>
                 </li>
               </ul>
              
               <p>Type the contet text to show:</p>
                 <input type="text" name="c_text_myplugin" value="'.myplugin_option('text').'" /> 
            </fieldset>
           <p class="submit">
        <input type="submit" name="myplugin_submit_button" value="Update Settings" />
       </p>
      </form>
         </div>');
}

Just HTML containing an usefull form to manage the main plugin's options. Nothing more, nothing less :)

Ok, now we have a form to manage the option, but, how can we update them? Just writing another function.

function update_myplugin_settings(){
  if($_POST['myplugin_submit_button'] == 'Update Settings'){
    $newsetting = $_POST['c_before_post'] . '%%%' . $_POST['c_text_myplugin'];
    update_option('opt_myplugin',$newsetting);
    header('Location: '.get_bloginfo('wpurl').'/wp-admin/options-general.php?page=myplugin.php&updated=true'); 
  }
}

Using update_option (another WP core function) we can easly update any option just declaring as first argument the option to update, and as second argument, the value to assign.

To execute it, just use add_action.

add_action('init', 'update_myplugin_settings', 9999);

Using the tag init and a height priority (9999) this action will be performed any time the plugin file is requested. But read the callback function as well: the real option update process will run just when it receive a particular POST data.

Now we have a page who manage the options, we can update them, we can activate the plugin as well, but, where is the function who chage my wordpress front-end?

function add_myplugin_text_to_content($content){
  if(myplugin_option('active') == 1){
   $content = '<p>'.myplugin_option('text').'</p>' . $content;
  }
  return $content;
}

add_action('the_content', 'add_myplugin_text_to_content');

Just a simple function, activated when the_content() function run, that replace $content variable.

Do you want to download this example wp plugin? Just click here :)

Tags: WordPress, Plugin, Web, Tutorial

A simple function to read a cookie value.

function CookieValue (offset) {
  var stringend = document.cookie.indexOf (";", offset);
  if (stringend == -1)
   stringend = document.cookie.length;
  return unescape(document.cookie.substring(offset, stringend)).replace("+"," ");
}

  function GetCookie (name) {
   var argu = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var none = '';
   var i = 0;
   while (i < clen) {
    var a = i + alen;
      if (document.cookie.substring(i, a) == arg)
        return CookieValue(a);
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0) break;
  }
 return none;
}

How to use it?

An example may be the best way to understand hot to use this code. Assum you have a cookie named "MyCookie" with value "MyCookie+Value".

The function:

GetCookie('MyCookie')

Return: "MyCookie Value".

I'm working hard in this period. I hope to have more time to update the blog ASAP :)

Tags: JavaScript, Coookie, Web

TextScroller is a JavaScript library that permit to scroll the text of the target ID of the web page. It's easy to use, easy to configure and require just javascript enable on the browser's client surfing you web pages.

How to setup the script

Using your favorite text editor open the file named textScroller.js and assign the values to the following variables:

  var orientamento = '';
  var parent = '';
  var duration = ;
  var h = ;
  var w = ;

var orientamento (array)

Choose the prefered scrolling direction:

• TD: from top to bottom;
• DT: from bottom to top;
• RL: from right to left;
• LR: from left to right;

var parent (string)

The ID element containing the scrolling text.

var duration (integer)

Scrolling speed. Bigger means slowest and vice versa.

var h (integer)

The height value of the scrolling ID. By this way you can choose the height of the scrolling text.

var w (integer)

The width value of the scrolling ID. By this way you can choose the width of the scrolling text.

Impostare il codice HTML

Between the <head> tags insert this line.

<script type="text/javascript" src="textScroller.js"></script>

Warning: consider the relative positione of the file. Writing the line exactly as above, the js file must be in the same folder of the html file.

Inside the <body> tag:

<body onload="letsGo()">

Inside the page, insert an element identified by the ID you want to scroll.

<div id="parent">
    Testo da scrollare
    Testo da scrollare
    Testo da scrollare
</div>

Degradability

The code is degradated. When the client has JavaScript disabled, will be loaded the CSS directives written in the stylesheet.

Extra Style

You can add extra style directives by adding css information for the id named width child- prefix and the ID of the scrolling element.

License

GNU/GPL v.3.

Demo

Click Here :)

Tags: JavaScript, web, textScroller

If your audio streaming of any media player suddenly seems to be dead and the system get you errors like "XYZ is not a valid Win32 application", maybe your quartz.dll is corrupted.

Browse your /system32/ directory and check the dimension proprierty of quartz.dll. If the file doesn't exist or he have zero dimension, download and replace it. No reboot is required!

Do you want to know why a system file can corrupt itself without a valid reason? Send an email to unclebill@microsoft.com.

Tags: quartz.dll, audio, XP, Windows