Web Development/Printable version

Web Development

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/Web_Development

Permission is granted to copy, distribute, and/or modify this document under the terms of the Creative Commons Attribution-ShareAlike 3.0 License.

The history of the Internet

Section 1.1 — Back to Contents

Beginnings of the Internet

Memex

In 1945 Vannevar Bush hypothesized a device known as memex, a mechanized index of all human knowledge.

ARPANET

Map of ARPANET in March of 1977.

Starting in 1969 the Military project ARPANET became one of the first networks to use the TCP/IP protocol and packet switch networking.

Engelbart

Engelbert's ARC and Xerox PARC, the Mother of All Demos, Engelbert's ethernet, hyper-text.

Today's Internet

Apart from the incredibly complex physical connections that make up its infrastructure, the Internet is held together by bi- or multi-lateral commercial contracts (for example peering agreements) and by technical specifications or protocols that describe how to exchange data over the network.

Unlike older communications systems, the Internet protocol suite was deliberately designed to be agnostic with regard to the underlying physical medium. Any communications network, wired or wireless, that can carry two-way digital data can carry Internet traffic. Thus, Internet packets flow through wired networks like copper wire, coaxial cable, and fiber optic; and through wireless networks like Wi-Fi. Together, all these networks, sharing the same high-level protocols, form the Internet.

The Internet protocols originate from discussions within the Internet Engineering Task Force (IETF) and its working groups, which are open to public participation and review. These committees produce documents that are known as Request for Comments documents (RFCs). Some RFCs are raised to the status of Internet Standard by the Internet Architecture Board (IAB).

Some of the most used protocols in the Internet protocol suite are IP, TCP, UDP, DNS, PPP, SLIP, ICMP, POP3, IMAP, SMTP, HTTP, HTTPS, SSH, Telnet, FTP, LDAP, SSL, and TLS.

Some of the popular services on the Internet that make use of these protocols are e-mail, Usenet newsgroups, file sharing, the World Wide Web, Gopher, session access, WAIS, finger, IRC, MUDs, and MUSHs. Of these, e-mail and the World Wide Web are clearly the most used, and many other services are built upon them, such as mailing lists and web logs. The Internet makes it possible to provide real-time services such as web radio and webcasts that can be accessed from anywhere in the world.

Some other popular services of the Internet were not created this way, but were originally based on proprietary systems. These include IRC, ICQ, AIM, and Gnutella.

There has been much analysis of the Internet and its structure. For example, it has been determined that the Internet IP routing structure and hypertext links of the World Wide Web are examples of scale-free networks.

Similar to how the commercial Internet providers connect via Internet exchange points, research networks tend to interconnect into large subnetworks such as:

• GEANT
• Internet2
• Little GLORIAD

These in turn are built around relatively smaller networks.

Why do people develop web pages?

Section 1.2 — Back to Contents

People develop web pages for two main reasons: personal and professional. This book deals mostly with the latter: a medium to large-sized operation designed to generate income.

Personal

The personal webpage of an athlete.

Many people have set up websites to serve their personal interests. There are a huge number of reasons people do this, from sharing information about themselves, to preaching their beliefs, to putting up a resume to be hired or sometimes people publish virtual journals called "blogs".

Often a number of people collaborate on a website, like a forum, product review, or a blog. That is nonlimited to, social media, podcasts, coding projects, gaming mods, bookmarking sties, social news, media sharing pages, microblogging, social knowledge, and sharing economy websites as well. But, since these sites are not designed for the specific purpose of generating revenue, they are still personal sites.

Professional

Many businesses (perhaps all someday) have web pages. Some are created simply to get the word out about their business: phone number, address, etc., to increase traffic to its physical location.

Many other companies have websites designed to bring in more income. They act as virtual storefronts, shipping to your doorstep or allowing you to pick up goods in person. This book deals with the development of a professional website created to promote your business.

What is web development?

Web development is the work involved in building a website for the internet (World Wide Web) or intranet (private network). A website can be built from scratch or through What You See Is What You Get (WYSIWYG) Editor. Building a website from scratch is more difficult as it requires skilled individuals to manually create and handle Cascading Style Sheets (CSS), HyperText Markup Language (HTML), programming, web architecture, page structure, java script files and more. Building a WYSIWYG editor is easier as all of the programming and coding is done for you and it although some platforms give you the option to code, it is not needed. Using a WYSIWYG mainly consist of design principles since the coding is developed for you.

Due to the complexity of building websites, web development is divided into two types of functions: front-end and back-end. Front-end web development consists of everything a user can view, hear or interact with on a web page (otherwise known as content) and bridges the gap between web design and back-end development. A front-end web developer normally receives design principles from the web designer and input them into the front-end code so the back-end developer can understand it and build functionality around it. Web Accessibility and web performance are two essential aspects to front-end web development because so much of information is viewed and accessed through mobile devices.

A website or application must be functional or else it will fail. Back-end developers are responsible for the functionality of a website and need to know and understand programming language, databases and server architecture. If a website or application is slow, crashing or throwing errors at users it is likely because of back-end issues.

The intricacy of web development is why most people today are using WYSIWYG’s. It is very difficult to build and maintain a website from the ground up without the bandwidth. WYSIWYG’s enable everyday people to create and manage a website on their own with little to no help or on their own.

Most websites use a Content Management System (CMS) to deliver and store information. Some of the most notable CMS’s are WordPress, SharePoint and Drupal. A CMS is useful when building a website with textual dynamic content. CMS’s are not needed if there is no content to be managed.

The rationale of concepts: being careful

Section 2.3 — Back to Contents

One of the most important tasks for a web developer before any work is begun on the page is the conception stage. After a concept has been developed, it is important that the developer thinks of his or her website in realistic terms.

For example, if a database will be necessary, consider how much space an entry will take up, and how many entries there will be total. Think of the hardware requirements of your site. Think, using what knowledge of programming and backend you may already have (or consulting a professional), if what you are trying to do will even be possible.

Most importantly, keep in mind the limitations of your human resources. You should have an idea of what size operation you're going to be running: money, men, etc. You don't want to stretch your people too thin. If you think it may be necessary to scale down your project to make it more realistic from a human resources point, then do it. It's better to be overcautious than to work your men and yourself into the ground.

Also, mind your capital and other resources. In Section 3.1, What's needed to develop a website?, we'll be covering this more in-depth. For now, just use common sense. One person didn't make Amazon.com on one dime in one day.

What's needed to develop a website?

Previous — Section 3.1 — Contents — Next

This section means to serve as an introduction to the rest of Section 3: Resources.

The Simple Website

Four basic things are needed for a website: domain name, webhost, text editor, and an ftp program. This will get you a basic website without pictures or any complex backend, but it is functual and can be effective all the same.

Web development is fairly easy to learn and get into. This is mainly because it is so accessible, and because a simple website requires very little overhead or experience to create. To create a simple website, one will need to have the following:

1. Domain Name - the common place the user will find your site on the World Wide Web. For example, www.yournamehere.com is a domain name. You can purchase your own domain or get a free one offered by many different online companies. Domains have come down in price drastically over recent years, and can now be found for under $10 USD.
2. Webhost - this is a company that will "host" your domain and web pages. By "uploading" your "data"—transferring the files that makeup your website—to their server, you give the consumer access to your page on the Internet.
3. Text Editor program and a little knowledge of HTML - HTML, or Hypert-text markup language is the most basic of the web-languages. All you really need to develop a web page is some basic knowledge of HTML and the Windows program Notepad (the Macintosh equivalent is TextEdit). A page written in this "markup language" can contain images, links, text formatting, etc., and its file extension is .html. After you type your page into one of these free programs (or many other pay programs), upload the file to your hosting. A user's browser will then be able to decipher the HTML.
4. FTP Program - FTP stands for file transfer protocol, and is the most common method of uploading your files to your hosting. When you register a domain name and secure space online for your data, your webhost will give you an FTP user name and password. By typing these into one of the numerous free FTP programs, you can access your web space and upload your website.

HTML – Hyper Text Markup Language, the most common web language, and also the simplest and easiest to learn.

Note: HTML is not covered in this course, but several HTML tutorials can be found online.

Human Resources

As for the more advanced websites, a staff is usually required to maintain and keep up the site. Aside from knowledge of HTML and webspace, people may be required to do miscellaneous jobs such as graphic design, advanced coding, customer relations, network administration, etc.

Capital

Capital, varying with the complexity of the website's goals, is also needed. For a simple website run by one person, the expenses may be as small as paying for the domain and yearly hosting fees. As websites get more complex and intricate, the amount of capital increases proportionally.

As a common sense rule, the bigger the website you want, the more people, money, and technology you're going to need. This section should serve as a guide for planning resource gathering and management, and to give you an idea of what's needed to start up and maintain a website.

Setting up a reasonable web development budget

Bare Minimums

It's technically possible to host a website on a number of free services. These have a number of restrictions, typically including mandatory adverts, tracking cookies for your users, being hosted on a predetermined domain instead of your own, and being either limited to a static site or to a particular technology stack.

Optimal Minimum

A domain name with shared hosting is the next step up.

Domain names are available in a variety of top level domains, which has a large impact on yearly costs. A .com domain which has not yet been registered will typically cost between $10-$15 dollars a year (In 2021).

Commercial

A dedicated server or VPS is a step up over shared hosting, both in terms of performance and security.

Such a service might cost $100 or more depending on your needs.

Other costs may include commercial SSL certificates, software support, and other fees.

Enterprise

For huge websites, the kinds of websites which are household names, costs can become quite large. Fortunately the vast number of websites will never reach the expenses incurred by such sites.

Finding investors, advertisers, and supporters

Investors

Investors can be a great source of startup revenue, if you can convince them your website is worth their while.

If the website is for an existing business, convincing an investor to pitch in to cover the cost of professional web development should be fairly easy, as in many cases a website can be a great marketing tool.

Typically investors will not be interested in funding personal sites. Investors want a return on their investment, so unless your website is going to make money, either on its own or by supporting a separate business.

Advertising

Advertising on your Site

If you don't charge for content, then web advertising may be a good option for you to generate revenue. You can use an ad network to deliver ads, or you can work directly with clients to advertise on your site. Different services and clients will give different rates, both for number of views, and for number of clicks.

Advertising on your website is a strategy which must be done with careful consideration for your users. If the advertisements on your site are obnoxious, users may leave.

Some website categories are generally expected not to have commercial advertising at all, because the presence of advertisements would call into question the neutrality of the institution. Such websites include government websites, websites of schools and universities, websites for churches and religious institutions, websites for the military, and other similar categories.

To a lesser extent, advertising is also disfavored on certain commercial sites as well. On industry and commercial websites, you don't want to risk loosing a enterprise sale worth thousands or even millions because an advert struck a client the wrong way. For the same reason certain mass market customer facing websites generally solely advertise in house, because the website itself serves as an advertisement, and the potential for an ad to distract, detract, or otherwise harm the customer experience is too great.

The importance of a website's unified theme

Section 4.1 — Back to Contents

A website should have a unified graphic theme, as well as a tone and general feel. If a "professional feel" is what you're going for—if you're trying to sell a professional product or service, like web design—then aim for a professional look and design, and write the content with a professional tone. It's hard to describe because the concepts are often abstract, but a good designer can come up with a look and feel for any theme.

Besides helping the user subconsciously identify your website with a general category (professional, playful, serious, etc.), it's important to have a unified theme so that the user knows when they're actually at your website. That is, from a cognitive psychological view: if a user clicks a link, he should know whether he is still at your website or if the link has taken him to an external site.

Distinct and unique "logo types" (amazon.com, eBay, Microsoft, RollingStone Magazine) stay with a user. They are instantly recognizable and also lend an appropriate air to the content they represent.

It can take a long time to develop and decide upon a theme, but the visual aspect of a website is just as important as the backend and is an essential part of the user's experience.

The design phase and the one-second test

Design Phase

Paper Prototypes

A paper prototype for a website layout.

One of the easiest ways to start designing your website is old fashioned, but easy - making a paper prototype.

Sketch out all the details without worrying about your art skills. The purpose of this is to create designs with speed.

What is a backend?

Section 5.1 — Back to Contents

Back-end development references a client server architecture common in ecommerce. Client side tends to have a strong user interface skill and the server side a strong API skill. But they overlap.

A backend developer could just be focused on a database and providing an API to it or on a server language like PHP and those mentioned so far and provide an API to it. Their work would need to be accessible to many other back end applications such as the database developer example and more to many front end applications. For example today many web backends service not only desktop and mobile web front ends but also device apps and even desktop apps. So the back end developer will not know how all of those front ends work but provide a server side interface such as a REST interface for those multiple front end technologies to access such as a login. Server developer can also make user interfaces that are probably less robust for administrative access to their code, functionality and data.

A front end developer in a client server architecture could be an app developer such as with Android, iOS or Windows and even be a specialist in one of those working with the UI libraries available in those OSs. They could be a desktop developer such as MacOS or Windows or Linux working with the UI libraries available in those OSs. Pretty much everyone on client side have knowledge of HTML CSS as that shows up even in native apps. User interface developers often have skills at building and using APIs. For example the Javascript angular.js MVC or the iOS MVC and the javascript JQuery API. In this sense a front end developer could be working with data API once it arrives on the client side and have less to do with the actual look and feel aspect of the front end.

In all cases an overlap in skills is a good to have for communication among the team and debugging client server apps. I always joke that the UI person takes the blame for anything that seems to go wrong because it is the cover to the book. In resolving the problem sometimes the UI person needs to clearly understand the surface interface language or at least the API of the server side to help isolate the problem solving effort. Same goes for the server side developers. However they are at the disadvantage because they could be serving many different client side technologies. So they often fall back to their own testing of the API hooks to isolate and remove themselves from the problem solving issues. But you can see the communication not only person to person on a professional team basis but mores on data transmission, the structure and tagging of the data is improved when both sides have a good understanding of their respective technologies to the extend of the data.

The backend to a website is pretty much everything the user can't see. Generally, this means the programming that generates pages that the user views, creating the "server-side" content of the site. This could be scripts, directives, databases, and other automated functions the server performs.

Back-end development includes the server implementation and it more on the logical interaction of data, how it is stored, and transmitted. Back-end developers typically work with programming languages such as PHP, Python, Go, and new Javascript libraries like Node.

To db or not to db?

Section 5.2 — Back to Contents

To determine whether your site needs a database you need to examine how often you update your site, how much content you have, what your content is, how your site is updated, and more.

Automatic reasons to use a database is when you have a lot of content, content that is easiest to access through categories, if your site it updated by more than 2 people. If you update your site daily that implies having enough content to justify a database.

Other Technology Options

If a database isn't right for your site but you are still looking for ways to ease site updates, here are some options for you to consider.

SSI

SSI, or server side includes are good to use for navigation menus. (They are a type of shtml, an extension of HTML that contains other useful server directives such as date and time.) By using includes, you can tell a page to include a separate file. The file will be loaded into that space when the page is loaded—like copy-pasting by hand, except that server does it for you. So, if you wanted to have the same sidebar on a number of pages, you could create the sidebar in a separate .shtml file and tell each of your websites to include that page. That way, when you needed to change the navigation bar, you could change the one .shtml file instead of changing every single page.

The code looks like this:

 <!-- #include file="navbar.shtml" -->

Remember to name your files .shtml.

PHP

PHP stands for PHP: Hypertext Preprocessor and you can do really everything with it. It works very good with databases. Some code:

 <?php print("Hello world!"); ?>

As you see, it looks like C.

WebDNA

WebDNA is an easy to learn server-side scripting language specifically designed for the World Wide Web, with an Hybrid in-memory databases system making easy to build resilient database-driven websites.

Example Code (connects to a whois server and shows the information, then stores it into a permanent database)

[text]info=[tcpconnect host=whois.domaindiscover.com&port=43]
[tcpsend]webdna.us[unurl]%0D%0A[/unurl][/tcpsend]
[/tcpconnect][/text]

[append db=base.db]domain=webdna.us&whois=[info]
[/append]

Choosing the right programming language

Section 5.3 — Back to Contents

Choosing the right programming language for server-side applications.

When it comes to the perfect programming language for the development of your site, it is imperative that you understand that there is no perfect programming language. Once you understand this, it is simply a matter of choosing the language that best serves your needs. Before you decide on what language to use, you should consider the following:

• Server platform
• Server software being run
• Budget
• Previous programming experience
• Database being used for back-end

The Operating system you are running on your system is your platform and your choice of OS may play a major part in the language you choose. Be aware that unforeseen problems may push you to change platforms in the future, and that some language choices will make this very painful. Microsoft Windows and POSIX-compliant unix-like systems will most likely be your two main choices in technology.

Once you have chosen your OS, the next choice is your server software. On Windows systems, you have IIS which comes installed for free with windows. It has a long history of performance and security problems. Many of the web servers commonly used on POSIX-compliant unix-like systems are available for Windows too, including the very popular and well-respected Apache web server.

"POSIX-compliant unix-like systems" includes a plethora of available OSes including but not limited to Linux, Sun Solaris, BSD, and Mac OS X. Apache is by far the most common web server for these systems and for web serving in general.

While some of the available programming languages are free under the GNU Public License or other open-source licences, others are commercial products and carry a licensing fee. The commercial products do carry the advantage of commercial support and tighter integration with the companies' other products, so if you have a large amount of capital and want to get your site set up quickly with little configuration, then a commercial solution might be your better option. Some of us, however, cannot afford the high price tag of the commercial solutions on the market and may elect to make use of the free yet still very powerful languages available. The tradeoff is the effort in properly configuring the environment which may or may not be worth the cost savings.

The Most Popular Programming Languages

The following are a list of the most popular languages used in the industry today. This is by no means exhaustive or complete and it is up to you to personally research each option to choose the right language for you.

Perl

• Type: Interpreted script language, Compilable into binary executable or platform-compatible Bytecode
• website: perl.com
• License: Open source [free]

insert content here

Example code (using Dancer Perl framework)

#!/usr/bin/env perl
use Dancer;
get '/' => sub
 {
  "Hello World!"
 };
dance;

PHP

• Type: Interpreted script language, Compilable
• Website: php.net
• License: Open source [free]

PHP is a recursive acronym for PHP Hypertext Processor. Unlike the other offerings listed, PHP is designed specifically for server-side programming, which means that its library is specialized for the tasks you'll be doing over and over again in the course of programming your website. PHP also has the advantage of being able to interweave code with HTML, thus allowing you to mix layout with programming. While this may simplify coding for small sites, it does carry the potential to be abused, resulting in difficult to manage or maintain code for larger projects. Proper use of a templating system such as Smarty should do wonders towards preventing that. PHP is available for most operating systems including Unix and Windows, and is an excellent server-side programming language for professional programming.

Example code

<!DOCTYPE html>
<html>
    <head>
        <title>PHP Hello World</title>
    </head>
    <body>
        <?php echo "hello world"; ?>
    </body>
</html>

Or a feature that really shows that PHP is designed for the web is something like this.

<!DOCTYPE html>
<html>
    <head>
        <title>PHP Hello World</title>
    </head>
    <body>
        <?php
        if(isset($_GET['showHtml']))
        {
             ?>
             <h1>The GET variable showHtml is set.</h1>
             <?php
        }
        ?>
    </body>
</html>

In this case if "showHtml" is set (using "?showHtml" in the URL), the code will display the h1. This way you will not have to use echo or print to print HTML.

C

• Type: Compiled
• Website:
• License:

The C programming language is a standardized programming language developed in the early 1970s by Dennis Ritchie for use on the UNIX operating system. It has since spread to many other operating systems, and is one of the most widely used programming languages. C is prized for its efficiency, and is the most popular programming language for writing system software, though it is also used for writing applications.

C is a useful language to learn since similar syntax is used by many modern languages such as Java, PHP, and JavaScript.

Example code

#include <stdio.h>
int main() {
   printf("Content-Type: text/html\r\n\r\n");
   printf("<html> <head>\n");
   printf("<title>Hello, World!</title>\n");
   printf("</head>\n");
   printf("<body>\n");
   printf("<h1>Hello, World!</h1>\n");
   printf("</body> </html>\n");
}

More Example code

#include <stdio.h>

int main() {
    show();
}

void show() {
    printf("hello");
}

ColdFusion

• Website: Adobe
• License: Multiple available [1]

Programming:ColdFusion

ColdFusion is a scripting language based on standard HTML that is used to write dynamic Web sites. It allows you create dynamic pages quickly and easily, including querying data from a database, use hundreds of built in tags and functions, or creating full scale object oriented enterprise level applications. ColdFusion pages can consist largely of standard HTML tags intermingled with ColdFusion Markup Language (CFML) tags, or can implement custom frameworks designed to assist the developer in separating presentation from business logic (e.g. with the MVC design pattern). ColdFusion was introduced by Allaire in 1996 and acquired by Macromedia in a merger in April 2001 and by Adobe in 2005. As an Adobe product, ColdFusion developers have the advantage of leveraging many existing Adobe technologies seamlessly. Examples of such integration can be seen in the dynamic generation of Adobe Acrobat .pdf documents, Adobe Flash forms and presentations, Adobe Flash remoting capabilities, as well as connection with Adobe Flex user interfaces.

Example code

<cfset myVar = "Hello World!">

<cfoutput>
  <html>
    <body>
      #myVar#
    </body>
  </html>
</cfoutput>

Good coding procedures and adherence to standards

Section 5.4 — Back to Contents

Once you have chosen an appropriate language (see 5.3: Choosing the right programming language), it is important to code your website well. Cleanliness is both important and respected among programmers, and an effective, efficient algorithm will be appreciated by the end users.

You should plan the logical layout of your website code beforehand, with the methods, objects, etc., and their purposes clearly defined and related. Be precise with this pre-planning. Draw it on a napkin, type it out, do whatever you have to to get a concrete understanding of your backend's structure beforehand. This will come in handy. Oftentimes, programmers say that planning is the most important stage of programming (that and bug-testing).

Aside from planning ahead, here are some other general guidelines:

• Keep an online manual for your language open at the same time you're coding, in case you need to look up an obscure function or precise syntax.
• Be sure to never use outdated algorithms or tags. Tags like <marquee> and <font> are no longer standard HTML tags. Syntax for languages is always being updated. Make sure you're coding in the most recent version of the language. Backwards and forwards compatibility are important. Don't use code that is already outdated, and if the manual says a function will probably be discarded in a future update, don't use it.
• It's important to comment your code, in case someone else takes over for you at some point. This is also important for when you have to update your code in the future, in case you forget your own logic.
• Make your code abstract, in case the same method needs to be implemented in more than one place.
• Any other general standards for coding well should be used.

In conclusion, plan ahead. It's much better to spend five minutes planning ahead than to spend hours going back through your code because you made a logistical mistake in the very beginning.

Java and JSP

Sun Microsystems has published a widely used set of coding conventions for Java and JSP.

A very good automated tool for enforcing Java coding conventions is checkstyle. This tool is highly configurable.

Existing code can be reformatted using tools such as Jalopy or Jacobe.

Use the javadoc tool included in the Java SDK to document your code.

Automated unit tests can be built using Junit. JUnitDoclet is a useful addition to JUnit. Use HttpUnit to automate web page testing.

All the tasks above can be integrated using ANT.

Finding your target audience

Your target audience is the overall audience to whom you want to sell or deliver information. A target audience can include demographics, such as women over the age of forty, location (i.e., people who live in the United States) or behaviors and interests, such as people who jog every morning or watch college football on Saturday’s. A target audience is needed to direct content. Content for a website should exhibit why your product, information or service is valuable, why it should be utilized over competitors and most importantly, it needs to engage users.

Web content is the textual, aural or visual content found on a website. Content includes but is not limited to, the following: text, images, links, files, templates, applications, data, e-services, and videos. Web content should be developed with intentions of ranking high in search engines and making people revisit the website because it offers a good user experience.

Finding your target audience online is for content strategy, which is the development, management and delivery of content. It is important as it defines how an individual or organization will use content to meet business goals, satisfy customer needs and guide decisions about content throughout its life cycle. In order for content to be good it must be appropriate for your business, users and context. Content is deemed appropriate based on whether or not it helps users meet their needs. Websites should be designed so people can manage and access information efficiently. Users are satisfied when they find what they need, when they need it and in the form they need it. The design of information architecture, tabs based on subject matter, downloadable files and a search bar are things that can make a website easier to manage and information accessible.

Enticing advertisers

Just about any website can host some kind of advert on it. However, both advertisers and users prefer that you serve ads which are appropriate to your site. For example, if your website reviews soap, or even a broader category such as personal hygiene products, a soap company may be interested in advertising on your site. Some ad networks automate this process, and it is of course possible to do manually.

Search engine optimization

Search Engine Optimization (SEO) refers to the techniques that help a website rank high in organic search results. There are the two types of listings that appear when using a search engine: organic search and paid search. SEO aims to make a website more visible to people looking for specific information or a particular product or service via search engine. SEO falls under the umbrella of Search Engine Marketing (SEM). SEM is a form of internet marketing that involves the promotion of websites by increasing their visibility in search engine result pages primarily through paid advertising. Paid search campaigns can be costly and sometimes useless as most search engine users never click on paid search ads.

There are three types of SEO, on-page, technical, and off-page:

1. Off-page SEO mainly consists of factors that do not involve the modification of a website such as, history and reputation – all of which can greatly impact a website even though they are not technical factors. History could pay attention to something such as content substance; it may draw a red flag if you introduce a topic that hasn’t been covered. Reputation may focus on user feedback; A site that delivers valid relevant information will have a better reputation than a site that deliver outdated false information.
2. On-page SEO involves optimizing individual web pages to rank higher in search engines. This includes optimizing elements like meta tags, web content, information architecture, images, and URLs to make them more search engine-friendly and user-friendly. Key aspects include keyword optimization, HTML markup, page speed, content quality, and internal linking.
3. Technical SEO involves optimizing a website's technical aspects to improve search engine visibility and user experience. It includes tasks like speed optimization, mobile-friendliness, crawlability, indexability, site architecture, and structured data markup. This ensures efficient crawling and indexing by search engines, leading to better SERP rankings and improved user experience.

Most internet users do not know all of the factors that contribute to SEO. As the most popular search engine, Google interrogates web pages, asking around 200 questions to determine which pages have the best results and how they should be ranked. Google provides the public with a few of these constantly changing questions.

Many SEO factors found on the internet are practical, but they are also hypothesized; practical meaning that it makes sense why one would deem a SEO factor appropriate, and hypothesized because the information is not verified by Google. It is not necessary to memorize all SEO factors found online, but it is important to keep essential factors in mind. Factors such as keyword research/usage, accessible URL’s, delivery of reliable information and crawlability have been consistent throughout the years. Crawlability is the ability of a search engine to crawl through the entire text content of a website and easily navigate through web pages without encountering unexpected dead-ends. As SEO techniques are constantly evolving, it is best to research and learn the current SEO practices. Although SEO is a job specialty, SEO it is not required for most people to know in depth. Knowing what it is, how it works, why it is important and staying abreast of changes that occur is often sufficient.

The common misconception: visits vs. hits

Collecting metrics about your website usage is not only incredibly important, it's also incredibly easy to mess up. A common tripping point is the definition of hits and visits.

It is important to differentiate the terms visits and hits. A hit is when a computer requests your website. It says nothing about how somebody used a site, and hits are often made by non-human actors.

A visit is when a user uses your website for real. A visit can include multiple hits. All visits are at least one hit, but not all hits are visits.

Staying updated: why people come back

People are creatures of habit, they love coming back to a place to find new things. However when people return to a place expecting new things, only to find that nothing has changed, they'll get frustrated and eventually will move on to new more interesting sites.

When to update

For news websites, blogs, company pages, and more, an updating and evolving front page is critical.

When not to update

Not all pages on your site need to be continuously updated. If you're updating a particularly old page, it may be worthwhile to note any changes in the bottom of the page as an addendum, to make it clear to readers what changed since they last saw it.

Creating a phpBB3 Forum

Adding a forum to a website is a great way to build a community and encourage users to revisit your website. However, there are several difficulties new users come across in the process of creating a forum. In this book I will show you how to create a forum for your website, group or for a specific topic.

Please Note

There is a confusion in terms of boards, forums and sub-forums. Each "forum" has several "forums" inside it which I will be referring to as "sub-forums" although this could also refer to the forums inside of those - which I will not be referring to at all in this tutorial.

In this tutorial the forum you register for I will call a "forum" and the forums inside it I will call "sub-forums".

Prerequisites

This tutorial assumes that you are familiar with forums and have used them before. This tutorial is intended for people who have posted in forums in the past and want to know how they can create one.

Registering for a forum

Instead of hosting the forum on your own website or even your own server, I suggest you use a free forum hosting website as this will make things easier. In this tutorial I will be using FreePHPBB3.com, but for other forum hosts, the process should be similar. To find other forum hosts, try a quick Google search. Once you are beyond Preparing to build your forum it should not matter which host you are using.

So go to the website and click the signup link at the top of the page. Then fill in the details of your forum including the name, address and category. Read through the terms of service. If you agree check "I agree with the terms of service" and then click "Create My Forum". After that wait for the confirmation email. When you get the email there should be a link you have to click to activate the forum. Click it and then move onto the next step.

Preparing to build your forum

After you have clicked the link it should say your forum has been activated. Depending on the service it may ask you to click a link to "create your forum". If so, click it and then go to the address of your forum which it should provide a link to.

Next, log into your forum and if you are the only person who uses your computer check "Log me on automatically each visit.

After it redirects you back to the main page scroll down to the bottom of the page and click "Administration Control Panel". If your browser supports tabbed browsing I suggest opening the link in a new tab. You will then be asked to enter your logon details again. Do this and click "login".

Board Settings

You should now be redirected to the phpBB3 control panel, where most of the editing of a forum is done. At first you may be overwhelmed by the options - but you will soon get used to them. While we are creating this forum it is a good idea to disable new registration - to stop anyone finding the board, registering and posting while we are still creating it. So, on the left hand side you should see a link called "User Registration Settings" underneath "Board Configuration", click it and next to account activation click "disable". Then scroll down and click "Submit". It should tell you that the details have been updated. Click the link to go back to the previous page.

Every forum hosting service I have used has provided a "test" sub-forum when I first register. To delete this go into the "forums" tab and click the red "x" next to the sub-forums you want to delete. Click "delete sub-forums and posts" and click submit. Then click the link to go back to the previous page.

Creating a sub-forum

Now we are ready to create some sub-forums to go in our forum. The first sub-forum you need is the forum rules. This is an absolute must so that users know what they are allowed to do in the forum and what is prohibited and may get them banned. So at the right hand side of the page you should see a textbox with a button next to it entitled "Create new forum". Enter "Forum Rules" and click "Create new forum".

Under forum type make sure "forum" is selected. In the description type in "Please read before posting..." and ensure the password textbox is blank. Then scroll down and click submit. But this time click "Set permission". Here we will specify who can access this sub-forum. Under "Add Groups" you will see a number of types of forum users. Select them all and click "Add permissions".

Now you need to specify the forum permissions - that is who can do certain things in a certain sub-forum. You will see that next to each type of user there is a combobox, allowing you to specify what they can do in the forum. Give administrators and global moderators full access - this means that they can do almost anything in the sub-forum (edit posts, post things, etc). In most sub-forums registered users would have standard access or standard access and polls - but this forums is the rules (something we don't want any member of the forum to be able to modify. So we will give them and guests "Read-Only Access". Lastly we will give bots "bot access" as we will give them in most of the sub-forums.

Creating the mod-only section

Before we start adding the sub-forums that will contain the main content of the board we should add a mod-only section. This will help the mods discuss private moderation topics such as whether to ban user x.

This user's work in progress page may be incomplete, and/or unreliable.

Updating a live website

Updating a live website includes of front and back-end development. Most websites use a Content Management System (CMS) to create and modify digital content. Everything a user sees, clicks, hears or uses to input or retrieve information is a result of front-end development. HyperText Markup Language (HTML) and Cascading Style Sheet (CSS) are the main two languages for front-end development. HTML is the standard markup language for creating web pages and applications. CSS is used to style the presentation of a document written in a markup language such as HTML. Front-end development links together design and technology while prioritizing user experience. User experience is the overall experience of a person using a website or application in terms of its pleasure and efficiency. According to technical innovator, Peter Morville, there are seven main factors that influence user experience. For a website or application to deliver a good user experience it must be useful, useable, findable, credible, desirable, accessible and valuable.

Back-end development focuses on how the website works as it communicates database information to a browser through code. Responsiveness and speed are two main aspects associated with this kind of work. The majority of things that a user cannot see, such as databases and servers is back-end development. Back-end development uses languages such as Java programming language, PHP, Ruby programming language and Python programming language to complete work. Such languages are used to create a dynamic web page with content that is constantly changing such as Facebook and Twitter.

An alternative to closing: going open-source

Have an idea that you'd like to pass on the torch to? Consider making your site open source! Someone else can carry on your work legally if you choose to open source your website.

PTM Training

The PTM_Training project was initiated by a work-order from professor Mdj of the College of Education at The University of Montana (hereinafter "client"), to be developed by the University Central Web Services team (hereinafter "agency"), headed by RobertB.

Project initiation

The development team consisted of:

• SteveM (application developer);
• AndrewL (application developer);
• RonaldS (system administrator for production servers);
• PattyZ (graphic designer); and
• StudentTeam (three to five undergraduate students under the supervision of SteveM and RobertB, to assist as needed on the project).

The work order specified that the project was to consist of a web-based "professional training interface" to be used by the College of Education (and potentially other institutions) to coordinate and develop opportunities for professional development among teachers.

All work on the project was conducted on the University campus facilities, using the development and production servers owned and maintained by the agency. The client agreed to pay agency for development and maintenance fees and the work was conducted according to a written memorandum of understanding (hereinafter "MOU") between the parties.

Project phases

The project phases (established and agreed upon in advance by RobertB, SteveM, and the client) consisted of the following:

• Definition stage
• Design stage
• Development stage
• Deployment stage
• Maintenance stage

Definition stage

Challenges

• Neither the work order nor the MOU contained a detailed feature set specification or existing example application to use as a reference.
• The client had some fairly novel ideas which would preclude a simple reuse of preexisting code assets.
• The client intended to use the output of the project for a presentation to other colleges and state agencies. This would put pressure on the project output to be "impressive" as well as "functional".
• The timing of the project initiation relative to the academic calendar essentially guaranteed that there would be staff turnover among the student workers.
• Some members of the StudentTeam had little or no prior experience in the areas where they would be helping out.

Advantages

• The agency had a fairly substantial mix of production assets and a reasonably-skilled staff. This meant that there was some flexibility in the choice of development tools and operating systems for the application developers.
• The novelty and profile of some aspects of the project meant that the development team was given some leeway by RobertB in establishing priorities and requesting additional resources if urgently needed. RobertB also took care to establish reasonable expectations with the client, thus the client allowed for some flexibility on the project deliverables as well.

Responses

• Because of the relative high profile of the project, it had to proceed despite the lack of a thoroughly defined project specification. The "definition" phase would have to be revisited from time to time. Because of this SteveM opted to proceed using an "incremental prototyping" strategy for the project.
• The technologies chosen by SteveM were selected primarily for maximum familiarity among available staff, ease of use, ease of prototyping and ease of migration to "production" infrastructure once the definition and design had solidified.

These included:

• Microsoft Access (design-stage database to be migrated to MSFT SQL server for production-stage);
• Allaire (now Macromedia) Cold Fusion Web application server;

Beginning of feature set specification

SteveM and AndrewL proceeded to work with the client to get precise definitions for required features.

After some iterative consultation with the client, it was agreed the following would be needed:

• A web application compatible with the latest release of the top two browsers in use for the latest version of Microsoft Windows;
• user accounts capable of logging in through the web;
• anonymous access through the web for limited features;
• administrative accounts capable of modifying aspects of the web app and managing user accounts, all through the web;
• a "skinnable" graphical application interface that could also be modified and managed by admin accounts;
• support for user activity audits, record-keeping, statistics and routine reporting;

SteveM concluded that the application would essentially consist of a mix of an online: 1) product catalog; 2) event management system; 3) course management system (with support for credits and "grading"); 4) role-based authentication system; and 5) discussion forum.

At the time of project initiation, there were no existing products or resources available that would meet the client expectations, thus justifying in-house development over off-the-shelf purchase.

Design stage

SteveM and AndrewL began design on a database schema. SteveM began on the skeleton framework for the web application. To further streamline development and increase chances of successful delivery, SteveM opted to code the using the "FuseBox" application framework for ColdFusion.

Halfway through the initial design stages. AndrewL was pulled into another project, thus significantly reducing his availability for PTM_Training. This required SteveM to assume complete responsibility for the design, and also required a lot more contemporaneous technical documentation, so that AndrewL could be kept up to speed on the system for times when he was available to help.

Development stage

SteveM worked primarily with the StudentTeam for the initial phases of development. At the end of the semester, the StudentTeam was significantly reduced.

Challenges

• The available student developers had little or no computer programming experience.

Responses

• Routine code review sessions were established by SteveM to keep track on the progress of the student developers. These code reviews included an opportunity for the students to re-allocate time and self-select, to the extent feasible, for tasks that more closely matched their abilities and preferences.
• Routine unit testing sessions were conducted on all code modules to ensure that there would be no data integrity problems. This was necessary because "live" use of the project had begun prematurely, and the database contained data that people actually cared about, the loss of which would not have been acceptable. Although this is against best practices. This was anticipated early on because of the nature and scope of the project as established in the definition phase.

Deployment stage

Deployment for the project consisted of a migration of the code-base to the production web server machine, and a transfer of the database contents and schema to the MSFT SQL Server host. The deployment was not difficult, however there were some "gotchas" related to name resolution and resource allocation differences between the development machines and the production servers. These were quickly tracked down and the code was re-factored to compensate.

Maintenance stage

Maintenance proved an ongoing element of the entire system development, but was, ironically enough, not a significant problem after the first deliverables on the project were deployed for use and made available to the client. Eventually, the client had a relatively fruitful demonstration of the project, and the code and resources were later bought by an outside company. SteveM and the client were the named authors of the system and received royalties for the purchased code-base. All further maintenance and extension of the code-base was managed by the outside company after an initial phase of consultation and review by SteveM, so they could be brought up to familiarity with the essential elements of the system.