Web Technology 101 - SpartanSoft

I was recently asked by a client to make their web pages “printer” friendly.   The majority of the sites for which I try to print from result in un-readable printouts either the text is truncated or the styles make it unreadable.  I have been to many sites where you can click a link to see a printer friendly version of a page.  This extremely convienient when printing for offline reading. 

So given my past experience browing web pages I assumed the following were all the options available to me:

1. Convert the exisiting web pages to be printer friendly.  The downside of this approach is that you are modifying the styles of your pages simply for printing purposes resulting in less then desirable appearance.  Also requires a lot of rework of existing pages which were not designed for this requirement in mind.  The major benefit of this approach is the user does not have to explictly click a Printer Friendly link to access the Printer Friendly page.  This link could be easily over-looked if not prominatly displayed
2. Make copies of all the pages and create a link to the printer friendly page.  The downside is dual maintance as well as still requiring the user to click a printer friendly link.  Everytime the text of a page changes the modification must be made in two places.
3. Being from a ASP.Net background another option would be to create a seperate Master.Page encapsulating all the layout for printing nicely.   This approach still requires clicking a Printer-Friendly link but removes the dual mainance and modification of exisiting pages for printing. 

Given those three options and considering I was developing in a ASP.Net environment I assumed I would create a printer friendly Master.Page which once the use clicked the printer friendly link would render a page absent of images, background styles, etc.  Given this assumption, I Googled printer friendly web pages and after sorting through a few articles I encountered an amazing concept that blew away the three options I was aware of.  Basically Links to CSS pages allows you to specify media for example a typical CSS link may look like this:

<link href=”/css/MyStyle.css” rel=”stylesheet” type=”text/css” media=”screen” />The Key attribute being media where you can specify the following values:

• all
• aural
• braille
• embossed
• handheld
• print
• projection
• screen
• tty
• tv

Basically you keep your pages as is, thus enabling the best user experience from a browsing perspective but create a seperate stylesheet for printing.  When the user clicks the print button the browser is smart enough to pull the stylesheet related to printing. The link for the print CSS would be as follows.

<link href=”/css/MyStyle_Print.css” rel=”stylesheet” type=”text/css” media=”print” />

 So give this solution I basically created a copy of my exisitng stylesheet and appended _Print to the end of the name and referenced that from all my pages.  My first modification was to remove all images from the print-out.  This is simply done by adding the following to the Printer-Friendly Css file.  Given this defintion no images will show up when printing.

img{display:none;}

Once I removed images the client determined there were a few images in the content which they would like to be included in the print-out.  Given this I create a new style defined as  .PrintImage{display:block} which I applied to all the specific image instances which they wanted to be included in printing.

Another example would be if you site has a background image or color associated to the pages.  In the printer friendly CSS you would want to remove the image or set the background color to white.  Also, according to some people certian fonts are better for screen viewing and others for print.

A basic understanding of CSS will enable you to manipulate the printer friendly page definiton to your hearts content.  You can include or exclude entire DIVs as long as you apply a style to class attribute of DIV. 

An excellent site for beginners learning CSS is as follows:  http://www.w3schools.com/css/default.asp

Sometimes a JavaScript method may change the context of the current page making some of the content obsolete.  An example is if due to a user action you change the value of a cookie.  Say you have a dialog to launch a user settings page.  On this page you can select to show/not show C# code.  Once this dialog is selected and closed you will want to re-draw any open pages this may effect.  Partial page updates are one of the greatest advantage of AJAX. 

for example:
document.cookie = ‘ShowC#Files=true;path=/’

• If the changed cookie value does not require a server post back then 
  window.location.reload( false );
• If the changed cookie value is used by Server Side code to generate the page you will require a server post back thus passing true to method 
  window.location.reload( true);

Firefox has issues refreshing the page using JavaScript window.location.reload().  A work around is to use document.location.reload().

This is a common question we get asked and unfortunately does not have a straight forward answer.  The initial answer generally is ”It Depends”.  Just as if someone asked you, ”How much does it cost to buy a car?” It is not realistic that you can provide an accurate answer without knowing the specifications for which the price can vary greatly.  (Used 78 VW Bug vs. 07 Jaguar)   

The cost for developing and designing websites varies on the requirements they must implement.  Like purchasing automobiles there are certain costs that are applicable regardless of the model.

• Domain Name Registration- If you have not purchased your domain name this will be your initial expense.  Prices have dropped fairly dramatically over the years and this is a relatively inexpensive cost below $40 a year.
• WebHosting - All websites reside on a web-server that is responsible for routing requests for your websites to your pages.  Prices vary based upon needs but generally if you sign up for a year it can be under $120 for basic hosting.

There are a few additional costs such as a SSL certificate if you want to collect sensitive data such as bank information, etc. 

The cost for the actual design will vary based upon the following factors

• Number of pages and content (words)
• Custom images
• Logo design
• Advanced functionality requiring coding (Ecommerce, Business Rules)
• Database requirements
• Authorization - Do you need certain areas of the site to be accessible by only administrators.

All web development that we at SpartanSoft provide also includes the following services

• Domain name registration
• Web Hosting Setup
• Email setup
• Site Development
• QA of site
• Full deployment of site

To give you an example of our pricing,  a 4 page site including a contact us page with all the services provided above would be somewhere near $1,500 - $2,000  This is not set in stone and is up for discussion but is a rough estimate.

If interested in our services contact us at SpartanSoft.net 

OK, I must admit I am indifferent when it comes to web design using Flash.   I am definitely not a fan of the intro movies and always choose to skip them, but a bit of flash here and there for navigation does not seem too intrusive in website design.  Issue is there are users out there who will see flash on a site and will leave immediately.

A short story, weinitially had some flash animation on the SpartanSoft site and thought from an aesthetic viewpoint it looked interesting…  well to make a long story short, we submitted our site to numerous web site critique sites and 50% of the reviewers refused to even acknowledge the website when they saw the flash animation.. long story short avoid flash, it tends to annoy. 

There are exceptions, for example if you are designing/developing a website for a game or artistic entity the targeted users may actually enjoy and appreciate the multi-media aspects Flash brings to the table.

Starting a new website?  How do you get traffic to our new web site?  This is the million dollar question, and if you are an E-Commerce site this could literally be a million dollar question.  Most of us are familiar with Google but for those of you who are not Google is a diversified company but made famous initially by their search engine.   If you are one of the few who have not searched the Internet using Google, check it out at http://www.Google.com.

It seems the majority of web users are now using Google to find websites based upon their needs.  Needs vary from purchasing items on-line, looking for services or simply finding answers to a specific question.  Some examples may be

• Searching for a specific site, user could enter New Jersey DMV to find out what hours they are open (http://www.google.com/search?hl=en&lr=&q=New+Jersey+DMV)
• Searching for a specific item, user may want to purchase a new Sony HD TV so they could type Sony HDTV with the following results (http://www.google.com/search?hl=en&lr=&q=HDTV+plasma)
• Our search for the answer to a specific question, For example, What is the capital of California with the following results (http://www.google.com/search?hl=en&lr=&q=What+is+the+capital+of+California).

As a site owner the goal is to have your site come up as early in the search results as possible.  Whether you are selling services or products you desire the searcher finds your company as early in the search results as possible before they find a competitor who can meet their needs.  The concept is simple but getting your site to come up as early in the search results is not that simple and takes a lot of tweaking. 

According to Google:

PageRank Explained

PageRank relies on the uniquely democratic nature of the web by using its vast link structure as an indicator of an individual page’s value. In essence, Google interprets a link from page A to page B as a vote, by page A, for page B. But, Google looks at more than the sheer volume of votes, or links a page receives; it also analyzes the page that casts the vote. Votes cast by pages that are themselves “important” weigh more heavily and help to make other pages “important.”

Important, high-quality sites receive a higher PageRank, which Google remembers each time it conducts a search. Of course, important pages mean nothing to you if they don’t match your query. So, Google combines PageRank with sophisticated text-matching techniques to find pages that are both important and relevant to your search. Google goes far beyond the number of times a term appears on a page and examines all aspects of the page’s content (and the content of the pages linking to it) to determine if it’s a good match for your query.

In Laymen’s terms for your site to gain better Page Rank the following aspects play a big part

1. The more sites that link to your site the better.  The higher the volume the site linking to your site the more valuable the link is to your search results.  An example, if your site had a link from Microsoft to your site that would be much more valuable then having a link from a website that does not generate a lot of traffic (number of people accessing the site over a given period of time).  That being said, getting links to your site is not always an easy task.  For the small business this really is not an option unless you post content that other find extremely useful.  The competition is fierce so the number one factor in gaining the best search results is branding.  If you can get your company’s name out there and people search specifically for that you are in the best situation.
2. Content is crucial.  You need to anticipate what your clients would be searching for and gear your content towards those search criteria.  For example, for our site http://www.SpartanSoft.net we anticipate people would be searching for Website development so we tried to stress that fact in our content.

That being said it is not easy to get your site to show up in the top of the search results without a bit of help.  Another consideration is that the Google architects are always tweeking their search engine ranking engine.  I have experimented following the best practices I have found throughout the Internet and unfortunately it takes a long time to tweek your content to show up as high a ranking as possible.

Another option is paid advertising using Ad-Words but that is another article coming soon….

One of the best articles I have ever read on explaining the mystery of Google page ranking can be found here (it is a little technical but not to complicated)
Google Page Rank Explained

When determining what domain name you would like to purchase for your web site you may encounter issues with finding a preferred name that is not already owned by someone else.  Domain names are leased and when the lease period is up if the owner does not renew then the domain name becomes available once again. 

Sounds simple enough until I read this extremely interesting article at http://www.mikeindustries.com/blog/archive/2005/03/how-to-snatch-an-expiring-domain .   

It seems if you really want a domain name that is about to expire, you may want to leverage one of these services that specialize in acquiring domain names.  May not have much luck otherwise….

Here’s a link for finding some of these companies in google.. 

http://www.google.com/search?hl=en&q=buying+expired+domain+names. 

One of the decisions you will need to make when deciding you want a website is what domain name you would like to purchase.  I have to say this can be a  frustrating process due to the lack of preferred domain names.  In this post I will first go into the details of what a domain name is and then provide the steps involved with selecting one.

A domain name as para-phrased from Wikipedia is “a name that is entered into a computer (e.g. as part of a Web site or other URL, or an e-mail address) and then looked up in the global Domain Name System which informs the computer of the IP address(es) with that name…Domain names are hostnames that provide more memorable names to stand in for numeric IP addresses. They allow for any service to move to a different location in the topology of the Internet (or another Internet), which would then have a different IP address.”

I will do my best to explain in laymen’s terms what a domain name is.  As mentioned above a Domain name is an easy to remember ‘alias” for an IP address.  An IP address is a unique identifier for an end point on a web server or web site.  Domain names are made up of text followed by an extension.  For example, spartansoft.net is a domain name where .net is the extension.  Many extensions are currently supported such as (.com, .net, .org, .edu, etc.) 

Based upon availability you must select the extension that works best for you.  I would have preferred a .com extension for my domain name but that was not available so I purchase Spartansoft.net.  Extensions are usually categorized by the type of site as well, for example .edu sites are used for universities.  .Com stands for Commercial while .Net stands for Network and was initially used by companies specialized in networking but is now not restricted to those types of companies.  .Net extensions seem to be the preferred extension if .com is not available for your entity.

So the first step is to come up with a list of domain names you would prefer for your company.  For SpartanSoft.net I made a list in order of preference.  1) SpartanSoft.com, 2) SS.com, 3) SpartanConsulting.com 4)SpartanSoft.net.  At the time I was purchasing my domain only my forth choice was available.  You can check the availability of a domain name by following this link Check Domain name availablity .  If your preferred domain is not available the next step may be to access the site using your web browser to see if the owner has actually created a website with the given domain name.  If you receive an error or an “under construction” page you may contact the owner and ask if the domain name can be purchased and ultimately transferred to you.

If you preferred domain name is available you should purchase it immediately (its extremely inexpensive, usually between $10-$35 for two years) so it becomes unavailable to other potential web site owners.

Lastly, I would like to explain the difference between a URL and a domain name.  As discussed above spartansoft.net is a domain name.  A URL includes the protocol or http:// and what needs to be typed in your browser to access a website as follows http://www.spartansoft.net

I wish you luck in your pursuit for your domain name and if you have any questions or need help in aquiring a domain please email me at cpond@spartansoft.net.

Most people undoubtedly have been on the Internet visiting web sites via a web browser such as Internet Explorer, AOL, FireFox, etc.  This post will go over some of the basic terminology associated with web sites.  I prefer to quote Wikipedia for specific definitions but will elaborate when deemed beneficial.  I highly recommend Wikipedia for looking up terms that you are not familiar with.

The first step in browsing the web and accessing a web site is launching a browser on your computer.  A browser is defined as “a software application that enables a user to display and interact with text, images, and other information typically located on a web page at a website on the World Wide Web.”  The web browser is an application which is installed on your computer.  Most computers come with a web browser installed when you purchase them.  You can also download additional browsers for free from other websites.

Some of the more pervasive web browsers out there are:

• Internet Explorer (Microsoft)
• FireFox (Mozilla)
• Opera (Opera Software)
• Safari (For Apple computers)

A browser without an Internet connection is somewhat useless.  An Internet connection provides the capability for your web browser to connect to another computer based upon a domain name.  A domain name is the address which you type into your web browser to access a site such as http://www.spartansoft.net, where spartansoft.net is the domain name.  Every domain name needs to be unique across the entire Internet and must be purchased for a small fee.  This domain is name used to provide a friendly name for an IP address. An IP address is a number such as  64.79.161.51 which uniquely identifies an end point or web site on the Web.  This prevents users from memorizing these hard to remember number sequences.

A web site resides on a web server.  A web server is a computer who’s main purpose is to host web sites.  When a user types in a domain name in their browser this request gets routed to a web server who then sends back a web page to the browser.  The page comes back in HTML (Hyper Text Markup Language) and is interpreted by the browser and displayed.  I will have provide a detailed post on HTML in the future.  If you want to see what html looks like in

• Internet Explorer - Right click on page and select View Source
• FireFox - Right click on page and select View Page Source

There are many companies who host web sites for a monthly fee.   This is one of the fixed costs associated with owning a website.  Prices vary greatly based upon needs.  Some companies offer free website hosting but that usually is funded by advertising thus cluttering your site with ads and providing a less then ideal user experience.  Also, free hosting may not support having a direct domain name such as yourcompany.WebHost.com which looks less professional then having a direct domain such as yourcompany.com.

This basically sums up the hardware and software required for a web based session.  There are many technical details that I have omitted for simplicity sake but may provide more detailed technical aspects for those who are interested in the future.