Website Development UPDATE


OVERVIEW
This document has been created for the use of my clients to maintain the sites I have built for them. It does not claim to be anything other than a minimum introduction to my own preferred tools for website maintenance and a utilitarian introduction to HTML. If you are not my client, a student, or a charity and find this document useful please make an appropriate donation or select one of the web hosts I recommend since I get an affiliate fee. @ MaxHost

The Internet


The internet has changed the way people get and exchange information. Who needs the yellow pages when you have an internet search engine? Suppose you want to find a vet for you new puppy near you. You probably ask your neighbors, but you might just fire up your favorite search engine and find one. Or you can't remember who directed one of your favorite movies. Or you want the up to the minute weather forecast. Or you want to find a childhood friend. Or you want a book or clothing item not easily available in stores near you.

This all means that if you have a business, you need to have an online presence so that new and old customers can find you easily. So you have someone, perhaps even me, create a website for you or at least a page on a directory of similar endeavors. But now you want to be able to make simple updates yourself; for example, add a phone number or email address. This manual is written for you.


CMS: Content Management Systems
In a Content Management System (CMS), the text and images for each page (known as the "content") are easily updated by using a web-based word-processor-style interface. So the site editors so not need to know HTML to make changes. They can update the site from anywhere with an internet connection as long as they have a username and password.

This content is kept in a database. So each "page" is a set of information from the database which is displayed within the defined look of the site (known as the template).

Some content management systems that I recommend are:

CMS Made Simple:
This is my preferred CMS to use for a site that is primarily pages of text and images. It allows for anywhere from one to hundreds of pages. More than one person can be allowed to edit these pages. CMSMS includes a News module and easy Photo Album and Events Calendar add-ons. There are a number of third party add-ons as well.
Sample sites:
District 17 of the ACBL, Play Bridge in the Southwest
Unit 354 of the ACBL, Play Bridge in Phoenix
Charles M Carrillo, retablo painter
David decides about thumbsucking - Help Children End Thumbsucking Habits!
IPO Recordings - high quality jazz CDs
New Mexico Registry of Interpretors for the Deaf
Self help credit repair
Hokoji Zen Buddhist Community in Taos
WordPress:
This is my preferred CMS to use for a blogging site and for site that invites comments from visitors. It has hundreds of add-ons including ones for Ecommerce. It can also be used for a single author non-blog site as well. WordPress is now powering 14.7% of the top one million global websites according to CMSwire.com.
Sample site:

JOOMLA:
This my preferred CMS to use for a membership site or a site requiring more complex functionality than CMS Made Simple. Membership communities are best done by using the Community Builder add-on. Joomla also has the most 3rd party add-ons of these three, for example a great B2B directory, a forum, photo albums, a store, and most anything else you can think of.
Sample sites:
Adriel Hills Condominium Association in Fort Collins,CO
Bermuda Bridge Club
Beverly Lanzetta, spiritual trainer and artist
Bridge Winners - a community of tournament Bridge players
Native American Fish and Wildlife Society
Interfaith Theological Seminary
United States Bridge Federation
So if you are lucky enough to have a website done in a CMS, you can skip all the parts in this manual about HTML.

Web Site Hosting and Domain Registration
There are two necessary parts to having a website before you even start on the pages.

You need to own the domain name. A domain registrar like godaddy.com can provide this. I recommend you that you buy your domain name separately from your hosting. That way if you become very unhappy with your web site host you can move quickly to a new one by changing the name servers at your registrar to your new host.
You need to purchase hosting. Usually yearly. I have several web hosts I recommend and use myself (note I get an affiliate fee). Things to consider are how much disk space and bandwidth you need, also uptime and customer service. These days most offer unlimited disk space and bandwidth, but read the fine print. If you use excessive amounts, you will hear from them. Most small websites do not have to worry about this issue.
Accessing an Existing Site
What if you have been asked to update an existing website? If you have the username and password try using the FTP instructions in this manual. If the username and password do not work for FTP then try using them them to log into your control panel which is usually your url followed by /cpanel or /menu. Once in the control panel, you can usually make an FTP account. If none of these work then contact the hosting company. If you do not know who hosts the site, read the next paragraph.

What if you have been asked to update a website and you do not have the username and password? Then you need to contact the company that is hosting the site and/or the administrative contact. You can find out that information by using a who is website, for example http://www.whois.net and if they cannot get that information it will give you a URL. Now, unless the information is private, you will see the various contacts on the account and something called name servers. Sometimes one of the contacts will be at the hosting company. Typically the hosting company can only send the password to one of those contacts so if none of them are current you will have to prove that this is your site.

Also the name servers will usually tell you who the hosting company is. For example, if you look up mcitng.com you will see that the name servers are:

Name Servers:
ns1.mcitng.com
ns2.mcitng.com
which tells you that the company hosting the site is smartwebng.com.

An easy way to find out just what company is hosting a web site is to use this handy tool: http://www.whoishostingthis.com/

HTML
Web documents are usually written in HTML (Hyper Text Markup Language) and are shown with the icon for your browser in "My Computer" or Windows "Explorer." The file type is either ".html" or ".htm" or sometimes just indicated as "web document." Dynamic documents, ones that contain programming so that they display different information depending on context, can be other types such as ".asp" or ".php". We are not going to worry about those in this document.

HTML consists of a simple set of commands, interspersed with the text, that are indicated by being within angle brackets -"<" and ">." To see some examples click on the view menu above and click "Page Source." Scroll down past the unintelligible stuff until you see this very text. Notice that there are numerous examples of HTML commands prior to the text, but fewer commands within the text itself. The command you will see most often with the text is the

command which indicates the start of a paragraph. Also the

command which indicates the end of a paragraph. Most HTML commands come in pairs. More about the specifics of HTML commands is in the section called HTML Details.

The purpose of HTML commands is to describe the desired layout and presentation of the document. These commands are then interpreted and the result displayed to the user by a web browser, such as Internet Explorer, Chrome (my preference) or Firefox - software which is easy to come by on any machine.

One of the most exciting features of HTML is the ability to link a document to other documents, not just on your web site but on any computer in the World Wide Web. These hypertext links are usually underlined and/or in blue on the page, although a modern style is to have them be a different color than the text without the underline. Also many links are indicated with buttons or menus or even dynamic menus. The style for links in this document is to have the underline appear only when your mouse cursor is on a link you have not yet visited.

Another important feature of HTML is the ability to easily include pictures and other graphic images within the text of the document. Mixing pictures and words is a very powerful way to get your message across. The image files can also be files anywhere on the web or local site. The standard type for an image is a .gif or .jpg, although other types have come into use more recently.

Presenting documents for viewing on a computer screen is different from an on paper or book presentation. No longer do we need an index - we can ask our browser to search for any character string we want. Page numbers no longer have any relevance either. Sections need to be short enough to be read in a screen or two. The table of contents is now a list of hotlinks to sections in the document. Graphics are easy to incorporate and can be prepared using any tool that can produce .gif or .jpg files.

All the major word processors support the HTML format. For example, on the File menu in WORD, when a file is opened or saved, HTML (as a web document in WORD 2000) is one of the available formats. However it is better to use a tool designed for editing web pages to do your updates.


Tools for updating your site
Composer - an easy way to make changes to a web page

The Composer is included with the SeaMonkey web browser (it used to be part of the Netscape and Mozilla web browsers) which can be downloaded for free to your computer from SeaMonkey. It is an easy-to-use HTML editor which lets you see the page pretty much as it will appear in a Browser while you make your changes. This is known as a WYSIWYG editor which stands for "What You See Is What You Get." If you plan to make simple changes to the text in your web page, then you can use Composer without even having to learn HTML.

More details on using Composer are in the chapter below "Using a WYSIWYG editor."


FTP and FTP_commander - moving files to and from your site

In order to move files to and from your site with ease I recommend a program called FTP_commander which can easily be downloaded for free from the web. It gives you a windows explorer-like interface to your site with two windows. The one on the left is your local computer and on the right is the web. You change directory to your local folder for your site on the left by clicking in the same way you are used to using with Windows Explorer. Click on C:/ and the the makeDir button above to make a new folder for your web site. You might call it by your website name. Then click on that folder and make another folder called by the date so Sept2010 for example. Do this each time you make a new backup. That way you have a history of what your site looked like.

To set up FTP commander to access your site you need to know your username and password. Click on the new server button and enter your URL (without the http://), username, and password in the appropriate little boxes on this window. Name it something you will remember like your actual site name. Then click OK. Once this is done, whenever you start up FTP_commander your site name will appear in the server list on the right. Now when you double click your site name, you will be connected to your site. After a pause of a few seconds, (note all the messages explaining what is happening on FTP_commander bottom bar) the filenames of all the files on your site will appear in the right window. Also if you have any subdirectories, those will appear with little manila folder icons just like they do in Windows Explorer. If you double click a folder, the right window will change and display the contents of that folder. To go back up to the main directory, double click the little up arrow icon at the top of the list of files. Note that if there is a folder called public_html or www that is where the files for your actual web site are located.

One problem with the FTP protocol is that is is not secure. Read this wikipedia article on FTP to know more. And there has been a rash of username password stealing recently. So change your password regularly.

To use a secure form of FTP, you will need a different free product, Filezilla, and you will need to find out how your particular hosting company sets up secure FTP so as to know what to put in the URL and port fields.

The first thing you want to do is to move a copy of all the files from your web site to your local pc. Highlight every file in the right window (hold the control key while you click on each one of them to do this) and then click the arrow that goes from the right to the left. To upload a file that you have changed, select it on the left and then click the arrow that points to the right.


XENU - checking all the links on your site

One of the things you must do weekly (or monthly) is to check all the links on our site to make sure none are broken (e.g. clicking on them gets a 404 error or no response at all). Not only are broken links on your site annoying to your users, but they will cause search engines to downgrade your site, a very undesirable result.

XENU is a free package to check all your links. Download it and use it regularly. When an internal link is broken, if you can't figure out easily how to fix it yourself, send me an email with the cut-and-pasted XENU complaint about it. When an external link is broken, try to find the new site using Google or your own favorite search engine. If you can't find the new link, either remove it yourself or let me know. If you find the new URL, then use the section below on inserting links to be sure you change to the new link properly

Adobe Photoshop and Photoshop Elements

If you need to work with images, you probably want to have Adobe PhotoShop. Most serious web designers use the Professional version but Photoshop Elements has more than enough for the small-time web site. The best feature of Elements for these purposes is the ability to save optimized images for the web in either GIF or JPEG formats. Note that GIF lets you use fewer colors which is an efficient way to save simple graphic images with a small number of colors. Photographs should usually be saved in optimized JPEG format. It even shows you the new and old sizes and expected download times on a high speed modem.

Photoshop Elements is not free but very affordable. Click here to buy it from Amazon.


ThumbsPlus

If you need to make photo album type pages of your images, my favorite tool is ThumbsPlus from cerious.com. It has a web page wizard that will make pages of your selected images where you can select the background colors and thumbnail sizes and create just the page you want. It also is a very nice way of looking at directories of photographs and has a tool to quickly rotate them (when you held your camera sideways) among other goodies.


HTML-kit, Arachnophilia - free text editors designed for HTML

There are a number of good free HTML text editors available on the web. What they give you is the ability to modify the text and codes with the normal features of a word processor, buttons for bold and italic, search and replace, as well as buttons to help you make a link or insert an image easily. My preferred editor is HTML-kit which has a handy HTML code checker (F9) as well as buttons for most of the things I need. It even has a function called "Strip Surplus Tags in Word 2000 pages" which is very useful on converted documents.

I also use Arachnophilia, another free HTML editor, for its good list and table wizards.


Microsoft WORD - converting existing documents

Microsoft WORD has the ability to edit HTML files, however it has the unfortunate tendency to redo the formatting and add extra codes. Therefore this is not the way I recommend working with existing web pages. It is however the way to convert word processor documents to web pages.
WORD documents can be saved as HTML from the WORD file menu "save as Web Page" (WORD 2000) function or "save as HTML" (earlier versions of WORD) function. This means that documents can be easily written out in HTML format from WORD.



Changing a web page
Before you make any changes be sure you have two copies of your site. One which corresponds to the site as it was before you started making changes and another which is the one you are working with. The section on FTP_commander explains how to do this. I also recommend making a backup of your site on a removable media that you store in a separate location.


Using a Text Editor

Notepad on the Accessories menu can be used to edit an HTML document. You will see all the codes and text, rather than what you see in a Browser. Use search to find the text you want to modify and then change it. Be careful not to inadvertently change or delete any of the HTML commands which are between angle brackets "<>"

Use the "save as" on the file menu to save the document with a new name such as newfilename.html. There are several steps you must be careful to follow when you do this. First you must change the "Save as type" box to "All Files." Second, be sure to type the ".html" at the end of the name in the "File name" box. If you forget these steps, the file will be saved as a text file type instead of an html type.

After making your changes and saving the file, look at it in several browsers to check that your change was good (if you have include files, you must upload this new file to your site in order to see it properly). The URL for your new uploaded file is http://yourwebsite/newfilename.html . Once you are happy that the change is right, save it again with its old name and upload it. A trick to be sure that you get the new page when you look at your site is to hold down the control key on your keyboard while you click the refresh/reload button on the browser. This forces your Browser to go get a new copy of the page from the site rather than using the cached copy on your pc or server.



Using a WYSIWYG Editor - SeaMonkey Composer

It is easy to modify a web page that has no frames or PHP commands by using the Composer program from SeaMonkey. Most other WYSIWYG Editors are too fancy and complex for the average user. You get to the COmposer from the Windows menu on the SeaMonkey Browsers Before you start using it, you must make a small correction. Please go to the edit menu and click on preferences. Now unclick the box that says "Save images and other associated files ..." Then click OK.

Composer will appear as a blank window on your screen with a toolbar that contains familiar items for anyone who uses a word processor: New, Open, Save, Print. New buttons are Publish, Image, Table, and Link. The next toolbar has a pull-down menu for the text type: normal which is "body text", plus all the header levels. This toolbar also has many familiar looking formatting buttons: Bold, Italic, Bulleted List, Numbered List, Indent, Dedent, Center, Left, Right Align, and Justify. New buttons are choose color for text, choose highlight color for text, make font smaller, and make font larger.

If you click on any element, like a table, that area is selected and you can make changes to it and even move it around!

To make a new hyperlink or correct an old one, select the text that you want to click on for your link or create the text when you make the link. Next click the Link button or type control-L. A small window will come up which is fairly self-explanatory. If you are linking to another file on your site and thus also on your local computer, click on choose file. If you are linking to a URL, you must type the full web address with the http part. For example to link to my website, you would type "http://www.kittycooper.com" not including the quotes. To make a link that sends email to an email address type the text "mailto:" in front of the actual address in that box, for example "mailto:anyone@hotmail.com" would send it to that email address.


Using a Word Processor

When a WORD document is converted into HTML, WORD will automatically change the normal WORD template into the HTML template. The HTML template is very similar to the normal WORD template minus some of the options.

In the HTML template, there are shortcuts to Bold, Italic, Numbering, adding Bullets, Inserting Pictures and Bookmarks, etc. If the mouse is left over a shortcut picture for a little while, WORD will display what the shortcut refers to.
Share on Google Plus

About Akins Mathew

 Hello! I’m a Programmer and  CEO/Founder of iReporter News Network Int'l [iNNi], a Creative Website Designer/Developer, Mobile App Designer, Business Enthusiast, Writer, Blogger and Musician. Currently obsessed with Mobile App Development.

"A logical person, Psychologically intelligent, and physically thrilling".

Connect with me on Facebook | Twitter | Reverbnation

STAGE NAME: Dr Magic
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Enter here your comment!

Note: Only a member of this blog may post a comment.

-->