Get Your Website Off the Ground


Published on

This two-hour workshop will teach, in plain English and with visual examples, how to turn your idea into reality by creating something great on the web. We will cover how to register a domain name, find a hosting provider, how to administer, add content, and develop an easy-to-use site, and how to set up Google Analytics to get key information about your visitors. You’ll also learn what a Content Management System (CMS) like Wordpress or Drupal can do, and some basics about optimizing your site so that more visitors will find it.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Get Your Website Off the Ground

  1. 1. Get Your Website Off the Ground Athena Center Leadership Lab March 3, 2012 Vanessa Hurst @DBNess
  2. 2. 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
  3. 3. 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)  Content (Specific Resource)  
  4. 4. Domain Registration
  5. 5. Domain Registration The process of claiming / reserving a domainname. Lasts for one year, then you must renew thedomain if you want to keep it. Should cost ~$10/year.
  6. 6. URL = subdomain.domain.tld There are several parts to every URL: Domain  Subdomain Top Level Domain (TLD)
  7. 7. Top Level Domains (TLD) Common Top Level Domains:  .com  .net  .org  .edu  .gov If possible,always get a .com domain
  8. 8. Domain Search
  9. 9. Domain Search - Results
  10. 10. Country Code TLDs Each country has a top level domain. Each country has its own requirements and fees forregistering 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)
  11. 11. .ly Libyan Domain Registration
  12. 12. Domain Registrars Lots of choices:      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
  13. 13. Leveraging Free Platforms
  14. 14. Free Sites as Hosts Instead of paying a hosting provider to host your domain, you can leverage a service like  Tumblr  Blogger  Posterous apps
  15. 15. Using Your Domain
  16. 16. Domain Email Addresses
  17. 17. 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
  18. 18. Web Hosting
  19. 19. 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
  20. 20. 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
  21. 21. 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 tothe client who requested it It serves you content,directions, etc.
  22. 22. Client vs. Server Images by Icons Land, Social Peel, and HP
  23. 23. When You Visit a Website You want to view Etsy’s website, so I’ll pass you back the HTML file thatEtsy’s describes it! Your computerWeb Server & web browser index.html index.html IP DNS: Address:123.1 Domain Name Server .2.123
  24. 24. The Domain Name System DNS = Domain Name System  DNS is like a phone book.  It takes a domain ( and looks up the IP address for that domain.  The IP address is the unique identifier for the server that hosts your website.
  25. 25. 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
  26. 26. DNS gives us an Address Show me ? Right now, that means does does it point to? DNS: Domain Name Server
  27. 27. When You Visit a Website You want to view Etsy’s website, so I’ll pass you back the HTML file thatEtsy’s describes it! Your computerWeb Server & web browser index.html index.html IP DNS: Address:123.1 Domain Name Server .2.123
  28. 28. Kinds of Website Hosting Shared Hosting Dedicated Server Virtual Private Server Image by MyDocs
  29. 29. Shared Web Hosting Shared Hosting is whenmultiple sites live on the sameweb server. Each site has its own separatespace on the server. Sites share the server’s CPUand memory Cheapest option for hosting(~$9/month) Image by MyDocs
  30. 30. Dedicated Web Hosting A dedicated server is aserver that is ONLY for you You do not share the spacewith any other customers You get to utilize the fullCPU and memory from thecomputer just for your site Most expensive option(~$99/month) Image by MyDocs
  31. 31. Virtual Private Server A Virtual Private Server is a mix of shared hosting anddedicated 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, nomore sharing resources Price depends on how much memory you want to use Image by MyDocs
  32. 32. 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
  33. 33. Web Hosting Companies DreamHost A Small Orange Liquid Web Blue Host
  34. 34. Avoid this guy (GoDaddy)
  35. 35. Site Administration
  36. 36. 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
  37. 37. Control Panels Some companies have their own custom control panel Some have standard panels: cPanel Webmin Open Panel el
  38. 38. Admin on Dreamhost
  39. 39. Admin on cPanelDemo:
  40. 40. Content Management Systems
  41. 41. 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
  42. 42. Open Source Open Source Softwarelets you see the exact code it uses to run FOSS = Free & Open Source Softwarelets you see the code and use it for free
  43. 43. 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.
  44. 44. WordPress
  45. 45. Drupal
  46. 46. 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
  47. 47. Dreamhost One Click Installs Install WordPress, Drupal, etc. without looking at code
  48. 48. 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.
  49. 49. Creating Content: HTML & CSS
  50. 50. HTML + CSS + ? = A Website Websites are often composed of other kinds of files inaddition to HTML and CSS. Some common ones are:  JavaScript files (file.js)  Ruby files (file.rb) JavaScript and Ruby are both programming languagesthat let you define the behavior of a website.
  51. 51. Content, Presentation, Behavior JavaScript or Ruby files contain code that let you dothings like: Validate a form (“you didn’t enter a password!”) Save data in a database (“Thanks for creating your newaccount!”)
  52. 52. HTML + CSS = A Website CONTENT PRESENTATION index.html style.css
  53. 53. HTML + CSS + Code = A Dynamic WebsiteCONTENT PRESENTATION BEHAVIORindex.html style.css validate.js talkToDB.rb
  54. 54. 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”
  55. 55. 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
  56. 56. What does HTML look like?<html><body> <h1>My First Heading</h1> <p>My first paragraph.</p></body></html>
  57. 57. 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
  58. 58. Where can I learn HTML? Athena “How to Build a Website” (includes video courses)  With, if you want to learn and play around, you don’t need a website, you can use their online tools to learn.
  59. 59. 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 yetanother protocol, FTP: File Transfer Protocol. It is used in applications like Filezilla to upload lots of filesin bulk. It requires a username, password, and server address.
  60. 60. Web based FTP
  61. 61. Getting files onto a web server
  62. 62. I have a website! Now what?
  63. 63. AnalyticsLearn about your users
  64. 64. What is Google Analytics? Google analytics is JavaScript code that allows you toobtain information about your website’s visitors.
  65. 65. 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); var s =document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); })(); </script>
  66. 66. Placement of Analytics Code You have two choices of where you insert the snippet ofJavaScript code that Google provides you: In what is called the <head>section in your HTML Right before the closing </body>tag in your HTML
  67. 67. Google Analytics Placement We recommend placing the Google analytics snippetright 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 loadweb pages
  68. 68. How Browsers Load Pages Browsers load pages by executing the HTML, CSS andJavaScript code included in the website It starts at the top of the file and loads each line oneby one If you have your Google Analytics code at the top, it’llrun that code before loading the content of your page(your links, images and text)
  69. 69. Google Analytics Code<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"""><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<!-- OPTION 2 --> Analytics code</body></html> here! Right before the </body>
  70. 70. Questions? Vanessa