Apr200826

1

The Programming Way Of Proportionally Resizing An Image

One of the project I baby sit lately is The Kamusi Project; an online swahili dictionary. One feature we Kamusi Slide showneeded on the website was a slide show [ which we use to have before when the project was hosted at yale ] so we can play a slide show of the images submitted by users. I had to quickly hack something up. The initial implementation went quiet good and we were quiet happy with it considering all the fancy fade in and fade out of the images and as well being able to link an image to it actual word.

One problem that hit us was pixelated images because I was forcing all the images to a particular fixed size[ i can be dumb sometimes ] which quiet didn’t fit well with the size I gave. To fix the problem, I needed to figure out a way to resize the image proportionally. At this juncture, I’m going to share how to resize an image and maintian it proportionality.

To achieve that, you need to know the aspect ratio  of the image, muliply it by the width you want to resize the image to and that gives you the height you need to resize the image to. The algorithm below explains everything.

  1. Get the original width and height of the image.
  2. Set new width if original width is not going to be used.
  3. Divide orignal height by the new width or the original width [ if new width wasn't set ] to get the aspect ratio.
  4. Multiply  aspect ratio by the  new width or original width [ if new width wasn't set ] to get the new height needed to resize the image to.
  5. Now set the image size to the new width or original width [ if new width wasn't set ] and the new height.

Simple huh!. Yes few research got me this.

Feb200818

0

Why Vista Sucks

Yes this video tells it all. Now after watching that clip consider yourself convinced that Vista sucks big time and also understand why people keep downgrading after few hours interaction with Vista. Yay Vista sucks!!! period.

Jan200821

2

Implementing Captcha With A Challenge Or CSS

One of the huge challenges facing online forms is automated script filling it up, then submitting it. A way spammers use to high jack a website then posting unsolicited content.

A smart way of fighting these automated scripts is to implement CAPTCHA on your forms that way you can detect humans from scripts.

Implementing CAPCHTA on your forms can be a little bit complex especially when you use the distorted image approach like this one.
.

This type of CAPTCHA is not only complex to implement but actually, technologies have been developed that reads these type of CAPTCHA thus making it ineffective to use.

A better, easy and effective way of implementing a CAPTCHA is to ask a very basic random question on the form. Could be a math challenge or just any quiz you think almost every human on this earth can answer. With that said, I implemented a script that does that. Feel free to download it. Got this concept from Drupal’s captcha module. That is what they actually use and is effective.

Another quick, better, smarter, easy and effective way of implementing that same feature( CAPTHCA ) is to use CSS. How?. You design a form with all the necessary fields you need from the user. Add another field to determine if its human or automated scripts that is filling the form. Use CSS to hide that particular field from humans. If its humans that is filling up the form, he/she will not fill that field because its not visible. So when validating, check if that field has been filled up. If it has, then it is surely a script that filled up the form so you don’t process otherwise its human. Go ahead and process the form. Check codes below to see how you can achieve the hiding of the form field with CSS.

 1 <html>
 2     <head>
 3         <title>Captcha With CSS</title>
 4         <style type="text/css">
 5             .captcha {
 6                 display : none;
 7                 background: #FFF;
 8             }
 9
10             #content {
11                 width : 300px;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="content">
17             <input type="text" size="30" name="first_name" />
18             <input type="text" size="30" name="last_name" />
19             <input type="text" name="captcha" class="captcha" />
20             <input type="submit" name="send" value="Send" />
21         </div>
22     </body>
23 </html>
24

Jan200820

0

MackBook Air Video

Check this video. It says it all.

« Older Entries   Recent Entries »