Question -- Why do some sites look different when I view them with different browsers?

When a server sends a page to a browser, it is sending text that is contained inside HTML or XHTML tags. Your browser uses this text as a set of instructions to build the web page that you see in your browser. However, not all browsers use the instructions in the same way.

A classic example of this is the width of a table. When a designer sets the width of a table, he can specify several values in addition to just the total width -- he can also set a value called "padding" which makes sure that the contents of a cell in the table are not crowded up against the borders of the table. When a designer sets a table to a width of 100 pixels, he can set a value for padding of any value; a value of 3 to 5 is quite common. When this table is viewed in two different browsers, such as Firefox and Internet Explorer, it will look different. This is because of the way each browser chooses to understand the text that the server sends to it. Firefox will look at the instructions, and will make a table that is 100 pixels wide, minus twice the padding; if a designer set the value for padding to 5, it would allow for 5 pixels of padding on the left, 90 pixels of content, and 5 pixels of padding on the right -- a total of 100 pixels. Internet Explorer will take that same set of instructions and make a table that is 110 pixels wide -- it sets aside 100 pixels for the content, then adds 5 pixels to each side for the padding. The problem comes when a designer tries to fit a table into a specific space; if there was only 100 pixels of space available in the design and it is viewed in Internet Explorer, then the table will move down the page until it finds enough space to spread out 110 pixels. If a designer tries to cope with this by making the table narrower, then it might display properly in Internet Explorer, but would show empty gaps between it and the next design element when viewed in Firefox.

Problems like this have always existed in the design process, and a good designer often keeps several different browsers and monitors of different sizes to test for and correct such problems.

 

Question -- What is a cookie?

A "cookie" is a file that is put on your computer by a web site. Normally a cookie has a legitimate purpose, but sometimes they are used to spy on visitors (or even worse). Different types of cookies include:

"Session Cookies" are one of the most common types of cookies. When you log into a web site, you are accessing an individual web page. Normally, only visitors that have logged in can visit pages that are protected by a log in or sign in page. This is where web design becomes difficult - a web site does not normally know if you are supposed to be there or not. It could make you log in to every protected page - but that would become tiresome rather quickly. Instead, a small session cookie file is stored on your hard drive to indicate that you have successfully logged in. These session cookie files are normally deleted when you log out, and they "expire" if you forget to log out (usually in 24 hours, but the expiration time is flexible).

Each web page is like an somewhat like an island because information that you enter on one page does not automatically carry over to the next page. A designer can use PHP scripts to record and carry some information between pages, but this is not efficient and would limit what can be done with the pages. Instead, a "first party cookie" is written onto your computer's hard drive. Instead of having to pass large amounts of information by PHP scripts every time you move to a new page, each page simply looks at this cookie file on your hard drive and reads the information it needs to make your visit one seamless experience. Session cookies are a specialized form of first party cookie, but first party cookies could include items in your cart at a shopping cart, or your theme preferences at a site which offers more than one style or theme.

Third party cookies are placed on your machine by a source that is NOT the site you are visiting. For example, if you visit Facebook or MySpace sites, you will see numerous third party ads. Many of these ads will attempt to place a cookie - sometimes called a "tracking cookie" on your hard drive. These cookies can record information about you and where you visit, and can report that information to the original advertiser the next time you visit a site that contains a similar ad. These types of cookies are often considered spyware, and only very rarely serve any good purpose.

 

Question -- What is bandwidth?

Bandwidth refers to how much capacity an internet connection has, or how much of that capacity is being used. Bandwidth is measured in units of data in a given period of time, such as 200 kilobytes per second or 1500 kilobits per second ( 8 bits = 1 byte ). Most small sites use a shared connection, and have bandwidth limits that are quite small. Larger sites can have virtually unlimited amounts of bandwidth, but at a steep cost.

While a visitor to a site wants to have as much "bandwidth" available as possible, to increase their download speeds and to reduce page load times, the costs that server hosting companies charge for bandwidth usage cause many site owners seek designs that use a minimum of bandwidth. This often means using pictures with a reduced quality or to rely on client-side scripts whenever possible. If bandwidth demands exceed a site's capacity then a site can "go down" and become unavailable.

 

Question -- What is HTML and XHTML?

HTML and XHTML are two very similar languages that are used by web designers to add content to a website. Literally, the letters "HTML stand for "Hyper-Text Markup Language". XHTML is very nearly the same as HTML, but it is written in an "XML" format which allows it to be more internally consistent.

The best way to imagine the HTML and XHTML languages is to think of a container which can hold content. Just as coffee can be served in many types of containers - from traditional coffee mugs to wine glasses - the content of a website can be contained in many different types of HTML and XHTML containers. These containers, which are normally called "tags" are used to structure the content into whatever the designer desires.

An example of a simple "tag" is an "image" tag; it is normally written as one block of code. For example, <img src="/imagefolder/imagename.jpg" /> would be used to place an image named "imagename.jpg" into the web page when that image is located in a folder named "imagefolder" on the server. There are many other forms of tags, which can control nearly every aspect of a basic web page. HTML and XHTML are the basic foundations of most web sites.

 

Question -- What is XML?

XML is an "eXtensible Mark-up Language". It is a language that allows a designer to write his own "tags" to contain content for a website. This ability to design custom tags to contain content allows a designer a number of powerful options when designing menus, song playlists, and complex displays of products or other information.

XML can mimic all the powers of HTML, and when this is done the result is called XHTML.

Server-side scripts are often designed to place database information into an XML format, for use with XHTML and AJAX.

 

Question -- What is CSS?

CSS stands for "Cascading Style Sheets". While HTML and XHTML tags hold content, CSS determines the style and format in which that content is displayed on a page. CSS can range from simple text formating like displaying text in italics to more complex style elements such as causing an image to "float" like an iceberg in the middle of a sea of text.

CSS is particularly useful when a designer wants to unify the look and feel of an entire site. The CSS can actually be a separate file, outside of the main web page. This is called an "external style sheet" and any number of web pages can use this same style sheet. If a designer wishes to change a feature on every page in the site, it is often possible to simply change a value on the external style sheet and every page that uses that same external style sheet will instantly be changed.

As powerful and useful as an "external style sheet" can be, there are times when a designer wants one page to share most, but not all, of a site's uniform theme. This is where CSS really shines. The "C" in CSS stands for "Cascading", and this means that one page can refer to more than one style sheet -- so a designer can use an external style sheet to create a common theme for an entire site, but then make parts of individual pages stand out if desired by using CSS attributes inside that page. These multiple style sheets will cascade in such a way that the external style sheet is applied first to every page, but then the more specific style rules on each individual page can over-ride the more general external rules on the external style sheet to create a web page that shares a common theme yet which can have unique twists.

 

Question -- What is a script?

A script is a set of instructions that tell a computer what to do. Most scripts have a "trigger" that tells them when to start. This trigger can be as simple as when a web page loads, or it can be linked to an action such as clicking on a button with the mouse. Scripts can do many different things -- some will make a page look different, some will send emails, and so on. The uses of scripts are limited only by the programer's imagination.You may also want to read about client-side and server-side scripts.

Scripts can be very simple, or they can be very long. They are usually written in a programming language rather than the html/xhtml of a normal web page, so they require a somewhat advanced knowledge which is not necessarily possessed by every web designer. At Brukenet Web Design we specialize in the PHP, MySQL, and Javascript, languages plus AJAX.

 

Question -- What does client-side mean?

The term "client-side" refers to anything that happens on the computer of a visitor to a web site. When a server sends instructions to a browser, it can include more than just the simple instructions that allow a browser to display a page. A server can also send instructions that will track where a visitor moves his mouse, and the instructions can even cause a site to react to actions that the user makes -- without consulting the server for additional instructions.

One common example of this would be an image that changes when you move a mouse over it. This is called a "mouse-over" and is an extremely simple and common type of script to set up. To make a script that makes a pop-up window is another, more complex, example of a client-side script. A simple calculator pop-up window would be an excellent example of a client-side script.

Client-side scripts have the advantage that they do not put stress on a server and they do not take time to connect to the server. When a site receives many visitors, the benefits of client-side scripts can prevent the server from becoming over-loaded and failing. Many users with slower internet connections like client-side scripts because they don't take any time to load.

However, client-side scripts are processed by the user's browser; because not all browsers will function in the same way, not all client-side scripts will work the same in every browser. Sometimes this will mean that a script will work differently, or maybe even not at all. This disadvantage can usually be compensated for with careful design, but can take time to fix if it occurs.

 

Question -- What does server-side mean?

The term "server-side" refers to anything that happens on the server, before it sends instructions to a visitor's browser. Most database sites use many server-side scripts to sort and shape data into a useful format. Server-side scripts are also commonly used to process form information for emails.

The advantage of a server-side script is that it will always produce the same results, regardless of the user's browser or operating system. The drawback to a server-side script is that it requires the server to actually process the script, which can cause problems if traffic is very high and the server's resources are low.

 

Question -- What is Javascript?

Javascript is a language for writing scripts. Javascript scripts are client-side only, and are often used to make a page more dynamic without increasing bandwidth or creating an additional burden for the server. A Javascript can be added directly to a HTML or XHTML page, or they can be separate files which are included in a page by links. When separate javascript files are created, they can be used and shared by more than one web page, which allows designers to make more compact and efficient web sites.

Javascript is often used by designers to validate form data (so that bad data is not entered into a database) or to change the visual appearance of a site by shifting and moving images or text.

It is important to not confuse Javascript with Java, which is an entirely different scripting language. Although the two languages share a similar name, they do not have any common ancestors and are not used in the same ways.

 

Question -- What is PHP/MySQL?

PHP and MySQL are actually two very different languages. They are often used together, but this is not actually required. PHP is a server-side language for writing scripts and MySQL is a database language.

PHP scripts are able to modify or write HTML, XHTML, CSS, and even Javascript before a web page is ever sent to a visitor's computer. When combined with its ability to interact with a database, this makes PHP exceptionally powerful. A designer can write a PHP that logs a member into a website, reads a database to find that member's favorite background color, creates a "cookie" to record that color, and finally to modify the web page's CSS to make all the background pages display the member's favorite background color. PHP scripts can use data collected from forms to send emails, insert information or modify a database, or write entire pages of database output that are tailored to a visitor's choices. However, because it is a client-side language php scripts use more bandwidth and place a (usually only slightly) larger burden on servers.

MySQL is a free open-source database language that is more powerful and web-friendly than Microsoft Access but less powerful than Oracle and other commercial databases. MySQL is capable of handling roughly 8 million terabytes of data (8,000,000,000,000,000,000 bytes) compared to Microsoft Access's capacity of only about 2 gigabytes (2,000,000,000 bytes). Although not capable of handling truly enormous database projects, MySQL's capacity and performance are ideal for most small and medium businesses, especially when compared to the price of the more powerful databases.

 

Question -- What is DHTML?

"Dynamic HTML" does not really exist as a separate entity. Although many designers like to talk about using DHTML, it's really more of a marketing ploy than a new scripting language. What is commonly referred to as DHTML is really a combination of CSS and Javascript.

A fairly simple example of DHTML would be an "image swap". Consider that you have two pictures - let's call them a "before" and "after" picture. You want a visitor to see the "before" picture when the page loads, but then to see the "after" picture when they move their mouse over the image. You can use CSS to stack both pictures in the same place on the page - CSS lets you assign a "Z-index" to the pictures to decide which one is on top (and therefore which one is visible). Javascript lets you make changed to a page in response to what the visitor actually does - you can make a javascript script to change a "Z-index" when the visitor moves a mouse over the images. Together, the Javascript reacts to the movement of the visitor's mouse by changing the CSS value, and the CSS causes the image with the higher "Z-index" value to become visible. The end result is that the "before" picture disappears and the "after" picture appears in it's place when the mouse moves over the image. Additional effects can be triggered by clicks or other visitor actions, to create a truly dynamic web site.

 

Question -- What is AJAX and AHAH?

Similar to DHTML, there is no AJAX or AHAH languages. The term "AJAX" is simply a marketing term used by web designers. It is often (but not unanimously) considered to represent "Asychronous Javascript And XML". AHAH is simply a form of AJAX that does not use XML. In either case, these scripting methods are used to make dynamic and responsive pages.

One of the most useful features of AJAX is the ability to contact a server "behind the scenes" after a page has already loaded. An excellent example of this is a database with a "live search" form which will suggest likely words after a visitor types only a few letters. In a case such as this, the visitor never sees the page reload nor does he realize that the page is contacting a database on the server each time he enters a new letter. The end result is responsive and dynamic pages and forms that enhance a visitor's experience.

 

Question -- Why should I use a database?

Every web site is, at a root-level, about information. Whether you want to track hits with a simple "hit counter" on your site, or if you want to manage a dozen online warehouses, it's all done with a database. Databases are like a hard drive for your web site, where you can store any and all information that you want to keep. If you intend for your site to be more than a simple brochure, you will eventually want a database to handle information storage.

A database is normally divided into "tables", and each table has "fields" of different types of information that are arranged in columns. Individual entries in a database table are arranged in rows, much like on a spreadsheet. The similarity to a spreadsheet ends there, however, as database tables are relational and information on one table can be linked and connected to the information in other tables. With advanced scripting techniques, data can be shared across any number of sites and domains. A database can support thousands of users making hundreds of requests per second, and can update in real-time even if the users are in separate states or countries. When asking, "why should I use a database", the real question should be, "why not"?