Get Your Website Off the Ground

Get Your Website
Off the Ground
Athena Center Leadership Lab
March 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 Locator
aka 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

 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:
Domain
 http://mobile.etsy.com

Subdomain
Top Level Domain
(TLD)

Top Level Domains (TLD)

 Common Top Level Domains:
 .com
 .net
 .org
 .edu
 .gov

 If possible,always get a .com domain

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

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

Domain Email Addresses

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

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

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!)
I’m so lonely...
I wish someone
would look at my
 A server is just a computer! site...

 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

Web Server (Jargon Alert!)

 Web Servers are a combination of:
 A computer (the server)
 Softwarethat 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.

Client vs. Server

Images by Icons Land, Social Peel, and HP

When You Visit a Website

You want to view Etsy’s
website, so I’ll pass you
back the HTML file that
Etsy’s describes it! Your computer
Web Server & web
browser

index.html
index.html

IP DNS:
Address:123.1 Domain Name Server
.2.123

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
Show me
www.Etsy.com
www.Etsy.com ?
Right now, that means
123.1.2.123

What does 123.1.2.123
mean?
What does it point to?

DNS:
Domain Name Server

Kinds of Website Hosting

 Shared Hosting
 Dedicated Server
 Virtual Private Server

Image by MyDocs

Shared Web Hosting

 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)

Image by MyDocs

Dedicated Web Hosting

 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

Image by MyDocs

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

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_pan
el

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.

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 PRESENTATION
index.html style.css

HTML + CSS + Code =
A Dynamic Website
CONTENT PRESENTATION BEHAVIOR

index.html style.css validate.js
talkToDB.rb

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.

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.

Google Analytics Code

 What the Google Analytics code snippet will look like:
<scripttype="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>

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)

Google Analytics Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>Hello World!</title>
</head>
<body>
<h1>My first website!</h1> Place Google

Analytics code
</body>
</html> here!
Right before the </body>

Questions?

Vanessa Hurst
vanessa@girldevelopit.com

Get Your Website Off the Ground

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Destaque

Destaque (11)

Semelhante a Get Your Website Off the Ground

Semelhante a Get Your Website Off the Ground (20)

Último

Último (20)

Get Your Website Off the Ground