User:AltairGaming

Testing

This page will be used for testing, mainly because I don't really know that much about formatting a Wikipedia article so I wouldn't dare attempt it on an active page. So this is basically my own sandbox. An extended sandbox will appear as a sub-article of this user page and as I learn more about formatting and editing in Wiki, the page will be extended.

Interests

Web Design

I have been involved in web design for a few years now. For the past year (as of December 11, 2008), my involvement in web design has been almost purely educational than commercial, due to having other priorities in life over the past year. I operate my own web server and my own series of websites, some of them contributed by members of the community.

Experience

I have advanced knowledge of PHP (Hypertext Preprocessor) and am well-versed in XML, HTML, and XHTML markup. Most of the web pages I make are designed to be fully-valid and accessible in XHTML 1.0 Strict. CSS (Cascading Style Sheets) is another favorite of mine, and to me is absolutely necessary when making just about any web page. I have been using an increasing amount of Javascript (standardized) and XML (Extensible Markup Language) during the past year, due to XML's ability to be used in tandom with Javascript to produce pages that do not need to reload when importing data (such as comments on the next page or importing a new forum post when you post a message). Much of this is known as AJAX but what it all comes down to is making the web easier to use and more accessible/sensible for the end users, regardless of what browser(s) they are using.

HTML Tables and Lists

I do not use tables to format background colors nor do I use other HTML table element exploits in which to get my web pages to work. I also do not abuse lists as a means of constructing page layout. I use tables only for data and lists for what they are intended for - lists. Why have the div element in HTML if you're not going to use it for page layout? This is just my own opinion, but from what I've gathered throughout the past three years, all of these HTML elements have a defined purpose. The defined purpose of tables, for example, is to layout data. You can use tables for things like statistics, displaying changes in a database in an administration panel, perhaps a calendar, and so on. In addition, lists can also be used for things like calendars, since a calendar is basically a list of dates; however, tables seem to be more appropriate for normal calendars that are organized into columns for each day of the week.

DIV Element as Website Layout Container

To some examining my markup, it would seem that I spam the HTML div element. Well, if it's not a list, table, definition list, ordered list, address, citation, quotation, abbreviation (including acronyms), emphasized or strongly-emphasized text, generic styled text (span element), and so on, then it must be a layout element. For my purposes, the div tag is the best for site layout, as most other tags do not accept addition of div or paragraph tags due to the rules of XHTML 1.0 Strict. For example, you cannot insert a paragraph or another division (section) inside a paragraph. So it would be counterproductive to use a paragraph element for website layout.

Proper Use of Level Headings

I take advantage of the six-level-headings from h1 to h6. No web page that I have made ever starts with anything over h1, as starting with h2, h3, or so on does not make any semantic sense. I also do not skip headings just for the goal of achieving a smaller or larger font size. I rely on style sheets (CSS) for such purposes. If you skip headings at any point, user agents can possibly become confused as to your page's organization.

Tables and their Attributes

Tables, when used correctly, can be a good addition to any web page, as long as you're using it for data (such as a memberlist, calendar, statistics, database table examination, and so on). I completely ignore most of the attributes tables and their sub-elements originally came packed with. These elements include many deprecated attributes, whether they were deprecated or obsoleted in HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict, or Module-Based XHTML (XHTML 1.1). Bgcolor, border, width, height, marginheight, marginwidth, leftmargin, rightmargin, topmargin, bottommargin, background, color, vlink, alink, cellpadding, and cellspacing. Cellpadding and cellspacing were not deprecated; however, I do not use them anyway and rely solely on stylesheets, whether they be for screen media or any other wireless or portable format. In addition, all of my attribute and element names are in lowercase, never in uppercase.

Blink and Marquee: Annoying HTML Tags

Other elements I completely ignore are the infamous blink and marquee proprietary HTML tags. Blink and marquee, in my opinion, are two of the most annoying elements one could use for design. If a marquee effect is required (for things such as stock tickers or news tickers), it should be accomplished using Javascript, and should not be overused on any page. Links and images should never be inside a marquee tag, or a general container used by Javascript to scroll the items. Marquee-scrolling links are a big problem on many websites and are hard to click on; in addition, if the links are in a long list of links inside scrolling text, an end user is required to wait for a time until the desired link appears in a clikable region of the displayed element. The blink tag (or styling an element to have blinking text) is annoying no matter how it is done. Blinking text is not possible to select if it is blinking when your cursor is focused on it. It is also difficult to read any long block of text if it is blinking. Imagine if someone told you to read the entire Lord of the Rings series, all three books, and they kept moving the page up and down every second.

Object Tag

Due to problems with Internet Explorer and objects, using the object element for images is out of the question. The object tag can be used for content on most other browsers; however, Internet Explorer's proprietary object tag came with some functions that clash with the standardized design for the object tag. In other words, using the object tag in most versions of Internet Explorer will not achieve the desired effect and oftentimes an object will contain a nasty-looking border around object element content. So HTML commenting methods need to be used to replace object with iframe when the browser is Internet Explorer.

Commenting in Markup (HTML) and Source (PHP)

Even the original programmer/designer of a web site needs to know where to look for code when a problem arises, or he/she needs to add a new element. In complicated templates and source code, a good way of doing this is to use commenting to indicate the beginning or ending of recently-changed material, and what the block of changed material actually does. Correct use of tabbing to nest if statements in PHP, along with other block statements, is the best way to make your source code easily-modified in the case of problems or upgrades.

Valid HTML and XHTML

Valid HTML and XHTML is defined as using only those elements and attributes that have been supplied possible use by the DTD (Document Type Definition). To be valid, tags must also be in the correct places and attributes must be quoted if they are in XHTML 1.0 or above. In some earlier forms of HTML, element and attribute names may be capitalized, but in most later versions along with XHTML, element and attribute names must be in lowercase letters always. This being said, a valid document isn't always a good document. Other things such as style, the content itself, and the values of metadata must be accessible and usable.

Well-formed XML and XHTML

To serve XHTML as a content type of 'application/xhtml+xml', a document must always be well-formed or else the page will be solely an parsing error message. The same goes for anything hosted as xml. This is difficult to do for larger sites that allow users to insert articles, such as their own markup. It is also difficult for forums when bbcode functionality sometimes causes some well-formedness errors. And since there may be many bbcode tags that may be used on a forum, the problem can expand. On some forums, the functionality of list bbcode sometimes allows an unordered or ordered list to contain no list items (li). This is more a validity problem than anything, since no well-formedness error has been made.

Correctly-nesting Elements

Elements must be correctly-nested in XML and XHTML, as well as in other languages with the XML construct. This being said, one cannot declare a strong tag, then an em tag, then end the strong tag before ending the em tag. The order must go...(strong)(em)content(/em)(/strong), replacing parenthesis with less than or more than signs. If it is (strong)(em)content(/strong)(/em), anything hosted as XML or XHTML will return a parsing error for the document, instead of the document itself. XML parsing does not rely on draconian error-detecting and thus when there is an error, the fallback is to present an error message. If a browser does not have such a way of handling XML parsing errors, the browser may crash.

Empty Tags

Empty tags are tags such as meta, br, hr, link, and so forth. In HTML, a br tag could be written <br>, but in XHTML served as text/html, the construct is <br />. The extra space after hr, br, link, meta, etc... is not needed if the document is hosted as XML or XHTML, but XHTML hosted as text/html for compatibility reasons may require this space. Not closing empty tags in XML and XHTML will result in a parsing error, because it would expect an end tag for <br> for example, such as </br>.

Quoted and Non-Empty Attributes

In HTML, attributes may be unquoted. For example, you may write 'checked' inside an input with the type check; however, in XHTML and XML, such a construct is illegal. Instead, an attribute must be quoted, for example: 'checked="checked"'. If any of your elements contain attributes that are not quoted, then you will suffer an XML parsing error if the document is served in an XML language, either by content negotiation or native file type.

Presentational Elements and Attributes

Elements

Presentational elements are those elements that have no semantic meaning, but have a purely-presentational meaning. Such elements include b, i, u, s, strike, tt, and so on. Elements that have semantic meaning and should be used for what they imply are em (emphasis), strong (strong emphasis), abbr (abbreviation), span (inline text that has a special meaning), p (paragraph), and so on. This is why paragraphs cannot contain paragraphs or divisions inside of them. They may also not contain lists and tables; however, the XHTML 2.0 WG (Working Group) has designated that paragraphs may contain lists or tables.

Other presentational elements that are proprietary are those such as blink and marquee. Marquee is a block of text that scrolls. Placing links within scrolling marquee causes a profound problem - you have to wait for links to scroll up to a clickable region and it is hard to click them while they are moving. Blink is a block of text that, well, blinks. Its CSS replacement is 'text-decoration:blink', but either way the blink construct is a way to more or less annoy visitors rather than using other tags to define emphasis.

Many people use blink and marquee to define important things such as news or changes to the privacy policy or rules. Well, I just have one personal thing to say on that. If the text is so important, then why doesn't the webmaster or whoever is responsible just take use of tags such as 'em' or 'strong', or perhaps any combination of elements that are styled to create the illusion of importance - anything but using the blink tag.

Another common practice is to use text background colors to define importance. And when those colors are bright, like red, orange, yellow, green, blue, purple, the message gets lost very quickly. Multi-colored text is a major pain to anyone visiting a web page, and to most internet users today suggests that there may be animated gif advertisements on the site. Most people will not wait to view the page and will simply click 'back' on their browsers.

Attributes

Presentational attributes, like presentational elements, are those attributes that have no semantic meaning, once again, and only have a presentational use. Such attributes include width, height, float, bgcolor, background, border, valign, align, leftmargin, rightmargin, topmargin, bottommargin, marginheight, vspace, hspace, and even the style attribute used by newer sites. Most of these attributes are not allowed in XHTML 1.0 Strict or Modular XHTML (XHTML 1.1). The only one of those listed attributes allowed is the style attribute; however, this attribute is not allowed for most elements in XHTML 2.0.

Attributes such as title, alt, class, and id identify an element's usage in varying degrees and aspects. The title attribute can be used on virtually any element, same with id and class (html cannot take an id or class attribute, or a title attribute), to create a tooltip for when a user's mouse is hovering over the area containing the element. The 'alt' attribute is used for images, in the case an image is not present anymore. Absence of an alt attribute that is filled in with a value will often confuse people, particularly blind or visually-impaired users who don't know what the image is supposed to be. Oftentimes, images are used inside of links, and when there is no title attribute for the anchor or no alt attribute for the image that is not empty, a blind or visually impaired user listening to the audio for the page will only hear the link of the anchor and the link of the image. Very bad. Elements such as title, alt, class, and id make styling easier as well and without them, a page falls back to using presentational elements and attributes for everything, not to mention that a webpage may be rendered completely useless to some exceptional visitors. This is avoidable, by considering the needs of the internet community. If it is not avoided, then it is just plain unacceptable. Please see National_Federation_of_the_Blind_v._Target_Corporation for more information on how a webmaster's use (or misuse) of elements and attributes may cause very serious consequences.

Separation of Church and State

Presentation (style/CSS), behavior (ECMAScript/Javascript), and content (structure/markup) should all be separate from each other. The goal of separating these concepts in a way that they can be used together is a concept that many web designers have not yet assimilated, due to a potentially high learning curve. However, once mastered, the separation of presentation, behavior, and content may allow webmasters to more-easily manage their websites' layouts, style, content, and overall appearance. Where do you go to edit the style of your page? To your CSS file, or your locally-stored CSS that is inside the style element (which should ONLY be used within the head tags of your document). Where do you go to add blocks or inline content or to alter the structure of your site? You go to the template files (whether it's static HTML or dynamic PHP that spits out HTML) and edit them! Where do you go to look for scripts? It could be in your HTML itself, inside of script tags, or it may be in an externally-referenced javascript file! The more these concepts become separated, the easier it becomes to manage a site and make it fun for everyone who uses it. It also allows the webmaster/web designer to move away from constantly editing multiple files to change content and move on to bringing more visitors and possible members to his/her webpage.

Some web designers bent on improving manageability of their websites (me being one of them) have implemented systems based on MySQL to actually store CSS lines in a database and have them parsed whenever certain conditions are satisfied. For instance, let's say you want to have separate articles that themselves are stored in a MySQL database have a certain style, but you do not want to put all of the CSS for your articles within the main style sheet as it would cause bloating of the CSS file. You have certain options, but not many of them. Since you cannot construct a 'style' element within the body tag of a document, you must have the stylesheet either referred to locally or externally, either through link or style elements in the head tag of the document. Any site using MySQL is going to be output using some dynamic software, such as PHP. In the area of your PHP that sets up the initial header of your document, you would need to place a link element with a link to a stylesheet. Let's say that the link to the dynamically-produced stylesheet is within the database and can be displayed by the action...'www.some-site.com/index.php?css;type=article;num=3'...that link referring to a stylesheet stored in the database for article number three.

Other things that I have stored in a MySQL database for style sheets are style sheets for various pages, sub-pages, user profiles, and so on. First, a style sheet is stored in CSS, and when it is needed, the PHP fetches this code, outputting it as a CSS file by use of content negotiation. The system then constructs a link element with the URL to the action in PHP that outputs the stylesheet. Thus, the link element's style sheet source is the action that supplies the style sheet. Without classing the dynamic file as a Cascading Style Sheet (text/css), this method would not work.

For website users who put up articles on a site, something like this definitely gives users more flexibility to create what they want to, without relying on draconian methods of presentation. For user profiles, the system allows website members to use their own CSS to create a truly-different profile so that not everything is a static template based on a never-changing system.

This system, as was about to be mentioned above, also has the side effect (and original intention actually) of down-sizing the site's main CSS file and dividing up the work based on what page the user is on, what profile the user is watching, what forum thread the user is reading, what article or article category they are viewing, and what custom actions made by the web master that visitors may be looking at. This means that the site's main style sheet which would otherwise be hundreds of kilobytes in size, is now a manageable 50 kilobytes in size, making each page easier to load for every single visitor or member viewing the site.

Cascading Style Sheets turns horribly-bloated terrible-use-of-semantics invalid markup into easy-to-manage and fast-to-load websites. The use of server-side programming, combined with the power of SQL, and then combined with a universal use of CSS and semantic markup produces great results, depending upon how relevant and useful your content is to your audience, how sensible the code is to clients (including Google and Yahoo bots), how the presentation of the site has been handled, and how often your content is updated. There are many other variables to having a better website, but fully-working code that is interoperable in all or at least most browsers is a start. After you are done with the semantics, content, layout, and presentation, it is easier to move on to behavior (Javascript) and it is then that a website may become truly amazing!

WIP

This page is a WIP and will be moved to this user article's sandbox, when I actually learn how to do that.

And NOW...how to make a bad RPG post

George and his men took the hole cuntry in won day. They shooted everyone in the head with good acuracy. They lost no mens that day. The Presidant awarded them the medil of honer. They were so happy.