Archive for November, 2008

Designing a website for us HTML beginners

I wanted to put out there a list of sites that really, really helped me with my website. I’m a beginner HTML person, and I can get around with a few things here and there, but I needed a lot of help. I designed my first website from scratch using Dreamweaver (for FREE html software, try out Nvu. I downloaded it and it works great!) to get a basic idea of designing one, but it didn’t quite look professional enough. So I bought a $30 template from TheTemplateStore and updated it for my new site and I’m really loving it.

Here’s my old website: http://www.oldsite.zhollis.com
And here’s my new one: http://www.zhollis.com

I mentioned before, for my new website, that I used Adobe Dreamweaver and Adobe Fireworks and Swish, which all together can cost over $1,000. I had a friend who I borrowed from, though you can get a trial version of Swish. However, my old website, I just picked up a basic design at oswd. Also at a template store, not at the one I used but anyone that sells templates, they can provide you with websites with programming that you can update yourself without having to buy stuff like Dreamweaver. You simply look at the templates that use CSS based layouts. But if you can find a Free Template to update, I would go that route.

CSS - Yeah. That was a new one for me too. What is it? Well basically, if you have like hyperlinks on all your different pages and you wanted to update the look of all of them without having to update every…single…page, you would put a “class” next to every hyperlink, and in the css coding, you can change the color, or what happens if someone hovers their mouse over a hyperlink, in the CSS code that styles your hyperlinks…and it updates all of your pages at once! Pretty cool thing, but you have to know CSS to use it.
I go here to find out the basics of CSS – Introduction to CSS

So on to my list of useful tools….

++++++++++++++

Free web tools to help you design your website.
I use Dreamweaver, but if you want to save some money, here are some free software to help you design your page.
NVU
Hot Dog
Coffee Cup

Free photo editor – GIMP
This was great for me to use. Especially for those pictures where you want to cut out an image and have it floating on top of another image, like your personal photo. I wanted the background to be transparent, where the background of the picture doesn’t have to be a specific color like white or black, because this might not blend in very well with the background of your website. What I’ve learned is that .jpg .bmp .gif can’t have transparent backgrounds–but .png can. GIMP help me put these images, like this one on my site.

HTML – The easy way to understand it.
I use this site all the time to help me figure out what a string of commands mean.
Introduction to HTML

Neat Scripts to add to your website.
I didn’t use any of them, but with my first website, without a template, I was trying to figure out how to do those neat DropDown Menus that are on some sites these days and I found the code at this EarthWeb site
The actual code for the drop down is here:

How to Make a “Contact Us” Form
I really needed help on creating my own form, and the basic HTML site, though it helped with some things about forms, didn’t quite help with HOW to get the information from the form to my email box. PHP Tutorial: Writing Your First PHP script: Feedback Form Script, help me SO SO much. It helped me understand how to get it working and the little bitty things that you have to know like the position of certain strings in the “mail” section and how you want it to look in your personal email. When I change my website to a template, I had to redo my form, and I completely forgot how I got it working. I came back here, did my refresher course, and BOOM…done.

Dealing with Bots
Bots are those robots, or automatic programs sent out by people who spam your email, website, “contact us” page and comments areas. So you know those images in a box where you have to type the characters of the image before hitting the submit button for a form, and the image changes each time you use it? Those can help out with thos nasty little bots. I found reCAPTCH on some Author websites and I was like, “Hey, where they get that?” With some research I found it and it’s just something to help out with those party pooper Spammers. It was a bit complicated to install and the directions on the actual site doesn’t help much at all for us basic HTML users, but this site helped me out A LOT and helped me get it up and running. Installing eCAPTCHA with PHP

Photo Slideshow
My first slideshow on my old website, I used a
Slideshow on Homepage with JavaScript. I couldn’t blend in the background though, yet it was very useful. For my new website, I learned Swish.

That’s about it. All the information dumping I could put on here that helped me. Whew! Hope it helps you out with your next web adventure.

Installing Movable Type on ICDSoft

Even though I had problems with Movable Type, doesn’t mean that you will.
I modified the instructions a bit below that was provided by ICDSoft, to
make more sense to me; and it might make more sense to you.

You can find screen shots of Movable Type setup here.

http://www.superxm.com/2007/08/movable-type-4-installation-step-by-step-with-screenshots.html

NOTE: I’ve updated this page with newer instruction, since my first instructions were back in 2008. This is most rececent Jan 2011.

+++++++ HERE WE GO ++++++++++++

I hope these more “simpler” instruction might help some with their installation. Follow these steps to install Movable Type:

1. Download the installation from the site of the vendor. Movable Type can be obtained from:

http://movabletype.org/

2. Once you have downloaded the zip file that contains the installation, and uncompress it (unzip it) in

your C;\ drive, you need to upload the files in it to your disk space/hosting site.

Logon to ICDSoft, go to File Manage and create two folders

under the root directory: 1) mt and 2) mt-static.

For Instant, if your Blog Url is: http://blog.tomjoe.com

Then create the folders under: /home/TOMEJOE/www/blog/

I used CoreFTP to upload my files, but you can use whatever applications with FTP.

A free software suggested was here: http://filezilla-project.org/. But I’m assuming since you already have an account with ICDSoft, you know how to do this part already.

3. Using FTP, upload all of the files in the “MT-5.0-en” folder into the “MT” in ICDSoft folder EXCEPT for

“mt-static”. DO NOT UPLOAD the folder “mt-static” Also remember, you’re only uploading the files, DO NOT

UPLOAD THE FOLDER “MT-5.0-en”, just all of the files in it.

PATH IS: /home/TOMEJOE/www/blog/mt

4. Upload all of the files of under “mt-static” on your C:\ to ICDSoft folder “mt-static”. Remember, you’re only uploading the files, and not the entire folder. Remember: “mt-static” folder and “mt” folder are both under the root directory.

PATH IS: /home/TOMEJOE/www/blog/mt

PATH IS: /home/TOMEJOE/www/blog/mt-static

5. You need to create a MySQL database for the Movable Type application. From ICDSoft Control Panel, click

“MySQLDatabase”. In the “Create new database” Create the name for the database.

It should look like “tomjoe_blog” or “tomjoe_myblog”

In the “Collation” field, it should be: utf8_general_ci

Click the “Create” button

You will have to create a login/password called a “MySQL User” for this database. There will already be a login created, which is the “master” account. That is a default. You also need to create another MySQL subuser for Movable Type to use to log into your database. You don’t want them to use your master account since that’s the same one you use to access you host/website information.

Under “Create new MySQL user”

EXAMPLE:

Database Name: tomjoe_blog (use pull-down menu to selecte your database name)

MySQLUser: joetom

Password:

Confirm Password

Be sure to grant all privileges to the newly created MySQL subuser, by clicking/check makr all the words in the “Privileges” box. And click the “Add” button. And after you save it, make sure the ID has all of the permissions as listed below in the “MySQl users”.

Select, Create, Create View, Execute SP, Insert, Alter, Show View, Update, Lock, Alter SP, Delete, Drop, Create SP

6. Go back to File Manager and browse to the directory where the extracted files for Movable Type are located. Copy the file “mt-config.cgi-original” to “mt-config.cgi”. NOTE: Make sure to copy so you will have the original just in case you mess up something.

7. Click the file “mt-config.cgi” through the File Manager.

At the line specifying the “CGIPath” you need to enter the URL (web address) to Movable Type under your account. It should look similar to this:

http://example.com/mt/mt-version/ (Another Way: http://tomjoe.com/mt/)

At the line specifying the “StaticWebPath” use the address path for “mt-static”.

It should look like:

http://example.com/mt-version/mt-static (My ways: http://tomjoe.com/mt-static)

NOTE: Below I give an example of how the “mt-config.cgi” file should be configured for your MySQL database settings.

DEFINITIONS

Database: You need to specify the MySQL database you created for your Movable Type application.

DBUser: You need to enter the MySQL username you created at your web hosting Control Panel’s MySQL section for your Movable Type application.

DBPassword: You need to enter the password you assigned to your “MySQL subuser”.

You will also need to add the following line under the rest of the MySQL settings:

DBSocket /tmp/mysql5.sock

After that you need to delete ALL THE the lines in the file, which include the “POSTGRESQL”, “SQLITE” and “BERKELEYDB” database settings.

BELOW IS AN EXAMPLE OF HOW “mt-config.cgi” file should look like

++++++++++++++EXMAPLE+++++++++++++++++++++++

## Movable Type configuration file ##

## ##

## This file defines system-wide settings for Movable Type ##

## In total, there are over a hundred options, but only those ##

## critical for everyone are listed below. ##

## ##

## Information on all others can be found at: ##

## http://www.movabletype.org/documentation/appendices/config-directives/ ##

################################################################

##################### REQUIRED SETTINGS ########################

################################################################

# The CGIPath is the URL to your Movable Type directory

CGIPath http://www.example.com/cgi-bin/mt/

# The StaticWebPath is the URL to your mt-static directory

# Note: Check the installation documentation to find out

# whether this is required for your environment. If it is not,

# simply remove it or comment out the line by prepending a “#”.

StaticWebPath http://www.example.com/mt-static

#================ DATABASE SETTINGS ==================

# REMOVE all sections below that refer to databases

# other than the one you will be using.

#======== REQUIRED SETTINGS ==========

CGIPath /mt

StaticWebPath /mt-static/

StaticFilePath /home/tomjoe/www/mt-static

TemplatePath /home/tomjoe/www/mt/tmpl

#======== DATABASE SETTINGS ==========

##### MYSQL #####

ObjectDriver DBI::mysql

Database tomjoe_blog

DBUser tomjoeblog

DBPassword suzietime1

DBHost localhost

DBSocket /tmp/mysql5.sock

#======== MAIL =======================

MailTransfer sendmail

SendMailPath /usr/lib/sendmail

+++++++++++++++++++++++++++++++++++++++

8. Update the permissions of all cgi files (14 files) to be executable.

In the “Permission” column, change them from “664″ to “775″

Do this for each and every file.

9. Rename the “mt-check.cgi” to “mt-check-unsafe.cgi”

If You don’t do this step, you will receive the following message below on step 14:

“The MT-Check report is disabled when Movable Type has a valid configuration file (mt-config.cgi)”

NOTE: This will allow you a direct access to the URL (mt-check-unsafe.cgi) for 10 minutes.

Once having confirmed the system information in step 14, don’t forget to rename it back to “mt-check.cgi” though it would be disabled automatically after 10 minutes.

10. In your web browser, type the path

http://blog.tomjoe.com/mt/mt-check-unsafe.cgi

The message “Movable Type System Check Successful” will appear at the bottom of the screen if the server has all the necessary libraries/modules for installing Movable Type.

11. Remember to rename “mt-check-unsafe.cgi” back to “mt-check.cgi”

12. In your web browser, login into Movable Type

http://blog.tomjoe.com/mt/

OR

http://blog.tomjoe.com/mt/mt.cgi

13. Create the administrator account. Click “Continue”.

14. Create the first website. Click “Finish”. Movable Type will then initialize the database with all the configuration options and settings specified. In the “Create Your First Blog” enter basic information about your blog, the name, Blog URL which is what people will type in the browser to get to your blog, and the string that will get to your directory of files.

15. Click “Sign into Movable Type”

16. Sign back into Movable Type, if asked

+++++++++++++++++

Important notice: You should monitor the site of the software vendor for any security updates of your installed application.

+++++++++++++++++

THAT’S IT. YOU’RE DONE WITH THE INSTALLATION. SO GO HAVE FUN MAKING YOUR BLOG SITE

+++++++++++++++++

Rss Feed Tweeter button Facebook button