Web Technology @ CCBC

Student driven blog for all things web.

Archive for February, 2008

Google Humor

Posted by vjnoone on February 29, 2008

I’m STILL sick. It sucks.

To help cheer me up I go to the internet for some geek humor and I’m using my latest find to tell you an importunates message about class.

So please read this and then click on the link below for a chuckle…

IMPORTANT NOTE about the IMPORTANT NOTE (2/29): I realized after the fact that it is unfair for me to expect students to come on an off day to take the test. Because of this I will be placing test 1 in the testing center at all three campuses. You will have 1 week (3/3 to 3/10) to take the test at your convenience. I’m so sorry for the confusion and trouble. As of today, Friday I am still not 100% and had to take another sick day. I hope you understand. I will still be in class on Monday to give the lecture we missed this passed week. I will also be grading and providing feedback for the bio labs.

To make an appointment at the testing centers please visit the testing centers website.

Ok, ready for the chuckle?

What if Google had to design their user interface for Google?

See you guys Monday. Post any questions in the comments.

-Roni

Posted in fun stuff, news, webt143ewh | 1 Comment »

Free XHTML/CSS Templates For Web Design

Posted by dnorth5 on February 29, 2008

I saw this while browsing on my email. It’s kind of cool you just download the css stuff and put it to work. They show you previews and all for it. You might even be able to upload your own onto the site.

http://www.templateworld.com/free_templates.html

– Dorian

Posted in CSS, design, webt143ewh | 4 Comments »

VNoone Faculty Page has moved

Posted by mkriss5681 on February 25, 2008

The old site on the syllabus is now down and has been moved to http://student.ccbcmd.edu/~vnoone/index.html

Posted in webt143ewh | 1 Comment »

My “test lab”

Posted by killerkulture on February 24, 2008

I test websites, mostly e-commerce and non-tranactional sites (less frequently). When I test websites, I’m testing the following (keep in mind that I havent received a requirements doc or functional spec in over 2 years, so most of my testing is based on ecommerce standards, usability best practices, and common sense, and some of the things I test for aren’t traditionally QA tasks) :

  • Functionality
  • Data Validation
  • Usability (ease of use, conformance to industry standards, intuitive flow, navigation, design, etc.)
  • Search Engine Optimization
  • Form field validation
  • Data validation (web to db)
  • Integration between the website and ERP
  • Data migration

I’m really excited about web standards because without them there are too many uncontrollable variables when you consider browser settings, computer configurations, and on top of it all add user personalization.

Since there aren’t enought people and computers in the world to test for every possible combination out there, I first needed to decide which browsers, OS’s, and configurations to test in. There are an infinite number of different combinations of browsers/versions/resolutions out there and thankfully we have Omniture which I use to determine which settings/configurations our site visitors most commonly use (just like politics, you can’t please everyone – so I look at the metrics and determine who the “majorities” are). From these metrics I determine:

  • 3 Most frequently used operating systems – 2 for PCs (WindowsXP and Vista), and 1 most frequently used Mac OS. The ratio of PC to Mac visitors is about 90/10.
  • Most popular PC browsers (and versions) used by our customers. I usually test against the top 3-4 PC browsers and top 2 Mac broswers. For my situation this comes down to IE 6.0, IE 7.0, FF 1.5, FF2.0 for the Windows users and FF 2.o and the latest Safari release for Mac users. Keep your eye on that Windows Vista + IE 7.0 combinaton…I find alot of design flaws there, especially when Flash is involved.
  • 2 groups of the most commonly used monitor resolutions:
    •Equal to 1024 x 768
    •Above 1024 x 768
    •Below 1024 x 768
    …About 60% of our site visitors use “1024 x 768 AND below” and 40% use “Above 1024 x 768”. Since the majority of our site visitors belong to the “1024 x 768 AND below” group, from a design perspective I use 1024 x 768 as the base line to test against. In other words, the site must look and function ideally in 1024 x 768 (which I constantly argue about with our design team who are all Mac users on 30″ monitors. I swear- one day I’ll become rich from inventing a “Monitor cleaner/Nose smudge remover” for these users.)
  • Browser window dimensions: is the reason why I group 1024 x 768 users into the “1024 x 768 and below” bucket instead of grouping them as “1024 x 768 and above”. Based on the Omniture metrics, the majority of site visitors who have their monitor resolutions set to 1024 x 768 do not have their browser windows fully maximized to fill their monitor heighth and width capacity. This can be attributed to browser toolbar add-ons, variable Windows OS taskbar heighth, and users wanting the ability to see multiple windows. (Keep that in mind next time you purposefully design a chrome-less site to exclude the scrollbar.)

So basically I have two computers at my desk:
1. PC
• OS = Windows XP
• Browsers – IE 6.0, FF 2.0
2. Mac (iMac)
• OS 10.x
• Browsers = FF 2.0, Safari (latest ver.)
…my co-workers have other computers with different browsers that I ask them to test on when I’m testing for cross-browser compatibility.

Here are the tools and browser plug-ins that I use, and the purpose for using them:

1. Firefox plug-ins:

  • Live HTTP Headers
    – Website Front end testing: when I’m testing session data and behavior (loggin in/out, loggin out, multi user computers, saved and abandoned shopping carts, availability of secure customer data through use of the browser’s navigation (back button)).
  • Flash Versions
    – Since Flash is so widely used and accepted (arguably), I don’t test to see how the sites behave in flash-less browsers…instead I use a Firefox plug-in application to test the site in different versions of Flash (offered by adobe/macromedia).
  • FireForm (Form Saver)
    – When you need to test anything involving user input (post data incl form field validation, drop down menus, etc) like product searches, order placement, user registration, logging in, etc – form saver is good for quickly pasting data into form fields (but don’t let it make you a lazy tester).
  • Resize Window
    -Allows you to resize your browser window to emulate different monitor resolutions without doing the old “Show desktop, right click, properties, settings, change to new monitor resolution, ok, save, yes (save changes)…” for each resolution you’re testing for.
  • Firebug
    – “Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” Since our developer’s are already debugging before it even gets to the testing phase, I usually use Firebug for displaying the details of script errors I find in the different browsers.
  • IE Tab
    – It’s a huge pain to test in all of these different browsers, but thankfully, this add on alleviates some of that by loading IE in a Firefox tab.
  • Recorders (iOpus Macros, Selenium IDE)
    – Repetition, complacency, and boredom are the enemies of testing. If you have repetative tasks that require the same actions over and over again but don’t require an eye for details, sometimes it makes sense to record these front end tests so that you can quickly execute them later – like for regression testing. Big caveat here though – maintaining automated/recorded tests if you rely on them too heavily….so don’t. I use them when I need to verify that user input is getting to the database.
  • SEO, SEOquake
    – Aside from validating tracking pixel behavior, most QA analysts and testers don’t need to touch any of the marketing duties. However, the marketing team in my dept doesn’t really know what SEO stands for, so I’ve made SEO testing part of my checklist….mostly checking to see that title tags have content and that the pages are crawlable/indexable by the search engines. Because SEO really touches on every piece of a website, these plug-ins help with keyword analysis, measuring inbound/outbound links, the Search engine friendliness of your pages, and much more.

2. Xenu

  • Xenu is a free application that you can use to automagically crawl your site for broken links and assets.

3. Mantis

  • I’ve just installed this open source bug tracking application on my web server, and it seems to be pretty decent. After 3 days of struggling to install Bugzilla, I opted for the ease of the Mantis installation.

4. TestLink

  • For the last 5-6 years I’ve been writing test cases in Excel…with no real structured method of managing them (aside from file naming conventions.) While searching for an open source test case manaement application I came across TestLink….it allows you to assign test cases to test suites, builds, releases, requirements, test plans, and projects. Seems pretty good so far.

5. Clear Cache

  • For many tests, you’ll need a fresh browser. Clear cache adds a button to Firefox that enables you to quickly clear your browser’s cache between tests (without having to go to the toolbar>tools>clear private data>etc.

6. Screengrab, SnagIt

  • I’m constantly taking screenshots of website defects. For a while I was just doing Print Screen and photoshop or MS Paint, but Screengrab allows you to take a screenshot, edit, crop, copy, annotate, etc without leaving the browser. Infortunately, Screengram doesn’t grab Flex very well, so for that and for IE I use SnagIt.

Posted in QA | 3 Comments »

The Robots Exclusion Protocol

Posted by jrosero on February 24, 2008

This site has a ton of information on bots and all kinds of things that might be scanning your site.

http://www.robotstxt.org/

http://www.botsvsbrowsers.com/I know that there are options to prevent posts by unregistered members if you are the owner of a blog, but a lot of times you still get flooded with spam posts. Hopefully these sites can help those of you with your own sites who might be experiencing these annoyances.

Posted in personal insights, useful tools | Tagged: , , | Leave a Comment »

says….isn’t this how hacks came about? Vnoone’s class

Posted by miisronhm on February 24, 2008

In our Dog book they mention that we still need hacks for Flash, Video etc. Basically they tell us we can serve up different code to different browsers if we have the server-side scripting skills. What does the web designer do besides keep hacking?

Posted in questions, webt143ewh | 1 Comment »

Embedding Flash In A Strict Compliant Environment

Posted by CDowd on February 22, 2008

Ever use those little embed tags to post flash? Well, they’re not compliant.

I have to build a website for my MULT 109 class, and since I’m in WEBT I decided that I would try to make every page strict compliant. Then I got to my flash game page. What a nightmare!!!

Anyway, I did an exhaustive Google search for an answer, and I found these articles:

The third article is the one I finally went with. It was a bit of a bear, since it involves javascript, and CSS for layout, rather than just a simple cut and paste embed script, but wow it works!

Here’s my Valid XHTML 1.0 Strict webpage for proof. There are a  couple of CSS issues I’m still working on, but the page is valid, AND the flash works in both Firefox and IE. I think that’s worth a little extra credit. 😉

Posted in articles, design, examples, javascript, tutorials, web standards | Tagged: , , , | 6 Comments »

Excellent Site/Blog on CSS and Cross-Browser Issues

Posted by Rodney Ankeny on February 18, 2008

http://www.designvitality.com/blog/2007/10/designing-for-every-browser-how-to-make-your-site-fully-cross-browser-compatible/This site has some excellent articles and instruction and discussions on the best way to make your CSS cross-browser compatible.The link above takes you to a particular post. The author lists over 10 very well written articles that you should definitely check out.The site itself, DesignVitality.com, is worth looking over for all things Web (and Graphics).Enjoy.-Rodney

Posted in CSS, design, tutorials, usability, web culture, web standards, webt143ewh | Leave a Comment »

Why validation is so Important

Posted by akeatin1 on February 18, 2008

Owen Briggs gives some insight here http://www.thenoodleincident.com/tutorials/box_lesson/validation.html about why it is so important to validate your code.

This just reinforces things we have already read and learned in class.

Posted in classes, web standards, webt143ewh | 1 Comment »

Browser Usage

Posted by Rodney Ankeny on February 18, 2008

I had asked the question of browser market share in the last class, and really wanted to know the exact answer. I found this page on W3 Schools, Browser Statistics, and the results floored me. These are for W3 Schools sites only, but the market share for Firefox was over 37%. This, of course, reflects a usage for a computer savvy audience. IE accounted for only 55%.After looking into it further, I found that Wikipedia (“Usage share of web browsers“) shows among the general population a 16% share for Firefox, 77% for IE, and 5% for Safari (or 1 in 20 users). These 3 browsers total more than 98.5 % of users, which I feel is sufficient for the site I am working on now. Ignore any of these at your own peril.The W3 Schools data shows that all this is dependent on your market, which is one of the first questions you should be asking yourself or your client when building a site. -Rodney

Posted in web culture, web standards, webt143ewh | Leave a Comment »