Web Design from Scratch

I thought this might go hand-in-hand with the previous entry on theme designs. There isn't exactly an abundance of how-to sites on general website design, and Web Design from Scratch makes some solid observations that may be non-obvious to the beginning site designer.

Created by Ben Hunt, founder of Scratchmedia, Web Design from Scratch is described as "a free practical guide to designing effective web communication".

The guide is broken down into a three sections: 'Basics' explores the web design process and how people use web pages; 'Tutorials' introduces principles that form a complete how-to guide to web design and is illustrated with real-world examples; and 'Case Studies' analyses the strengths and weaknesses of a real web page and presents an alternative design solution.

I personally found the site a bit cumbersome to navigate (and a printer-friendly version would have been welcome). Not readily apparent is that the content is gotten to from the sidebar, so don't let the summary pages throw you. Still, I found the information well worth the effort of negotiation.

Open Source Web Design

I am keen on open source, free (quality) stuff, and using, modifying, and customizing found code (why reinvent the wheel?). I ran across Open Source Web Design (OWSD), "a community of designers and site owners sharing free web design templates as well as web design information. Helping to make the internet a prettier place!" I thought I'd devote an entry to this worthy site.

They go on to say in their About Us page: "The Open Source Web Design project was founded in September 2000 by Frank Skettino (bkenoah) as a way for the average Joe-Hacker to have a quality, organized web design template ready for him when he's ready to share his ideas on the World Wide Web. We understood that many hackers would like to have a place to share their ideas on the Web, but are too busy to create a decent layout. This results in a poorly organized page or none at all. With OSWD, we hope to solve this problem."

You can browse thumbnails of the member-contributed design templates (92 pages of them!), check out the most popular designs, and even rate them. I have browsed 60 pages of thumbnails so far, and I think it's safe to say there is something for pretty much any taste. If you have content needing a container, you may need to look no further than OWSD.

PHP 1 2 3- File Components (Templates)

As promised- a simple tutorial on templating (you may first want to read the previous introductory entry). Let me first define a little terminology. A template, as the word is used here, is a part of a document that you can use in more than one page. These document sections are placed in separate files and are then used to 'build' your page by being 'included' into their respective positions on the page. We will use the PHP function include() which, as its name implies, includes local php files. We also have the option of using the readfile() function if there is only HTML markup (no PHP code) in the files to be included.

<?php and ?> are the standard start and end PHP tags. The PHP engine will process any file with a .php extension, executing the code contained by the tags. Without these tags, the code would be mistaken for HTML and output to the browser as is.

Okay, let's begin... Read the full article

PHP 1 2 3- Introduction

PHP, a server-side scripting language often written in an HTML context, was originally conceived as a tool to help coders maintain web pages. It has been extended dramatically over time to the full featured programming language that it is now, capable of managing database-driven environments.

I would like to focus my entries about PHP on its original intent-- as a scripting solution to the efficient creation and maintenance of personal-type web sites.

I am working on a simple PHP tutorial for a friend, even though I am not a PHP coder (though one day I hope to be), but I have been able to use and customize existing scripts. And there are simple tasks that even someone like me can perform that will result in real convenience and time savings.

You don't have to be a programmer to take advantage of the power of PHP. A little investment in learning a few basics can pay off tremendously. And you may get inspired to learn more when you discover how easy PHP is to use. In my opinion so far, it is considerably easier to learn than JavaScript.

My next post will be the tutorial I referred to. It is about developing a simple templating system for web pages. It's easy to do and can make maintaining your web site practically painless.

Maybe it's not as easy as '1 2 3', but it's close. Okay, is this enough of a pep talk? :-)

Special Effects: JavaScript Text Fader

I was looking for a bit of JavaScript that would fade the text in the description part of the page header of this blog from a light gray to a dark gray, so that it would show up against the background. I came across Premshree Pillai's Text Fader JavaScript that fades text from a start color to an end color and it worked as promised. I decided to use it for the post dates as well.

The original script generates an HTML font element (deprecated), and since we're using XHTML around here, I modified it to generate inline CSS instead. I removed the options altogether for font face, size, weight, and variation as these can be taken care of via style rules in the page's style sheet. All that's needed is the text to be written and the start and end colors. I also added a noscript element that will allow the text to show up even if the viewer has JavaScript disabled.

Here is the modified script in all its glory... Read the full article

Open Source: Firefox as Web Dev Tool

Firefox - web authoring reference pages

I am the first to admit that I am resistant to change. It took a lot for me to switch from Internet Explorer/Outlook Express to the Mozilla Suite (see some reasons why this switch is a good decision) a couple of years ago. I did install Firefox shortly after it was released on my second PC, but only ran it as an alternate browser. Aside from having a smaller footprint resource-wise and running a bit faster, I was not aware until last night the potential that Firefox has as web development tool.

Today, I installed the latest version of Firefox and the Thunderbird e-mail client (I had played with it a little bit on my other PC) on this PC and imported all my Mozilla mail settings. I am now a full FF/Tbird convert. I stumbled upon Firefox's DOM Inspector last night and was amazed at it. I have started exploring some the extensions available for Firefox and have installed a couple, including the Web Development extension. I would like to explore the DOM Inspector and the Web Dev extension in future posts.

I've been hand coding pages in MetaPad for years. I think it's time for a change. There are sophisticated tools out there- free, open-source tools- that can make a faster, more efficient process of it all. I just have to open my mind to the thought of using them, take the time to learn to use them, and get used to using them. I have a few links under the OpenSource section in the sidebar, and I hope to build on that- everything you need to develop a sophisticated site, free for the downloading.

Why Open Source software? From Open Source Advantages and Limitations, "In theory and in general, the supposed advantages of Open Source type of software are that it becomes more stable, adaptable, better in quality, more frequently revised and updated, more secure while remaining free."

And in a broader scope, "Over time, if fully developed, the new models of software development could produce innovative, cost-efficient software at much less cost than today... It could also help check the excesses of a market-dominated culture by fortifying these "gift culture" communities while mitigating worrisome concentrations of corporate power in the software industry."

I personally have had great experiences with Open Source (and other free) applications- without exception, considerably superior experiences over their commercial counterparts. Perhaps one day, I will set myself free from Microsoft altogether and learn how to operate from within the installation of Linux I have on another partition of my hard drive. :-)

<webcoding /> Mission Statement

It is with a great sense of anticipation and joy that I begin this blog. I am looking forward to the work I hope to do here- basically to explore solutions to the challenges I have come up against while working with XHTML, CSS, JavaScript, and PHP, with an emphasis on open source technologies.

I have come across many problem-solving opportunities in my classes, particularly with browser inconsistencies in the implementation of CSS. I only wish I had taken notes along the way rather than rely on my faulty memory. But I did gather an enormous list of links and have retained the work I did that included the workarounds and fixes.

Now I will have a place to document these things, hopefully cutting down on my Googling for solutions I have already implemented to problems I've previously encountered. I intend to link to my work, to examples, and to a list of resources I'll be organizing on the accompanying web site, webcoding.640k.net.