logo

Practical Computing Advice and Tutorials

Sun: 22 Sep 2019


Site Content

Programming
&
Development


Technical Knowhow


Command Line Interface


Security

Website Development

In putting this site together I've learned a few things that I'll like to share, as I've tried a couple of different approaches with this site. Putting together a website is not so hard to do and your approach will depend on your motivation. My site is quite basic and does not have much in the way of user interaction and as such I don't have to concern myself with the details you'd need for a site from which goods could be purchased, for instance. Such a site would involve user accounts and financial transactions and would need to be very secure so as any customer data does not get out of the control of the site owner. My motivation is to learn and then pass on what I learn. As with any project, you have to start somewhere and you have to develop things one step at a time. So, first off, you'll need some development tools.


Running A Web Server

While you develop your site, you'll need a way to see how it's going to look to your visitors; a staging platform, if you will, and there are a couple of ways you can do this: A Localhost Server or a Stand Alone Server.

For a stand alone server, you need nothing more than a computer running server software; typically, this will be 'Apache'. You can run a development web server on a very simple computer, such as a Raspberry Pi or on a disused computer that you may have stashed away somewhere. As an alternative you could install Xampp on the computer that you're using right now, which will run as a Localhost, but the easiest way is to use a USB based web server such as USBWebserver v8.6 This has the advantage of not having to install any software; it just runs. Also, you don't have to use it from a USB device; what I do is to have it in a directory called 'Apps', along with all the other portable apps that I use. My advice is to have one copy as a 'clean' copy, that is to say, a copy that's never been used, and then create copies of that for projects. That way, if you mess things up, you can simply delete the copy you've broken and create a new copy from the 'clean' one and start over. The other advantage is that you can simply exit out of the server app when you're not using it, thus saving on computer resources.

You can install any web based app (such as WordPress) that you can install on a regular stand alone server and again make a 'clean' copy of that before you use it, again giving you the option of starting over if you break it, or having a back-up before you make a major change to the design of your site. For your 'live' site, you'll need a domain name and a hosting service. If you go down the WordPress route for the content, you may find that your web hosting provider will offer the option of installing a WP package, in which case you'll be able the manage the content via the admin login. This is where it can get a little tricky if you've developed a WP site 'off-line' and now what to transfer that to your live site; it's possible, but not that simple. My advice would be to use a migration and backup plug-in, such as Duplicator. With content that's more bespoke, you'll need to ftp the content. I use FileZillla, but you may find that your hosting provider will offer some other solution.


Website Design & Management

I've used WordPress and it's a very good and very quick way with which to create a website that you can have ready to go live in a matter of hours. The downside is that 'script kiddies' will launch attacks against the admin login, so don't use a password that can be bruteforced. My passwords page should give you all the information you need to be able to create such a password. Also, be very careful about the plug-ins that you use and remember that by installing a plug-in, you're trusting the author of said plug-in. Also, you need to be logged-in in order to create the content; you can't simply write a html page and include it on your WP site, as WP is PHP based and is an integrated system. PHP runs on the server, dynamically creating the html that your web browser then renders.

I've also used openElement which is again a very good content management package and comes with a built-in Localhost web server. The down side to oE is that the resulting website is all JavaScript, so again simply creating a html page for inclusion is not an option; rather you have to use the software in order to create content, then up-load the resulting code to your web server. The site that you produce this way can become very bloated and, unless you can develop JavaScript, you're limited to the tools that are provided. oE is very good, but it's just not for me.

Some things to keep in mind when considering the use of a CMS. Everything is done for you (the content aside) if you use a CMS such as WordPress or openElement; more so with WordPress. If you choose to build a website without using a CMS, you'll have to consider such details as site navigation.

If, like me, you'd rather create .html pages, you'll have to put the html code for the site navigation in every page. The problem with that is what happens when you have, say 100 pages or more, and you add a page that you want linked to the site navigation?

When I first put this site together, I used JavaScript to control the navigation menus, but since then, I've learned about Script-Free, Pure-CSS Menuing Systems, which I now use. I also didn't understand how to have a menu.html code page load into all the other .html pages. It takes a little work, with the .css files and some SSI code, but once done, it's a very elegant system.

I'll not go into the details right now, but if any visitor would like me to produce a 'how-to', please use my feedback form to let me know, and I'll write a tutorial page. Right now, I'm unsure if anyone is even reading this, let alone interested in the details.

While it's entirely possible to hand code in html (this page is being written with Notepad++ which has a very good code highlighter), it's a little time consuming and also you need to know how to code in html. One solution is to use software that will create the code for you as you create the content. You can then learn the code by seeing what was created by the software, from your content. The tool that I used for this is KompoZer version 0.7.10 (20070831). It's no longer being developed (or so I believe), but it is none the less a very good app, although it does format the code in an odd way. Btw, I've tried version 0.8b3 (20100301), but I found it to be a little 'buggy', so I.M.H.O version 0.7.10 is the one to use.

Nvu (pronounced N-view, for a "new view") was replaced with KompoZer, but you can still find all the information on this site.

There's not much in the way of the 'hand-holding' that you'll get with full content management software, but you'll learn much more in the way of coding and how to do things for yourself, so the solution you choose will depend on what you want to learn.

Now that I've learned the basics, I can and do hand code every page myself, using the pages that I have already coded as templates for any new pages, which are simply uploaded to my hosting server, together with an updated menu.html file, Notepad++ being my go-to for page creation/editing.

I've found a very good CMS which I'm using to maintain this site. It's called "HelloWorld!" and is a lightweight and secure CDS for PHP. You'll find a little information about it in my About page, including a link to Taylor Hornby's site, which is also linked at the bottom of each page on this site. It makes site content management very easy and works by parsing .html pages using a .php script, which sets up the framework on which ones site can be built. Taylor has developed a very good and secure system and I'd recommend it for anyone that wants to use a system that can be trusted. My thanks to Taylor for his fine work.

Christopher Heng has a very good website called thesitewizard.com on which you can find some very useful information.

To create a 'site-map', which search engines use for indexing, the guys at xml-sitemaps.com offer both a free-to-use and a paid-for service.

Another very good resource is https://www.w3schools.com/ on which you can find much of the information I used in the creation of this website; I can't recommend that site highly enough! It's been my 'go-to site' for much of what I've implemented here.


Update:~ April 2018

As much as I like the CMS that Taylor developed, there are a couple of things that I wanted that his CMS didn't offer, such as a page-hit counter. So, I've now developed my own CMS which includes a page-hit counter. The layout has been done using 'CSS Flexbox' which should make it more 'mobile friendly' as it adapts to different screen sizes. I've also learned much more about CSS and I'm now using my own CSS rather than the w3-CSS on which my site was based. I can now say: This site is 100% my own work. I've scrapped much of the old menuing system and gone with a side-bar & links (which I feel looks much better) system, save for a couple of options that will take you to the three areas that I now have.

I'm now very happy with both the way the site looks as well as how it all hangs together and I hope that you agree. That done, I can now concentrate on developing the content.