Stylehack

A few months ago I spent some long hours researching and testing what exactly is needed to implement the HTMLArea plugins in a Zen Cart installation, with an eye to the pitfalls of IE, Firefox and Opera in regard to functionality.

The results of this research have been posted in draft form at:

http://www.stylehack.com/tutorials/article1.html

The instructions in this article are based on extensive research at the archived HTMLArea forum and from notes or comments found on or via the original HTMLArea author’s site. It also covers using the Zen Contribution “HTMLArea w/Image Manager”.

The related articles referenced at the top of Article 1 (CSS plugin, Custom Toolbars, etc) are planned for future release if there is interest from the Zen Cart community.

This information has also been posted in the Zen Cart Forums > Documentation. [Forum Post Thread]

BIG NEWS: Opera has removed all banners and is offering the Opera Web Browser for desktops free of licensing fees! Get your copy now at http://opera.com/free/! Quote from Opera: ‘Opera has removed the banners, found within our browser, and the licensing fee. Opera’s growth, due to tremendous worldwide customer support, has made todays milestone an achievable goal. Premium support is available.’ Note: If you purchased Opera in the last 30 days you can get a full refund! Why Opera? There are many reasons, so I’ll try to limit myself to a what I consider a few key points:

General Use

• built-in pop-up blocker
• excellent bookmark management features
• store a series of web pages in sessions instead of individual bookmarks, then open them all at once
• reopen pages you just closed with one click of a button
• search from the address bar (ex: ‘g mysearchterm’ displays the results of a Google search)
• change settings on-the-fly — no need to close/re-open
• built-in note taking function
• built-in password manager
• built-in download manager/panel which doesn’t slow down your continued browsing
• move menu bars, panels & buttons around at will
• highly-configurable thru gui, not through text file hacks
• no need to download/trust/install extensions from unknown authors
• supports SVG
• more standards compliant than any other browser

Accessibility

• support for portions of Aural CSS
• mouse gestures built-in
• extensive keyboard control
• extensive, easily customizable keyboard shortcuts (my favorite is using Z and X to move forward/backward thru pages I’ve visited)
• easily disable or change page styles for improved readability (custom or use pre-defined)
• true page zooming at the touch of a key (enlarges both text and images)

Geekier Toys

• built-in RSS reader
• built-in IRC chat
• built-in bit torrent client
• built-in searchable, email client (similar to gmail - I put that here because I use ~gasp~ Thunderbird - old dog, no new tricks scenario)

Basically, it comes “out of the box”, ready to go and requires much less fiddling around with it to make it operate the way I prefer. All in less than 4MB… and REALLY, REALLY FAST! More info from Opera on browser features is at http://www.opera.com/docs/specs/ A well-written user review can be found at http://slashdot.org/comments.pl?sid=162788&threshold=1&commentsort=0&tid=95&mode=thread&cid=13603510 Go get it! That’s an order. “-) http://opera.com/free/

Oh NO!  You worked hard, shed blood/sweat/tears over your web page. But when you tried to validate it, the W3C validator said you have errors! What should you do? The easiest answer is shut your computer off and spend some time with “live people”. But since you’re reading this, I guess that’s not what you want to hear. “-) Ok, my first question back to you is: have you taken any training in web coding standards? If not, your first step is to take the Build a Web Site series of classes at LVS Online. The more you learn, the less mistakes you’ll make in your coding. The instructors in those classes are very knowledgable and not anywhere near as crabby and mean as I am. “-) Even the best of us will still have errors from time to time, so let’s talk about how to use the results of the validation process to fix the problems. It’s really quite simple:

1. READ the comment and THINK about what it is saying, then ACT on it. For instance, if you see “xyz is not a valid attribute of ABC” try removing the invalid declaration(s). Check your page — does it still look the same? (Yes it will.) Re-validate. If the page validates and it still looks/performs as desired, you’re done. (If this doesn’t work, see #2 below.) Sometimes the results will even use wording similar to “xyz is not valid here. This usually is because blah blah blah.” Gasp! It even gives you some ideas of why something might be invalid!

2. RESEARCH the offending issue on the W3C site. Look up ABC and read what the valid attributes are and use them instead of xyz. At the top of each results page with problems, you will see something like this:      This page is not Valid XHTML 1.0 Transitional! Guess what? The XHTML (or HTML if you are using that standard) is CLICKABLE and takes you to the specs themselves so you can easily research your problems.

See? That’s not so hard is it! The more you do this, the more comfortable you will be with using this tool to create clean, well-structured documents on the web. There’s one other site you may find helpful — W3C Schools (not affiliated with the W3C itself). There are some good reference areas there for both coding and CSS. Be advised, however, that not everything there is cast in stone… I have run across the odd item that elicits a “Hmmm, that’s not exactly correct/complete”. Links to Resources mentioned in this article Online Classes    Build Your Web Site classes at LVSOnline    http://register.lvsonline.com/advanced_search_result.php?keywords=build
W3C Validator Links    Explanation of Error Messages    http://validator.w3.org/docs/errors.html    Very Frequently Asked Questions about Errors (List starts here)    http://validator.w3.org/docs/help.html#faq-doctype    HTML 4.01 Specs    http://www.w3.org/TR/1999/REC-html401-19991224/    XHTML 1.0 Specs    http://www.w3.org/TR/2002/REC-xhtml1-20020801/    X/HTML Validator Page (type in your links or upload your local page)    http://validator.w3.org/    CSS Validator Page (type in your link, upload a file or validate a block of text)    http://jigsaw.w3.org/css-validator/    CSS Validation FAQs    http://www.websitedev.de/css/validator-faq
Other Resources    W3C Schools HTML 4.01 Reference    http://www.w3schools.com/html/html_reference.asp    W3C Schools XHTML 1.0 Reference    http://www.w3schools.com/xhtml/xhtml_reference.asp    W3C Schools CSS2 Reference    http://www.w3schools.com/css/css_reference.asp

Some of you have noticed that I shut off commenting on this blog… well, commenting AND trackbacks. It’s not because I don’t want to hear what someone might have to say, it’s because I don’t want to fiddle with all the spamming comments/trackbacks advertising online gambling sites. I’m too much of a slacker to have the time or energy to moderate all that garbage or upgrade, fix, fiddle, etc. ad nauseum in order to avoid those who have too much free time to steal my bandwidth. Much easier to shut it all off and talk to myself. The truth is I get a lot of readers for the small amount of posting I do here… but rarely did anyone ever leave a comment anyway. So. This is your notice: if you ab-so-lutely have to speak your piece about something here, send me a note and I’ll turn commenting back on for the post you want to address. Be warned: if your post includes the words “poker” or “texas hold’em” (and related links) I’ll hunt you down and beat you soundly, right after I delete it from the moderation queue. You can reach me via becky[at]stylehack.com See? I can compromise with the best of them. Well, the laziest of them anyway. “-)

I rarely take the time to create a Favicon, but when I do — like for this particular blog — it would be nice if it was actually used by the browser. Without getting into a rant, if you use a REAL browser like Opera… or that “other” browser (aka Firefox)… then it’s not an issue. It’s only an issue if you use IckEee as your main browser. (See? No rant. grin. But no link to FF either. teehee) To make a Favicon show up in IE’s address bar, here’s the trick: Drag the blue E favicon off of the address bar with your mouse and drop it anywhere on the web page; when you let go IE will reload and replace the icon in the address bar with the Favicon for the site. I tried it, it works! Thanks to my friend and teaching partner at LVS Online, Kat (Kathy Clark) for the tip.