Get Your Website Off the Ground

Athena Center Leadership LabMarch 3, 2012

Vanessa Hurst@DBNess

Why We’re Here

Plain English

Visual examples

Register a domain name

Find a hosting provider

Administer, add content, and develop an easy-to-use site

Set up Google Analytics to get key information about your visitors

What Content Management System (CMS) can do

What really makes a website?

Every single webpage has a URL

URL = Uniform Resource Locatoraka Standard Directions to Locate This Page on the Internet

URL includes Domain + Content

Domain (Location) http://www.google.com

Content (Specific Resource) http://www.google.com/analytics http://www.myblog.com/i-love-websites

Domain Registration

Domain Registration

The process of claiming / reserving a domain name.

Lasts for one year, then you must renew the domain if you want to keep it.

Should cost ~$10/year.

URL = subdomain.domain.tld

There are several parts to every URL:

http://mobile.etsy.com

Domain

Top Level Domain (TLD)

Subdomain

Top Level Domains (TLD)

Common Top Level Domains: .com

.net

.org

.edu

.gov

If possible, always get a .com domain

Domain Search

Domain Search - Results

Country Code TLDs

Each country has a top level domain.

Each country has its own requirements and fees for registering a

site using their TLD.

You may need to reside in the country

Some popular TLDs that are country codes:

.ly (Libya)

.me (Montenegro)

.us (United States)

.ly Libyan Domain Registration

Domain Registrars

Lots of choices: nearlyfreespeech.net domain.com register.com dreamhost.com networksolutions.com

It’s easiest to register the domain with the same company you use to host, but you can change your host and keep your domain

Leveraging Free Platforms

Free Sites as Hosts

Instead of paying a hosting provider to host your domain, you can leverage a service like

Tumblr Blogger Posterous

http://lifehacker.com/331865/host-your-domain-with-free-apps

Using Your Domain

http://www.google.com/a/cpanel/domain

Domain Email Addresses

Three Main Website Controls

Domain Registrar Rents you your domain ($/yr)

Tells the rest of the world you are in charge of the domain

Web Host Puts your website on their web servers

Email Provider Handles only Email traffic your domain

Uses MX (mail exchanger) Records to point from your domain to your email

provider

Web Hosting

A Home for your Website

Once you’ve secured the domain, you need a way to make it

available for others to see!

You need someone to host your domain in order to use a domain

you’ve registered

A hosting service provides you with a web server

The web server is what actually makes your website viewable from any

browser, on any network, anywhere

Servers (Jargon Alert!)

A server is just a computer!

A server is a computer that

sits around waiting for you to call

Servers run special web server software

so they can understand what you ask for

and return information back to you

I’m so lonely...I wish someone

would look at my site...

Web Servers are a combination of:

A computer (the server)

Software that knows how to handle website

requests

The job of a web server is to pass a website

back to the client who requested it

It serves you content,

directions, etc.

Web Server (Jargon Alert!)

Client vs. Server

Images by Icons Land, Social Peel, and HP

When You Visit a Website

Etsy’sWeb Server

DNS:Domain Name Server

IP Address:123.1.2.123

You want to view Etsy’s website, so I’ll pass you back the HTML file that

describes it!

index.htmlindex.html

Your computer & web browser

The Domain Name System

DNS = Domain Name System DNS is like a phone book. It takes a domain (etsy.com) and looks up the

IP address for that domain. The IP address is the unique identifier for the

server that hosts your website.

Domain Registrar vs. Domain Name System

Domain Registrar Tracks who controls the domain (you)

Domain Name System DNS Servers track where a domain should point at

any time Acts as a global phone book for domains to specific

servers websites live on

DNS gives us an Address

DNS:Domain Name Server

www.Etsy.com ?

Right now, that means 123.1.2.123

Show me www.Etsy.com

What does 123.1.2.123 mean?What does it point to?

When You Visit a Website

Etsy’sWeb Server

DNS:Domain Name Server

IP Address:123.1.2.123

You want to view Etsy’s website, so I’ll pass you back the HTML file that

describes it!

index.htmlindex.html

Your computer & web browser

Image by MyDocs

Kinds of Website Hosting

Shared Hosting

Dedicated Server

Virtual Private Server

Shared Web Hosting

Image by MyDocs

Shared Hosting is when multiple

sites live on the same web server.

Each site has its own separate

space on the server.

Sites share the server’s CPU and

memory

Cheapest option for hosting

(~$9/month)

Dedicated Web Hosting

Image by MyDocs

A dedicated server is a server

that is ONLY for you

You do not share the space with

any other customers

You get to utilize the full CPU

and memory from the computer

just for your site

Most expensive option

(~$99/month)

Image by MyDocs

Virtual Private Server

A Virtual Private Server is a mix of shared hosting and dedicated

hosting

You still share space on a server

But your space is separated into a “virtual server”

You get your own dedicated piece of memory and CPU, no more

sharing resources

Price depends on how much memory you want to use

Things To Look For in a Host

Don’t get charged per email address

Hosts should have Backup options

Even better, automatic routine backups for your database and

your files

Hosts may only support specific languages and databases

Ease of scale if you’re building an application

Cloud providers like Amazon EC2, Heroku have sliding scale

pricing plans

Web Hosting Companies

DreamHost dreamhost.com

A Small Orange asmallorange.com

Liquid Web liquidweb.com

Blue Host bluehost.com

Avoid this guy (GoDaddy)

Site Administration

Site Admin

Once you have registered a domain and purchased web hosting, you’ll need

to learn you to administer your site:

Adding and configuring email accounts

Managing databases

View details of % space you’ve used

Install CMS software like WordPress

This is typically done from a web-based Control Panel that is provided by

your hosting company

Control Panels

Some companies have their own custom control panel

Some have standard panels:

cPanel

Webmin

Open Panel

http://en.wikipedia.org/wiki/

Web_hosting_control_panel

Admin on Dreamhost

Admin on cPanel

Demo:http://www.cpanel.net/products/cpanelwhm/try-demo.html

Content Management Systems

Content Management Systems

Instead of writing the HTML and CSS from scratch, you could use a Content Management System (CMS)

CMSes allow users to create, edit, and administer content without significant technical knowledge

Open Source

Open Source Software

lets you see the exact code it uses to run

FOSS = Free & Open Source Software

lets you see the code and use it for free

CMS

The most popular CMSes, all mentioned on the previous page,

are Wordpress, Drupal and Joomla!

Wordpress is most commonly used for blogs, though it can also be

used for a more general-purpose website.

Drupal and Joomla! are used for general-purpose sites.

All three of these CMSes are written in the PHP programming

language.

WordPress

Drupal

Installing WordPress on cPanel

cPanel on certain hosting companies has a feature

called “Fantastico” that allows you to install software

easily

Software / Services section of cPanel’s main menu

Dreamhost One Click Installs

Install WordPress, Drupal, etc. without looking at code

Redirecting a Domain

Sometimes it’s useful to redirect one URL to another Maybe you have registered two domains, but you want them

both to point to the same site.

Creating Content: HTML & CSS

HTML + CSS + ? = A Website

Websites are often composed of other kinds of files in

addition to HTML and CSS.

Some common ones are: JavaScript files (file.js)

Ruby files (file.rb)

JavaScript and Ruby are both programming languages that

let you define the behavior of a website.

Content, Presentation, Behavior

JavaScript or Ruby files contain code that let you do

things like:

Validate a form (“you didn’t enter a password!”)

Save data in a database (“Thanks for creating your

new account!”)

HTML + CSS = A Website

CONTENT PRESENTATIONindex.html style.css

HTML + CSS + Code =A Dynamic Website

CONTENT PRESENTATION

index.html

BEHAVIOR

validate.jstalkToDB.rb

style.css

What is HTML?

HTML tells our browsers how to layout the page.

It describes web pages using markup tags.

We usually just refer to HTML’s markup tags as

“HTML tags”

What does HTML look like?

Right-click on ANY website, and choose “View Source”

You can see the HTML and CSS of every single website

on the web!

HTML/CSS are open platforms

What does HTML look like?

<html>

<body><h1>My First Heading</h1><p>My first paragraph.</p>

</body>

</html>

HTML vs CSS

HTML defines the content and structure

This is a HEADING

This is a new bullet

CSS defines the formatting and style of the content

This text should be blue

This font should be Monaco

Where can I learn HTML?

Athena “How to Build a Website”

http://htmldog.com

http://code.google.com/edu/submissions/html-css-javascript/

(includes video courses)

http://www.w3schools.com

With w3schools.com, if you want to learn and play around, you

don’t need a website, you can use their online tools to learn.

FTP: Getting files onto a web server

How did the index.html file get to the web server?

Files are copied onto web servers over TCP/IP by using yet

another protocol, FTP: File Transfer Protocol.

It is used in applications like Filezilla to upload lots of files

in bulk.

It requires a username, password, and server address.

Web based FTP

Getting files onto a web server

I have a website! Now what?

Analytics

Learn about your users

What is Google Analytics?

Google analytics is JavaScript code that allows you to

obtain information about your website’s visitors.

What the Google Analytics code snippet will look like:<script type="text/javascript">

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24017494-1']); _gaq.push(['_trackPageview']);

(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

</script>

Google Analytics Code

Placement of Analytics Code

You have two choices of where you insert the snippet of

JavaScript code that Google provides you:

In what is called the <head> section in your HTML

Right before the closing </body> tag in your HTML

Google Analytics Placement

We recommend placing the Google analytics

snippet right before the closing </body> tag in your

HTML

This placement makes your page load slightly faster

Why it loads faster has to do with how browsers

load web pages

How Browsers Load Pages

Browsers load pages by executing the HTML, CSS

and JavaScript code included in the website

It starts at the top of the file and loads each line

one by one

If you have your Google Analytics code at the top,

it’ll run that code before loading the content of your page

(your links, images and text)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Hello World!</title>

</head><body>

<h1>My first website!</h1><!-- OPTION 2 -->

</body></html>

Place Google Analytics code here!

Right before the </body>

Google Analytics Code

Questions?

Vanessa Hurstvanessa@girldevelopit.com