Introduction

makeYourNet is a small java program to edit websites in a very, very easy way.
 
It is primarily meant to update parts of a website which contain only text.
 
Ok, this sounds lame, but there are two big advantages to make up for it:

• Incredibly easy to set up (for a normal ftp website you are done in less than 5 minutes)
• Incredible easy to use.

The basic idea is that the webdesigner marks the text areas wich shall be editable with special comments(<!--pre--> and <!--post-->). Then he runs the ClientGenerator program, fills in the FTP data, and it will spit out another program, which is to be sent to the customer as an e-mail attachment.
 
The customer doubleclicks on it and gets straight to his changeable text(s), without having to enter anything.
He edits, clicks ok and is done.
 
Click here to get it running in less than 5 minutes!

Is makeYourNet a content management system?

Software systems enabling users who do not know html to change and upload their websites are usually called Content Management Systems, or CMS.
makeYourNet may be the smallest CMS.
 
It is not meant to replace a real CMS like typo3 or mambo.(two very well-known CMS)
But sometimes these solutions are just to big, complicated or need certain preconditions on the server.
And, perhaps worse: The program to be used by the customer to edit his site may be hard to learn. (I refer to this program as "the client" from now on.)

So I was looking for a program with the following features:

• The client should be so easy that my mother could use it.(Really!)
• The client program should work without any configuration by the user. Just click on it.
• It should not be necessary to go to the user's home to set up the client on his computer. Instead, it should be easy to send him the client by e-mail.
• There should be no preconditions on the server exept ftp acces. No PHP, no database.
• It should be easy to add afterwards to an existing web project.
• It should be free of cost.

If you are looking for something like this, read on. But, of course, the simplicity comes at a price: makeYourNet has some severe limitiations, and you should check if it is appropriate for your needs:

• It can only edit plain text, nothing else. No support for adding pictures or links.
• It is not possible for the user to add new sites.
• There is only a very limited multiuser support, so it's best suited for small sites which are maintained by just one person.
• There is no version control or backup system. If the user changes something in a page, the old version is lost.
• Not a limitation, but can be a problem: The program needs a current (1.5.0 or newer) Java Runtime Environment to run.

Please keep in mind that these limitations are there to keep things simple. If you need more features, use another program.
(Maybe I will add some switchable support for links and pictures in the future, but the focus of this program is really in being the smallest one of its kind.)
 
As a new feature I added a way to edit repeated parts of different html files at once. This works fine for menus, headers, etc.
How to do this is described here.
The new version can log in via SFTP, too. (This is much more secure than FTP). However, only the keyboard-interactive/password login is supported by now, and the "unknown host" warning is suppressed.

Screenshot

Here is what the user will see:

The user is presented pieces of text which he can edit.
Above this, a welcome message configured by the webdesigner is displayed.
The user can switch between the pieces of text with the buttons on the left side. The names of the buttons can be configured by the webdesigner, too.
To edit the page, the user edits the text and presses "OK". That's all.
>>go to top

Get it running

Now you might think: "Ok, that's pretty simple for the client , but what do I have to do to set it up?"
Well, when I wrote the program, it was supposed to create a client which connects to the server and reads a config file from there which essentially tells him what to do next. This works fine, but it requires the administrator to create a config file and place it on the server.
This seemed easy to me.
But when introducing the program to webdesigners, I noticed that creating a xml config file -and at least partially understanding the structure of it- is quite annoying for most of them.
It is not quite clear why such a simple program requires learning about a config file. And so I added a simpler mode, where no config file is necessary.
So you can use makeYourNet in two modes now:

• Simple Mode. Read about it here.
• Advanced Mode. To switch to this mode, click the corresponding button to show the additional controls, and read on to learn how to use it.

 
Setup for advanced mode consists of three steps:

1. Pre- and postfix the editable parts of the website.
2. Let the ClientGenerator.jar (my program) create a config file.
3. Let the ClientGenerator.jar create the client program.

I will guide you through the steps with a simple example website.
Let´s assume we have a customer named Susi who has a pet site at www.susis-pet-site.org. The site consists of a single file named index.html:

<html>
<head>
<title>Susis pet site</title>
</head>
<body>
<h4>Welcome to my pet site!</h4>
My favorite pet: Squeezie!
</body>
</html></code>

We want to make the line "My favorite pet: Squeezie!" editable to Susi.(Imagine her favorite changes every day; leaving the outdated information on the web is clearly not acceptable ;-)) Our first step is to put this line in <!--pre--> and <!--post-->.
By this we tell the client program that this part of the website shall be editable.
Please note: It must be exactly <!--pre--> and <!--post-->, without spaces , otherwise the editable section will not be recognized.

As these are html comments, we will not change the visible content of the page.
When we´re finished, it will look like that:

<html>
<head>
<title>Susis pet site</title>
</head>
<body>
<h4>Welcome to my pet site!</h4>
<!--pre-->My favorite pet: Squeezie!<!--post-->
</body>
</html>

Note:If the part between <!--pre--> and <!--post--> contains html tags, these will be visible to the user.
 
That´s the only change you have to make to your site.  
Now it´s time to download my program from the download page.
(It needs the java runtime, so you might need to get java from here .)
We run the program by doubleclicking on it. When it comes up, press the "Switch to advanced mode" button to use a config file and fill the appearing form with these values:
(Of course you would replace this with your own ftp connection data..)

Comprehensive help for each field is provided by the help buttons, so I won´t repeat it here.
If you are afraid of black helicopters in front of your window ;-), you can leave the password field empty. If you do so, the user will be asked for the password each time. If you provide it here, it is saved in encrypted form inside the client, which we will produce soon.
We can then use the "Check ftp login" button to check if your ftp settings are working.
If this is the case, we press button two to let the program create a config file.
This file will be stored on the ftp server, together with the html files. There is the option to edit the configuration file manually, but we want to do it the quick way now and use the automatic creation.
So, in the emerging dialog:

We choose "Create automatically".
The program will now detect which .html (or .htm) files on the server contain parts which are included in <!--pre--> and <!--post-->. Hence it is necessary to do this first.
(If there are very many html files on the server(e.G. automatically generated log files), this might take long. If this bothers you, or if the automatic creation does not work for any other reason, you should create the config file with an editor. You find many examples for config files in the filelist.xml description page).
 
We go on with creating the client by hitting the "Make client program" button. The program will generate a new jar in the directory it is running, with the name:

cms_www.susis-pet-site.org_susi.jar

As you can see, the name is made of the host- and user name, but you can rename it as you like. The file is preconfigured with the login data and the user id "susi" and is meant to be passed to Susi. It is usually quite small (<500kb) and can be easily sent via e-mail.

That´s it!

We should now test the client by doubleclicking on it.
It should look like this:

Susi can now edit the text, hit the "OK" button and the site gets updated with her changes. >>go to top

Add more editable areas

Adding more editable areas in files which contain already editable areas is quite simple: Just add more <!--pre--> and <!--post--> to mark the new area.
Imagine that our example site has been extended:

<html>
<head>
<title>Susis pet site</title>
</head>
<body>
<h4>Welcome to my pet site!</h4>
<!--pre-->My favorite pet: Squeezie!<!--post-->
</br>
I have dozens of Cats and Dogs.</br>
The last I got was Hoopie.
</body>
</html>

Now we want to make the line:
"The last I got was Hoopie." editable.
 
To do this we simply add pre- and postfix just as we did before:

<html>
<head>
<title>Susis pet site</title>
</head>
<body>
<h4>Welcome to my pet site!</h4>
<!--pre-->My favorite pet: Squeezie!<!--post-->
</br>
I have dozens of Cats and Dogs.</br>
<!--pre-->The last I got was Hoopie.<!--post-->
</body>
</html>

After that, Susis client will show this:

Now we will add an area from another html file, which includes an extra step.
First we need a file, so let's assume susis site has been extended with a "contact" page:
The page, named "contact.html" looks like this:

<html>
<head>
<title>contact</title>
</head>
<body>
<h4>Contact</h4>
my email is: mail@susis-pet-site.org
</body>
</html>

We want to make the e-mail adress editable.
First, we add pre- and postfix as we did before:

<html>
<head>
<title>contact</title>
</head>
<body>
<h4>Contact</h4>
my email is: <!--pre-->mail@susis-pet-site.org<!--post-->
</body>
</html>

Now we have to update the config file, to let the client know, that it has to load two files now.
Again, the ClientGenerator will do that for us. We start it again, enter the same data as before(if we have not already saved these values as default values), and hit the "Create config file" button.
As there is a config file already now, we are first presented a replace dialog:

We press "Replace with new one", which brings us to the dialog we saw the first time:

Again, we press "Create automatically", and a new config file will be written. When Susi runs her client again, she will get that:

As you see, the user (Susi) does not have to deal with files or the structure of the page. He or she is just given a set of editable snippets.
I think, this is nearly as easy as it can get.
(Of course, if you can imagine an even easier way, please let me know.)
 

How it works

The general idea of the program is to have a client generator program, which is used to enter the connection data.
Then it creates a client which is preconfigured with the connection data and can be send to the user via e-mail.
When used in simple mode the client loads all .html and .htm files on the server, and looks for parts which pre- and postfixes. In advanced mode the client loads a config file. The config file can usually be created automatically as described above. It's main purpose is to tell the client which files to load and scan for areas marked with pre- and postfixes. (This is much faster than loading all files) However, editing it with the build-in editor is the key to many handy features, consult the advanced tutorial to learn about that.
The client program works like this:

• It is preconfigured with the connection data and a user id.
• When the user launches the client, it connects to the ftp server.
• In simple mode it loads all .html and .htm files on the server, and looks for areas with pre- and postfixes.
• In advanced mode it loads the config file (filelist.xml) from the server.
• It looks for his own "user" tag with a "id" attribute which matches it's own user id.
• It looks at the "htmlFile" tags inside it's "user" tag and reads all html files mentioned there. (But you can also specify whole directories or supply a regular expression which has to match the editable file's path)
• All the parts of these documents between <!--pre--> and <!--post--> are presented to the user.
• By default, the program does a simple html to text conversion (Replacing <br> by newLine and so on) and back. This can be disabled for users who like to edit the html directly.
• When the user hits "OK" all the files are uploaded to the ftp server, overwriting the old ones. (of course, nothing happens on "cancel")

This is the end of the basic tutorial, you know enough now to use the program in a effective way.
But there are some more nice things you can do with it, especially with the filelist.xml.
If you are interested, please visit the advanced tutorial.