Developement Toolbox

As with anything you need tools, so her's a short list of some of the better ones.

• Testing Environment
  
  • XAMPP - http://www.apachefriends.org/en/xampp.html
    Xampp is one click install for a windows machine that will give you all the features of a server on your local machine, it includes php, mysql and some other features. Also important to note is it can mimic a browsers behavior exactly as it would occur in a live environment. I've had problems in the past specifically path issues where I couldn't get external files to load properly etc. This will actually load pages through an address. Quite useful for many things such as if you want to test some code, experiment with new software like a forum of test things before you make them live.
• HTML/Text Editors
  
  Code is nothing more than text. You could for example edit code in Notepad, Word or any other type text editor. Matter of fact Word has the ability to generate HTML but I don't recommend using it for either editing code or creating Web pages. It's really suited for neither. Notepad is really too basic but it can be used in a pinch. For serious editing you need a program designed for editing code. Most importantly these types of programs will highlight code and make it much easier to read and in lot of cases can provide points where you have made mistakes as the highlighting will break. They also provide a lot of other built in features.
  
  • Notepad++
    Notepad++ is open source and free to download is currently my choice of editor. It supplies a lot of features.
    
  • Coffeecup Free Editor
    This is what I started out with. ahh the memories. The free version of this editor as best I can tell is no different than the regular version other some missing extra files such as buttons. Really unneeded fluff anyway. The other difference I noted was that it wants to insert a link to coffeecup in any new document you create then save. There's nothing in the licensing about keeping this intact and it can be removed once you reopen the document.
• Validation, Debugging and Testing
  
  • W3C Markup Validation Service
    This can be used for testing during development. Technically your site should pass this test. What's useful here is if you have accidentally left a tag out or have other problems that you are having trouble identifying. This tool will find errors that may not be apparent. One important note is a single error can cause a cascading effect where it will cause this tool to report multiple errors. If it finds anything fix the first one then retest.
    
  • Firfox Firebug
    Firebug is an extension that give you all kinds of information about a page, for example you can right click any part of it and it the main pane it will show you what markup. In the left pane and proabaly the the single biggest thing I use it will show what CSS definitions are being used for that element.
    
    Should be noted IE8 and chrome now have similar tool built right in.

The high end web page authoring software is "Dreamweaver". It's $400 +/- depending on where you buy it. Full functioning student editions are half price. It's now owned by Adobe. It's outstanding feature is it allows creating web page layout graphically, by writing software code or both. Graphic artists like the graphics approach. Software guys like the code. I use both methods and have a full licensed older version. If you buy the student version it can't be upgraded. A free trial version is available. It runs for 30 days and then quits. The current Dreamweaver version CS4 supports Cascading Style Sheets big time. It's the preferred way to author Web pages. I highly recommend Dreamweaver if you are going to be doing a lot of web pages especially web pages with dynamic content. Plan on a fairly steep learning curve before you are really good at using it. My local community college offers classes on using it. Around here (Central Maryland) a business typically pays $1000 for a first time static web page. First time dynamic web pages are 50-100% more.

I feel like I'm in college, and it feels good. Of course my brain felt like a marshmello after all the reading I did yesterday. Please don't test me on any of this, tests make me sick, lol.

I forgot to add that Coffeecup has a WYSIWYG (what you see is what you get) option like Dremweaver but I'm not trying to compare it Dreamweaver. If you're familiar with Word it's similar to that. You can place text and and images visually and it will generate the HTML code for you.

Downside is they usually generate a lot of bloated code which you'll end up working with and adopt it's bad habits.

Let's take this site for example, hand coded http://www.rockymountainhydronics.com/:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-us" />
<meta name="title" content="Index page" />
<meta name="description" content="Save money with the efm eb4 electric heater. A compact, versatile easy to use hydronic heat source." />
<meta name="keywords" content="electric, boiler, heat, hydronic," />
<meta name="category" content="general" />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="copyright" content="www.nepadigital.com" />
<link href="/css/nepaformat.css" rel="stylesheet" type="text/css" media="screen, projection" />
<title>The e-f-m eb4 Electric Boiler from Rocky Mountain Hydronics</title>
</head>

<body>

<div id="nepawrap">

   <div id="nepainnerwrap">
   
    <div id="nepaheader">
     
    </div>
   
     <div id="nepanavbar">
           <div class="corners-top"></div>
<div class="activelink">Home</div><div class="livelink"><a href="/info.php">eb4 Specifications</a></div><div class="livelink"><a href="/contact.php">Contact</a></div><div class="livelink"><a href="/about.php">About RMH</a></div>           <div class="corners-bottom"></div>

     </div>   
    
     <div id="nepacontent">
           <div class="corners-top"></div>
            <div id="nepacontentinner">
              <div class="rightinfobox">
               <img src="/images/content/eb4_cutout.jpg" alt="efm Emmaus, PA The Finest in Automatic Heat The eb4 electric boiler." />
              </div>
           
                  
              <div class="leftinfobox">
                    <h1>The EB4 ELECTRIC BOILER</h1>

                         <h2 style="text-align:center">TIRED OF HIGH PROPANE & HEATING OIL COSTS?</h2>
                          <p style="margin-left: 20px; text-align:justify;"><strong>Change to the EB4 ELECTRIC BOILER for economical and clean heat with virtually no maintenance, potentially saving you hundreds of dollars a month on your heating bill.</strong></p>
                             <div id="frontpage">
                                <ul>
                                 <li>Economical, compact and versatile.</li>
                              <li>Virtually maintenance free</li>
                              <li>Self contained and can be placed on a wall</li>

                              <li>Easy to use and Install</li>   
                              <li>Use in new or existing applications</li>
                              <li>No flames, pilot lights, gas, venting, smoke or fumes</li>
                                 <li>Great for supplementing solar, geothermal, or wood heat</li>   
                                <li>Use for popular hydronic (in-floor) and forced air heating, and indirect domestic hot water</li>
                              <li>Use in homes, offices, shops, modulars, condos, horse stalls, therapeutic and swimming pools</li>
                              <li><a href="/info.php">Find out more about the eb4....</a></li>

                              <li><a href="/eb40_brochure.pdf">Download PDF Brochure</a></li>   
                              <li>Call us @ 888-733-6351 for more information and pricing. We accept:</li>          
                             </ul>   
                           <img src="/images/content/credit_cards.gif" alt="Credit Cards" style="margin-left:20px;" />
                         </div>

                           
            
                           
              </div>

                </div>
              <div class="lowercontent">
                                <div class="rightinfobox" style="padding-top:20px;">

                           
                           <img style="margin:auto;" src="/images/content/wall_mount.jpg" alt="Wall mounted eb4" />      
                     <p class="picturecaption">Don, licensed electrician, was impressed by how simple the electrical on the eb4 was to install, using reliable and long-lasting relays and no circuit boards.</p> 
              </div>
             
              <div class="leftinfobox">
                              <p class="picturecaption">This 6300 sq foot home, completely heated by the two EB4 units pictured here, had a whopping 50% savings on its heating bill over previous propane useage.  The owner expects to recoup total installation costs within one year.</p>
                              <img style="margin:auto;" src="/images/content/house.jpg" alt="House" />       
              </div>
              <div style="clear:both"> </div>
               <p  style="text-align:justify">Rocky Mountain Hydronics LLC, in addition to the eb4 electric boiler, also offers the full line of all e-f-m products, including coal, gas and oil boilers.  e-f-m (Electric Furnace Man) established in 1922, is one of the oldest names in heating in the United States..  The company logo includes the phrase, "The Finest in Automatic Heat", which refers to the origins of the company as a manufacturer of coal stoker boilers.  For the full catalog of e-f-m products and specifications, available through Rocky Mountain Hydronics LLC, you can visit their site <a href="http://efmheating.com/products.html">here.</a></p>

                   <p><strong>We serve the following western states: Alaska, Arizona, California, Colorado, Idaho, Kansas, Montana, Nebraska, New Mexico, North Dakota, Nevada, Oklahoma, Oregon, South Dakota, Texas, Utah, Washington and Wyoming.</strong></p>
                </div>
            <div class="corners-bottom"></div>
     </div>
   
         <div id="nepanavbar">
           <div class="corners-top"></div>
<div class="activelink">Home</div><div class="livelink"><a href="/info.php">eb4 Specifications</a></div><div class="livelink"><a href="/contact.php">Contact</a></div><div class="livelink"><a href="/about.php">About RMH</a></div>           <div class="corners-bottom"></div>

     </div>   

   </div>
   
</div>

</body>
</html>


Now it's a pretty simple page but that's what they paid for.

if you are going to be doing a lot of web pages especially web pages with dynamic content

You need to FTP everything though? If you look beyond what you can do with HTML and use PHP you can create some truly dynamic pages and make your life easier. Here's simple example of creating a dynamic menu:

Code: Select all


<?php

$links = array('/index.php'            => 'Home',
                   '/info.php'             => 'Product Information',
               '/contact.php'          => 'Contact Us',
               '/about.php'            => 'About Us',
               );

foreach ($links as $key => $value) 
{
        if ($key ==  ($_SERVER['PHP_SELF'])) 
           {
            
           echo '<div class="activelink">' . $value. '</div>';
           
           }
           else
           {
           echo '<div class="livelink"><a href="' . ($key == '/index.php' ? '/' : $key) . '">' . $value . '</a></div>';
           }
}
?>

The foreach function loops through the array to determines what page is requested and applies a different CSS class to it. To add more links to our main menu we only need to add them to the array. This array is hard coded here but it could be pulled from a database.

This file would not be in the main document but instead be included so we only have to manage one file for the main nav.

Creating web pages with good "usability" is difficult. The web as a communication medium is very, very new as compared to print media. The technical standards for what you can do on the web are evolving to allow more and more innovative ways to display content. Usability studies show the majority of web page viewers just move on when can't find what they want on the first view of a web site. As more and more effort is applied to creating good web pages, what works at keeping viewers looking is emerging. Take a look at the Washington Post newspaper web site: http://www.washingtonpost.com/ Note the wide range of content on the first page of the site. Both fixed and dynamic text and images. It's a fairly long page but that's what it takes to get all the info on the first page. The page will also automatically reload with new information. The dynamic menu bar at the top is becoming a must have standard. A high end Web authoring tool is what's needed to create sites like this. People with the skills to do it are paid six figure salaries plus perks. Good web pages can make a business a lot of money.

Jakob Nielsen is an expert on web page usability. His web page: http://www.useit.com/ has lots of discussion on the topic. As a web page it is awful. An example of how not to do a web page. But if you are serious in creating good web pages you will need to understand the usability studies he has done. He has created a very successful company teaching others how to do it right. For example read his views on creating the next big company at: http://www.pcpro.co.uk/features/212703/ ... page1.html

Yanche wrote: The dynamic menu bar at the top is becoming a must have standard. A high end Web authoring tool is what's needed to create sites like this.

The authoring tool is only a small part of it and I'm going to have to say a lot of pros use a text editor like I do. Sites like that are created through what is used on the backend. I discussed this my other post but you need separation of the 4 elements for a really good manageable sites and Dreamweaver is only going to provide two of those elements. If you really want to look at how to manage a site for longevity look at how it's done through phpbb.

For example here's the contents of index.php, as you'll see there isn't a single line of HTML in it. :

Code: Select all

<?php
/**
*
* @package phpBB3
* @version $Id: index.php 8987 2008-10-09 14:17:02Z acydburn $
* @copyright (c) 2005 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
*/

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup('viewforum');

display_forums('', $config['load_moderators']);

// Set some stats, get posts count from forums data if we... hum... retrieve all forums data
$total_posts    = $config['num_posts'];
$total_topics    = $config['num_topics'];
$total_users    = $config['num_users'];

$l_total_user_s = ($total_users == 0) ? 'TOTAL_USERS_ZERO' : 'TOTAL_USERS_OTHER';
$l_total_post_s = ($total_posts == 0) ? 'TOTAL_POSTS_ZERO' : 'TOTAL_POSTS_OTHER';
$l_total_topic_s = ($total_topics == 0) ? 'TOTAL_TOPICS_ZERO' : 'TOTAL_TOPICS_OTHER';

// Grab group details for legend display
if ($auth->acl_gets('a_group', 'a_groupadd', 'a_groupdel'))
{
    $sql = 'SELECT group_id, group_name, group_colour, group_type
        FROM ' . GROUPS_TABLE . '
        WHERE group_legend = 1
        ORDER BY group_name ASC';
}
else
{
    $sql = 'SELECT g.group_id, g.group_name, g.group_colour, g.group_type
        FROM ' . GROUPS_TABLE . ' g
        LEFT JOIN ' . USER_GROUP_TABLE . ' ug
            ON (
                g.group_id = ug.group_id
                AND ug.user_id = ' . $user->data['user_id'] . '
                AND ug.user_pending = 0
            )
        WHERE g.group_legend = 1
            AND (g.group_type <> ' . GROUP_HIDDEN . ' OR ug.user_id = ' . $user->data['user_id'] . ')
        ORDER BY g.group_name ASC';
}
$result = $db->sql_query($sql);

$legend = array();
while ($row = $db->sql_fetchrow($result))
{
    $colour_text = ($row['group_colour']) ? ' style="color:#' . $row['group_colour'] . '"' : '';
    $group_name = ($row['group_type'] == GROUP_SPECIAL) ? $user->lang['G_' . $row['group_name']] : $row['group_name'];

    if ($row['group_name'] == 'BOTS' || ($user->data['user_id'] != ANONYMOUS && !$auth->acl_get('u_viewprofile')))
    {
        $legend[] = '<span' . $colour_text . '>' . $group_name . '</span>';
    }
    else
    {
        $legend[] = '<a' . $colour_text . ' href="' . append_sid("{$phpbb_root_path}memberlist.$phpEx", 'mode=group&g=' . $row['group_id']) . '">' . $group_name . '</a>';
    }
}
$db->sql_freeresult($result);

$legend = implode(', ', $legend);

// Generate birthday list if required ...
$birthday_list = '';
if ($config['load_birthdays'] && $config['allow_birthdays'])
{
    $now = getdate(time() + $user->timezone + $user->dst - date('Z'));
    $sql = 'SELECT user_id, username, user_colour, user_birthday
        FROM ' . USERS_TABLE . "
        WHERE user_birthday LIKE '" . $db->sql_escape(sprintf('%2d-%2d-', $now['mday'], $now['mon'])) . "%'
            AND user_type IN (" . USER_NORMAL . ', ' . USER_FOUNDER . ')';
    $result = $db->sql_query($sql);

    while ($row = $db->sql_fetchrow($result))
    {
        $birthday_list .= (($birthday_list != '') ? ', ' : '') . get_username_string('full', $row['user_id'], $row['username'], $row['user_colour']);

        if ($age = (int) substr($row['user_birthday'], -4))
        {
            $birthday_list .= ' (' . ($now['year'] - $age) . ')';
        }
    }
    $db->sql_freeresult($result);
}

// Assign index specific vars
$template->assign_vars(array(
    'TOTAL_POSTS'    => sprintf($user->lang[$l_total_post_s], $total_posts),
    'TOTAL_TOPICS'    => sprintf($user->lang[$l_total_topic_s], $total_topics),
    'TOTAL_USERS'    => sprintf($user->lang[$l_total_user_s], $total_users),
    'NEWEST_USER'    => sprintf($user->lang['NEWEST_USER'], get_username_string('full', $config['newest_user_id'], $config['newest_username'], $config['newest_user_colour'])),

    'LEGEND'        => $legend,
    'BIRTHDAY_LIST'    => $birthday_list,

    'FORUM_IMG'                => $user->img('forum_read', 'NO_NEW_POSTS'),
    'FORUM_NEW_IMG'            => $user->img('forum_unread', 'NEW_POSTS'),
    'FORUM_LOCKED_IMG'        => $user->img('forum_read_locked', 'NO_NEW_POSTS_LOCKED'),
    'FORUM_NEW_LOCKED_IMG'    => $user->img('forum_unread_locked', 'NO_NEW_POSTS_LOCKED'),

    'S_LOGIN_ACTION'            => append_sid("{$phpbb_root_path}ucp.$phpEx", 'mode=login'),
    'S_DISPLAY_BIRTHDAY_LIST'    => ($config['load_birthdays']) ? true : false,

    'U_MARK_FORUMS'        => ($user->data['is_registered'] || $config['load_anon_lastread']) ? append_sid("{$phpbb_root_path}index.$phpEx", 'hash=' . generate_link_hash('global') . '&mark=forums') : '',
    'U_MCP'                => ($auth->acl_get('m_') || $auth->acl_getf_global('m_')) ? append_sid("{$phpbb_root_path}mcp.$phpEx", 'i=main&mode=front', true, $user->session_id) : '')
);

// Output page
page_header($user->lang['INDEX']);

$template->set_filenames(array(
    'body' => 'index_body.html')
);

page_footer();

?>

The basics of how this works is when this page is called it gathers all the data based on user permissions, what options are set etc. The data or content is all stored in the database, if you look at the end of that file you'll see how the the data is sent to the HTML:

Code: Select all

// Assign index specific vars
$template->assign_vars(array(
    'TOTAL_POSTS'    => sprintf($user->lang[$l_total_post_s], $total_posts),
    'TOTAL_TOPICS'    => sprintf($user->lang[$l_total_topic_s], $total_topics),
    'TOTAL_USERS'    => sprintf($user->lang[$l_total_user_s], $total_users),
..........................
 

The data gathered from the database is assigned to the variables which are stored in a huge array. At the end of the file the template is called, and the aprt that pertains to those variables looks like this, note the brackets:

Code: Select all

    <h3>{L_STATISTICS}</h3>
    <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p> 

The template is parsed and the variables in the brackets are replaced with the values of the variable. That is how you create a dynamic site where content is constantly being updated.

While on the topic you really have to be careful with dreamweaver if you are ever editing templates and other things as it might try and help you fix things that don't need fixing and really srcew the code up. Make sure it's in pure text mode when doing it.