Inside The Mind Of Timothy Allard

How To Build A Website From Start To Finish In All Opensource Software

Posted on the August 15th, 2007 under Graphic Design, Monetization, Web Development by Timothy Allard

When you think of software today, especialy in the multimedia field you think of high prices. Open-Source software totally changes that for the better. What is open-source? Open-source is software whos source code is made completly free to the public, thus making the software 100% free. The purpose of this article is to show you how you can build a website from start to finish, including - designing, coding, flowcharting, submitting, registering and even hosting! That is the beauty of open-source, its goal is to be free so it can be developed better. Open-source programs are really taking off, and its not just design related. There are complete computer solutions that can be made 100% free, from its operating system to its whatever. In the media design area, there is a large amount of developent because so many designers/coders etc decided there needs to be a cheaper alternative to getting good quality software. So they did just that. What I will be doing now is starting from the very first step in creating a website with all open-source software.


Step 1. HTML Editors:
There are many types of open-source editors out there. I will give you examples of both hard-coding html editors and WYSIWYG (what you see is what you get) editors. The best thing about these editors is they have other uses besides HTML! Most have built in color coding and syntax checking for other programming languages such as CSS, Javascript, C++ etc.

The items in the following list are 100% Open-Source

• Nvu Complete Webauthoring System (Hard Coding and WYSIWYG)
  • WYSIWYG editing of pages, making web creation as easy as typing a letter with your word processor.
  • Integrated file management via FTP. Simply login to your web site and navigate through your files, editing web pages on the fly, directly from your site.
  • Reliable HTML code creation that will work with all of today’s most popular browsers.
  • Jump between WYSIWYG Editing Mode and HTML using tabs.
  • Tabbed editing to make working on multiple pages a snap.
  • Powerful support for forms, tables, and templates.
  • The easiest-to-use, most powerful Web Authoring System available for Desktop Linux, Microsoft Windows and Apple Macintosh users.
  • Download: HERE
• TSWebEditor (Hard Coding)
  • Syntax Highlight for more than 20 languages. And if you can’t find a syntax highlight that match your needs, you can easy create your own highlighter.
  • Function Hints feature displays information about the function with arguments, return type and if available a short description.
  • Code Browser shows all important program stuff like includes files, functions, classes
  • Color Coding
  • PHP Debugger to debug your PHP scripts with Xdebug and find runtime errors quicker.
  • Unicode - tsWebEditor can read and write files with ANSI and Unicode (UTF-8, UTF-16) encoding.
  • FTP Edit - you can edit files directly from ftp servers. Download and upload files with an external ftp client is with this function history.
  • Syntax Checker - Check your (X)HTML and XML files with the included Tidy library for syntax errors
  • Intense Help Documentation
  • Download: HERE

The above examples of open-source HTML editor tools are very strong examples of what you can do without paying anything and getting quality software in return. The Nvu solution seems to have a great working environment like dreamweaver does. So here is a tip. If you want to get Dreamweaver, but you cant just yet, then try out Nvu. You can also get a trial of Dreamweaver here. But that takes the point out of this article.

The next section I will discuss Open-Source alternatives to graphical design applications. That is the next step with creating a web page.



Step 2. Graphical Tools:
There are amazing alternatives to highly priced products such as Adobe Photoshop or Macromedia Fireworks (now owned by Adobe) GIMP is an amazing image tool. What is GIMP? GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring. It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

• GIMP (Photoshop Alternative)
  • Painting
    • Full suite of painting tools including Brush, Pencil, Airbrush, Clone, etc.
    • Sub-pixel sampling for all paint tools for high quality anti-aliasing
    • Extremely powerful gradient editor and blend tool
    • Supports custom brushes and patterns
  • System
    • Tile based memory management so image size is limited only by available disk space
    • Virtually unlimited number of images open at one time
  • Advanced Manipulation
    • Full alpha channel support
    • Layers and channels
    • Multiple Undo/Redo (limited only by diskspace)
    • Editable text layers
    • Transformation tools including rotate, scale, shear and flip
    • Selection tools including rectangle, ellipse, free, fuzzy and intelligent
    • Advanced path tool doing bezier and polygonal selections.
    • Transformable paths, transformable selections.
    • Quickmask to paint a selection.
  • Extensible
    • A Procedural Database for calling internal GIMP functions from external programs as in Script-fu
    • Advanced scripting capabilities (Scheme, Python, Perl)
    • Plug-ins which allow for the easy addition of new file formats and new effect filters
    • Over 100 plug-ins already available
  • Animation
    • Load and save animations in a convenient frame-as-layer format
    • MNG support
    • Frame Navigator (in GAP, the GIMP Animation Package)
    • Onion Skin (in GAP, the GIMP Animation Package)
    • Bluebox (in GAP, the GIMP Animation Package)
  • File Handling
    • File formats supported include bmp, gif, jpeg, mng, pcx, pdf, png, ps, psd, svg, tiff, tga, xpm, and many others
    • Load, display, convert, save to many file formats
    • SVG path import/export
  • Much, much more! (source from GIMP)
  • Download: HERE
• InkScape(Image Editing Vector Based, Illustrator Alternative)
  • Inkscape is an Open Source vector graphics editorwith capabilities similar to Illustrator, Freehand, CorelDraw, or Xara X using the W3C standard Scalable Vector Graphics (SVG) file format. Supported SVG features include shapes, paths, text, markers, clones, alpha blending, transforms, gradients, patterns, and grouping. Inkscape also supports Creative Commons meta-data, node editing, layers, complex path operations, bitmap tracing, text-on-path, flowed text, direct XML editing, and more. It imports formats such as JPEG, PNG, TIFF, and others and exports PNG as well as multiple vector-based formats.
    Download: HERE

Info: Alternatives to Adobe Photoshop will save you US $649.00. Alternatives to Adobe Illustrator will save you US $499.00. Interesting huh?

 

GIMP is an amazing Photoshop alternative and has a huge user base. GIMP also has hundreds of tutorial located here. InkSkape is a very powerful open-source vector based drawing tool.

So here you have some great alternatives to commercial design programs out there. One for image editing and manipulation, and one for vector based drawing. Hopefully step 2. has really opened some eyes by showing how much you would have spend for a bitmap and vector based drawing tool. Doing a running total of savings so far here are the results.

• Web Authoriung Tool: US $399.00
• Graphical Design Tools: US $1,148.00

Total Savings so far: US $1,547.00

The next step of the website process is coming up with come content. So if you want a great open-source content tool go to step 3.

Step 3. Content Authoring:
When designing a website, quality content is one of the major components that makes it successful. Google, for instance has very smart algorithms (mathematical formulas) for know what to display in their search results. The purpose of writing a web page, is to get it to as many people as possible, around the world. By having a content editor like Microsoft Office, that would enable you to have good control over your content. Catching spelling mistakes, thesaurus etc. How about a free alternative? OpenOffice is just that.

• OpenOffice (Microsoft Office Alternative)

  • OpenOffice.org the product is a multi-platform office productivity suite. It includes the key desktop applications, such as a word processor, spreadsheet, presentation manager, and drawing program, with a user interface and feature set similar to other office suites. Sophisticated and flexible, OpenOffice.org also works transparently with a variety of file formats, including those of Microsoft Office, and the vendor-neutral OpenDocument standard from OASIS.

    Available in over 65 supported languages with more being constantly added by the community, OpenOffice.org runs stably and natively on Solaris, Linux (including PPC Linux), Windows, Mac OS X (X11), and numerous other platforms. Our porting page lists the platforms (ports) that OpenOffice.org can run on.
    
    Written in C++ and with documented APIs licensed under the LGPL open-source license, OpenOffice.org allows any knowledgeable developer to benefit from the source. And, because the native file format for OpenOffice.org is the vendor-independent OpenDocument open standard, interoperability is easy, making future development and adoption more certain. (source from OpenOffice)
    Download: HERE

OpenOffice is a huge community base and has hundreds of developers constantly tweaking and updating the software to make it better and better. Again, having quality content is key to having a successful website. To keep the running total going, lets see what our savings are.

• Web Authoring Tool: US $399.00
• Graphical Design Tools: US $1,148.00
• Content Authoring: US $499.99

Total Savings so far: US $2,046.00

Step 4. Extra Tools:
A website now adays is filled with hundred of components. eCommerce is sometimes one of them. Many eCommerce solutions can START at $500.00 and go all the way to hundreds of thousands of dollars. This step will show you what you can do with open-source eCommerce tools.

• Zen Cart (eCommerce Solution)

  • Zen Cart™ truly is the art of e-commerce; a free, user-friendly, open source shopping cart system. The software is being developed by group of like-minded shop owners, programmers, designers, and consultants that think e-commerce could be and should be done differently. Some “solutions” seem to be complicated programming exercises instead of responding to users’ needs, Zen Cart™ puts the merchants and shoppers requirements first. Similarly, other programs are nearly impossible to install and use without an IT degree, Zen Cart™ can be installed and set-up by anyone with the most basic web site building and computer skills. (source Zen Cart)
    Download: HERE

• MyMarket (Catalog System)

  • MyMarket is a fully functional online shopping catalog system, built using PHP and MySQL. It was created by Ying Zhang for the purpose of teaching people about the basics of creating an E-Commerce site. (source MyMarket)
    Download: HERE

• osCommerce (eCommerce Solution)
  • osCommerce is an Open Source based online shop e-commerce solution that is available for free under the GNU General Public License. It features a rich set of out-of-the-box online shopping cart functionality that allows store owners to setup, run, and maintain their online stores with minimum effort and with no costs, fees, or limitations involved.osCommerce has attracted the largest community for an e-commerce solution that consists of over 99,400 store owners and developers worldwide with add-ons being contributed on a daily basis. To date there are over 3,300 add-ons available that have been created by the community to extend the features of an osCommerce online store.
    
    osCommerce combines Open Source solutions to provide a free and open e-commerce platform, which includes the powerful PHP web scripting language and the fast MySQL database server. With no special requirements, osCommerce is able to run on any PHP 4.1+ enabled web server running on Linux, Solaris, BSD, Mac OS X, and Microsoft Windows environments.
    
    With over 6 years of operation, osCommerce has built a showcase of over 9,300 online shops that have been voluntarily added to the live shops section, and powers many thousands of more online shops worldwide. (source osCommerce)
    Download: HERE

This section is truly amazing. eCommerce at a free price is truly a lifesaver. Some of these applications require PHP or MySQL, but guess what, those are open-source as well! read on.

• Web Authoring Tool: US $399.00
• Graphical Design Tools: US $1,148.00
• Content Authoring: US $499.99
• eCommerce Solution: US $500.00

Total Savings so far: US $2,546.00