Poll of the Week

What Open Source Software Development Sites do you use for either developing your open source projects or downloading existing Open Source Software? Let us know by voting on the following page.

Forum Topics Week in Review

Pete Soheil
Hot Scripts Forum Administrator
————————–
DigiOz Multimedia
www.digioz.com
————————–

Post from: Hot Scripts Blog

Hot Scripts Forum Digest – Nov 8th, 2009

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

This paper summarises the basics of using RSS to provide syndicated content. I will be using the RSS 2.0 specification simply because that is my personal preference. There are a number of alternative specifications available, but I will not be looking that those.

The author, Peter Cowburn, has been working with XML in conjunction with a variety of other web technologies for over 6 years.

RSS is XML

That’s correct! Building on the amazingly versatile eXtensible Markup Language, RSS is a useful application of XML. This explains the way RSS is marked up in XML style tags.

The Structure of RSS

All RSS documents absolutely must contain the root element <rss> within which there can only be a single <channel> element. Do not do it any other way! The basic meaning when ‘reading’ the RSS file is that first we are actually in an RSS document (the “rss” tag) and have a channel (the “channel” tag). Only three other tags are 100% necessary in any RSS document, namely; <title>, <link> and <description>.

There are a whole host of other tags which can optionally be used within the “channel” which are:
category, cloud, copyright, docs, generator, image, item, language, lastBuildDate, managingEditor, pubDate, rating, skipDays, skipHours, textInput, ttl and webMaster. Details of these are listed in the specification.  The commonly used ones are pubDate and lastBuildDate as they are of use to RSS Feed Aggregator programs.  However the most important is the item tag!

The item tag

The channel can contain any number of items (though having none would be silly); think of them as stories in a newspaper or entries in a blog. The available tags which can be used within an item tag are author, category, comments, description, enclosure, guid, link, pubDate, source and title.  Note that all of the tags are optional individually but the item tag must contain at the very least either a description or title tag.

A bare-bones example

Below is an example of a minimal RSS feed, note that this is not the absolute minimum required in an RSS document but just contains the most commonly used tags. Note: required tags are coloured green.

<rss version=”2.0″>
<channel>
<title>My Personal Blog</title>
<link>http://www.mypersonalblog.com</link>
<description>A small web log all about me.</description>
<pubDate>Tue, 2 Nov 2004 14:48:32 GMT</pubDate>
<lastBuildDate>Tue, 2 Nov 2004 14:48:32 GMT</lastBuildDate>
<item>
<title>The Weather Today</title>
<link>http://www.mypersonalblog.com/the-weather-today/</link>
<description>
I looked out of the window this morning and it was
pouring with rain. Obviously my first reaction
was to turn over and go back to sleep.
</description>
</item>
</channel>
</rss>

More real-world example

Most commonly RSS documents are used for news/blog feeds, so I will give you a quick example (modified from my own web log). Note the various groups of tags are coloured to distinguish groups.

<rss version=”2.0″>
<channel>
<title>cowburn</title>
<link>http://blog.cowburn.info/</link>
<description>Web, Life and Photography</description>
<language>en-us</language>
<pubDate>Tue, 2 Nov 2004 14:48:32 GMT</pubDate>
<lastBuildDate>Tue, 2 Nov 2004 14:48:32 GMT</lastBuildDate>
<item>
<title>So you want a photolog?</title>
<link>http://blog.cowburn.info/archives/2004/11/2/photolog/</link>
<description>
I have been working on re-arranging this site so that the different
areas (Blog, Photos, etc) will all appear consistantly, styled along
the same theme.
</description>
<pubDate>Tue, 2 Nov 2004 14:48:32 GMT</pubDate>
</item>
<item>
<title>Got Logo?</title>
<link>http://blog.cowburn.info/archives/2004/11/1/logo/</link>
<description>
Out of the goodness of my heart, I have decided to help those
designers out who are non-logoly gifted in a contest which is
going on over at yaXay currently.
</description>
<pubDate>Mon, 1 Nov 2004 19:12:02 GMT</pubDate>
</item>
<item>
<title>Birnie 2004</title>
<link>http://blog.cowburn.info/archives/2004/10/30/birnie/</link>
<description>
For those of you wondering where on earth I have been for the
past month or so, fear not for I am about to enlighten you.
I have been digging up in the North East of Scotland excavating
the lovely settlement site of Birnie in Moray.
</description>
<pubDate>Sat, 30 Oct 2004 22:19:58 GMT</pubDate>
</item>
</channel>
</rss>

Summary

So, essentially we have covered the very basics of what RSS is all about and what the documents look like.  In the real world RSS documents are generally generated on-the-fly whenever a new news article or blog entry is published.  This is an area not to be covered in this paper but there are many methods of achieving this to be found around the internet.

Happy publishing!

Post from: Hot Scripts Blog

RSS: Really Simply Syndication

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The article by Sergey Zavadski introduces the object model of the JavaScript programming language and demonstrates common practices in the OOP (object oriented programming) with the JavaScript.

Simplicity of the JavaScript.

JavaScript is proven to be the one of the simplest programming languages to learn and use. Minor snippet of the code (in fact one string) performs various actions like creating of the windows or changing the text in the status bar. The flexibility, short learning curve and the fact that JavaScript is not “strongly typed” language explains extreme popularity of the JavaScript among the web masters community which selected this language as the language of choice to provide the static HTML pages with the dynamic attractive content.

The powerful tool.

However in spite of its visible simplicity the JavaScript, when following the DOM specifications, is quite advanced and powerful tool providing all the required facilities for the creation of the complex solutions (client side) such as menus, trees, grids. These possibilities are actually reflecting the JavaScript’s power when it comes to the layers manipulations. Not the last reason for this power is OOP structure of the JavaScript programming language which was planned and implemented as an object oriented language!

Object model.

The JavaScript object is the entity with the properties that can be either other objects or variables. For example we have ‘Country_Italy’ object. We can assign the values to the properties of this object like this:

Country_Italy.Name=”Italy”;

Country_Italy.Capital=”Rome”;

Country_Italy.Area=301000;

However the ‘Country_Italy’ object itself can be the property of other object:

Europe.MostBeautifulCountry= Country_Italy;

JavaScript comes with the library of the built-in objects like ‘Window’, ‘Math’, ‘String’ and many others. But what makes the language really flexible is the ability of creating own custom objects. There are two possible methods for making custom objects in the JavaScript. First one is using of the direct initialization. The code in this case may look like this:

Country={Name:”France”,Capital:”Paris”,Government:{President:”Jacques Chirac”}};

We have created the Country object with the ‘Name’, ‘Capital’ and ‘Government’ properties and the ‘Government’ property is the object with own list of properties. We’ve also initialized these properties with the initial values. All is done in the one single string. The following construction creates and initializes the empty object:

Country={};

Another way to create objects in the JavaScript is defining the special function constructor for the object and initialization of the object with the ‘new’ operator. For example:

function Country(Name,Capital,Population){

this.Name=Name;

this.Capital=Capital;

this.Population=Population;

}

The ‘Country’ function is the constructor function. Now to create the object using this defined constructor we use the new operator:

Country_Italy=new Country(“Italy”,”Rome”,301000);

Just like in the previous example the property can be the object itself:

function Government(President){

this.President=President;

}

function Country(Name,Capital,Government){

this.Name=Name;

this.Capital=Capital;

this.Government=Government;

}

Government_France=new Government(“Jacques Chirac”);

Country_France=new Country(“France”,”Paris”,Government_France);

Another advantage of the OOP fully implemented in the JavaScript is that the object can have the methods (not only properties). The methods are the functions described within the object scope that usually operate with object’s properties. The methods are described much like the properties:

function describeCountry(){

var desc=”Name: ”+this.Name+” Capital: ”+

this.Capital+” Population: “+this.Population;

alert(desc);

}

In the above definition this operator provides an access to the object the described method belongs to.

Country_Italy.describeCountry=describeCountry;

The construction below fully repeats the above one:

Country_Italy.describeCountry=function(){

var desc=”Name: ”+this.Name+” Capital: ”+

this.Capital+” Population: “+this.Population;

alert(desc);

}

The construction:

Country_Italy.describeCountry();

calls the ‘describeCountry’ method of the ‘Country_Italy’ object.

Prototypes based object oriented language.

Unlike some other popular OO languages (Java, C++) whose object model is based on the classes the object model of the JavaScript is based on the prototypes. The main difference between those two approaches is that in the prototype based language there’s no difference between the class and the class instance entities – you only deal with the objects.

The prototype (can be viewed as a template that defines the way initial object’s properties values are assigned) is any object declared with the prototype operator. This object can be the parent of any newly created object and this is how the JavaScript supports inheritance – important OOP language characteristic. Let’s see our Country object:

function Country(Name,Capital,Population){

this.Name=Name;

this.Capital=Capital;

this.Population=Population;

}

Now let’s declare ‘Cn’ – the ‘Country’ object prototype:

Cn=Country.prototype;

Cn.describeCountry=function(){

var desc=”Name: ”+this.Name+” Capital: ”+

this.Capital+” Population: “+this.Population;

alert(desc);

}

Now we can call the ‘describeCountry’ method in any ‘Country’ descendant with only two strings of code:

Country_Italy=new Country(“Italy”,”Rome”,301000);

Country_Italy.describeCountry();

Using this approach we can define in the prototype any number of the methods and properties. Defining methods and properties in the prototype rather then defining them directly for each object gives many advantages:

-        You don’t have to define all required methods or properties any time the object is created. You define all the necessary methods and properties in the prototype and then all you have to do is to create the object.

-        Makes your code more secure since you can keep all object definitions in the separate file

-        Makes your code easier to read

Inheritance.

JavaScript also supports the inheritance mechanism that is the corner-stone of the OOP.
To show the easiness of the JavaScript inheritance mechanism let’s review two already defined objects of ours ‘Country’ and ‘Government’ and one new object ‘Parliament’. Let’s assume that these objects have the following object hierarchy:

Constructor functions for these objects will look like these:

function Country(Name,Capital,Population){
this.Name=Name;
this.Capital=Capital;
this.Population=Population;
}

function Government(President){
this.President=President;
}

function Parliament(Speaker){
this.Speaker=Speaker;
}

Take a look at the ‘Country’ object prototype.

Cn=Country.prototype;

Cn.describeCountry=function(){
var desc=”Name: ”+this.Name+” Capital: ”+
this.Capital+” Population: “+this.Population;
alert(desc);
}
The following construction defines ‘Country’ as ‘Government’ prototype (‘Government’ inherits the ‘Country’):
Government.prototype=new Country(”France”,”Paris”,59330000);

When ‘Government’ object is created it inherits all the ‘Country’ methods and properties. In other words, although ‘describeCountry()’ method is not defined for ‘Government’ object it is available since ‘Country’ object is defined as ‘Government’ prototype.
Government_France=new Government(”Jacques Chirac”);
Government_France.describeCountry();

New methods can also be defined for the ‘Government_France’ object:

Government_France.describeGovernment=function(){
alert(“President: ”+this.President);
}
Let’s complete the ‘Parliament’ object definitions.

Parliament.prototype=new Country(”France”,”Paris”,59330000);
Pn=Parliament.prototype;
Pn.describeParliament=function(){
alert(”Speaker: “+this.Speaker);
}

Parliament_France=new Parliament(”Jean-Louis Debre”);
As you can see prototypes can also be modified for the inherited objects.

The above examples demonstrates elegance of the JavaScript OOP model which enables this easy to learn language perform variety of the complex tasks for the real life programming.

Real life example.

This very OOP approach was used in our company when we developed the CodeThat.Com’s set of the web controls. For example the ‘CodeThatCalendar’ is nothing but an object declared as:

function CodeThatCalendar(def) {
this.def = def;
this.links = {};
this.styles = {};
this.hideifr = true;

if (typeof(this.def.img_path)!=”undefined”) {
if (this.def.img_path.lastIndexOf(”\/”)!=this.def.img_path.length-1) this.def.img_path=this.def.img_path+”\/”;
}

if (typeof(this.def.template_path)!=”undefined”) {
if (this.def.template_path.lastIndexOf(”/”)!=this.def.template_path.length-1) this.def.template_path=this.def.template_path+”/”;
if (this.def.template_path.indexOf(”\/”)!=0)
if (typeof(this.def.img_path)!=”undefined” && this.def.img_path.indexOf(”\/”)!=0) {
s=this.def.template_path;
a=s.split(”/”);
a.length=a.length-1;
t=”";
for (i=0; i<a.length; i++){
t=t+”../”;
}
this.img_path=t+this.def.img_path;
}
}
};

var CTc = CodeThatCalendar.prototype;

CTc.hide = function()
{
…
}

CTc.create = function(d,ctl) {
…
}

Various methods of the control work with the layers giving the control fancy look and feel and enabling user perform various actions the calendar supposed to do. For example, the below function sets the value of the HTML form control to the date user have selected.  This is performed each time user clicks the calendar date.

function CodeThatSetDay(c,f,d,m,y,i,ifr) {
var doc;
var w = window.opener||this.parent;

if(w&&!i)
doc = w.document;
else
doc = document;
var e = CodeThatFind(doc,c);
if(Def(e))
{
e.value=CodeThatDateFormat(f,d,m,y);
if(e.fireEvent) e.fireEvent(”onchange”);
else {
if(e.onchange) e.onchange();
}
}

if(w&&!i)
{

if(Def(w) && Def(ifr))
{
var iframe = CodeThatFind(doc,ifr);
if(Def(iframe))
iframe.style.visibility = ‘hidden’;
if(ua.opera6)
{
var d = CodeThatFind(doc,”calendar_div”);
if(Def(d))
d.style.visibility=’hidden’;
}
}
else
{
window.close();
}
}
};

(The examples of CodeThatCalendar functions are not fully functional. They are listed here for illustrative purposes).

As you can see JavaScript is indeed powerful and user friendly programming language with many abilities which help to create really complex and interesting solutions. Since the DOM model is supported by majority of modern browsers you can be sure your solution will be accessible for the majority of users. Of course there’s much more to learn in the JavaScript: events, DOM, layers, and the cross-browser portability is also not always that transparent but this is for another story or… several stories.

Author.

About the author: Sergey Zavadski is one of the core JavaScript developers at CodeThat.Com (http://www.codethat.com/) He has developed number of the scripts offered by the company and leads the customers support department.

Article original: http://www.codethat.com/doc/articles/article_jsoop.pdf

Post from: Hot Scripts Blog

OOP in JavaScript

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

We would like to use the URL of the image to supply our wishes to the script. A possible URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300) Using this URL, we would like to get the image identified by 3cb7f702a5967, resized to a width of 300 pixels and the corresponding height. The possibilities of our newly created script will be:

• resize an image to a given width and/or height, possibly preserve the aspect ration
• accept new image sizes as absolute values, and as percentages of the original size
• resize an image when width or height exceed a given limit;
• return the image as a PNG or JPEG-file.

What We Need

To build and use this script, you will need PHP compiled with the GD library and JPEG-support.

The Syntax

For telling our script what to return, we will use the following syntax. The arguments are delimited by one or more +-es. An example URL could be: http://www.example.com/img.php?f(3cb7f702a5967)+w(300)

The Script

Now that we have defined the syntax of the script, it is time to take a closer look at the actual code.

Checking the arguments

First of all, the given arguments are read from the query string by a simple preg. The regular expression returns all possible tags. Then the tags have to be checked for incorrect values. Defining an array of possible tags and corresponding regular expressions, is an easy way to check the tags in a for-loop. The checked and correct tags are saved in an associative array for later use. As a last check, the script verifies that a filename is given and that that file really does exist.

// define the base image dir
$base_img_dir = \”./img/\”;

// find tags
preg_match_all(\”/\\+*(([a-z])\\(([^\\)]+)\\))\\+*/\”, $QUERY_STRING,
$matches, PREG_SET_ORDER);

// empty array and set regular expressions for the check
$tags = array();
$check = array( \”f\” => \”[0-9a-zA-Z]{13}\”,
\”w\” => \”[0-9]+%?\”,
\”h\” => \”[0-9]+%?\”,
\”x\” => \”[0-9]+\”,
\”y\” => \”[0-9]+\”,
\”t\” => \”jpg|png\”,
\”q\” => \”1?[0-9]{1,2}\” );

// check tags and save correct values in array
for ($i=0; $i<count($matches); $i++) {
if (isset($check[$matches[$i][2]])) {
if (preg_match(\’/^(\’.$check[$matches[$i][2]].\’)$/\’,
$matches[$i][3])) {
$tags[$matches[$i][2]] = $matches[$i][3];
}
}
}

function notfound() {
header(\”HTTP/1.0 404 Not Found\”);
exit;
}

// check that filename is given
if (!isset($tags[\"f\"])) {
notfound();
}

// check if file exists
if (!file_exists($base_img_dir.$tags[\"f\"])) {
notfound();
}

Loading the Image

The next step is the actual loading of the image. The getimagesize(); function is used to determine the file type, and then the correct method is used to load the image. In case the requested type of the returned image is not given, the file type of the original image is set as a default.

// retrieve file info
$imginfo = getimagesize($base_img_dir.$tags[\"f\"]);

// load image
switch ($imginfo[2]) {
case 2: // jpg
$img_in = imagecreatefromjpeg($base_img_dir.$tags[\"f\"]) or notfound();
if (!isset($tags[\"t\"])) {
$tags[\"t\"] = \”jpg\”;
}
break;
case 3: // png
$img_in = imagecreatefrompng($base_img_dir.$tags[\"f\"]) or notfound();
if (!isset($tags[\"t\"])) {
$tags[\"t\"] = \”png\”;
}
break;
default:
notfound();
}

Possible resize

The most important part of the script is, of course, the resize. First, we have to look whether or not a resize is needed. When width or height tags are given, the new width and height are calculated using the size of the original image. The new size is used to copy the original image to the new, resized instance.

// check for maximum width and height
if (isset($tags[\"x\"])) {
if ($tags[\"x\"] < imagesx($img_in)) {
$tags[\"w\"] = $tags[\"x\"];
}
}
if (isset($tags[\"y\"])) {
if ($tags[\"y\"] < imagesy($img_in)) {
$tags[\"h\"] = $tags[\"y\"];
}
}

// check for need to resize
if (isset($tags[\"h\"]) or isset($tags[\"w\"])) {
// convert relative to absolute
if (isset($tags[\"w\"])) {
if (strstr($tags[\"w\"], \”%\”)) {
$tags[\"w\"] = (intval(substr($tags[\"w\"],0,-1))/100)*$imginfo[0];
}
}
if (isset($tags[\"h\"])) {
if (strstr($tags[\"h\"], \”%\”)) {
$tags[\"h\"] = (intval(substr($tags[\"h\"],0,-1))/100)*$imginfo[1];
}
}

// resize
if (isset($tags[\"w\"]) and isset($tags[\"h\"])) {
$out_w = $tags[\"w\"];
$out_h = $tags[\"h\"];
} elseif (isset($tags[\"w\"]) and !isset($tags[\"h\"])) {
$out_w = $tags[\"w\"];
$out_h = $imginfo[1] * ($tags[\"w\"] / $imginfo[0]);
} elseif (!isset($tags[\"w\"]) and isset($tags[\"h\"])) {
$out_w = $imginfo[0] * ($tags[\"h\"] / $imginfo[1]);
$out_h = $tags[\"h\"];
} else {
$out_w = $tags[\"w\"];
$out_h = $tags[\"h\"];
}

// new image in $img_out
$img_out = imagecreate($out_w, $out_h);
imagecopyresized($img_out,$img_in,0,0,0,0,imagesx($img_out),
imagesy($img_out),imagesx($img_in),imagesy($img_in));
} else {
// no resize needed
$img_out = $img_in;
}

If you\’re using version 2 of the GD-library, you can use imagecreatetruecolor() instead of imagecreate() and imagecopyresampled() instead of imagecopyresampled(). This will get you a much nicer image. (Thanks to Helison Santos, who commented on this.)

Returning the image

The last step in our script is the actual returning of the image. The image and corresponding headers are returned as set in the query string. If the wanted type is not given, the image is returned as the original type of the saved file.

// check for a given jpeg-quality, otherwise set to default
if (!isset($tags[\"q\"])) {
$tags[\"q\"] = 75;
}

// returning the image
switch ($tags[\"t\"]) {
case \”jpg\”:
header(\”Content-type: image/jpeg\”);
imagejpeg($img_out, \”\”, $tags[\"q\"]);
exit;
case \”png\”:
header(\”Content-type: image/png\”);
imagepng($img_out);
exit;
default:
notfound();
}

What We Did

Now we have a script that fulfils the tasks we described above. Images are uploaded once and can be resized to whatever you want, without manual action. For the editors, the users of your CMS, uploading images is very simple. They upload the file in the size and type they want, and the script takes care of the resizing and converting. Without more work, your site can show thumbnails in many different sizes. If you, in the near future, would like to redesign your site, it is easy to get a new image size, without having to resize your whole archive.

The complete script discussed above, is available for download here. A demo of the script is running here, change the arguments in the query string to try the different commands like w() and t().

Where to go from here

Some thoughts about possible extensions of this script:

Enabling GIF-output. Using the command-line pngtopnm and pmmtogif programs, you can convert PNG-images to GIF on the fly. That way, you do not have to worry about older browsers not supporting the PNG-format.
Uploading of files in more formats. For the users of your CMS, it would be very easy if they could upload images as GIF, Windows bitmaps and TIFF. Using open source conversion utilities, you can still save these images as PNG of JPEG after uploading.
Using normal filenames for the images. Filenames generated with uniqid(); are easy and unique, but not very descriptive.
Saving file information like default ALT-tags in a database. You can easily find images for use in articles.

Post from: Hot Scripts Blog

PHP Automated Thumbnails

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Welcome to another edition of the Hot Scripts Forum Digest.

Poll of the Week

This weeks poll is an ongoing poll from a few month back. Are landing pages useful or harmful for website? Let us know what you think about landing pages by voting on the following page.

Forum Topics Week in Review

Pete Soheil
Hot Scripts Forum Administrator
————————–
DigiOz Multimedia
www.digioz.com
————————–

Post from: Hot Scripts Blog

Hot Scripts Forum Digest – Nov 1st, 2009

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Poll of the Week

With Hand Held Devices gaining in popularity, more and more people are using Hand Held Device Operating Systems these days. Which Hand Held Operating System do you run and how do you like it? Let us know by voting on the following page.

Forum Topics Week in Review

Pete Soheil
Hot Scripts Forum Administrator
————————–
DigiOz Multimedia
www.digioz.com
————————–

Post from: Hot Scripts Blog

Hot Scripts Forum Digest – Oct 25th 2009

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Welcome to another edition of the Hot Scripts Forum Digest.

Poll of the Week

What is your opinion of the new Windows 7 Operating System? Is it really as good as people say it is or does it need more work? Let us know by voting on the following page.

Forum Topics Week in Review

Pete Soheil
Hot Scripts Forum Administrator
————————–
DigiOz Multimedia
www.digioz.com
————————–

Post from: Hot Scripts Blog

Hot Scripts Forum Digest – Oct 18th 2009

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Visit Microsoft's WebsiteSpark Homepage

To be eligible for this program, you must be a professional service firm that provides web services to clients with no more than 10 team members. Approved companies will receive the following software licenses for three years at no cost:

• Visual Studio Professional
• Expression Studio 2 or 3 and Expression Web
• Windows Web Server 2008
• SQL Server 2008 (Web Edition)

If you design and develop on Microsoft’s platform, then this is an excellent opportunity to grow and build your business.

Microsoft has been doing a lot these past months to get a share of the open source market and promote development on its platform. Does that indicate a downward trend in developing for Microsoft’s platform? Let us know your thoughts by posting to this thread or sharing your views on the Microsoft’s development platform on our forums.

Post from: Hot Scripts Blog

WebsiteSpark – Free tools for Developing on Microsoft’s Technologies

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.