Thursday, June 18, 2009

Mobile gaming: Augmented reality with the Nvidia Tegra

tegra_3d_largeThese days, consumers increasingly want to take their experiences with them—be it gaming, movies, music, or the Internet. Devices like the Sony PSP, the iPod, multimedia cellphones, and video-capable portable media players do just this—they provide entertainment no matter where you are. But when it comes to portable devices, there are several invisible yet real barriers to a good experience—battery life and processing power. Manufacturers are grappling with these very issues while developing the next funky cell phone or portable gaming device. The Holy Grail lies in the ability to integrate console-class graphics capabilities with day-long battery life. And it looks like Nvidia (a leader in the development of processors for gaming and visualization) is very close to that elusive goal. With the launch of their Tegra processor, they can now offer phone and handheld game device manufacturers the ability to play high-definition movies and desktop class games on portable devices. If you’re a gamer, think Doom 3 class graphics on a handheld device. If you’re movie buff think watching 1080p-class high-definition video on a ultra-crisp portable OLED screen.

It gets better—when you marry the inherent portability of devices like cell phones and Mobile Internet Devices with the fact that they have fairly high-resolution cameras, something amazing happens. Check out the video below of a portable device powered by the Tegra processor, and how developers have been able to ‘augment’ the game on screen with the real word as seen through the mobile camera. Very, very cool.

Augmented reality enabled by the Nvidia Tegra processor

Imagine owning a phone in the near future having this kind of capability, and running around a table-top map with friends in a multiplayer game, or even taking the game outside the house and augmenting the undead into your quiet neighborhood—sounds trippy! Only problem I see is gamers of the future having to grapple with the inability to detach themselves from their virtual world, and get back into the here and now. But hey, it’d be a fun ride before that.

Marketing folks have already jumped onto the augmented reality bandwagon—check out this cool marketing campaign by Ford UK, to promote the launch of the Ford Ka.

Wednesday, May 13, 2009

All-time great sci-fi movies of the videotape era

When it came to figuring out what to do with my life, there never really was any doubt about what I’d become—an engineer. I remember the numerous times I stoically opened those steel wind-up alarm clocks, to see what made them tick, or took apart music systems (even my VCR, when I was all of 10 years old, to find out how to un-jam that tape!). Needless to say, not all of these exploits were successful—in fact, most were outright disasters. Over the years, I left behind a sizeable wake of cannibalized motors from toys, wrecked stereo systems, and bed sheets that bore scars from trysts with 240-volt electricity (yes, there was the time I nearly got a nice domestic fire going—and we didn’t have a fireplace).

Sure I had my fair share of chastising, but through it all mum and dad did all they could to ensure that I had a steady supply of science and technology influences throughout my formative years—from the junior microscope sets, to telescopes, to electronic do-it-yourself kits. I was, indeed, blessed.

But when it came to igniting a spark of interest in the budding scientist in me, the biggest influencers had to have been movies—I believe the 80s produced some of the most spectacular science fiction movies ever created. Looking back, the fact that the special effects were nowhere as advanced as today’s productions did in no way detract the sheer innovation and soul that characterized many of those movies. Being the era of VHS (where copying was cumbersome and downloading was out of the question), every movie was treasured, and the act of watching it was a family affair, often followed by hours and days of animatedly discussing, dissecting and reliving the storyline.

In no particular order, here’s a list of what I believe are some of the greatest sci-fi movies of the videotape era. If you ever get a chance to watch any of these, I guarantee that they’ll be pure, family entertainment. And if you have a budding techie sitting on the couch in your living room, (s)he’s bound to have great memories of them in the years ahead.

Flight of the Navigator (1986)
A fascinating story about a UFO that selects and befriends a boy to help it get back home. I still think that this is one of the most amazing-looking UFOs ever shown on celluloid. Period.
D.A.R.Y.L. (1985)
Another movie that centers around a young boy, who’s the subject of NASA experiments that make him hyper-intelligent. And the best part of this movie (spoiler alert ahead!)—in the end he flies a Lockheed SR-71 Blackbird—my favorite aircraft, bar none!
TRON (1982)
Conceptually, this movie was way ahead of its time—a computer geek gets mysteriously transported into a computer, and must battle his way to get out alive—by fighting against its games, one on one! This movie had one of the most spectacular effects of its time, and the action sequences (on those bike thingies, especially), were awesome!
BTW: TRON was a function used in good ol’ programming languages like BASICA, meaning TRaceON—it was used for debugging!
Return to Oz (1985)
If you liked the Wizard of Oz, you’re bound to love this movie. This isn’t a happy, bouncy continuation of the original, but instead puts Dorothy and her band of misfits in a darker, more sinister realm. Fascinating story, great characters.
Return of the Jedi (1983)
Which geek doesn’t revere this movie? This was actually the first Start Wars episode I watched, and I instantly fell in love with every aspect of it. After this movie, there was no looking back from Han Solo, the Light Sabres, and Vader.
Short Circuit (1986)
A charming movie about a battle robot that takes on human characteristics after a close encounter with a lightening bolt. Besides looking downright cute in its own right, this robot is actually quite evocative of our modern-day Wall-E.
Back to the Future (1985)
A sports car that doubles up as a time machine, hover skateboards, and a host of other cool gadgets—ingredients for one rocker of a sci-fi movie! Because of this movie, the gull-wing DeLorean was one of my favorite sports cars at the time. Arguably one of Michael J. Fox’ most memorable roles, this is one of those must-see, must-own pieces of cinemagic!
*batteries not included (1987)
Looking back, I think this is a grossly underrated movie—it’s a story about an adorable pair of extra-terrestrial robots that ‘adopt’ a tenement-full of misfits. A brilliant story, and great visual effects.
E.T.: The Extra-Terrestrial (1982)
Spielberg’s magnum opus. ‘nuff said.
Close Encounters of the Third Kind (1977)
Answering all those questions surrounding aliens and UFOs, this movie was a complete eye-opener, and a visual tour de force of its time.
Close Encounters of the Third Kind

All images sourced from

Monday, April 27, 2009

Reduce noise in your digital photos

Noise is one of the most evident demons in digital photography—often manifested in those numerous, tiny, unsightly colored spots seen on the skin, skies and shadows in photos. While the best way to assuage image noise is to set your digital camera to use a lower ISO setting, this isn’t the optimal solution situations like shooting a dark scene, for example. So what do you do if you’re forced to shoot at a higher ISO, but still want to reduce the amount of noise in your images? You have several options—using one of the noise reduction filters in your image editing software, or using dedicated noise reduction tools like Neat Image or Noise Ninja. But there’s a simpler (and free) method to reduce the noise in your digital photos while maintaining overall image sharpness—it’s a technique based on the principle of averaging. Before we go into the details of this technique, a heads up on where this technique can and cannot be used:

  • You can use this technique to significantly reduce random image noise and sensor noise. This technique cannot be used against fixed noise patterns like bands, chromatic aberrations etc. The adjoining image shows what sensor (random) noise looks like.
  • This technique can only be used in still life shots or landscapes. It cannot be used to on shots of people, animals or scenes containing motion. You’ll see why later.

And now, on to the method.

Shooting the images: You will first need to take several shots of the same scene. The trick is to take the exact same photo of the scene keeping all settings constant across the shots. It is imperative that the images are perfectly aligned, so its best to shoot using a sturdy tripod, or by resting your camera on a solid surface. Noise_several_Images
Averaging the images: The cool thing about a mathematical average is that it brings a range of values to a ‘mean’ level. When applied to digital noise, averaging has the effect of reducing the effect of random noise across the image. Here’s how you do it:  
Load the images you shot into your favorite image editor. I’ve used Photoshop in this example. Make sure to load each image into its own layer, and also ensure that each image exactly overlaps the other—do not displace the images during this step. If you’re using Photoshop, the best way to ensure all images are aligned is by holding down [CTRL] and [SHIFT] while dragging the images into each layer with the Move tool. Load_Stacked_Images
Change the opacity of each layer. Averaging is achieved by changing the opacity of each layer. Basically, each layer will need to contribute the same amount to the overall effect. Think of these layers as transparencies stacked atop each other—if we use four layers and we set each one’s opacity to 25%, it won’t achieve the effect we need. Why? Because the higher layers will need to be less opaque (more transparent) than the ones below, as these higher layers affect the apparent opacity of the ones below.
Case in point: If you’ve shot five source images, you will need to set the layer opacity as follows: 
Layer4: 25%
Layer3: 33%
Layer2: 50%
Layer1: 100%
This is assuming Layer1 is at the bottom of the stack and Layer4 is at the top as indicated alongside. Also ensure the layer blend mode is Normal. You’ll see the effect of the noise reduction as you change the opacity levels.

If you’re mathematically inclined, the formula for calculating the opacity of each layer is:

 Averaging formula

Use this formula and you’ll figure out how we arrived at the percentages in the example above. You can use as many images as you want, but four or five images should be sufficient—the results of this technique won’t noticeable even if you use more.

When you’re done altering the layers’ opacity, merge them and save your image.
Voila, you have a cleaner image! I shot this photo at ISO 1600 on my Nikon D40—click below to see the results up close.


Tuesday, March 31, 2009

Audit your computer’s hardware and software

WinAudit Ever wanted to know the gory details of your computer’s hardware and software configuration without having to painstakingly study each of its components? If you’re a geek, that answer would be a resounding yes. If you’re not, it doesn’t hurt to know, right?

Even though this isn’t the most exciting of ways to spend your time, knowing what your computer consists of is knowledge. And that’s power! I use WinAudit—a useful freeware application that does exactly this. Sounds simple enough, and it is. But the level of detail it brings up in the audit report is quite amazing—be it the serial number of your computer’s optical drive or the exact stepping of the processor, this application quickly and efficiently generates a host of information about the target system.

The program is a snap to use—simply launch it, click the Options button to select the categories you want to audit, then click Audit. It will run for a couple of seconds, then display its findings in neat categories. You can also save this report in a variety of formats including PDF, CSV (for Excel), Text, HTML or even XML. Better yet, you can launch this program from the command line—meaning you can write a simple batch file, and make it do its work with a single click. Check the program’s help in the ‘Command Line Usage’ section for information on the numerous tags you can use for automated command line logging.

As an example, here’s how to create a batch file that launches the program, audits the most important system categories, and write a CSV file to the same location as the program:

  • Open Notepad
  • Type the following: WinAudit.exe /r=gPtabz /o=CSV
  • Save this file in the same directory as the WinAudit program, and name it Audit.bat

Simply run this batch file—the program silently audits your system and creates a detailed system report in the same directory. You can also copy the program and the batch file to a USB drive, and use it to quickly generate a report of several computers. If you’re a system administrator, you’ll find this immensely useful for quickly generating system audit reports of several computers. If you’re not, it’s a cool tool to learn about your computer’s detailed specifications. Also use it while buying a new computer or laptop to make sure you’re getting what you paid for!

Monday, March 16, 2009

Fluid interfaces, and wearing your sixth sense

Sixth_Sense_interface I recently came across this this truly awe-inspiring implementation of technology--a device that empowers you to intuitively pull up information on virtually anything in the world around you. Sounds too fantastic to be true? Click the image to see this proof of concept in action, as demonstrated at a recent TED presentation. And if you're looking for a regular dose of truly cutting-edge thinking and ideology, I highly recommend visiting the TED Web site and watching (or downloading) their fantastic lectures.

I think I just used up my quota of superlatives for this month. But with reason.

Friday, March 13, 2009

Automating your Web browser

These days, finding ways to be more productive and efficient is key to staying ahead. When it comes to general office work, browsing the Web or working on online forms and Web sites takes up a significant part of our working hours. In the normal course of working on Web sites, you'll notice a large amount of repetition in the tasks you do--logging into your favorite sites, entering registration information into online forms, transferring image and text data between your computer and the Internet... this list goes on. So how does it sound if I told you there's a way to automate these repetitive tasks, so that they can be performed with a single click? For starters, it would save a heck of a lot of time each day, and accrued over days and months it would translate into considerable savings and higher productivity, leaving you with more time for stuff you like doing!

iMacrosI use Firefox as my primary Web browser, and have been using a great little Add-on called iMacros to automate many things I do on the Web. From doing something as simple as logging into my Gmail account, to rebooting by DSL modem at specifics time each day (I'm on an Internet plan that offers unlimited data transfer between midnight and 8am, but I need to restart my modem at these times), I've created macros that have enabled me to free up gobs of time. Here's a brief walk-through for automating your Web browser:

First, download the iMacros Add-on for IE of Firefox from here. After installing it, launch it by clicking on the toolbar button that shows up in your Web browser.
Hint: Click the images for a larger view.
iMacros sidebar
You'll see several demo scripts in the sidebar--double-click one and you'll see it launch into action using demo scenarios. If you're so inclined, you can click on a preset script, then click the Edit Macro button to view the code that drives the script. Reading these lines should give you fair idea about how it works. iMacros sidebar - Edit
If you don't want to be bothered with writing code, you can simply have iMacros record your actions as you click through Web sites and enter information--the relevant code gets created automatically. To record a new macro using this method, click the Rec tab in the sidebar, then click the Record button. Then use your browser as you would while performing a given task--iMacros records your actions such as information typed in, and buttons, tabs and links clicked. Click the Stop button when you're finished. Rename the new macro that appears in the side bar to something indicative of your recorded task. iMacros sidebar - Record
The next time you want to run that task, simple double-click on the macro name, and watch as iMacros launches and does your work for you--in record time!

To help you get up to speed, see the iMacros support page for tutorials and code samples.

Next up, I'll write about how I created a script that reboots by DSL modem at specific times, enabling me to better utilize my unlimited night time download bandwidth.

Monday, March 2, 2009

Origami works of art

In an earlier post, I mentioned my interest in paper folding, and how fascinating it is to build interesting objects from simple materials. Back in school, I remember those lazy summer days, when I used to try and create everything from Origami flapping birds, to geometric shapes, to aerodynamically accurate paper aircraft! Of course, not all these endeavors were met with success, but it was a heck of a lot of fun.

Having been bitten by the paper folding bug recently, I decided to dig a little deeper and find out exactly how complex this art form can get. These days, there are hundreds of Web resources that will teach you the fine art of making paper models, complete with scientific explanations, and even instructional videos--it's on a different level altogether! An hour of digging through online resources and I came away amazed. Here are some of the best paper folding models I found--they can take anywhere from a few minutes to over 40 hours to create!

First up is what is touted to be the World's best paper airplane. Known as the O'Reilly airplane, it features all the aeronautics you could want in a paper aircraft--working rudders, stabilizers and flaps. Best of all, it takes minutes to build, and is scalable--the larger and stiffer the paper, the better it is likely to fly!
Click here for the step-by-step folding instructions, and here for a video on how to fold the plane.
Another one of my personal favorite paper airplanes is the 'Barnaby'. Designed by an ex-US Navy pilot, this plane is one of the easiest to build, and it flies like a dream!
Click here for the step-by-step folding instructions.
Moving on to more traditional forms of Origami, one of my favorite (and more challenging) paper objects is the Kawasaki rose. You'll need at least intermediate paper folding skills to attempt this model, but the results are great.
Click here to download the PDF of the folding instructions.
Kawasaki rose
Then there's this ultra-cool and super-realistic Noboru Miyajima bat! The level of detail and faithfulness to anatomy in this model is truly awesome. This is a rather involved model (it consists of a shade over 100 folding steps). But then again, the results are fantastic.
Click here to download the PDF of the folding instructions.
Noboru bat
If you're a movie buff, you'll be stoked by the characters on this page--you'll find Gandalf, Yoda and even Wall-E, all Origami-fied! Not all the authors have shared the folding instructions, but you'll find a video of the Wall-E character on this page. wall_e1

Later on, when you get bored of folding 100-step Origami characters, you'll want something that presents a bit more of a challenge. If you're like Satoshi Kamiya, a 27-year-old guy from Japan, you should be ready for the 200+ step designs. This guy is credited with developing some of the most advanced and complex Origami ever folded. Relying solely on his intuition and skill (that's right, no computer programs to assist), he creates true works of art with paper--from dragons, to mythical creatures, to animals and fish, check out the level of detail that's possible with with paper folding.

origami-mantis Kamiya-16_0
Satoshi_Kamiya__s_Bahamut_WP_by_Vargaskyld Ancient dragon

And then at the pinnacle of his skill...

dragon-origamiThis is an 8-inch model of an Eastern dragon, and is detailed with eyes, teeth, a tongue, whiskers, a barbed tail, and over 1,000 individual scales on its body. And yes, this model was folded from a single piece of paper. I'm in awe.

Check out this video of Satoshi Kamiya at work:

He's authored a book containing the folding instructions of all these fantastic paper models. If you're so inclined, you can buy it from here.

Finally, check out these informative online Origami resources here and here.

Wednesday, February 18, 2009

Playing classic DOS games using Microsoft Virtual PC

If you were a teenager during the late 80s or early 90s, you'll be awash with a wave of nostalgia when you read these words: Dangerous Dave. Wolfenstein 3D. Doom. Prince. Zaxxon. Brings back memories, right? If you're still clueless, these are classic DOS-based games that used to take up a sizeable portion of our leisure time back in the day! Still don't know what I'm talking about? Well, DOS is a text-based PC operating system... oh, never mind--you're way too young to be reading this post! If you really must know, I'm talking about an era where the GUI was still several years away, a time when computers were built using 386 and 486 processors, with a whopping 8MB of RAM, and 240MB hard disks. *Sigh*... those were the days--the heady, primordial era of personal computing.

capture_17022009_234951 I revisited those days recently when I was experimenting with a cool application that lets you run any operating system--current, past, or upcoming--within your present Windows operating system. That's right, you can run an operating system as if it were an application! I'm talking about Microsoft Virtual PC--a small, free software that emulates another PC within yours. Sounds confusing? Well it isn't really. This application creates an isolated area in your system, within which you can install and run a completely different operating system as if it were another computer. You can even reboot it and watch it go through the boot-up POST sequence in it's own window!

You might have heard of a similar application called VMWare, which does the same thing, but VMWare is rather expensive compared to Microsoft Virtual PC, which is free. But then Virtual PC is primarily built to run Windows operating systems, of course.

VirtualPC_Win7_Win311Among other things, I used Virtual PC to install and experiment with a beta copy of the upcoming Windows 7 (Build 7000). Alongside this, I also created a Virtual PC running good ol' DOS 6.22, and dug up a whole load of DOS applications and games. I also located and installed an ISO of Windows for Workgroups 3.11! Click the screenshot above for a larger view--there's Windows 7 on the left, Widows 3.11 to the right, and the Virtual PC Console at the lower right, showing the two running operating systems. All of this was running on my Windows XP laptop.

Here's a quick run-through of how to create a Virtual PC:

1. Download Microsoft Virtual PC 2007 from here, then install it. Run the program and you'll see the Virtual PC Console.
On first run, you obviously won't have any Virtual Machines (VMs) installed--shown here are the two VMs I created.
To create a VM, click the New... button to launch the New Virtual Machine Wizard.
2. Click Next to proceed. capture_17022009_235938
3. This screen displays choices for creating a new VM, using default settings to create a VM, and adding an existing VM. Select the first option, and click Next. capture_18022009_000105
4. Type in a name and select the location for your new VM, then click Next. capture_18022009_000326
5. This screen helps you configure the environment for your VM, depending on the operating system you want to install in it. Select the appropriate OS from the drop-down menu, or select 'Other'. Click Next to proceed. capture_18022009_000441
6. You can go with the recommend RAM for your VM, or specify the amount. Your choice will obviously depend on how much RAM your computer has, and the requirements of the OS you want to install in the VM.
Note: Before allotting RAM to the VM, make sure you leave aside enough for your host operating system!
7. The Wizard will now create a virtual hard disk, in which you'll be installing your virtual OS! Choose to create a new virtual hard disk, click Next... capture_18022009_001758
8... and specify the location and size of this hard disk. capture_18022009_001807
9. Finally, click Finish, and the wizard will create your Virtual PC! capture_18022009_001929

Your new Virtual PC will now appear in the Virtual PC Console. Double-click it to start it, and you'll see it going through the boot sequence. Obviously, on first run it will search for a boot device and will prompt you accordingly. Before you can use the Virtual PC, you'll need to format the virtual hard disk, and load an operating system on it. To start, download a bootable CD or floppy disk image from here, and load the appropriate ISO file using the Floppy | Capture Floppy Disk Image or the CD | Capture ISO image. You should now be able to format the virtual hard disk as you would a normal one. After that, load your operating system and configure it to your liking!

Here are a few screenshots from my 'Classic DOS games' virtual machine.


For more resources on Microsoft Virtual Machine see here and here. Also see here for special information on running MS-DOS on Virtual PC 2007. Enjoy!

Thursday, February 5, 2009

Cubeecraft: Geeked-out cutouts!

CubeeCraft I've always liked paper folding, and have been following arts like Origami ever since the early school days. I know--it's not a guy thing, but I was interested in it from the mathematical standpoint. Or so I explained. Even the simple act of flying paper airplanes was complicated with extended pursuits of trying to hone them for prolonged flight, or funky acrobatics!

Then a couple of days ago, I came across this ultra-cool site, and was bitten by the paper folding bug once again. The author of this site has pretty much nailed down the art of creating some of the coolest paper characters I've seen. And what characters! Classics like Mario (of the Super Brothers fame), Darth Vader, Sonic the Hedgehog, Spiderman, Superman... heck, there's even Kratos (from God of War), Pinky (from Pinky and the Brain), and Obama! If you're particularly skilled in digital illustration, you can also download a blank cutout template and try your hand at creating your own character!

Kratos Creating one of these characters is relatively simple--head over to the Cubeecraft Web site, download a cutout template, print it at 150dpi on an A4 cardstock paper (thick paper begets a longer-lasting character), and use a pair of scissors and a blade to carefully cut out the shapes. Each character is composed of five or more 'sections' that must be folded and assembled into the final character. Best of all, the sections have a glue-less design so the process is relatively clean (discounting the cutout shrapnel, of course).

The FAQ explains the assembly clearly, but know that you'll require at least an hour to complete each character. Your mileage may vary depending on your dexterity in wielding cutting instruments, and your patience through this exercise--creating some of those slits and tabs can be quite painstaking.

But if done correctly, the end results are guaranteed to leave you stoked and addicted. Gotta... build... one... more... Cubee...!

Sunday, February 1, 2009

DVD Flick: Converting videos to DVD

Ever needed to convert a whole lot of videos into a DVD? Here's a handy little tool that enables you to do just that: pop in a blank DVD, point the application to one (or more) videos on your hard disks, configure a few basic settings and boom--you have a DVD that will play on any conventional player. DVD Flick is especially useful for converting DivX movies into DVD format (great for sending movies to your mom who has an older DVD player, or for compiling and distributing video clips recorded on your digital camera).

DVDFlick DVD Flick is one of those ultra-handy Open Source applications that do a fantastic job of serving a specific requirement quickly and efficiently. Creating a DVD with this application is child's play. Start by downloading the program from here. After installing it, click the Guide icon on the top and you'll see a quick and easy run-through for creating a DVD. You can create a regular DVD in just a few clicks, with the default program settings. But you can also customize your DVD with additional audio tracks (such as director commentaries) and subtitles. You can add several videos in a given title, and the application will figure out how best to encode them to fit on a single DVD. You can choose between the single-layer DVD-5 format (4.7GB), the dual-layer DVD-9 format (8.54GB), or even the more exotic Mini-DVD (1.35GB or 2.47GB) formats. Of course, you will need the appropriate type of blank DVD to hold a given project. When creating a compilation of videos, you can even create an interactive menu that enables you to navigate your disk and select files during playback--much like the main menu of a conventional movie DVD.

DVD Flick will create a DVD from virtually any type of video file you might want to throw at it (it supports for over 70 video formats), including FLV, DivX, TrueHD, H.264, Apple Video and many more. See here for a complete list of audio and video codecs this versatile application supports.

Based on the powerful FFMPEG video processing engine, this is a processor-intensive application. So the time it takes to create a project will depend on your computer's horsepower. Fortunately, it supports and even detects multi-core processors--a definite advantage if you plan to use this program for a serious amount of DVD creation. Finally, you can use the program's built-in DVD burning capability, or have the application write the files to your hard disk where you can subsequently create your DVD using your favorite DVD burning application. Simple and fun!

Thursday, January 8, 2009

Building a Web site using Kompozer

Now that we've gone through the motions of what's required to get started with building a Web site--booking the domain and selecting a hosting provider--we're now on to the final stage of actually building the Web site! This step involves creating the HTML files that contain the site content, and link to other elements like images, downloadable files and whatever else you might want to include on your Web site.

Building a Web site can be creative, or quick-and-dirty. The path you choose depends on:

  1. Your skill with Web designing
  2. Your knowledge of Web programming
  3. Your access to Web design applications
  4. The duration you have to complete the project

Assuming you're like me, you:

  1. Have no formal training in Web programming or design
  2. Have no Web programming skills
  3. Are reasonably skilled with Photoshop and image editing

I know, this doesn't look like too promising a position to start at. But that's the beauty of the Internet coupled with a bit of passion--you can learn pretty much anything, and produce reasonably decent results. In my case, I embarked on my Web site building journey about a month ago while chatting with Anil, a close friend of mine who's spent the majority of his life doing some amazing work rehabilitating destitute, aged, and mentally challenged individuals. Having been doing this for over 20 years and operating on razor thin budgets, we decided that it was about time we put his Institute on the Web and make its work known to the World at large. That's when we decided to build a Web site for the Cardinal Gracias Institute.

After the idea took seed, we were completely stoked at the journey that lay ahead and dived headlong into it. In our five-step plan, we:

  1. Created the site map and identified the site's major sections.
  2. Wrote content for each of these sections and refined it until we were satisfied.
  3. Selected the hosting provider hours of comparing (I finally chose Host Monster).
  4. Went about designing and building each of the Web pages using Kompozer.
  5. Incorporated cool functionality (rollovers, maps and slide shows) by digging up free code snippets from online resources.

I've already covered the first three points in my earlier posts, so here I'll mention briefly about my adventures with Kompozer--an open source Web authoring tool--and touch upon other resources I used to spruce up the Web site's functionality.

If you've heard of applications like Adobe DreamWeaver and Microsoft FrontPage, Kompozer lives lower down the capability scale, but still offers enough functionality to get started with Web design.

Let's start with the application's interface. At first glance, its toolbar closely resembles a word processor with the usual buttons for adding text, images and tables, and formatting these elements. But instead of creating document files, this application generates HTML files that can be subsequently uploaded to your Web server using the built-in FTP tool. capture_08012009_161454
The large area beneath the toolbar displays your Web page in one of several views: Normal, HTML Tags, Source, and Preview. You can switch between these views by clicking on the tabs at the lower left of the interface.
To learn more about this application, head over here for excellent explanations on its features and functionality.
I started building the Web site by first creating 'mock-ups' of how the key pages would look--this included the Home page, and the inner page templates. For the site design, I used a traditional header image on top, the navigation bar on the left, and a vertically scrolling content area.
I took several photos when I visited the institute earlier, which I used extensively in the design. To keep all the images together, I created a table and arranged, merged and added cells to accommodate these images and text blocks on each page. You'll see the boundaries of each of the cells in the adjoining screenshot (click for a larger version).
I designed these pages by studying the method described here. After creating the main home page, I simply created copies of this page and used these as starting points for the inner pages. Doing this ensured consistency.
I prepared the banner, side bar and the various photos using Photoshop, using basic Photoshop layer effects (outer glow and drop shadows). The swirly font in the main title and the side bar is 'Chopin', and is freely available. For all the images, I used 'Save for Web' (at 80 percent quality), as I found this to be the best blend of image clarity and file size. Remember that all Web elements should be as small as possible to result in the quickest page load performance. capture_08012009_172651
I found a freely available Javascript code to create a rollover effect for the sidebar categories. To create these rollovers, I used two images for each of the category labels--one with the normal text, another with the outer glow effect. The Javascript code simply swaps the highlighted version with the normal version when you hover the mouse over each label. All I did was incorporate this Javascript code into the header section of the HTML pages, and make a few changes to the image references.
I later stumbled upon a supposedly more elegant way to achieve this effect using the CSS method--see here for more details.
I incorporated a photo slide show in the site using the outrageously simple method of embedding a Picasa slideshow into a Web page.
Using a similar approach, I also embedded a neat Google map pinpointing the location of the Institute on the 'Contact us' page.

Feel free to head over to the Cardinal Gracias Institute Web site to see how these techniques took to life.

On a separate note, I'd really appreciate if you could spend a few minutes to learn more about the selfless work that Anil and his dedicated team do at the Institute. Feel free to contact him directly if you're keen on knowing more, visiting the institute, or (better still) helping out in cash or kind.

Related Posts with Thumbnails