InterwebTech

CSS Experiences and Resources

noreply@blogger.com (Brian Curry) — Thu, 25 Jun 2009 07:01:00 +0000

Ah, CSS, the supposed yin to HTML yang. I vaguely remember CSS, although I was always confused what exactly “cascading” style sheets meant. I always assumed it meant that outer tag properties apply to nested tags. Well, I was half right. It also refers to the way styles that apply to the same tags are given priority. In other words, the priorities order of inline, internal page, external, and browser styles. Luckily I have done it right by accident in the past on a website I made for my wedding.

The “meat” of CSS isn't as difficult as I thought it was. Learning the difference between class, id, tag specific, generic, and attribute specific styles was much easier this time around compared to the last few times I tried to learn. The only thing I found somewhat confusing was pseudo-classes and pseudo-element. Whoever came up with these names could have come up with something better. I also couldn't find the difference between pseudo-elements and pseudo-classes anywhere. Does anyone know?

I played with CSS for a good 2 hours after going through the W3CSchool CSS tutorial. I have a feeling the only real way to “learn” CSS is to play around with it and become familiar with the common styles used. I have already made some style changes in the blog template such as content width and I added a spiffy navigation bar. I'll be playing with the CSS for this blog the next couple of weeks so don't be surprised if it looks different each time you come here :)

That's all I have for today. Next week I will start going sharing my experiences with JavaScript. I plan to break it into two parts: Part 1 for generic client side scripting and basic JavaScript and Part 2 for intermediate/advanced JavaScript.

Resources:

· W3Schools CSS Tutorial

· Wikipedia CSS Article

· CSS Specification

· Forum focused on CSS

· CSS Examples

· CSS Reference

Howto: IIS web server on home computer

noreply@blogger.com (Brian Curry) — Wed, 24 Jun 2009 07:01:00 +0000

There are two software suites available to quickly setup a webserver on any pc. First one is IIS for Windows and the second is Apache for, well, practically any system. For this article, I will cover installing IIS in Windows.

IIS stands for “Internet Information Services”, which is Microsoft's implementation of a basic home web server. Just follow the following steps depending on your operating system and it you should have a webserver up and running in no time!

For Windows Vista:

1. Open up the Control Panel (Start->Control Panel)

2. Double Click Programs

3. Under Installed Programs, Click “Turn on or off Windows software”

4. A windows security window will pop up. Click Allow.

5. Look for an entry called “Internet Information Services”. Click the box next to it. You can also select/unselect sub-features if you like. The “World Wide Web” sub-feature is required for this to work.

6. Click OK.

7. Wait for the progress dialog to complete.

8. Open up a web browser and type http://localhost/ . An IIS welcome page should appear.

Source: http://learn.iis.net/page.aspx/28/installing-iis-70-on-windows-vista/

For Windows XP:

1. Go to the Control Panel ( Start->Settings->Control Panel ).

2. Double click Administrative Tools.

3. Click on Add/Remove Windows Components.

4. Look for an entry called “Internet Information Services”. Click the box next to it. You can also select/unselect sub-features if you like. The “World Wide Web” sub-feature is required for this to work.

5. Click Next.

6. Wait for IIS to install.

7. Click Finish.

9. Open up a web browser and type http://localhost/ . An IIS welcome page should appear.

Source: http://www.learnthat.com/courses/computer/windowsxp/iis/

After you have verified IIS is installed and running, look for the inetpub folder in the root directory (normally C:/inetpub ). Open up the wwwroot folder. This is the root folder for IIS webpages. Add any pages you want here.

Congratulations, you have setup your first webserver!

XHTML Validators Review, Part 2

noreply@blogger.com (Brian Curry) — Tue, 23 Jun 2009 07:01:00 +0000

Validome Online Validator

The Validome online validator is available at http://www.validome.org/

Licensing

The Validome validator is free to use for personal and professional use. An XML service is available for external applications to use the validator but use for commercial software is restricted.

Documentation

A simple help page is available at http://www.validome.org/lang/en/html/help . A resources page is available with listings of valid tags for several different specifications.

Features

The Validome validator provides auto-detect for doctype and character sets. It allows document checking via URL and file upload, however does not provide direct input like the W3C validator. It allows markup cleanup via HTML Tidy and you can view original markup code in the validation results page. Like the W3C validator, it does not provide batch validation.

Test

The first file I tested did not have a DOCTYPE, and the validator refused to validate with a default DOCTYPE. Once I manually set the DOCTYPE in the validator options the validator worked fine with decent cleanup. However, for some reason it considered the xmlns and xml:lang attributes invalid so every file came back as invalid. I thought I was going crazy but then I checked out the W3 website and it's examples for strict XHTML files included the xmlns and xml:lang attributes. Quite strange for an XHTML validator to have such a common attribute flagged as invalid. The validator's cleanup markup option didn't work – it refused to correct any of the files I checked.

Knee Jerk Conclusion – Junk. It has an inferior feature set compared to the W3C validator, it's cleanup option didn't work, and the auto-detect for the doctype functioned poorly.

WDG online validator

The WDG online validator is available at http://htmlhelp.com/tools/validator/ .

Licensing

This validator is available only for personal/non-commercial use, according to the creative commons license.

Documentation

The WDG group provides information about common validation problems, tips, a comparison to the W3C online validator, and a list of character encodings supported.

Features

When looking at the options I assumed the WDG validator was actually an generic HTML validator because it lacked an option to specify DOCTYPE. I realized later that an auto-detect is built into the validator (more on this in the testing section). However, it does provide document checking by URL, upload, and direct input. It also provides checking for entire websites and a batch mode (for online web pages). You can also show the original markup in the results page.

Testing

This validator works well enough to detect all tag errors (such as nesting mistakes, unclosed tags, etc). However, it didn't provide warnings for things such as no specified xml language, missing charset, and no namespace. It also displayed multiple errors for simple errors such as unclosed tags. The validator was confused for the xmlns and xml:lang attributes for the file without a specificed DOCTYPE (which it assumed was transitional).

Knee-Jerk Conclusion – Decent alternative to the W3C validator for single static pages. However, the batch checking for online web pages and websites is awesome (assuming it works, I didn't test this) for currently deployed sites.

SimpleTidy

SimpleTidy is a free application for download at http://www.tsnetsoft.com/software.htm

Licensing

Available for personal/non-commercial use. The license is available at http://www.tsnetsoft.com/license.htm .There are also commercial versions available at a cost.

Documentation

No online documentation is available, only contact information for support. Strangely enough, there is no built in help in the application either.

Features

SimpleTidy is, well, simple. It gives options to cleanup single files or run a batch cleanup on a folder (with an option for subfolders). You can view errors for single files after cleanup in the User Interface.

Testing

Since this application is focused on cleanup rather than validation it only displays errors when cleanup has problems. It does not state the validation errors in the original documents. Also, there is no way for specifying the DOCTYPE to use for the cleanup. I would imagine these features are avaiable in the paid versions of the application. Otherwise, the cleanup worked correctly for the transitional DOCTYPE.

Knee-Jerk Conclusion – Don't use if you want to use the strict DOCTYPE. It might be worth a look at the paid versions of the application.

Conclusion

The W3C online validator was far and away the best online validator for single, static web pages. Avoid the Validome validator and use the WDG validator for deployed sites. If you choose to use one of the offline validators, use SimpleTidy if you want basic cleanup functionality. Otherwise, use HTMLTidy for more advanced options (some configuration required).

XHTML Validators Review, Part 1

noreply@blogger.com (Brian Curry) — Mon, 22 Jun 2009 07:01:00 +0000

OK, OK, I know I promised a post including reviews for all 5 XHTML validators but I realized pretty quickly that the post would be extremely long if I included all 5 so I broke it into 2 parts. The first post today will include a review of the W3C online validator and the HTML Tidy application.

W3C Markup Validation Service

The W3C markup Validation service is an online validator available on the W3C website.

Licensing

From what I can tell, this service is free to use for any web page. However, using a validated icon on a web page requires the page be previously validated by this service. Information about the icon licensing can be found on the validator help page.

Documentation

The validator has supporting User Guide and FAQ/help pages.

Features

The W3C validator can handle 3 different ways of inputting HTML documents for validation. You can check an online document via URI, upload a file, or directly enter a page markup in the service page. However, this service does not provide batch validation. Other options include Automatic character encoding and document type detection, markup cleanup (via HTML Tidy), and validation for error pages.

Test

The W3C validator did rather well in validating the test files. It detected all errors (or at least, gave warnings) for each test file. The markup correction was correct each time and allows the user to view the source right about the corrected markup. There were some annoyances though. Every time the validator ran, it would the file name field. While this wasn't that big of a deal, it was rather confusing to have a “Revalidate” button that didn't automatically re-validate the file previously validated. Also, the tidy option reset every time no code was cleaned up in the previous validation check. The validator also gave multiple error messages for each error, which more of less made the error messages useless without the built in markup cleanup. Other things to note is the validator assumes the DOCTYPE is transitional if you don't specify or it can't detect the type, so make sure to specify if you want your documents validated using the frameset or strict DOCTYPES.

Knee Jerk Conclusion – Use the W3C validator for single, static web pages. Otherwise, find something that has a batch execution option.

HTML Tidy

HTML Tidy isn't per se an XHTML validator. Rather, it is a library/command prompt application that cleans up XHTML markup of files. It can be found at http://tidy.sourceforge.net/.

Licensing

HTML Tidy is an open source project so it's free to use on both personal and commercial pages. The license is listed on the project website.

Documentation

HTML Tidy has plenty of documentation including an overview by Dave Raggett, a quick reference guide, user manual, an API, and a FAQ.

Features

It lacks a built in interface but there is one user interface available. Also, if you just run the command prompt version on a file, all results will be output to the command prompt which isn't quite useful. Luckily there are plenty of run options available such as specifying doctype, outputting errors and warnings to another file, and automatically updating the HTML file's contents to the cleaned up code. Tidy can also be run with a configuration file with custom tailored settings.

Testing

I decided not to use available user interface for the tests. This made it somewhat difficult to run the tests immediately, but after checking out the documentation I setup a batch file to run HTML Tidy on all of the test files at once. It assumed transitional DOCTYPE also, so I ran tidy with the DOCTYPE setting set a strict. The cleanup was the same as the W3C validator (as expected since HTML tidy is used for the W3C validator). I wasn't quite sure if the files were validated with the transitional or strict DOCTYPE because the files DOCTYPE in the files stayed as strict but the error output files said “Info: Document content looks like XHTML 1.0 Transitional”.

Knee Jerk Conclusion – I would recommend using this for web development projects with custom configuration in a build script rather than for manually for single pages.

Well thats it for today, tune in tomorrow for part 2, which will include reviews of the Validone, WDG, and SimpleTidy validators and a final comparison between all 5.

XTHML Experiences and Resources

noreply@blogger.com (Brian Curry) — Thu, 18 Jun 2009 05:38:00 +0000

Prior to studying XHTML this week I had a vague idea of what XHTML is. I knew it was some combination of HTML and XML, but besides that I knew nothing. Strangely, XHTML was never covered in my high school class, probably because we only used Dreamweaver.

Once I started learning the differences between XHTML and HTML I became very interested in using it rather than standard HTML. I have run into standardization problems in college and work (primarily serialization) projects. So when I read about the three different DTD's I was all for the strict version. At first I had a difficult time finding differences between the transitional and strict DTDS besides the generic description of “Use the transitional DOCTYPE when you want to still use HTML's presentational features” for transitional and “Use the strict DOCTYPE when you want really clean markup, free of presentational clutter ”. So, I Googled it of course. I found quite a few descriptions of what exactly the above statements mean-

Once I started changing my test site pages to XHTML I started wondering how to make sure I was actually writing up valid XHTML code. That's when I started looking up XHTML validators. Luckily, there is a plethora of validators available for free. I tried a few,fixed some errors, and marveled at the perfection that is my XHTML code...well, not really, that's pretty pathetic if I had, but I digress. This leads me into my product review for Monday. I will be covering the following XHTML validators:

Tune in Monday for my pros/cons and comparison of the 5 validators, and throughout the week for my new posts, including a howto on Wednesday and my CSS experiences on Thursday.

Resources:

New Posting Lineup

noreply@blogger.com (Brian Curry) — Wed, 17 Jun 2009 17:26:00 +0000

I plan to switch to a new posting lineup starting next week. It will include a new post every weekday. The lineup is as follows:

Monday - Product Reviews
Tuesday - Blog/Post Updates, Quick Thoughts, miscellaneous.
Wednesday - Howtos, ranging from simple to elaborate tasks.
Thursday - Experiences/Resources
Friday - Weekly web design/development news roundup

That's it for today. Tune back tomorrow for my xhtml overview.

Komodo Edit Review

noreply@blogger.com (Brian Curry) — Tue, 16 Jun 2009 00:17:00 +0000

The Good
Intuitive Interface – It has the classic combination of menu options, (non-cluttered) toolbar for frequent functions, a project pane, and code pane. It works well in other IDEs, and works well here.

Smart projects – I created a new project in the root folder for my test website and the project automatically recognized my html files and subfolders with documents. The project is also shown in a project pane for ease of navigation, similar to project panes in other IDE's such as Visual Studio, Eclipse, etc.

Search – Includes everything from basic find and replace to searches with regular expressions and find/replace in files and projects.

The OK
Decent autocompletion - for html and css, among others. I ran into a few problems where it didn't recognize some common tags such as

one moment but could recognize them the next.

The Bad
No validation – I expected at least some type of error display for basic html coding errors. It included tag recognition, but strangely enough doesn't include validation for missing closing tags in an html or an xhtml document, let alone DTD checking. The application claims to have syntax checking, but it failed to recognize a problem with an html document with a missing tag.

The Surprising
File comparison – Hidden in the tools menu is an option to compare files. I found this especially useful after running an external XHTML validator and compared to two to see my mistakes.

Conclusion
Komodo Edit is a decent free non-WYSIWYG editor with some good features such as smart projects, an intuitive interface, and a full featured search. It fulfills all of the basic needs of someone who wants to write simple html/css websites. However, I found that the lack of any reasonable validation and syntax checking was a big letdown, especially for those who want to follow the strict standards. I plan to stick with Komodo Edit for now, but I have a feeling I will switch to another code editor with a larger (or, at least, extensible) feature set.

Just a note, I'll probably post an updated review once I get into client side scripting. Komodo Edit appears to provide useful features for client side scripting languages, and I feel it deserves a more complete review before giving it a grade.

Tune back in on Thursday for my XHTML overview and next Monday for my review of several different XHTML validators.

HTML Experiences and Resources

noreply@blogger.com (Brian Curry) — Fri, 12 Jun 2009 02:10:00 +0000

When started out looking for resources for HTML I figured the majority of it was going to be a

refresher for me since I have had some exposure to HTML in the past. I took a class in high school covering some WSIWYG (what you see is what you get) page design with Dreamweaver and last year did a simple information website for my wedding. I went through the W3 tutorial and html.net tutorials (listed below) pretty quickly.

What surprised me was the recommendation for using tables for layout and using frames. I've heard from former coworkers and random places on the internet not to use either of these web design techniques, so I looked into it a bit further.

I found quite a few suggestions not to use tables for layouts. Jennifer Kyrnin mentions some good points including the fact that using tables for layout is invalid XHTML. After some further digging W3 includes a howto for table-less web page design. All of the recommendations I found suggested using CSS for layout, so I decided to hold off implementing these techniques until I get to CSS in a couple of weeks.

I haven't seen a website with frames in quite a while. Some have been arguing since 1999 the problems with frames. There are even some who call frames evil, for reasons ranging from difficulty bookmarking pages, to giving search engines problems, to slow loading times. I'll steer clear of frames for now. I'll probably play around with them later just to say I did it.

The latter part of the W3 tutorial started getting into scripting and server setup, which I skipped for now when I get to client side scripting in a few weeks.

After I completed both tutorials I took a quiz and got 17 out of 20 correct. Not bad, the 3 I got wrong were just tag questions. This quiz was ok, but I was somewhat let down by the number of “what is the tag for X” questions rather than conceptual questions.

Monday I will post my first software review on Komodo Edit, the program I have been using this week for practicing/learning HTML. Next Thursday I will post my experiences of the strict version of HTML, XTHML.

Resources:

http://www.w3schools.com/html/default.asp – This is the primary tutorial I used for learning which includes a good format and plenty of examples. I will be using this website for the majority of the topics.
http://www.w3.org/TR/html401 Home of the world wide consortium and maintainers of the html specification. This is the official HTML 4.01 specification. I didn't do much more than skim this. Good for reference purposes.
http://www.html.net/tutorials/html/ - A decent tutorial on basic HTML for the non-programming type. Watch out for the picture in lesson 9 though...
http://en.wikipedia.org/wiki/HTML – Includes a detailed history of HTML and XHTML. I didn't care for the content on the rest of the page.

Welcome to InterwebTech

noreply@blogger.com (Brian Curry) — Wed, 10 Jun 2009 01:52:00 +0000

Hello, and welcome to InterwebTech.

First, a little background information about me. I graduated from Texas A&M in December of 2007 with a Bachelor's of Science in Computer Engineering. After I graduated I decided to stick around in College Station and accepted a position as a junior software developer at a small, but growing, software consultation company. I'm married and we are expecting our first child in August.

Why did I start this blog? Well, I realized recently that as much time as I spend on the internet, I know very little about how it works and how websites are created and maintained. As I thought about it further I almost felt ashamed that, as a software developer, I knew so little about web development. That's when I decided to start from the ground up and learn website design and development from the basics. I then figured hey, while I'm at it I might as well share my experiences with learning and the tools I use with others.

Once a week I will write a summary of my previous week's experiences. I will also occasionally write about my experiences with different web developement programs and tools I have used.

I guess that's it for now. Check back often and feel free to share you opinions and similar experiences during my foray into web design.