Shahid Online - Tech Corner

In the same project as before, my search results are being presented in a table.  The issue here, is that I want to have a different background colour for an alternate for the purpose of easy readability. Luckily, XSL saves the day with the position() function.  This is really handy for obtaining your current index when in a loop.  Just as with using any other server side language you want to mod 2 the position to identify the alternate row: <xsl:if test="position() mod 2 ='1'">     <xsl:attribute name="class">rowA</xsl:attribute> </xsl:if> For a quick reminder of the modulus operation ( mod ): when applying the arithmetic on an even number it, correctly returns 0.  When applying to an uneven number, such as 5, it will return the value 1.  1 denotes that there is a remainder. The purpose of xsl:attribute is to apply XML/XSL to an attribute of a HTML tag.  In this case I want to apply a CSS style to the table row ( tr...

While using XSL I came across the need to perform a calculation by converting metres to some other units, and then formatting the output. number() takes the value of the selected node and treats it as an actual number.  number() div 1000 is my actual calculation to convert metres to kilometres. Notice that I am using the keyword div and not the / operator as you would with other languages such as Javascript:     <xsl:value-of select="number() div 1000"/> km Being all nice and outputting my desired output, this is flawed. When it comes to outputting in other units such as miles and yards, it shows a large nasty decimal number.  It's far too accurate and long that it's not really user friendly.  A simple presentation would be to limit the output to 2 decimal places.  The answer to this is to use the format-number() function. This was all achieved in this one-liner:     <xsl:value-of select="format-number(number() div 1000,'#0....

When it comes to XSL you have to pay particular attention to the schema of the XML you are trying to make use of.  There are certain cases when you do not have control over the XML being produced that your XSL needs to be generic. I am currently updating a Community Portal, which I developed in the past for my current company and have just discovered a silly human error.  Yes. I made a bad mistake.  The coding for this system assumed that there would be no spaces in a post code when trying to build a list of links. The block was along the lines of: <a target="_blank">   <xsl:attribute name="href">     <xsl:value-of select="@theLink" />     <!-- Check length of string and attach post code with a space -->   </xsl:attribute>   <xsl:attribute name="title">     <!-- Attach the title of the link for accessibility-->   </xsl:attribute>   <xsl:value-of select=...

It's kind of interesting of how reverse linking does not seem so obvious in classic ASP.  You would think that it would be along the lines of: dim i for i = 30 to 2   'code comes here next but it's not.  To have a reverse For loop it's: dim i for i = 30 to 2 Step-1   'code comes here next That's right that small bit ( Step-1 ) makes all the difference.  I stumbled upon this by chance and thought that someone would benefit from this. Happy coding. Blogged with Flock

OK, it may not be Open Source.  But, as a follow up to Microsoft's success in providing Free .Net development tools for the Windows operating system, they are gearing up for the next version. Visual Studio 2008 Express Editions Beta 2. This Beta release really wows you with the future of the development tools, which lets you develop for Windows, the Web, Games, Hardware and Databases. Check it out at: http://msdn2.microsoft.com/express/future/ Blogged with Flock

I came across this on vmwarez.com .  It shows off the features and integration of the new virtualization software for the Apple Macs. It's absolutely brilliant. Embedded Video Blogged with Flock

I know that I once stated that using UL to build a list of links was not desirable, but there are times when you have no choice. It is fairly straightforward and you do not need any JavaScript to ruin your code.  So let's get started an define the menu and wrap it inside a DIV: <div id ="hovermenu" >   <ul >         <li > <a href ="#" href ="Link Number 1" > Link #1 </a > </li >         <li > <a href ="#" href ="Link Number 2" > Link #2 </a > </li >         <li > <a href ="#" href ="Link Number 3" > Link #3 </a > </li >     </ul > </div> Now for the CSS: .hovermenu ul{   font: bold 13px arial;   padding-left: 0;   margin-left: 0;   height: 40px; } .hovermenu ul li{   list-style: none;   display: inline; } .hovermenu ul li a{ ...

Many times I am told that using table s to layout a web page is a sin.  But, when I try to resize a DIV, it's hard to get it to resize when the window has been resized.  Setting 100% does not seem to work. So far we have the 3 column liquid layout, but it is not enough when the web pages (or applications for that matter) are more complicated.  When searching on the Internet to resize a DIV in response to a window resize, I am mostly presented with JavaScript solutions. Yeuch. This is not very accessible for users of other browsers. Luckily, there is an undocumented feature of CSS that helps with this: table layout. Firstly, create the element in the HTML: <div id ="pageBlock" > Content comes in here... </div> And then in the CSS we set our display: #pageBlock {   display : table;   height : 100%;   width : 100%;   table-layout : fixed; } Although this works with Firefox, it still likes to show a scrollbar for some reason, so you add th...

It's official.  According to Chart Track, the Nintendo Wii is the fastest selling home console in history. Selling 1 million units in 38 weeks, it surpassed PS2 which sold 1 million units after 50 weeks and XBox 360 which sold 1 million units in 60 weeks. This means that the Nintendo Wii has a 68% stake in the home console market, and the Nintendo DS has an 86% stake in the handheld gaming market. "The non-stop demand for Wii even in the traditionally slow sales periods for video games in the UK is clearly behind this record breaking achievement," states the report. I believe that the main reasoning behind this is the innovation that Nintendo is putting into their products, like the motion sensor-based controller.  When I first read the reports in the grapevine of this, I couldn't believe, yet they pulled it off.  Sony tried to come up with their own version, but it's not as sophisticated. The report continues to state: "The performance of both systems [Wii a...

When it comes to trying to use pure CSS to layout documents, it may seem daunting at first but is actually more straightforward than using table s. First off, define the columns in your HTML page: <div id ="leftColumn" > Content comes in here... </div> <div id ="middleColumn" >   <h1> Document Header </h1>   <p> Content comes in here...... </p> </div> <div id ="rightColumn" >Content comes in here....... </div> Now that is the structure put in place.  The wizardy is done using the id s of each div : #leftColumn {   position : absolute;   top : 140px;   left : 0;   width : 20%;   margin-top : 1%; } #middleColumn {   position : absolute;   top : 140px;   left : 20%;   min-width : 360px;   width : 58%;   margin : 1% 1% 0 1%; } #rightColumn {   position : absolute;   top : 140px;   left : 80%;   width : 20%;   margin-top : 1%...

Many people think that Open Source software is only for the home user. How wrong can they be? Very. I remember many years ago of how many charities and companies started to migrate to the Linux platform, in order to use open source software. The fundamental reason for this was that the software is free and the second reason was that there was not much open source software on the Windows operating system. Being free software, companies can reduce their overheads and not worry about the licensing restrictions that big companies impose. The big problem with commercial software is that there are so many features making them require higher spec machines. So you're stuck with your existing software or forced to upgrade your PC. By reading my previous posts you can tell that I am an Open Source advocate. But I really believe (among others) that Open Source software has left the bedroom a long time ago and you can really run a business using Open Source. Just don't forget to make a con...

I remember the days when I started with web design. While specifications and proposed standards were drafted, many designers and developers were lazy in making websites accessible in many browsers, including myself. The Internet has come a long way since, especially now that governments are making services and information available. I was given my awakening when studying User Centred Design and HCI concepts, realising that a lot of people are missing out. That is when I began utilising my design and marketing skills to provide consultancy to companies that produce web services/applications for the Local Authorities in the UK. My role with my current company is primarily consultancy to ensure that marketing and the online products are usable/accessible , but have been involved in development to ensure that the guidelines are implemented. I was astonished that they never considered making their software usable/accessible until I came along. There must be more companies and local autho...

My work place tasked me with trying to be as purist as possible with HTML and CSS for an interface their web application. Without any formal web development background, I have always been one of those who intermingle the code and have presentation within the HTML. I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it. One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that. My way leaves out the usual ul tag and dives straight into the anchor ( a ) tag as it should be: a href ="links.htm" id ="linksButton" title ="Lin...

I have Nokia N70 on the T-Mobile network, and it's really impressive. Labelled as a Smart Phone, it is a bit like a cross between a PDA and a normal mobile phone. Boy does it live to expectations. You can check your emails (POP/IMAP), read Word documents, Spreadsheets, view To-Do lists and so much more. Now I sound like a sales man. The most handy aspect is the ability of downloading "mini-applications". What I really want to talk about is a mini-application that let's you treat your phone as if it is an iPhone. Yes, you heard me. An iPhone. Why bother with a mobile phone that costs you an arm and a leg for a phone with a pretty interface. Well, I would, but I would not like to risk my limbs in the process. This application is called Morange ( http://www.morange.com ) and is feature rich. You can receive an "push" POP/IMAP emails. It even works with GMail. All you have to do is enable POP3 in the settings (Follow this link to find out how http://ma...

Yes crash it! I just cannot resist the urge to visit CrashIE.com while using Internet Explorer 6. As the name suggests it crashes the browser. Don't worry. Your other browsers like Firefox and Flock are safe. Unfortunately, it does not crash the new Internet Explorer 7 browser. I don't use IE7 anyway, with the new (hideous) interface bugging me every second. So here I am in IE6. Here we go ag.... Hehehe.

In a previous Blog, I looked at freeware and open source software alternatives so that you can roll out your own version of Adobe Creative Suite 3. But did you think that was it for open source? Surely not!?! 3D Carrying on the theme of design, I have been asked by many for 3D modelling software. One way is subscribing to a magazine and wait for a cover edition of the high end apps like Alias Wavefront. The other is to get Blender . Available on Windows and Mac OS, this has been used in some commercial movies and is by far the most popular application. Did I mention that I really like it? Other alternatives are Art of Illusion (Win/Mac) and POV-Ray (Win/Mac). There is a fairly new application called Wings 3D (Win/Mac), which is in development but is already attracting a lot of attention. Video Editing This could have gone with the Adobe Creative Suite round up, but there is nothing to pit against Premiere. As promised I found some applications but have not had a chance to test them....

Oh yes, an update to an earlier post about getting hold of free or Open Source alternatives to Adobe Creative Suite. I actually forgot to mention about Adobe ImageReady, which gets bundled with Photoshop. There are a number of basic animation tools, but none provide flexibility similar to ImageReady. Fortunately, Open Source lovers are in for a surprise in the form of GIMP Animation Package . This link will take you to the Windows download site as I cannot find any references to this for the Mac OS. Chances are that it could be part of the Gimp.app download, but I haven't had time to inspect this. The Creative Suite package includes Adobe Bridge, which is a thumbnail viewer to convert images and open them up in any Adobe application for editing. No matter how they would try to trump up its name, it is still a thumbnail viewer. The best free application out there for this is IrfanView . Need I say more? Are there any pixel pushers out there, who prefer to simply draw their own pics?...

You may still be using Internet Explorer, given all the choices out there. But why? You don't have to be dull and just browse web pages. There's more to the Internet such as blogging, sharing pictures and having a bit of fun. While Mozilla Firefox is a great (and more secure) alternative to Internet Explorer, it adds to the experience with Extensions. These extensions can vary from weather and news feeds all the way to making web developers gleem while hacking away at the keyboard. Enter Flock . To quote from their website: Flock is an amazing new web browser that makes it easier to share media and connect to other people online. Share photos, automatically stay up-to-date with new content from your favorite sites, and search the Web with the most advanced Search Toolbar available today. It is based on the Mozilla Gecko engine and resembles Firefox on steroids, or (if you like) extensions such as The Coop. I actually use Flock to seek enjoyment from the Internet, so while I...

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money. Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour. I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase...

First get rid of Internet Explorer. Then get Firefox . Done? Good. Now, for the keen web developers out there, get Firebug! I have been beta testing this nifty little plugin for Firefox, and am impressed. It's still in development so you may want to wait until it has been released.