Tutorials

Client Tutorial Section

Our Tutorial section has information to help clients administer their websites as well as general information on web design.
Please log in below to view all of these resources.  

Website design and blogging 101- tutorial section


There are as many ways of approaching web design as there are web designers. Finding your stride and comfortable working habits may take some time. My goal here is to give you some insight and essential tools that you will find useful on your web design and blogging journeys.
 
My first tip is if you don’t have a gmail email account you will need one for this course. You can sign up here www.gmail.com
Gmail is run by Google and Google pretty much runs the web. They have dozens of tools to help out webdesigners that are all accessable through your gmail account.
 
This course isn’t set up for designing Flash based websites. This is a completely different way of working than what I propose. If you are interested in a Flash website you can set up a nice one through these guys: http://www.wix.com/

Week 1

Before even beginning to set up a website we first have to clarify your goals for the site. It’s a good idea to write down what you wish to communicate to you visitors. Are you selling something? Is it an idea or product? Are you sharing some bit of knowledge or talent? Are you commenting on the state of affairs or a particular subject? Sharing photos or videos?
 
content.jpgOnce we have a clearer understanding of how you expect a site to perform its function then we can break things down into their respective parts. We will have the main content, which we will need to attract visitors. Keep this fresh, interesting as well as regularly updated. There no point of announcing a new site if the content isn’t there. You also want people to stick around and explore a bit so attracting their attention with some nice images is useful as well. A wall of text can be off putting for many web visitors. Think more in terms of a glossy magazine than a hard cover book. So take some photos or find some that relate to what you are posting.
 
Okay, now that we have the what we need the how and that’s why you are here isn’t it. So let’s start by looking at some blogging platforms that are available free to use on the internet. These are programs that one can update and add content fairly easily to and don’t require much web designer knowledge at first. When you want them to do more and more things, then a bit of design and coding can go a long way. 
 
tumblr.jpgThere are hundreds of blogging platforms available online. Most you have to pay for. I’ll be showing you the best of the free ones. The most popular and oldest is Googles Blogger or Blogspot (Google bought Blogspot and combined the two just to avoid confusion). There is also Tumblr which has many nice designs or templates right out of the box. It is important when choosing a blogging design select something that relates to you topic. If it’s gardening then a floral or green themed design would be appropriate. Most blogging platforms give you a selection to choose from during the sign up process. The third one I would recommend Typepad, they have a simple free version and some helpful blogging tips and tricks you should look at for blogging.
 
So here are my recommendations:
 
http://www.blogger.com/ Best known and most popular. Plenty of features and recommended for beginner and intermediate blogging also has a French version.  It has free customable templates for users. You can use your own registered domain name too.
 
http://www.blogspot.com/ same as Blogger
 
http://www.tumblr.com/ this blog platform is sort of a mix between social networking site like facebook and a blog. It contains many features but doesn’t have a French version. Geared towards more trendy and web savvy individuals with a laid back, informal attitude. If you want a good looking site this is the one to use.
 
http://www.typepad.com/tips/ good tips on blogging typepad is very simple and has a French version. The extended feature rich version costs money.
 
http://wordpress.com is probably the best and most powerful blogging platform. This can make wordpress.jpgyour blog look and function like a real website with many features including ecommerce so you can sell items online. It has the steepest learning curve but if you plan to expand your blog into a full website this is an excellent choice. To get to most out of Wordpress you can use thier program on your own hosting account you can get this from www.wordpress.org
There are much more complicated applications available such as Typo3 and MovableType. These are good for professional independent blogging but paying for a hosting account is required. Expect to pay around $5 to $10 a month to have these blogging platforms.
 
I may have mentioned some terms during the first week that you aren’t familiar with I suggest you look at my definitions section and get a feel for some of the web terminology that is out there.
Just one last thing http://technorati.com/ is a blog resource site which indexes all the top blogs. This may be useful for looking at what makes a successful blog and getting ideas.
Try some of the blogging platforms above by creating a free account and seeing which one you feel most comfortable with. If one stands out that’s great. 
 
Remember web design is as much research as actual creating, so poke around and see what’s’ what.
 
And start organize some content for the coming weeks!

Week 2

You can find a rough overview of the weeks ahead here. If I am not talking about a particular subject that suits your interests during this weeks class you may find it there. So be patient hopefully I will address it in the coming weeks.  I will be updating these pages as the course progresses according to your wants. The order here is somewhat arbitrary as one part isn’t necessarily harder that the next. I am mostly looking at different aspects of web development and assume you will find what you are looking for. If not let me know in the comments section. I’ll post a solution here so everyone can benefit.
 
So we will be looking at web design tools in the next section.

Week 3

Getting Started.

I’ve included the essential tools needed for this course in the download section to the top right of the page. Please download the zipped folder and unzip it on your home computers desktop by right-clicking and selecting Extract all…
 
Once you have the folder unzipped we want to install these programs on your USB stick if possible. Copy the programs_bundle folder to the USB stick and then open it and click on the NVU installer. When prompted about where to install change the directory to the location of your USB stick instead of your C: drive Programs directory. We are installing it on your portable USB stick so you can work in class. It is a good idea to back up your work on your home computer every week just in case you lose the USB key.

Week 4

Working with images.

 Developing content also includes formatting and editing images for the web. We will be dealing with two important image criteria.
  • Image dimensions (the width and height in pixels)
  • File size weight ex. 100Kb (kilobytes).
The file size determines how fast you webpage will load. The smaller the file size in Kb the faster the image will load in your visitor’s browser.

Week 5

Up till now we have been mostly getting content for our site together. Finalizing texts and optimizing images is a big part of what we have been doing. Having outstanding content is what people are coming to see on a website.

Our design is what is going to frame all this wonderful content. There are many ways of creating this framework. One of the simplest is using a program that will aid us in creating a template or theme. (You will come across these two terms and they are used interchangeably.) Wordpress happens to use the word theme to describe their site designs. By Googling “templates” you will find a plethora of template clubs that create the design for you that you can purchase from.

There is one program in particular that is easy to use which is called Artisteer. With this program you can control many aspects of a web template from menu design to backgrounds to type faces. Then you can export these templates to your website platform i.e. Wordpress, or as a HTML template that you can modify in NVU.

While designing with this program you will find they use “dummy” content to show you how the site may look with some example images, text, headings etc. This content will eventually be replaced with your own content.

Week 6

There are many resources available on the net for web design that will help you become a better designer. W3schools.com  has tutorials on all sorts of web design so does about.com. Here is a direct link to their web section  http://webdesign.about.com/ they also have good information on other topics as well such as gardening or cooking.
WordPress documentation is available on their website http://codex.wordpress.org/Main_Page they have good resources for beginners in there Getting started with WordPress section.

Many times you will find something isn’t working as expected, or you are a bit confused on how to do something correctly. Luckily you have the world’s largest education centre at your finger times. Most times by just googling you problem into the Google search you will find the answer. This may not happen on the very first page or wording in Google but the next page or by phrasing of your problem differently.

Week 7

Domain registration and Hosting accounts

What is a domain?
It’s like a company name that identifies your little part of the world wide web. Example hostpress.ca is my domain name. the .ca part is the domains extension.

Here are some examples.
.com Pronounced "dot com." A top-level domain name used for commercial Internet sites.
.edu A top-level domain name used for educational sites .
.gov A top-level domain name used for a U.S. government site on the Internet.
.net A top-level domain name used for Internet administrative sites.
.org A top-level domain name for organizational Internet sites.
.ca Canada
.qc.ca Quebec, Canada second level domain extension of .ca. You need to have the .ca registered before you can create a .qc.ca
FacebookLinkedinTwitterNimblize

Download section


User Guide For Joomla!
HostPress_Joomla_Guide
1.8Mb

User Guide For WordPress HostPress_WordPress_Guide 1.6Mb


Advertisers

Banner
rc-score-largeb5-rsr05.gif
Netfirms Domain Names - Only $6.95/yr
Banner
Banner
Artisteer - Web Design Generator
Banner