OIM3690 - Web Technologies

contain

Publishing Your Website

Process of Publishing a Static Website

  1. Create pages locally
    1. Create .html files, images, styles, scripts folders
    2. Test and validate pages to ensure that they render correctly.
  2. Select a web hosting service.
  3. Register a domain name.
  4. Transfer and maintain pages to the web hosting service.
  5. Search engine optimization (SEO).

Prepare Your Web Pages

Test and Validate Pages

  • Use HTML validator and CSS validator
  • Test the website with different browsers
    • Chrome, Firefox, Edge, Safari
    • Other browsers
  • Remove or correct any broken links found during testing.

Improve Website Performance

  • Code your website for quality and speed
  • Optimize images, such as by compressing them and reducing their file size.
  • Make the page simple and clean, with a clear and easy-to-use design.
  • Advanced approaches:
    • Load JavaScript asynchronously to improve page loading times.
    • Consider using a content delivery network (CDN)
    • Use caching to reduce server load and improve response times
    • Minify and compress code
    • Limit the number of HTTP requests
    • Monitor website performance using analytics tools like Google Analytics

Read More about Website Performance

Add Metadata in <head>

  • Use appropriate <title> for each page
  • Use <meta> elements to provide additional information about the webpage.
    • The name and content attributes:
      • name specifies the type of meta element.
      • content specifies the actual meta content.
    • Many types of <meta> elements for SEO and other purposes.
  • Visit the homepage of your favoriate website, view page source or inspect
    • what <meta> elements do you find?

Common <meta> elements

  • description:
    • A short description of the page
    • <meta name="description" content="...">
    • Google your favoriate website, then read the search result
  • keywords:
    • A comma delimited list of search terms
    • <meta name="keywords" content="...">
  • author
    • The author of the page
    • <meta name="author" content="...">

<meta> for Social Networking Sites

  • Open Graph Data
    • A metadata protocol to provide richer metadata for website when shared on social media platforms.
    • Example: <meta property="og:image" content="..."
    • Read more about the Open Graph protocol
  • Twitter Cards
    • Tehy allow you to attach rich photos, videos, and media experiences to tweets, helping to drive traffic to your website.
    • Read more about Optimizing Tweets with Cards

Select a Web Hosting Service

Evaluate Web Hosting Services

  • Price
  • Storage and transaction limits
  • Technical features
    • Server uptime, backup and restore options, security measures, ...
  • E-Commerce features
    • SSL certificates, shopping carts, payment processing options, ...
  • Customer service features
  • Reliability

Web Hosting Providers

  • Some web hosting providers:
  • Cheap (or free) cloud alternatives for small websites
    • Amazon Web Services (AWS)
    • Google Cloud Platform
    • DigitalOcean
  • GitHub Pages (We will be using this for project.)

Register Domain Name

  • Web hosting service may bundle domain name registration.
    • Recommended if you have paid for web hosting.
  • Check your desired names on domain registrars
    • For best recognition, aim for .com or .org
    • Other top-level domains (TLD):
      • .us (located in the U.S.)
      • .co (Columbia, but open to public and seems like .com)
      • .info, .me, .name (good for personal website)
  • Domain privacy

WHOIS babson.edu

Transfer files

  • Use FTP client to upload files
    • many web hosting website also provide web-based file transfer

Search Engine Optimization (SEO)

SEO: Keywords

  • Keywords are those words/phrases that
    • describe your web site
    • users type in to search the web
    • your competitors are using
  • You can
    • use keywords in internal links
    • use keywords in alt attribute tag
    • place keywords in <h> tags
    • use keywords multiple times in a page

Questions?

global styles