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.
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.
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.

Setting up your own Web site: Part one

At first, it sounds like a daunting task in itself. You'd ask, "Isn't this something that only large companies with development and programming teams can do?" Actually, no--these days it's something that anyone can! So if you're thinking of popularizing your home business, or creating a platform for sharing your hobbies, or just setting up a home for your family on the Web, you can build a www.yourname.com Web site easier than you can imagine! All it takes is getting familiar with the process, and understanding some of the jargon you'll encounter along the way. After that, you make like you're strolling through the aisles of your favorite supermarket as you set off shopping for the right online services--it's actually fun! From end to end, you can be up and running within a week. Here's how you go about it:

At this juncture, you should grab a pen and a few sheets of paper and put down a whole lot of questions to which you'll need to eventually get answers.

• What will be the focus of your Web site? The first and most important part of setting up a Web site is defining a sharp focus for what it will and won't do. Here's where you should decide the purpose of the Web site as sharply as possible: it could be an information repository for your gardening hobby, or an online store for your home catering business, or it could even be a Web presence for your local Golf players club. Once you have a broad set of answers to these questions, you can proceed to the next (and most important!) phase of building any Web site--creating the content.
• Content, content, content. I can't stress enough how important it is to deliberate, brainstorm, create, and fine-tune the content for your Web site. Before doing anything online, it is all-important to have the content in place first. A good way to go about doing this is by visiting some of your favorite Web sites, and checking out the Site map section. A Site map is a hierarchical listing of the various sections and sub-sections in a Web site, and is the skeleton around which a Web site's content is fleshed out. Start by defining the major 'tier 1' categories of your Web site, then drill down to sub-categories. Each category should have a well-defined focus, and together they should encompass everything your want your Web site to convey. Also, try not to have more than three tiers of categories--a Web site should be designed to facilitate easy and quick access to its information, so your visitors shouldn't have to dig too deep.
  The content creation exercise can be plenty of fun, so involve everyone who's going to be part of the site, so you can get the widest range of ideas and opinions. Ideally, you'll need to progress through several rounds of brainstorming, writing and re-writing before finalizing your content. As a rule of thumb, when creating Web copy keep it simple, concise and to-the-point.
• What kind of interactivity would you like your Web site to have? A Web site can be as Spartan, or as feature-rich as you'd want it to be. What you eventually decide will be influenced by the answers to questions like:
  • Do you want to include features such as online financial transactions, blogs, user forums, feedback systems, mailboxes and the like?
  • Do you have access to the technical know-how to include these features?
  • Would you want this interactivity at launch time, or can it be incorporated subsequently?

By now, you will have gathered the bulk of the content for your Web site, and you should have a reasonably clear picture of how it is going to pan out--and that's a big milestone! The next step will be exploring online services for registering your Web site's domain name, and finding a Web hosting provider that suits your specific requirements. Look out for my next blog post where I'll provide more details on this latter part of this Web site creation journey.

Update: See my blog posting on choosing a Web hosting provider here.

Become a human calculator

The one thing I detested about mathematics in school was the way the education system made it so theoretic. Learning trigonometry or Calculus was anything but fun, and it certainly didn't appear to be practical at the time. Even today, how many times do you hear kids say, "What am I ever gonna use this stuff for?" Math is, in fact, the most practical science there is--from calculating the curve of an aircraft wing (Fourier math playing a big role here), to modeling financial forecasts (mathematic extrapolation), math is the very foundation for almost every device and technology we use. But for the majority of us, it really isn't a cause excitement. So wouldn't it be great if there was a way it could actually help our everyday lives: like giving us the power to be the fastest human calculator at dinner with friends? That'd certainly beget admiration points! Well, there is such a field of mathematics that can help you do just that--it's called Trachtenberg Mathematics.

Trachtenberg Mathematics was invented by a brilliant Russian mathematician named Jakow Trachtenberg while he was imprisoned in a Nazi camp during World War II. He devised a simple set of rules that can help perform relatively large calculations quite easily. Sounds too good to be true? Check out this excellent Web site that explains this technique with lucid examples. After you're acquainted with the basics, there's a handy little software you can download here, which will help you get practice on this technique of speed math.

On a related note, you could also check out a similar form of speed math called Vedic math. There a ton of information behind this Wiki link. Also, here's still another really fun way to multiply numbers by simply drawing lines on paper! See the video below:

Finally, check out this excellent online resource devoted to speed math here. Hint: The tricks taught by these techniques are a great way to put an interesting new spin on teaching the subject to kids! Math? Fun? Who could have ever imagined?

VideoJug: Like YouTube, only more useful

Now here's something useful. How many times have you found yourself asking, "I wish there was a way I could see how this is done." Be it tying a Windsor Knot on a tie, or techniques for winning an argument, this Web site lives up to its tagline splendidly -- Life explained. On Film. True, it isn't technically film, but why lose a good idea in semantics?

Head over here.

Check out the 'How to fold a T-shirt in 2 seconds' video. Awesome!