`

Toro

nto

Publ

ic L

ibra

ry

Launching Your Business Online

Participant’s Package

October 2011

w w w . t o r o n t o p u b l i c l i b r a r y . c a

h t t p : / / v r l . t o r o n t o p u b l i c l i b r a r y . c a

Original work by Toronto Public Library. The support of the Government of Ontario through the Ministry of Citizenship, Culture

and Recreation and of the Government of Canada through Industry Canada is

Page 2

Launching Your Business Online

Outline I Welcome and Introduction

• Review objectives of the workshop • Explain handouts

II Buying a Domain

• Pick a .com • Find the right hosting package for you • Review & Evaluate your options

III Building Your Data

• What do you want to say • Collect Images and resize them • Review & Evaluate Your Content

IV Website Software

• Paid Software vs. Open Source Software • Using A Template

V Dreamweaver – Getting Down To Basics

• Page Properties • Page Fonts • Properties/Objects Toolbar

VI Marketing

• Types of Online Marketing • 10 Reasons Why You Should Use Facebook & Twitter

VII Free Tools Online • Taking advantage of Google’s free tools

VIII Photo Resources Online

• Stock photography • GIMP (Open-Source Photo Editing Software)

IX Inserting Images and Tables • Inserting images on your website • Inserting Tables

X Resizing an Image

• Resizing Images XI File Transfer Protocol

• Transferring Files

Note: We couldn’t put everything in the handout, so remember at the end of the class, the instructor will email you a copy of the presentation. Thanks

Page 3

Taking charge of building your own website is not an easy task. But if you work hard with it, and take the time, it will save you in the long run. Start up costs can be close to $1000-$3000. If you then want to make additions/edits on the website, it will cost you on top of that. Follow the steps below and build your own website on your own time at a huge savings.

I. Welcome

II. Buying a Domain

Before you start creating your content and building your website around a name/image. You want to make sure you first secure the domain you want. Nothing worse than branding yourself with a name in mind, to find later that it’s been taken. If you wait to long, it will also sometimes disappear on you when you least expect it. A few tips to help you out are:

• Make sure you sign up for more than one year. This will prevent you from trying to renew it a year later. Companies will also give incentives for signing up for more than one year.

• Look into the hosting fees as well. A domain is one fee; a website host is another

expense. Some companies will offer a package for both. Generally it’s always easier to deal with one company than two when it comes to technical issues. This can pay off in the end.

• What extras do you get? A lot of companies offer a domain/hosting packages. What

about website templates, shopping cart scripts, and other useful help. All these extras will hopefully help you achieve your goal.

Doteasy is a Canadian based company. They have a few options for their users. Be smart and shop around.

Page 4

III. Building Your Data

You don’t need to be a genius, web designer or a millionaire to get started with your website. All websites are content driven, that content come from you. Type your text and save your images in word, email and map out the site on paper. Try and shape it as much as you can, it will save you time and money in the end.

What do you want to say? How do you want to say it?

Images / Logos and all graphics will shape the customer opinions

Any Multi-Media content such as videos and music.

Collect all the info before you even get started.

Organize the website pages by hand or in word (most cost efficient)

Keep it simple, users of the web spend on average 3 seconds on a website page.

What keeps them there is: clean & attractive websites.

Now that you have their attention, make sure they have what they’ll need, like an address, contact information and price.

Don’t make your customers search all the pages for key valuable information.

Identify pages with a menu

Note: Here are a few links for you to go to at home and will help guide you in the direction you want to go, either be a personal, professional or information website.

http://fpen.org/train/web/evaluating-sites.html

http://www.searchenginejournal.com/50-questions-to-evaluate-the-quality-of-your-

website/6400/

Page 5

IV. Website Software

After you have everything typed up, images stored and saved. You need a software package to start building with. Here a few options out there at the moment.

Website Design Software Cost Notes

Adobe Dreameaver CS5 $ 900 Best software on the market, but doesn’t come cheap. Can handle all web scripts and templates

Microsoft FrontPage $150 Outdated and the laughing stock of the website design world. Rebuilding reputation slowly. Looking at doing more diverse things it once couldn’t hande.

Evrsoft FirstPage FREE Price is right. Has the capability of designing a site, built in FTP program and shopping cart function.

NetObjects Fusion FREE Price is right. Has the capability of designing a site, built in FTP program and shopping cart function. Some templates don’t work to well with it.

Using A Template

Build the foundation for the site, add any logos / banners you might need List all the pages on the menu or a side bar Put the company info / address along with any copyright info at the bottom

http://www.freecsstemplates.org

Page 6

V. Dreamweaver – Getting Down To Basics

There are several important things that need to be done before you write one word on a web page.

1. Familiarize yourself with any rules established for the server that you plan to upload to.

2. Decide who your audience is. If you have several pages you may find that each page has a slightly different audience. Keep those people in mind as you write the page. The reason for a web page is to communicate information.

3. Plan the general structure of your site. As you do that, remember to make your site easy to navigate. Any page on your site should have a link to allow viewers to return to your home page easily.

4. Put some thought into the images you plan to use:

Feature what is important about you or your company

Keep the image size small. Big images will make your web site open slowly.

Page Properties - To make changes to an entire page select Page Properties from the Modify menu. There are several things you might want to consider.

Page Properties Window

• Title - This is not the same as file name. Make a clear statement as to the nature of the page in the title. This is displayed in the title bar of your

Page 7

browser. The title is also used as the name of the Favourite or Bookmark listing.

• Background image

•

- Do not feel obligated to use a background image just because you can. Some excellent web pages have been ruined by the use of an image which makes it difficult for the viewer.

Background Color

•

- If you select no color, the default color is white. In the image below, #FFFFFF is the hexadecimal code for white. You don't have to know the code. By clicking on the down arrow in the bottom right corner of the box, you may select any color. A light color may make the page appealing. A very bright or dark background color may make your page appalling.

Text color

•

- If you do not select a color, the default text color is black. Avoid using text that is the same color as a link. This causes confusion.

Links

- If you do not select a color, the default text color is blue. If you plan to use a different color for links, be consistent. If your page background color is very dark, select a link color that will be easily visible.

Text Considerations – It’s always recommended that no font should be selected on a web page. If a web page author selects a font that is not on as viewer's computer, the default font would be used.

Choosing Text For Your Wesbite

Page 8

(Note: This floating toolbar is what you can use to do most of your text-based work in Dreamweaver. It provides functions to manipulate links, text color, font size and style, text alignment, etc.)

Opening the Properties Toolbar

If the toolbar is not open, choose Window > Properties to open the Properties Toolbar.

(Note: This floating toolbar is what you can use to do most of your object-based work in Dreamweaver. It provides functions to insert images, tables, links, line breaks, etc.)

Opening the Objects Toolbar

If the toolbar is not open, choose Window > Properties to open the Objects Toolbar.

Page 9

VI. Marketing

You can use marketing techniques and tools like social networking, emailing and blogging that do not involve a lot of direct costs

. You will need to dedicate your time or your staff's time to them, but they don't need to use up a lot of cash. You can choose all of these forms of e-marketing, or choose the ones most useful and accessible to your clientele:

Some types of Online Marketing Blogging Micro-Blogging Commenting Emailing Social Networking Viral Marketing Podcasting

Online Marketing with Facebook and Twitter:

• If you don’t know, companies have already started using Facebook/Twitter as it is the new way to promote, connect and brand a company. If your company is not using Twitter then your company is going to miss out.

• So why bother using twitter for your business? Even Twitter themselves know about the power of using twitter for business that they’ve set up a special Twitter 101. Here is what Twitter says:

10 Reasons Why Your Business Should Use Twitter

Page 10

VII. Free Tools Online

Everyone knows about Google for their main reason why they were created: a search engine. However, most people don’t realize that Google offers a lot of useful websites and databases that you can use to help with marketing. Here is some of them: Google Adsense: Maximize revenue from your online content. Google AdSense

is an easy way to earn money from your online content. Simply display relevant and engaging ads on your website, mobile sites, videos, and more.

Google Adwords: Advertise your business on google. No matter what your budget, you can display your ads on Google and our advertising network. Pay only if people click your ads. Google Analytics:

Lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.

Google Insights: With Google Insights for Search, you can compare search volume patterns across specific regions, categories, time frames and properties

Note: Free to use, remember to sign up and create a account with Google.

Page 11

VIII. Photo Resources Online

Photography can be expensive. Your looking for the right shot, setting, and people to capture what it is your trying to say.

If your trying to stay within a budget and still get eye-popping images/graphics. iStock Photography is a great resource

Free Photo Editing Utility: Microsoft Photo Editor will only take you so far. You will need a good photo program to resize images for you website but also to be able to create graphics, banners and other photo content for the website. If you download GIMP, it’s a free photo editing software, absolutely free.

Page 12

IX. Inserting Images & Tables

Insert Images Into Your Web Page

Open the page where you want to insert an image. One way to insert an image is to click on Insert on the menu bar and then Image from the drop-down menu.

Another way to insert an image is to choose the Image icon from the Insert Common Elements toolbar.

From the Select Image Source dialog box, navigate to find the image file that you want to insert and click on the filename. Then click OK.

Page 13

After you select the image, you can enter alternate text for the image.

Click OK and Dreamweaver inserts the image. You can perform additional edits and adjustments by using the Property Inspector.

Inserting Images Video on Youtube

http://www.youtube.com/watch?v=9M1VZIIHOY8

Page 14

X. Resizing an Image

Resizing an image is one of the most commonly used skills in Photoshop. It's so common that even people who know virtually nothing about Photoshop still manage to use it to resize their images, which should give you an indication of how incredibly easy it is to do. However, there are some things you need to keep in mind when resizing your images, as we'll see in this Photoshop tutorial.

To resize an image in Photoshop, the first thing you need to do is go up to the Image menu at the top of the screen and select "Image Size" from the list of options. This will bring up the Image Size dialog box, as shown below:

Enter the ideal size you w ish. Remember when working online, it ’s best to play w ith the dimensions in P ixels.

Then click OK.

Page 15

An FTP program is for file uploading and downloading to and from your website, server, or host. The program lets you transfer files and navigate among folders, Web sites, and your computer. This software enables you to perform multiple file transfers simultaneously.

XI. File Transfer Protocol

Transferring files

• in the left part of the screen (Local System), locate the file you want to transfer

• in the right part of the screen (Remote Site), locate the directory you want your file transferred to

• click on the file you want to transfer on your pc.

• click on the arrow (-->) to transfer your file to the print-queue .

• repeat steps 3-4 as many times as you want files to transfer.

Remark: In some cases the transfer can be interrupted, in this case close the connection (close) and renew the connection (connect).

Page 16

Digital Design Studio Basics II Glossary

Bandwidth How much stuff you can send through a connection. Usually measured in bits-per-second (bps.) A full page of English text is about 16,000 bits. A fast modem can move about 57,000 bits in one second. Full-motion full-screen video would require roughly 10,000,000 bits-per-second, depending on compression.

Blog -- (weB LOG) A blog is basically a journal that is available on the web. The activity of updating a blog is "blogging" and someone who keeps a blog is a "blogger." Blogs are typically updated daily using software that allows people with little or no technical background to update and maintain the blog. Postings on a blog are almost always arranged in chronological order with the most recent additions featured most prominently.

Browser A Client program (software) that is used to look at various kinds of Internet resources.

CGI -- (Common Gateway Interface) A set of rules that describe how a Web Server communicates with another piece of software on the same machine, and how the other piece of software (the ?CGI program?) talks to the web server. Any piece of software can be a CGI program if it handles input and output according to the CGI standard.

cgi-bin The most common name of a directory on a web server in which CGIprograms are stored.

Client A software program that is used to contact and obtain data from a Server software program on another computer, often across a great distance. EachClient program is designed to work with one or more specific kinds of Server programs, and each Server requires a specific kind of Client. A Web Browser is a specific kind of Client.

Cookie The most common meaning of "Cookie" on the Internet refers to a piece of information sent by a Web Server to a Web Browser that the Browser software is expected to save and to send back to the Server whenever the browser makes additional requests from the Server.

Depending on the type of Cookie used, and the Browsers' settings, the Browser may accept or not accept the Cookie, and may save the Cookie for either a short time or a long time.

Cookies might contain information such as login or registration information, online "shopping cart" information, user preferences, etc.

When a Server receives a request from a Browser that includes a Cookie, the Server is able to use the information stored in the Cookie. For example, the Server might customize what is sent back to the user, or keep a log of particular users' requests.

CSS -- (Cascading Style Sheet) A standard for specifying the appearance of text and other elements. CSS was developed for use with HTML in Web pages but is also used in other situations, notably in applications built using XPFE. CSS is typically used to provide a single "library" of styles that are used over and over throughout a large number of related documents, as in a web site. A CSS file might specify that all numbered lists are to appear in italics. By changing that single specification the look of a large number of documents can be easily changed.

DNS -- (Domain Name System) The Domain Name System is the system that translates Internet domain names into IP numbers. A "DNS Server" is a server that performs this kind of translation.

Domain Name The unique name that identifies an Internet site. Domain Names always have 2 or more parts, separated by dots. The part on the left is the most specific, and the part on the right is the most

Page 17

general. A given machine may have more than one Domain Name but a given Domain Name points to only one machine. For example, the domain names: matisse.net mail.matisse.net workshop.matisse.net can all refer to the same machine, but each domain name can refer to no more than one machine.

Usually, all of the machines on a given Network will have the same thing as the right-hand portion of their Domain Names (matisse.net in the examples above). It is also possible for a Domain Name to exist but not be connected to an actual machine. This is often done so that a group or business can have an Internet e-mail address without having to establish a real Internet site. In these cases, some real Internet machine must handle the mail on behalf of the listed Domain Name.

Download Transferring data (usually a file) from a another computer to the computer you are are using. The opposite of upload.

FTP -- (File Transfer Protocol) A very common method of moving files between two Internet sites.

FTP is a way to login to another Internet site for the purposes of retrieving and/or sending files. There are many Internet sites that have established publicly accessible repositories of material that can be obtained using FTP, by logging in using the account name "anonymous", thus these sites are called "anonymous ftp servers".

FTP was invented and in wide use long before the advent of the World Wide Web and originally was always used from a text-only interface.

GIF -- (Graphic Interchange Format) A common format for image files, especially suitable for images containing large areas of the same color. GIF format files of simple images are often smaller than the same file would be if stored in JPEG format, but GIF format does not store photographic images as well as JPEG.

Gigabyte 1000 or 1024 Megabytes, depending on who is measuring.

hit As used in reference to the World Wide Web, ?hit? means a single request from a web browser for a single item from a web server; thus in order for a web browser to display a page that contains 3 graphics, 4 ?hits? would occur at the server: 1 for the HTML page, and one for each of the 3 graphics.

Home Page (or Homepage) Several meanings. Originally, the web page that your browser is set to use when it starts up. The more common meaning refers to the main web page for a business, organization, person or simply the main page out of a collection of web pages, e.g. "Check out so-and-so's new Home Page."

Host Any computer on a network that is a repository for services available to other computers on the network. It is quite common to have one host machine provide several services, such as SMTP (email) and HTTP (web).

Hypertext Generally, any text that contains links to other documents - words or phrases in the document that can be chosen by a reader and which cause another document to be retrieved and displayed.

IP Number -- (Internet Protocol Number) Sometimes called a dotted quad. A unique number consisting of 4 parts separated by dots, e.g. 165.113.245.2 Every machine that is on the Internet has a unique IP number - if a machine does not have an IP number, it is not really on the Internet. Many machines (especially servers) also have one or more Domain Names that are easier for people to remember.

Page 18

ISP -- (Internet Service Provider) An institution that provides access to the Internet in some form, usually for money.

JavaScript JavaScript is a programming language that is mostly used in web pages, usually to add features that make the web page more interactive. When JavaScript is included in an HTML file it relies upon the browser to interpret the JavaScript. When JavaScript is combined with Cascading Style Sheets(CSS), and later versions of HTML (4.0 and later) the result is often called DHTML.

JPEG -- (Joint Photographic Experts Group) JPEG is most commonly mentioned as a format for image files. JPEG format is preferred to the GIF format for photographic images as opposed to line art or simple logo art.

Meta Tag A specific kind of HTML tag that contains information not normally displayed to the user. Meta tags contan information about the page itself, hence the name ("meta" means "about this subject")

Typical uses of Meta tags are to include information for search engines to help them better categorize a page.

You can see the Meta tags in a page if you view the pages' source code.

PHP -- (PHP: Hypertext Preprocessor) PHP is a programming language used almost exclusively for creating software that is part of a web site. The PHP language is designed to be intermingled with the HTML that is used to create web pages. Unlike HTML, the PHP code is read and processed by the web server software (HTML is read and processed by the web browser software.)

PNG -- (Portable Network Graphics) PNG is a graphics format specifically designed for use on the World Wide Web. PNG enable compression of images without any loss of quality, including high-resolution images. Another important feature of PNG is that anyone may create software that works with PNG images without paying any fees - the PNG standard is free of any licensing costs.

Proxy Server A Proxy Server sits in between a Client and the "real" Server that a Client is trying to use. Client's are sometimes configured to use a Proxy Server, usually an HTTP server. The clients makes all of it's requests from the Proxy Server, which then makes requests from the "real" server and passes the result back to the Client. Sometimes the Proxy server will store the results and give a stored result instead of making a new one (to reduce use of a Network). Proxy servers are commonly established on Local Area Networks

RSS -- (Rich Site Summary or RDF Site Summary or Real Simple Syndication) A commonly used protocol for syndication and sharing of content, originally developed to facilitate the syndication of news articles, now widely used to share the contents of blogs. Mashups are often made using RSS feeds. RSS is an XML-based summary of a web site, usually used for syndication and other kinds of content-sharing. There are RSS "feeds" which are sources of RSS information about web sites, and RSS "readers" which read RSS feeds and display their content to users. RSS is being overtaken by a newer, more complex protocol called Atom.

Search Engine A (usually web-based) system for searching the information available on the Web.

Some search engines work by automatically searching the contents of other systems and creating a database of the results. Other search engines contains only material manually approved for inclusion in a database, and some combine the two approaches.

Upload Transferring data (usually a file) from the computer you are using to another computer. The opposite of download.