Website Creation

Intro

This is about creating new websites and/or web pages, including creating an updated version of older web content.

Website creation may involve creating content, designing a site's look and feel, creating back-end code run on a server, and engaging in “search engine optimization” (“SEO”) techniques that will hopefully increase a website's position on search engines. This often involves skills with using website standards, artistic skills, marketing skills, and some skills from computer programming.

Learning Curve

Learning very basic HTML mark-up (using the deprecated B, U, and I tags from HTML 2.0) may take under a minute: learning basic usage of hyperlink references and images (including attributes identifying the source and optional resizing) may take a small number of minutes.

Modern web developers should become familiar with using cascading stylesheets. Some basic functions, such as applying certain styles to text, can be about as simple as finding an example and applying the relevant code. Some more advanced CSS may take additional time to apply the desired effect, and attempting to support certain stylistic features in multiple browsers can be both time consuming and, for many web developers, frustrating. Learning how to use external stylesheets will allow the possibility of some massive style changes to be rapidly deployed. Having that flexibility is nice if the site is expected to be available and worked on (such as simply providing updates) for a long period of time. Some sites even allow for “alternate stylesheet” files, a.k.a. “alternative stylesheet” files, which allow an end user to, on demand, perform fast switching from one style to another. (The ][CyberPillar][ website is an example of such a site. Check out the hyperlink to adjust CSS properties on the fly. Or, in Netscape-derived code (including Mozilla Firefox), check the menus for a way to change the Page Style. e.g., View, “Page Style”)

Additionally, learning a serious amount of client-side scripting can take weeks. Presumably this would also be true of server-side scripting.

There is a certain allure to creating websites, because the basics seem simple and people tend to like having early, quick success. For those interested in pursuing this professionally, there are various skills that can help. Creating good content, including having a mastery of language, can certainly help. Many professionals find that having graphical design skills helps. Programming skills can help those who are focused on back-end technologies. Sales skills may help those seeking to achieve high rates of converting visits to profitable actions such as actual sales. The precise skills needed may vary based on the role one has with administering a website. The degree to which a role is usefully needed may vary between websites.

Services/techniques
Content rating

The Platform for Internet Content Selection (“PICS”) was an ancient standard. There were a number of well-known sites and web browsers supporting PICS, including the two major web browsers (Microsoft Internet Explorer and, at the time, Netscape Navigator). However, despite the fact that PICS labels could be created simply, at least some vocabularies that used PICS could be used to create elaborate descriptions of site content. Perhaps a reason PICS didn't take off was that a lot of documentation may have focused more on fully supporting the capabilities of PICS, including elaborate descriptions, without also showing how simpler vocabularies offered a simple solution.

PICS website's reference to RDF seemed to suggest that RDF would be the standard that replaced PICs, and that might have seemed extra-likely given the information by W3C about storing PICS info into an RDF structure (complete with an example of an RDF implementation of W3C's prior “Good Clean Fun” technical example PICS vocabulary). However, a solution using RDF ended up being declared as the replacement of PICS (replacing PICS as W3C's recommendation for content rating).

After seeming to be abandoned for years, Platform for Internet Content Selection (“PICS”) has been superceded as a W3C recommendation by W3C's new recommendation: the Protocol for Web Description Resources (“POWDER”). For more example of the newer standard, see W3C POWDER. An example of using POWDER to show an rating with the ICRA vocabulary is one of the examples from W3C's POWDER primer document.

Describing PICS-like content in RDF format shows an example of a PICS vocabulary expressed as RDF, and shows how RDF can hold more information. For example, section 1.2 of the document shows how much more verbose RDF could be. page w/ some info on using ICRA shows a simpler example.

PICS content-rating extremely simple: Depending on which “language” is being used, it may be just slightly more complicated than learning how to make TITLE and IMG tags and easier than making a TABLE in HTML. Effectively using it client-side may vary in difficulty depending on what software is being used, but simple languages can be easy for webmasters to use to rate a page. (Weburbia's “Safe For Kids” rating is a rather simple “language” to implement.) PICS has been supported by Content Advisor (from Internet Explorer 6) and was supported in Netscape 4. Mozilla references PICS on Mozilla's page about RDF. Additional examples of vocabularies include SafeSurf's vocabulary, various ICRA vocabularies, RSAC's RSACi (which was discontinued in favor of ICRA, which had been released by the people behind RSACi), W3C's technical example called “Good Clean Fun” (which is a technical example and has nothing at all to do with rating content based on morality), and some other ancient PICS vocabularies.

The ICRA Vocabulary (archived by the Wayback Machine @ Archive.org) is no longer published on ICRA's domain. Instead, the site notes, “Upon the recent decision of” (the Family Online Safety Institute's) “Board of Directors, the ICRA labeling engine has been discontinued. While all current labels will continue to work with Internet content filters,” the3 organization behind the standard has ceased to continue backing their own standard.

W3C's site about RDF and PICS shows how to embed PICS-like data into an RDF format, but to summarize, it can be far less simplistic. Firefox Add-on: LinkExtend - Safety, KidSafe, Site Tools may provide some Firefox support (or support similar features?)

(At least some version(s) of IIS will have available a tab of options related to Content Rating.

Including site search
Google's offerings
Overview of some different offerings

At least some and perhaps all of these offerings have been known to, and perhaps always have and still do, require signing up for the offering before the potential offering is really available for use.

Google Site Search Info: Answer 72363: High volume sites notes there is an off-line version for sites with more than 500,000 queries annually. That sort of implies that other versions are designed for less traffic than that. Google Site Search Info: Answer 72359: Exceeding allowed query volume states that Google will send an E-Mail if the query volume is being exceeded.

One option is Google Custom Search (Engine). (At the time of this writing, Google Custom Search Engine had the word “beta” in its logo.) Google Custom Search (Engine) “Standard edition” seems to be a modern equivilent to an older service that was called Google Free web search. This allows users to easily search a website, and if the webmaster hosting the search box permits, choose to easily search the web starting with a form in the web browser. The search box provided uses a specific “search engine”, as it is called by Google. An end user may have multiple such “search engines” and each may allow for different tracking and different configuration options such as whether the search engine works for allowing users to search the entire web or to be restricted to searching only on the specific site.

This standard edition does involve advertisements except the advertisements are optional for sites for registered non-profit organizations, universities, and government agencies. (These advertisements would only be showed to people who are using the search feature. For instance, they may be on the page that shows the results.) Integration of CSE and AdSense is possible. There's a variation which allows the search engine to display results within a browser frame, so users can see the search results without even needing to leave the site. (However, keep in mind that if the search is worthwhile to the user, chances are they may want to leave the site, to visit whatever was seen and which seemed interesting enough for the search to seem worthwhile for person who performed the search.)

For having a search box that is restricted to certain sites (and which does not review other websites on the Internet, The other “Edition” to choose from the Google Custom Search (Engine) creation form is the edition known as “Site Search”. Sometimes Google may call this the “Site Search business edition”. Google more prominently markets Google Custom Search (Engine) Site Search edition with the more direct name, Google Site Search. This edition does cost money, and features some abilities such as searches without advertisements and Google branding being optional. Google Answer 1210656: Search the entire web notes, in part, “This article applies only to free basic custom search engines. You can't set Google Site Search to search the entire web.” ( Previously, Google answer #72323 was at http://www.google.com/support/customsearch/bin/answer.py?hl=en&answer=72323 before that answer seemed to disappear. That answer noted, in part, “you cannot create a Google Site Search engine that searches over the entire web; you'll need to specify a set of sites for your search index.”) AdSense is incompatible since Google ads are unavailable with Site Search.

For those more interested in making money from advertisements instead of paying Google to have them not appear, there is another option. Google Adsense for Search which allows a website to provide a Google Search which shows advertisements to financially profit both Google and the website that hosts the search bar. However, for those who are interested in just checking out the search functionality now that messing around with signing up for income later, one doesn't need to start by signing up for Google Adsense. After a search box is created with the Google Custom Search (Engine) program, log into the CSE account's Settings/Control Panel and find the relevant hyperlink, which may be called “Make Money”. That will allow integration with AdSense (and is presumably likely to be available at a later time).

There may also be some more specialized options. Google “Custom Search Engine on the fly” may be a specific offering for some types of sites with dynamic content. Google Commerce Search is meant for retailers to use on online stores.

Using CSE Standard edition

Granted, this is perhaps even more likely to change than some of the other information, so be prepared for these instructions to not exactly follow the currently available experience.

Upon creating a Google Custom Search (Engine) search box, a web page may show the code and some tasks that Google may recommend checking out. Both that code and the other tasks are likely to be available from the search box's Control Panel. To get there, possibly in another browser window and either immediately or at a future time, go to the Google Account. When using Google Account services, this can often be done by clicking on “My Account” in the upper-right corner of the page. In the “My Products” section, next to “Custom Search” may be a hyperlink called “My Search Engines”. Each “search engine” being referred to here is simply a form, perhaps commonly thought of as a “search box”, which uses Google's engine to provide search functionality. Next to the name of the created search box, find a hyperlink called “control panel”. Then view the left frame.

Troubleshooting

Google's list of browser compatiability for the Google Custom Search API is meant for developers who may customize things a bit more, although it would make some sense that these custom search boxes may have similar requirements to the standardized search boxes.

The easiest way to get some initial code from Google is to go to the “Look and feel” hyperlink in the “control panel” for the specific search tool provided by Google.

(There may be other options, such as a “Google Custom Search” Gadget for iGoogle, as noted by Google Custom Search APIs and Tools guide. Another option is to Load the JavaScript API and search module with JavaScript techniques. The Google Web Search API documentation represents additional text showing how to do some of this with JavaScript, though the methods used by that documentation have been been labelled by Google as being deprecated.)

Using the control panel, viewing the “Look and feel” page, there are multiple hosting options.

Using the “Search element” hosting option

The following might be specific to the Search element hosting option. If it is later found not to be, this text may move to another section.

If the code is not working because the desired search box shows “Loading”, instead of a proper rendering of the search box, try replacing the “.load('cse')” with “.load(document.getElementById('cse'));

If even that doesn't work, using the pre-packaged loading code may not work. It seems the cause is from “ google.setOnLoadCallback(function() {” (followed by code and later JavaScript code “}, true);”) may not always work for an embedded search box. To work around this, follow these steps:

Load the JavaScript API.

<SCRIPT SRC="http://www.google.com/jsapi" type="text/javascript"></script>

Use the google.load function. The following two lines show how to do this with the MINIMALIST theme.

if(window.google)
google.load('search','1',{language:'en',style:google.loader.themes.MINIMALIST});

For other ways to use google.load, review some of the documentation links above. (It seems the third parameter may be entirely optional, so google.load('search','1'); might be a working alternative.

The above should be done early in the process. Waiting until after the page loads before trying to load the JavaScript, or before using google.load, may not work as well. So, (using some programmer jargon here...) do not use google.load in some JavaScript which is triggered after the BODY tag's onLoad event fires.

The following code may not be fully tested.

(The following code may be based on example code provided by Google. In any case, it is too simple/short/basic in nature to be justifiable to try to consider to be any specific “intellectual property” such as Copyright.)

if(window.google)
{
var seuid; // "Search engine" unique ID
var googleCustomSearchControlObj;

seuid="012345678901234567890:2ghi3jk4-lm";
//This value is specific to the "search engine".
//Find this on the "Basics" page of the control panel
//of the specific "search engine" in the Google Custom Search acct

googleCustomSearchControlObj = new google.search.CustomSearchControl(seuid);
googleCustomSearchControlObj.setResultSetSize(google.search.Search.SMALL_RESULTSET);
googleCustomSearchControlObj.draw(document.getElementById('cse'));
}

Before expecting that code to work, set the proper value for seuid. Then it seems that code can be loaded at a later time, such as by something triggered when the BODY tag's onLoad event files, if it seems desirable to wait.

The following code should change the text of the search button. The following code may not be fully tested.

(The following code is being widely distributed for the intent of being usable as desired. Consider it to be public domain.)

if(window.google)
{
var idx;
var srchForSrchButton;
var srchButton;
srchForSrchButton=document.getElementById("cse").getElementsByClassName("gsc-search-button");

for(idx in srchForSrchButton)
if( srchForSrchButton[idx] )
if ( typeof( (srchForSrchButton[idx]).tagName )=="string")
if ( (srchForSrchButton[idx]).tagName.toUpperCase()=="INPUT")
{ srchButton=srchForSrchButton[idx];
break;
}

srchButton.value="Go!";
srchButton.title="Google Custom Search";
}
Locally run search software

This text currently does not have a guide for setting these up. However, to help point people in a right direction, here are some options that may be considered:

[#sqlphidx]: Sphinx

Sphinx's manual: “About” section” says, “Sphinx is an acronym which is officially decoded as SQL Phrase Index.”

This software supports databases including SQL and OBDC.

Lucene (variants)

Lucene variations (e.g. CLucene in C++, or other variations of Apache's Lucene which is in Java) has been ported to other languages as well.

The ht://Dig search software

Like others options mentioned, this has been known to be used on some well-known websites.

Xapian

Xapian is a code library that may be the core technology of some other options, like Flax.

DataParkSearch

The web page notes support for various types of URL schemes, including the two major web protocols HTTP and HTTPS, and FTP, and Usenet NNTP and news. Also supported is SQL indexing, and external parsers for some popular office document formats (RTF, Microsoft Word, Microsoft Excel, Microsoft PowerPoint, Adobe Acrobat/PDF, and Flash). The main page goes on to describe more supported features. http://DataParkSearch.org/COPYING shows GPLv2.

[#srcheopt]: Appeasing search engines (a.k.a. “search engine optimization”/“SEO”)
Determine the home
Determine the home. This will prevent such things as the requirement for the efforts described by Google's page about moving a site.
Make sure there aren't errors in the hypertext code

Google's page about moving a site references “a link checker like Xenu. (It seems a bit odd that Google refers to that third party since Google has their own Webmaster Tools which may help. Perhaps that's a sign that Xenu's offerings have been so good that they've impressed people at Google enough to make that reference.) That does involve downloading a program, which would be a sensible requirement for checking offline code.

A website that can check already-public pages, with a limit of three thousand pages (with the free version), is the BrokenLinkCheck.com site. This site will not only report errors from internal references, but also reports when an external page is no longer responding. The hyperlinks that say “src” will identify an exact line number or comma-separated range of line numbers. (So, a reference to 861,862 does not refer to line number 861862, but lines 861 and 862.)

Perform some basic advertisements
Submit to Search Engine(s)

Wikipedia's article on “Site map”: section about “XML Sitemaps” has made the bold statement, “XML Sitemaps have replaced the older method of "submitting to search engines" by filling out a form on the search engine's submission page.” This text is not making any strong statements aboput whether that quote is true, or still wishful thinking by a person who is enough of an advocate of sitemaps to be editing that Wikipedia article. Rather, that quote is simply being provided for consideration.

Information on submitting to Google
Open Directory Project
See if you can add to the Open Directory Project at dmoz.org (since Google uses this, as seen by Google Answer 156449: Block or remove pages using a robots.txt file). http://dmoz.org/add.html
Others
Perhaps submit to other pages:
Create/submit a sitemap

To summarize: one of the best online resources found was SitemapDoc, although it was limited to the first 500 pages that it finds on a site. Other solutions may require access to content (e.g. web pages) on the web server, and/or access to the web logs. Such additional possible solutions have not been thoroughly explored at this time, so, at the time of this writing, the referenced points are fairly untested by the author of this text.

Initially solutions appear to be provided by Code.Google.com: Sitemap Generators, but many of those solutions seem to not work well. (This was based on a check in August 2013; an earlier attempt was also remembered as not working very well. The page noted it had been “Updated Oct 31, 2011”. Note that this page appears to possibly be by a third party, and wasn't produced entirely by Google. It simply used Google's page hosting services. Rather, the creator of the page may have been named “softplus” and had the address of softplus@gmail.com.)

When checked in August 2013, all of the solutions in the “Downloadable tools” section where checked if the solution was listed as being for “Windows”. None seemed to work well/easily. Also, only one of the “Online Generators/Services” seemed to work well. Others were skipped because the web page was broken (generating a “404” error), or simply did not work. Two others were skipped for being marked with a dollar sign or stating “Italian”.

Now, granted, some of the solutions that have dollar signs next to them may be fine services. They just weren't included in this particular review.

The one Online Generator/Service that did seem to work well was at SitemapDoc.com. (Also, sitemapsubmit beta seemed to be working for a while, but it ended saying “There was a problem with your request. Please try again later.”

Note: The “Server-side Programs” section wasn't really tested thoroughly at all. That section lists programs that appear to either require being run from the actual web server (where the files are being run), or require access to the web server's access logs (and some might even have both of those requirements). It looks like using some of that software may be the best solution.

Note that although the “Google Sitemap Generator” was listed as “Linux/Windows, 32/64bit, open-source”, there is also Google Sitemap Generator (Python script) and Perl Sitemap Generator which says it is “a translation of Google Sitemap Generator from” Python to PERL.

Improving site content

Google Support: Answer 35769: Webmaster Guidelines has the following statement:

“Webmasters who spend their energies upholding the spirit of the basic principles will provide a much better user experience and subsequently enjoy better ranking than those who spend their time looking for loopholes they can exploit.”

As a bonus, doing that will probably be of greater benefit to humanity, providing you with greater comfort that you succeeded by doing things right.

Other information about SEO

Here are some further resources:

Having/Using Preferred addresses

See Google's page about specifying a preferred domain, which basically says to specify the preferred domain in Google's Webmaster Tools and then, particularly to help other search engines, set up the server to support using a 301 redirect. After doing that, so the entire site has a preferred name, Google's page on canonicalization suggests making sure each individual page has a clearly preferred URL.

This is basically an elaboration of the step of determining what page will be the home page. The difference is simply in scope: this step involves making sure that every page has a preferred URL.

Website speed
See website speed for some details, including how the speed of a website's full response has been known to affect search engine rankings.
Verifying control of the web site
Verifying via TXT DNS resource records: Google Support: Answer 176792: “Verification: DNS TXT record”
Using a /robots.txt file

This may be controlled by whoever is maintaining the web server, and not necessarily the maintainer of a specific website on the server. (If the maintainer of a website has issues with this, the maintainer can try to get the cooperation of whoever runs the web server. If such cooperation is not available, perhaps a different provider (of web hosting services) may be used.)

Some additional (perhaps technical) information may be found at the section about Using a /robots.txt file.

Other/misc info
Google +1

Google +1 button APIs shows that in addition to calling the JavaScript, a syntax compatible with HTML5 is to use:

<div class="g-plusone" data-size="standard" data-count="true"></div>

That seems to be a more compliant method, less guilty of contributing to HTML “tag soup”, than to use the "g:plusone” tag as shown by some other documentation/examples by Google.

Google's page about using “+1 button” more than a hundred times per second

[#fastwwwd]: Website speed
Importance

It shouldn't be a surprise that visitors of a website will likely prefer speedy response times to slow response times. However, perhaps fewer webmasters know that Google has started to consider speed as part of how sites are ranked. Google Webmaster Central Blog: Page about using site speed in web search ranking.

Resources by Google

See: Code.Google.com Speed: Tools, Code.Google.com: Page Speed.

To see information by Google about the speed of a website, an option is to use Google's Webmaster Tools. Using this requires control over the website that is analyzed (and Google will require a verification process to be performed), and using this feature requires using and signing into a free account. Once logged into Google's Webmaster Tools, choose one of the websites if needed, and then on the left frame is a “Dashboard” with a hyperlink to the “Labs” section. An address such as https://www.google.com/webmasters/tools/labs-site-performance-1?hl=en&siteUrl=http://example.com/ might be used. Details on some of the information is at: Google Webmaster Central Blog: Site's performance in Webmaster Tools.

Resources by “Yahoo!”
YSlow

The YSlow User's Guide states, “Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable.” Further details about the rules are shown at: Rules. Additional documentation: YSlow FAQ: Grading, YSlow FAQ: Grading Matrix.

A couple of approaches are using the main YSlow program, and using YSlow Mobile.

YSlow Mobile
Directions for Firefox
Making a bookmark

Access the context menu for this hyperlink: YSlow JavaScript code. Then choose “Bookmark This Link...”. Then edit the Properties to specify a sensible Name for the bookmark (if desirable).

Or, take a longer route: copy the link location of this hyperlink: YSlow JavaScript code

Choose “Show All Booksmarks”, either by pressing Ctrl+Shift+B or by first pressing Alt-B to pull up the Bookmarks menu, and then choosing the menu option.

Choose the Bookmarks Menu. Press Shift-F10, and then select “New Bookmark...”.

In the “Location” field, enter the URL from the hyperlink. Also, give the Bookmark a sensible name.

Go to a web page that you want information about

Use the newly created bookmark.

Hope that a portion of the main web browser screen gets covered by a YSlow interface.

Choose “Run Test”.

Hope that you get a useful report. (Perhaps ironically, this did not seem to work well on YSlow's site.)

Main YSlow program

The YSlow User's Guide notes, “YSlow for Firefox is integrated into the Firebug web development tool for Firefox.” Perhaps importantly, “YSlow is not integrated into Firebug Lite.”

People looking for an easy way to get a YSlow report from a web browser like Firefox might want to check out the “YSlow Mobile” variation.

Using a “Favicon”
Top-rated icon at favicon.cc: Running man notes, “This favicon is an animation. Internet Explorer doen't support animated favicons yet. For that reason you need to generate an additional non-animated favicon.ico file.” It's example code suggests making a static favicon using a relationship of “shortcut icon” followed by the HTML for a favicon with a relationship of an animated icon (both using a MIME “type” value of "image/x-icon".)