April 16th 2007
/images/feed.png "Comments RSS Feed")
Internet, Programming, Technology
I saw in the news yesterday that Microsoft released its competitor to Adobe’s (formerly Macromedia’s) hugely successful and widely-used Flash presentation software and ActionScript scripting language. Microsoft hopes that its Windows Presentation Foundation/Everywhere, now Silverlight, will claw some market share from Flash’s monopolistic grip on the web. Employing already established JavaScript and Microsoft’s proprietary XAML language, Silverlight would seem to be something to watch, even at this early stage. Today I decided to take a go at it and see if even I could use it. I’ve had limited experience with ActionScript and XML so I wanted to to compare it to my previous experiences. Here’s how I got on.
Before you read on, to view the things I’ve made, go to the download page and download the cross-browser plugin.
Silverlight Basics
I’m not going to turn this into a tutorial on how to setup everything - it can all be found in the official SDK, also available on the download page - but I will show the XAML and relevant JavaScript files that accompany each of the things I am to show.
The SDK’s quickstart guide was a really simple and easy explanation of the process of creating very simple shapes at first. I was a little confused at first because the XAML files I create utilise the canvas tag and initially I got it mixed up with the HTML tag of the same name. Firstly you create the canvas you’re going to ‘draw’ in. [Nearly] everything else goes inside this. The layers on the canvas, or z-index, are defined by the order the objects are created - those created later on in the script are on the top layers.
My first foray into it was a simple monochrome target which just created several ellipses in each other with the smallest one having a border instead of a fill. Here’s the .xaml file:
You can view the example’s finished product if you have the plugin installed.
Using Images
Next I did a bit of playing around with images. There are several ways you can use images on your canvas which include using them as a filling for an object or importing them on their own. In this example, I’ve created a rectangle and used an image of a pound coin and then overlayed it with 4 rectangles of differing colours with an opacity set. Along side it, I’ve added a gradient overlay to the image.
You can view the example’s finished product if you have the plugin installed.
Adding Multimedia
Adding media like music and video is incredibly easy for beginners to grasp. A single deceleration is used for both music as well as video which is rather handy. Controlling the media object is also incredibly easy and my quick look over the documentation for the MediaElement object showed a lot of options are available for controlling it. Firstly I tried just simply embedding a sound:
Next, I added the parameter to stop it automatically playing when loaded and added the controls for stop, pause and play the file. These controls also work with video media, as shown in the quick start guide provided in the SDK. The code involved this XAML code and the following JavaScript.
And this JavaScript, inserted either in the head of the page or an external JavaScript file:
You can view the example’s finished product if you have the plugin installed. Click the play, pause and stop buttons to test it out.
Lighting up the web?
Obviously I have to take into account the infancy in terms of development of Silverlight but it’s wide array of features is quite appealing. It took me a quarter of the time to stream a video in Silverlight than it did to do it manually in Flash via ActionScript. At the moment, Silverlight isn’t anywhere near Flash in terms of functionality but even at this early stage it does have some advantages over Flash in terms of the time saving it allows.
I’ve quite enjoyed doing some stuff in it and I’m sure that the abilities of Silverlight go far beyond drawing circles and streaming media. One nice example of the capabilities is this page turning program and this interactive WYSIWYG editor. For me it still feels like it’s a glorified version of the HTML canvas element with some JavaScript added. It doesn’t feel smooth like Flash and currently feels slightly buggy and laggy but I hope this will change in future revisions.
I’ve enjoyed using HTML, XAML and JavaScript and I think that it will eventually catch on - if it doesn’t then Microsoft will probably force it on us in some way. At the moment the plugin is available for both Windows and OSX but I hope Microsoft don’t make the mistake Adobe made by not keeping the Linux community up to date. Try it out.
February 14th 2007
Educational, Programming, Tutorials
My lessons are now into their second week and we’ve still got a way to go yet. This week we will be looking into IF and WHILE statements, $_GET, $_POST and we’ll also look into arrays near the end of the week.
Yesterday we did a simple lesson on $_GET and how to get values from a URL. Today another simple lesson on $_POST and the confusion that comes with it. I introduced you to $_POST in last Friday’s big special and today we are going into much more detail.
Lesson 8: $_POST and Forms
As I showed in Friday’s round up, we use $_POST to collect the values of submitted form data. Some confusion that I had for a while was whether or not to use the name or id attribute in the form fields to let $_POST work. I’ll settle this now - for $_POST to collect the data from the form fields, you need to assign a name attribute to them. The id can be used for labels, CSS classes and other things. Here’s a sample form form.php:
<form action="process.php" method="post">
First Name: <input type="text" name="fname" size="25" />
Last Name: <input type="text" name="lname" size="25" />
Over 16? <input type="radio" name="age" value="1" /> Yes <input type="radio" name="age" value="0" /> No
<input type="submit" value="submit form" />
</form>
In the above form we would get 3 values returned through $_POST. These would be the first name, last name and over 16 values. Here’s how we’d capture these values. This file would be process.php, as determined in the form’s first line:
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$age = $_POST['age']; //either 1 or 0
$name = $fname.” “.$lname; //stitch the first and last names together
?>
Pretty simple to get the form fields’ values. On Friday we are going to combine everything and a lot of form fields to create a signup form which will include this, arrays and a bit of validation.
February 13th 2007
Educational, Programming, Tutorials
My lessons are now into their second week and we’ve still got a way to go yet. This week we will be looking into IF and WHILE statements, $_GET, $_POST and we’ll also look into arrays near the end of the week.
In the previous lesson we went into detail about IF and WHILE statements and in Friday’s big round up I introduced you to $_POST and $_GET. Today we’re going to look further at $_GET and what it’s used for.
Lesson 7: $_GET and URLs
When we have a URL that includes the values of certain variables, we can use this to get the values. Say we had a URL like this:
http://www.eop.org.uk/index.php?name=sunny%20man&cool=yes
We use $_GET to grab the values of the name and cool variables. Obviously this isn’t a secure way to transport variables around your site - we’ll look at a more secure way later on into the tutorials - this is the most simple way.
<?php
$name = $_GET['name']; //$name = “sunny man”
$cool = $_GET[’cool’]; //$cool = “yes”
?>
Tomorrow I’ll be talking about $_POST and how it can be confusing when to use the name and id attributes on form field inputs.
February 12th 2007
Educational, Programming, Tutorials
My lessons are now into their second week and we’ve still got a way to go yet. This week we will be looking into IF and WHILE statements, $_GET, $_POST and we’ll also look into arrays near the end of the week.
As always we will find a useful example we can apply everything to at the end of the week as well as introducing some things we are going to look at in the following week. I hope you’ve learnt something in the previous week but don’t worry we will get more advanced as time goes on.
Lesson 6: IF and WHILE
In last week’s final day lesson I introduced you to an IF statement. I’m going to go over them in more detail today as well as introducing you to a WHILE loop. Here’s the IF statement I used in Friday’s example:
if ($username == "username" && $password == "password") {
...
}
This says: if $username’s value is “username” and if $password’s value is “password” then do this… If the statement in the ( ) brackets are true then it executes the instructions within the { } brackets.
There are a variety of comparison operators that you can use. The one used in the example is == which means equal to. There is also != - not equal to, === - exactly equal and of the same type, !== not exactly equal and not of the same type, > - is bigger than, < - is smaller than, >= - is bigger than or equal to, <= - is smaller than or equal to.
If you want to check more than one thing in an IF statement then you need to use logical operators, such as in the example I’ve used && to indicate that the statement should be true if the username and the password are both correct. Here are some examples:
if ($username || $password) { ... } // OR
if (!$username) { … } // NOT
if ($username XOR $password) { … } // XOR (exclusive OR)
Now we have got the hard bit out of the way we can now look at WHILE statements. WHILE statements are a little different to IF statements because they perform the instructions inside the { } brackets while a comparison remains true.
<?php
$a = 1;
$b = 5;
while ($a < $b) { //while $a is less than $b
echo $a;
$a++; //increment $a by 1
}
?>
WHILE loops come in very handy sometimes - for example when we look at arrays we will use a WHILE loop to good effect. A famous example of using ‘the loop’ is the Wordpress blogging system. This is the basic form of IF and WHILE loops. Remember them!
/images/9r_leaf.png "9rules Network")