Website Development Mini-seminar

(1)

Website Development Mini-seminar

Fremont Adult School

January 31, 2014

Fremont Chamber of Commerce:

Career & Community Resource Fair

(2)

(3)

(4)

Region

• Alameda

• Central Coast

• Contra Costa

• Humboldt

(lead)

• Livermore

• Napa

• Marin

• Mendocino

• North Coast

• San Francisco

• San Mateo

• Silicon Valley

• Sonoma

(5)

(6)

Free & Low cost

Seminars

Our Services

Free One-on-One

Consulting

(7)

ACSBDC Consultants

David Bokash

Supply Chain Management, Application Software & Internet

Ed Duarte Contractors Bob Lane Certifications Don Stoneham Paula Mattisonsierra Retail/Marketing Carolyn Johnson Biz Plan/Finance Ron Barrett Loan Specialist Gerry Baranano Technology Deagon Williams Dorian Webb Dave Mitroff eMarketing

(8)

How to register for services

www.acsbdc.org

Lee Lambert Client Intake

(9)

Seminars

Access to Capital

Starting a Business

Marketing for the Holidays

Marketing for Artists

Basic Bookkeeping & QuickBooks

Social Media

Building An Effective Web Presence

And more…

(10)

Technology Initiative

o

Focuses on qualified technology

companies

o

Assists with the commercialization

of technology and preparing for

fund raising

o

No fees for its services and takes

no ownership interest

o

Goal is to help technology

(11)

(12)

Please complete the Evaluation Form!

(At the end of the Seminar)

(13)

Instructions for counseling sign-up

& presentation download

(14)

David Bokash

–

Business Advisor, Alameda County SBDC

–

Business consultant for Supply Chain Management, application software and Internet projects

Prior Experience

–

IT Project Manager/Consultant for application implementations and Supply Chain Strategy Projects

–

Product Manager, CRM and SRM Applications, SAP Labs

–

Field Engineer, FedEx Express

–

IT Project Manager, FedEx Logistics & Electronic Commerce

–

Sr. Consultant, Price Waterhouse Strategic Consulting Group Education

–

Honors Certificate, Project Management, UC Santa Cruz

–

MBA, Harvard University

–

BS & MS Engineering, Purdue University

(15)

Website Development Mini-seminar

Fremont Adult School

January 31, 2014

Fremont Chamber of Commerce:

Career & Community Resource Fair

(16)

Agenda

1. Website Advantages for Businesses

2. Understanding the Internet and the World Wide Web

3. Domain Registration and Website Hosting &

Development

4. Website Design & Development

5. Website Security, Monitoring & Performance

Assessment

6. Website Content & Navigation

7. Search Engine Optimization (SEO)

8. Practical Examples

(17)

(18)

What does a Website Do?

What functionality can a Website provide?

What is the role of a Website in Internet

Marketing?

(19)

E-Marketing

E-Commerce

E-Sales

Website Functional Roles

“Websites provide Sales, Marketing & Service

Functionality!”

(20)

Website Role in Online Marketing

SEO

Website

Keyword Advertising Audience Audience Social Media Audience Audience Newsletters

“A Website is the Center of every Online

Marketing Campaign!”

(21)

Advantages of a Business Web Presence

Website Marketing Roles

Tool to advertise and promote Your Business

Forum to display Your Products and Services

Platform that enables Current Customers to easily refer

their Friends and Family

Channel to publish an Online Newsletter

“A Website provides every business the opportunity to

reach billions of people within a global marketplace!”

(22)

2. Understanding the Internet and the

World Wide Web

(23)

The term Internet refers to the combined

collection of academic, commercial, and

government networks connected over

international telecommunication backbones

and routed using IP addressing.

Internet versus World Wide Web

The World Wide Web (abbreviated

WWW) and commonly known as

The Web, is a system of interlinked

hypertext documents contained on

the Internet. With a web browser,

one can view web pages and

(24)

A website (also spelled Web site) is a collection of

related pages, images, videos or other digital assets

that are addressed relative to a common Uniform

Resource Locator (URL), often consisting of only the

domain name, or the IP address, and the root path ('/')

in an Internet Protocol.*

(i.e., http://acsbdc.org)

Typical Internet Protocol (IP) Address:

209.126.000.012 *Source:

www.en.wikipedia.org

(25)

A website must be accessed via a web browser

(26)

Common Web Browsers

• Firefox

• Internet Explorer (IE)

• Google Chrome

• Safari* - Macintosh Specific

• Opera

• Netscape – First Commercial

Browser

(27)

Typical Web Browser Elements

• A History List, showing Websites/Web Pages previously

visited in a list (typically, the list is not visible all the time and

has to be summoned)

• A Refresh/Reload Button to reload the current Web Page

• A Stop Button to cancel loading the resource. In some

browsers, the stop button is merged with the reload button

• A Home Button to return to the user's home page

• An Address Bar to input the Uniform Resource Locator (URL)

• A Search Bar to input terms into a search engine

• A Status Bar to display progress in loading the resource

• Most browsers also possess incremental find features to

(28)

HTTP

-

Hypertext Transport Protocol

HTML

-

Hypertext Markup Language

PHP

-

Hypertext Pre

-

Processor

(because “HPP” doesn’t sound as good :)

SEO

-

Search Engine Optimization

URL

-

Uniform Resource Locator

GUI

-

Graphic User Interface

FTP

-

File Transfer Protocol

www

-

World Wide Web

MYSQL

–

Database Language (

“

My

-

Ess

-

Cue

-

El

”

)

(29)

Other Common Acronyms associated with Website Design

and the Internet:

–

CSS: Cascading Style Sheets

–

IP (Address): Internet Protocol (Address)

–

TCP: Transmission Control Protocol

–

SQL (pronounced “Sequel”): Structured Query Language

–

URL: Uniform Resource Locator

–

ISP: Internet Services Provider (often same as Website

Host)

(30)

3. Domain Registration and Website

Hosting & Development

(31)

Every Website's Basic Requirements

Three separate entities

control the ability to

publish a Website on the

Internet, they are:

•

Domain Name Registrar

•

A Website Host

•

Website Designer Domain Name Server/Platform Content, Layout & Images

(32)

Domain Name Registrar

The Domain Registrar plays an important and

recurring role

Domain Name and Extensions:

• In order to have a Website, you must first rent a

Domain Name (URL) from a Domain Registrar

• Domain Names and Extensions are maintained

through the organizing body of the Internet

Corporation for Assigned Names and Numbers

(ICANN) which sets policy and procedures

worldwide

(33)

Domain Registration/Renewal Cycle

Domain Registration (1 – 10 year term)

Expiration _{Grace Period}

(1 – 45 days) Redemption Period (~30 days) Pending Delete (5 days) Domain Available (to the public & Domain Squatters)

Domain Blocked

Domain can be Renewed

(34)

Note: Several U.S. Accredited Registrars logos are shown for informational purposes only and is not inclusive of all accredited registrars in the United States (or abroad).

(35)

A hosting company is the place that publishes

your website on the world wide web. Besides

hosting the website, the role of the web host

includes the following services:

Email Accounts

File Transfer Protocol (FTP)

Allotted Bandwidth

Secure Socket Layer (SSL)

Administrative Panel

(36)

Hosting: Server Platform Options

There are different types of hosting server

platforms. The best option depends on the type

of website you wish to host:

Shared Hosting – Multiple websites are hosted on one web server

Dedicated Hosting – One website on one web server Virtual Private Server – VPS solution is a form of web hosting that displays a virtualization of a server being split into several “virtual” servers

(37)

Web Design & Development

A Web Designer is an individual or company who creates a

website. Depending upon a website’s complexity, it can take a few hours or several months to plan, write content and build graphics/multi-media, creating the desired look, feel and

functionality. Today due to the prevalence of “Do-it-yourself” Website Design applications, anyone can create a website and can therefore be considered a Web Designer.

Website Design versus Development

The terms “Website Design” and “Website Development” are sometimes used interchangeably to describe the process for creating a Website. However, to most professionals

“Website Designer” general denotes someone with an

artistic skill set and training in graphic design. Whereas a “Website Developer” generally refers to someone with

(38)

Web Development Options

There are literarily thousands of options for building (designing and developing) a Website. To get a

feeling for how many web development options exist, do an internet search on some of the following topics:

•

Free HTML Editor

•

Web Design Tutorials (HTML/CSS)

•

Free Blog Software

•

Free CSS Editor

•

CSS Optimization Software

Regardless of the development application chosen, each tool will provide basic website building

functionality, including the formatting and display of content and images as a Web Page. Each tool also organizes the individual pages into a system of

interlinked hypertext documents, which is a Website.

(39)

(40)

Web Design & Development Overview

There are four different Types of Websites:

•

Static Website “Brochure”

•

Dynamic Website “User Interaction -> Customized Content”

•

E-Commerce Website “Dynamic Website for E-Payments”

•

Content Management System (CMS) “Collaborative Development”

Web Development Application Categories:

•

What-You-See-Is-What-You-Get (WYSIWYG) Editor

•

Do It Yourself Applications “Online Web Builders”

•

Content Management System

Three (or Four) Website Development Options:

•

Do It Yourself (Online Web Builders)

•

Hire a Professional Website Developer (WYSIWYG or CMS Application)

(41)

Four Basic Types of Websites

Static Website

•

A Static Website is the simplest form of a website. It is sometimes described as an Online Brochure since the pages do not change unless modified by the website developer. This type of website is suitable only when

content updates are minor and infrequent.

•

EXAMPLES: Most small business websites

Dynamic Website

•

A Dynamic Website interacts with Website Users to provide content relevant to their needs. It utilizes server side scripting to provide interactivity on individual web pages. This type of website is needed when there is a variety of users with different needs or large stores of

information which need to be customized for each user.

•

EXAMPLES: The Weather Channel, Census Bureau Online Database

(42)

Four Basic Types of Websites

E-Commerce Website

•

An E-Commerce Website is a specialized

Dynamic Website which has functionality to

process financial transactions. This type of website is required when something is sold or rented

through the website.

•

EXAMPLES: Amazon, eBay

Content Management System (CMS)

•

A CMS is an application that allows for the maintenance and modification of websites in a

collaborative environment where two or more

people might be making changes at the same time. This type of website is required if modifications

are frequent and extensive, especially when

changes need to be done simultaneously (by more than one user).

•

EXAMPLES: The ACSBDC’s Drupal Website, any WordPress Website

(43)

What is a WYSIWYG?

A WYSIWYG

“What-You-See-Is-What-You-Get” editor is a Desktop

Web Design Tool that displays

content during editing which

appears similar to the final output.

Common WYSIWYG Applications

include: Adobe Dreamweaver,

Microsoft FrontPage and

(44)

Do It Yourself Web Design

Online web builders are designed for anyone with basic computer skills who wants to start building a website in a short period of time.

Most web builders come with several templates in different colors, banner backgrounds, and text styles. Some templates even allow you to use one of your own digital photos as a banner background.

(45)

Common Online Web Builders

http://www.google.com/apps/

www.pc-programs.info/yahoo-sitebuilder.html http://www.wix.com/

(46)

Hiring a Website Developer

Before hiring a Website Developer be sure to:

•

Get References from other business owners.

•

Check with the local Better Business Bureau.

•

Visit the vendors’ references and call their clients directly.

•

Sign a contract.

•

Avoid hiring friends and family!

•

Understand what programming language the site will be coded in.

•

Who is in charge of writing the copy for the website?

•

Who will purchase the pictures?

•

What are the deadlines?

•

Who owns the website when its complete?

(47)

Using Website Templates

•

Website Templates are ready-made web designs, which can be used as the basis for a fast and high-quality Website.

•

They are completely customizable, can be personalized with any content, and can be built-out to suit the needs of your business.

•

Website Templates can be purchased in HTML format or for any number of different development platforms, including proprietary development applications.

(48)

Content Management System (CMS)

WORDPRESS

DRUPAL

JOOMLA

A content management system (CMS) is a software application that allows publishing, editing and modifying of website content, as well as maintenance from a central interface. A CMS provides procedures to manage workflow in a collaborative environment, where many content creators can work

simultaneously on the same website. Websites built with a CMS allow non-technical users to make updates and manage their website with minimal training.

(49)

CMS Functionality

Business Intelligence

Collaboration

Multiple Portals

Internal Search

Security / Storage / Access

Multi-Media

Online Communication

(50)

Alameda County SBDC Website Help Content:

“Options for Building and Hosting a Website”

–

Overview:

http://acsbdc.org/technology-topics/website-hosting

–

Discusses approximate pricing and the functionality

available with each hosting/development option. Topics

Include:

•

Large Web Hosting (“Do it yourself Website Design”)

•

Local Web Hosting (“Using a smaller Hosting Company”)

•

Website Templates (“Using Premade Design Templates”)

•

Professional Design (“Hiring a Website Designer/Developer”)

(51)

The minimum cost associated with going

online: Do It Your Self Web Design

Domain Name Registration $10-35 Year

Host (Server)

$ 6-50 Month

Online Web Builder $10-79 Month

Marketing is also an important line item to

consider. What is your advertising budget?

The Web has a marketing tools within your

price range.

(52)

5. Website Security, Monitoring &

Performance Assessment

(53)

Secure Socket Layer (SSL) is a

security protocol developed by

Netscape Communications.

•

Encryption Protocols ensure that

Website/User Communication is completely secure

• SSL is required for processing E-Commerce Transactions

• SSL can also help protect user information (password, email, street address, etc.)

•Transport Layer Security (TSL) is the next generation security protocol

(54)

Malware, Hackers & Spam

Prepare for Malware and Hackers by:

•

Making regular backups of Website Content, Media and Files

•

Utilize Anti-virus and Anti-malware Applications

•

Deploy Authentication Software (e.g. VeriSign, iisPROTECT, etc.)

Reduce SPAM by:

•

Using Capcha,

•

Displaying email address as an image or in plain text {e.g. David (at) Website}

•

Avoiding promotional opt-ins (every one could feed several email lists)

•

Paying for "Domain Privacy" with Domain Registration

(55)

Use a site monitoring tool

to report on site behaviors

and alert you when

problems arise.

(56)

Web Monitor: Google Webmaster Tools

Google Webmaster

Tools provides

Webmasters with

detailed information

about their Website's

visibility on Google. It

helps identify and

diagnose problems,

discover link and

query traffic and

share information.

Free Monitoring Tool: Google Webmaster Tools

(57)

Web Performance: Google Analytics

Google Analytics provides rich

insights into website traffic and marketing effectiveness

Provides data on the number of visitors, page views, etc. to gauge traffic and popularity trends Helps evaluate effectiveness of advertising

campaigns.

Free Performance Assessment Tool: Google Analytics

(58)

(59)

Controlling the Navigation

REMEMBER: People can enter a

Website through any page, not

just the homepage

Bear in mind what people expect from good website navigation: primary navigation (most important links, categories etc), secondary navigation (secondary links, subcategories etc), location of navigation bar, link titles, number of links per page etc.

Keep in mind the “fewer clicks

→

better website" concept when designing website navigation.

(60)

• Rule Number One:

“Evaluate Everything from Customer’s Perspective” Consider what your customer (the Website user) wants and needs, and any suggestion, tip or guideline needs to be evaluated in this context

• User Psychology

First Visit: “Have just a few seconds to make a good impression!”

•

The page must load quickly, and the user should be presented with

information that can be scanned quickly (e.g. bullet points not paragraphs).

•

Graphics and animations should be used sparingly

•

Landing Page must be relevant to the advertisement that they just clicked, not your homepage or a generalized welcome page

Regular User: “The focus now needs to be on getting the user what they want as quickly as possible!”

•

A logically organized website hierarchy is critical

•

Navigation elements need to be consistent across the entire Website so that the targeted page can be reached with a minimum of effort and thought

•

Complicated user scenarios should be timed with a stopwatch to be sure that you are not testing the patience of your users

(61)

Website Design Tools

WHY: Manage Complex Designs & Evaluate Alternatives

1.

Complicated or non-standard User Functionality

2.

Visualize Page Layout before the Website is built

3.

Specify hierarchical organization of the Web pages for large/complex Websites

HOW: Three Primary Website Design Tools

1.

Document Transactional Scenarios or “User Functionality” (e.g.

buying, selling, creating a listing, etc.) with Process Flow Diagrams

2.

Use Wireframe Diagrams to illustrate the layout of individual pages

3.

A Site Map will list all Website pages and specify their hierarchical organization

(62)

Website Site Map

Site diagrams are used to

plan the broad scope of a

site and details of where

each piece of content,

navigation, or interactive

functionality will appear.

The Site Map identifies

and lists all of the pages

in the Website, shows the

organizational hierarchy

of these pages and

specifies user navigation

throughout the Website.

(63)

Webpage Wireframe Diagrams

A Wireframe Diagram

illustrates the layout

of content on a web

page. It identifies the

layout, navigation and

functionality of each

key web page.

(64)

Process Flow Diagrams

The functional processes

of a Website (such as

buying, selling, or

creating a listing) can be

documented via process

flow diagrams which

specify the sequence of

steps in addition to

identifying decision points

and criteria.

(65)

Website Legal Compliance Content

Depending on the nature and purpose of the Website,

regulatory and legal compliance issues may necessitate

the inclusion of certain disclaimers or statements of use,

including:

• Terms of Use (Registered and Unregistered Users)

• Privacy Policy (User Data Collected)

• Disclaimers: Forums, Email

• Opt-in / Opt-Out

(66)

Content Is King!

Web content is the

textual, visual or audio

content that is

encountered as part of the

user experience on

(67)

•

Customer Analysis

Customer Analysis Overview: http://acsbdc.org/business-topics/customer-analysis

Before developing content for your Website, conduct a customer analysis: customer buying criteria, customer behavior analysis and customer

demographics

The customer buying criteria and behavior analysis can be used to formulate the language (i.e. “The Sales Pitch”) appropriate for your Website Content.

The customer demographics can then be used to identify superior marketing channels for the internet marketing campaign

Marketing Channels

Customer Demographics Behavior Analysis

Customer Analysis

Buying Criteria

Website Content: “What do we say?”

(68)

(69)

Optimize Your Website!

Search Engine Optimization (SEO) is the

process of improving the visibility of a

website or a web page.

SEO may target different kinds of search,

including image search, local search, video

search and industry-specific vertical search

engines.*

(70)

Search Engine Optimization

Alameda County SBDC Website Help Content: “Search

Engine Optimization”

SEO Overview: http://acsbdc.org/technology-topics/seo

TOPICS INCLUDE:

•

How Search Engines Work

•

Techniques for Optimizing Websites

•

Keyword Density SEO

•

"Free" Website Optimization Tools

(71)

Search Engine Optimization Tactics

The Search Engine Optimization (SEO) tactics

which most Webmasters should consider

implementing (listed in order of the easiest to

implement) are:

1. (Web) Page Titles and Page Descriptions

2. Image Names and ALT Descriptions for Images

3. Text-based Content and Links (instead of rich media)

4. Keywords in Domain Name and Page Links

5. Keyword Density of (Web) Page Content

6. High Quality/Unique/Fresh Content

(72)

Website Page Titles

RULE: Website Page Titles should be 70 characters or fewer:

Homepage Title from Invoice Factoring Website:

http://b2bfundingnow.com/

BEFORE: “B2B Funding Now — Find The Hidden Cash In Your

Business!”

{56 characters}

AFTER: “

B2B Funding Now | Factoring Solutions release Hidden

Business Cash!

”

{67 characters}

(73)

Website Page Description

RULE: Website Page Descriptions should be 160 characters

or shorter:

Homepage Page Description from Invoice Factoring Website:

http://b2bfundingnow.com/

BEFORE: “Find the hidden cash in your business with factoring cash flow solutions! B2B Funding Now provides alternate business financing

including invoice factoring, accounts receivable funding, P. O. funding, and more! Located in Oakland, CA they provide financing services nationwide.” {277 characters}

AFTER: “B2B Funding Now in Oakland provides factoring cash flow solutions (invoice factoring, accounts receivable and P. O. funding, etc.) in California and nationwide! ” {160 characters}

(74)

Image Names and Descriptions

New Alt Description New File Name Alt Description Current File Name

Turn Outstanding Invoices Into Cash!

Blue-Dollars.jpg

NONE

blue_money_wide _74.jpg

Can’t get a loan? Invoice Factoring turns outstanding invoices into cash.

Invoice- Factoring-Explained.jpg What Is Invoice Factoring? DIS-Invoice-Factoring1.jpg

If your business needs working capital then it’s time to consider the benefits of factoring invoices. OK Benefits of Factoring Invoices Factoring-Benefits.jpg

Complete the Invoice Factoring Application and release the hidden cash in your business!

OK

Factoring Application

(75)

Monitor SEO Performance with Google Toolbar

Google Toolbar Available for IE and Firefox

o Provides Google+, Google

Translate and other functionality directly through your browser

o Download and follow the installation

instructions at:

http://toolbar.google.com

o RageRank tool provides measure of

Web Page Rank on Google (Scale 1-10)

(76)

(77)

Practical Examples -- Content

Website Hosting

(78)

(79)

Get Your Businesses Online (GYBO)

Start with Get Your Business Online: “Build free website”

(80)

Create Website Hosting Account

Create Google Account or Login to existing account Create Homestead Websites Account or Login to existing account

(81)

Websites Signup & Getting Started

Homestead Website Signup Confirmation

Homestead Getting Started with Websites

(82)

Websites Pick Design & Select Layout

Homestead: Pick Website Design

Homestead: Select Website Layout

(83)

Websites Customize Design

Homestead: Customize Website Design

Follow Steps 1 to 7

Homestead: Get

(84)

(85)

Tips: Choosing a Domain Name

1. Keep it as short as possible (easy to

remember & spell)

2. Avoid numbers & special characters (e.g.

hyphens)

3. **Pick *.com extension, if available**

(86)

Domain Registration: Keyword Research

Use Wordtracker Keyword Research SEO Tool:

http://www.wordtracker.com

(87)

Domain Name: Keyword Combinations

consulting

technology

business

c

b

consult

t

biz

consultant

tech

bus

Consulting

Technology

Business

(88)

Check Domain Availability

Check Domain: btconsult.com

Check all potential combinations

Check Domain:

bustechconsult.com

Select available domain or continue searching

(89)

Domain Registration Information

Domain Registration Search (whois):

http://www.whois-search.com/

(90)

Potential Domain Names

Available bustechnologyconsult.com

Available bustechnologyconsulting.com

Active Website: BusTech Consulting Group, LLC in Alexandria , VA Taken bustechconsulting.com Available businesstechnologyconsult.com Available businesstechconsult.com

Active Website: Business Tech Consulting in Toronto

Taken businesstechconsulting.com

Active Website: Business Technology

Taken businesstechnologyconsulting.com

“Simplest *.com that had elements of all three keywords”

Chosen!

bustechconsult.com

Redirects to consulting branch of English Telecom BT

Taken btconsulting.com

Held by Domain Reseller SEDO

Taken btconsult.com

Notes

Available?

(91)

Homestead Domain Registration

Homestead: Search & Select Domain Select Domain: bustechconsult.com Homestead: Enter Registration Information

(92)

Homestead Domain Registration

Homestead: Review Domain Selections

WARNING: “Choose Domain Privacy or Email and Phone

Number will be publicly displayed!”

Homestead: Domain Registration Finalized

(93)

Homestead Domain Registration Center

Domain Registration Center will show status of Registration:

(94)

(95)

Course Review

Domain names and registrars

Web hosting: find a home for your website

Activate Your Email Account – Use it

Explore the backend of your website

Monitor Statistics

Stay in Legal Compliance

Search Engine Optimization (SEO)

Practical Examples (Domain Registration,

Website Hosting, etc.)

(96)

Post-training Evaluation

(97)