That’s what this post is for.

So on to the nitty gritty details.

Start with the RESTful Authentication Tutorial:

Follow the README to install, but READ THIS FIRST to fix the ExceptionLogger error Then follow these instructions to fix the OpenID plugin error Make sure you get your recaptcha keys for the config.yml, otherwise failed login attempts will bust your application. Fill out the config & database.yml files accordingly, run your database create & migrate rakes, fire up the server and make sure it looks good. Cool? Let’s move on: Define the objects Let’s begin by pointing out what, exactly, we’ll be building this application around: Galleries of Photos that Customers can order with a private Account provided to them by an Admin who can manage the galleries and review the Orders, which are also available to their respective customers. I will go through how to set up the following models like so:

• Galleries
  • has_many :photos
  • belongs_to :customer
  • title
  • acts_as_urlnameable (pretty URLs)
• Photos
  • belongs_to :gallery
  • paperclip attachment: image
• Customers
  • username, password, full name
• Orders
  • has_many :line_items
  • belongs_to :customer
• Line Items
  • belongs_to :order
  • quantity, size, price

So let’s build the Galleries first:

Then edit the Gallery model:

That’ll be fine for now. Let’s add the Photos model with paperclip image attached:

Now edit the Photo model as such:

You should read all about the paperclip gem if you need more info on this model. Basically, we’re telling it to allow image attachments to the Photo model. Customers can be the RESTful Authentication Tutorial User model, just need to add a couple things here:

Let’s worry about Orders and Line Items later. We’ll have to add a cart, too. I’ll cover it, but it is all derived from Agile Web Development with Ruby on Rails Third Edition

Run your rake db:migrate and confirm all is well. Delete the Galleries layout file so it uses the application layout.

Let’s go see http://localhost:3000/galleries and play around. Add a gallery and then go to edit it. This is where we’ll add SWFUpload. Follow Jim Neath’s advice for this.

You’ll want a photos controller:

The create method I use is:

I had no luck getting Jim Neath’s session fix working, so I put skip_before_filter :verify_authenticity_token in the Photos Controller. Bad? Yea, probably. I haven’t found a better way yet.

Add this code to app/views/galleries/edit.html.erb:

Which leads you to add the following partial: app/views/photos/_image.html.erb

We’ll worry about the destroy link later, let’s integrate swfupload. Download the latest copy of SWFUpload. Copy flash/swfupload.swf to public/flash (make directory first). Copy swfupload.js & upload.js (in Jim Neath’s demo app) to public/javascripts. Copy Jim Neath’s swfupload.css file to public/stylesheets. Copy Jim Neath’s images/icons folder to public/images.

Add this code to app/views/galleries/edit.html.erb:

Yep, a lot is going on there. Reload your galleries/edit page and see if it’s still working :)

Ok, so this gets you to a functioning online photo gallery. Up next will be adding user accounts, a shopping cart, ordering options, customers & paypal integration. Stay tuned!

For now, please find the source here: http://github.com/joemsak/proofs_package

And for help on your project, visit us at http://www.simplifyadvance.com

So I grabbed the RESTful Authentication Tutorial as my base framework for the application, so I automatically had user accounts, roles, logging in and session stores to work with right off the bat.

I’m very proud of this application from a knowledge/skill expanding aspect, a UI aspect, project complexity, and the fact that I was careful to write this in “The Rails Way” as strictly as possible. Remember guys I’m still a n00b but I’m coming along. Enjoy!

Demonstration of the User Interface process and application

What I had to add on to it was the ability for Michael to create galleries which belong to the user accounts he creates in the process.

So he begins by creating a customer:

Michael begins by creating his customer

Then he names the gallery:

Michael names the gallery

Then he populates the gallery with photos:

Michael uploads photos to the gallery

This is what the customer sees when they log in (minus the edit gallery link, only admins see that)

The customer interacts with their gallery

*note, the “Add to Cart” gray bar is triggered by mouse hover.

They can add to cart:

The customer adds an item to their cart

After completing the checkout process in paypal, the user can see their order list, and Michael can access their order list directly off their private user page.

To see the full demonstration, check out my Jing! Screencast here:

View the 5 minute Screencast Demonstration

*note -> the photo uploads actually work much better and without wonkiness on the production server!

If you’d like to get your hands on the source, or would like to work with me, please contact me.

You randomly get an IM from <adjective>coho or trout or salmon. It’s nonsensical but you reply to it out of curiosity. Then you find out the person on the other end is some random AIM user. It’s annoying as all hell. Your block list is probably long, and it doesn’t even matter because it changes its name every time!

HOW DO YOU STOP THE DAMN AIM COHO BOTS?

Thanks to some info from Morouxshi, it’s actually really easy to stop the bots:

When that stupid thing IMs you respond to it with

$optout

It will ask you to respond with something like ‘$optout blah’ and once you do that it will stop sending you IMs.

Some known AIM bot names (to help with people searching this problem):

• clingycoho
• sinistercoho
• surefootedcoho
• toroidalcoho
• passedoutcoho
• racingcoho
• bipolarcoho
• ingeniouscoho
• analyzedcoho
• merrycoho
• bisexualcoho (haha what?)
• nieceofacoho
• witchycoho
• welltimedcoho
• infuriatedcoho
• puritanicalcoho
• fiercetrout
• dramaticcoho
• swabbedcoho
• brunchingcoho
• xenophobiccoho
• stupendouscoho
• alchemicalcoho
• lopsidedcoho
• varyingcoho
• roudingcoho
• immoveablecoho
• cateredcoho
• lilliputiancoho
• falsifiedcoho
• affectionatecoho
• liberalcoho

Boy was I ever right. Tada List makes it so easy to stay on top of your game and your tasks. With so many bloated task managers out there, it’s nice to have a simple list that I can add to, edit, and re-order to prioritize. It’s awesome that it’s free, as well.

Thanks, 37signals!

Also, putting your dinner dates into iCal isn’t nerdy in any way, shape, or form at all.

Enjoy!

View the Screencast now

Enjoy:

Watch the Screencast now

Who needs 'em?

There’s no need to have anything more elaborate than this. Rails lets me respond to change! I have a general outline because I know the little things will come up as I work! I am able to make decisions quicker because Rails allows me to try several ideas in minutes! If I spelled every detail out painstakingly in some arduous document, I’d get bogged down with heavy commitments and feature creep. Having a rough outline allows me to focus on the core ideas of the application and make judgement calls while I work.

Using attachment_fu, following Mike Clark’s Tutorial for Uploading / Resizing images in Ruby on Rails, and Rmagick with ImageMagick, I was able to add Categories functionality with featured images.

I also used lightbox and Coda Slider for Admin & Home presentations, respectively.

Enjoy!

http://screencast.com/t/Jli6m3lzL

Download the plugin here.

Original post which needs to be updated to reflect the changes in the plugin (but the idea is the same):

So you’ve got some input fields, maybe a search bar, or a name field, an email field, whatever. You’d like it to be smooth and show the required info in the field, and have it clear when your customers focus on it. How slick would that be? Well, I have written 12 lines of jQuery that will make your forms even sweeter.

Let’s start with the basics.

First, you need jQuery. I recommend linking the Google-hosted jQuery script, as this may someday help optimize your web site. The idea is that if enough people are using the hosted libraries, then there’s a good chance that your visitors have already cached the file, helping your site load faster.

Next, you need a javascript file for holding all your functions and making calls to those and the built in jQuery libraries. I call mine “functions.js”. So create that and link it after your jQuery script:

     <script src="http://www.google.com/jsapi"></script>
	<script>
		google.load('jquery','1.4.1');
	</script>
     <script src="js/functions.js" type="text/javascript"></script>

In your HTML, you need an input field. Let’s use a search box for our example.

     <input id="txtSearch" type="text" value="Search for Keyword(s)" />

Here we will get a standard textbox with the words “Search for Keyword(s)” in it. Now, we could write a function that clears the text when the user clicks, and it would be very easy, like this:

     $("#txtSearch").click(function(){ $(this).attr({ value: '' }); });

We’re presented with a few problems, however:

1. The value won’t clear if the visitor doesn’t have JavaScript enabled.
2. It only works “on click”. What if the user tabs to your field? Use “on focus” instead.
3. The value will clear even if the visitor typed their own text in already. This violates the usability rule that you should always preserve users’ data.

 <input id="txtSearch" type="text" />

Now let’s modify our JavaScript to add the default value, and clear it when clicked, but only clear if the default value is in the field.

     $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       });

Now we have a search field that gets a default value and clears when the visitor brings focus (through click or tabbing) to the field, but only when the default value is found in the field.

So, what if the visitor tabs through to the next field and forgets what the newly empty field was for?

Did you really think I’d leave this detail out? It’s simple. We add a function to re-fill the field with our default value on blur if the current value is found to be empty:

      $("#txtSearch").attr({ value: 'Search for Keyword(s)' }).focus(function(){
            if($(this).val()=="Search for Keyword(s)"){
               $(this).val("");
            }
       }).blur(function(){
            if($(this).val()==""){
               $(this).val("Search for Keyword(s)");
            }
       });

So can this get any better? You bet! We can make the default value have a lighter text color and give the visitor input a darker color. We can also turn this into a function so it can be applied to any field in our DOM! Let’s do it!

function autoFill(id, v){
	$(id).css({ color: "#b2adad" }).attr({ value: v }).focus(function(){
		if($(this).val()==v){
			$(this).val("").css({ color: "#333" });
		}
	}).blur(function(){
		if($(this).val()==""){
			$(this).css({ color: "#b2adad" }).val(v);
		}
	});

}

Just pass the ID of the field and the default value you want it to have:

     autoFill($("#txtSearch"), "Enter Search Keyword(s)");

That’s it, now go check out the demo and feel free to copy!

I want you to get on with your business.

And not waste your time dealing with buggy crap that breaks all the time.

I want you to get on with your business.

And not waste your time waiting for me to resolve your issues.

I want you to get on with your business.

And not waste your time worrying about your web site’s performance.

I want you to get on with your business.

And not waste your money in lost sales due to customer frustration.

So stop wasting your time and contact me. I’ll be glad to have your business, and you’ll be relieved to be getting mine.

In this iteration I added drag and droppable table rows and a pricing table for the pricing page.

Since I haven’t figured out how to update the db with the new sort orders reflected after the drag & drop action, this is not considered iteration 2.

Enjoy:

http://screencast.com/t/9bBPFCF3xp

I can truly value Customer Collaboration over contract negotiation now.

Enjoy:

http://screencast.com/t/rGDhWbVru

Ruby on Rails is built on, emphasizes and aides developers in working according to the principles of the Agile Manifesto. I’ve never read anything more inspiring than those 12 principles. Rails has made it possible to skip functional specs, comprehensive documents and all the other garbage that stops us from delivering working software to our customers that gives them a competitive advantage.

Rails allows you to respond to change rather than try to avoid it. Face it: clients change their minds. They forget to tell you some detail until the last week of development. They decide they don’t like their original ideas and want to try something new. In order for them to remain competitive, we need to be able to adapt and respond to those changes. So if you can’t control clients and stop this from happening, why would you continue to beat the dead horse? You write pages and pages of functional specs, scope docs and project plans. But I’ve never seen a single project completed without a change to any of those. It just doesn’t happen. Rails makes it easy to work with change, rather than constantly trying to figure out how to avoid it (you can’t).

Rails makes it possible to work and grow in a dynamic and competitive world. As I learn more, I’ll post more. Until then, I suggest you try Rails and see for yourself how much better your work can be.

1. Fill the frame

When you’re taking photos, get close to your subject. If you have a lot of background and scenery around them, they will look small and you’ll lose the focus of the picture.

Don’t do this:

Do this:

Do this

2. Composition, Composition, Composition

What is composition? It’s the placement of the subject. It’s the story the photo tells. Composition is everything. Even with the best camera in the world, poor composition is going to ruin any photo. And even with the crappiest camera in the world, great composition will enhance any photo. Composition has a few aspects: Rule of Thirds, Simplification, Symmetry. There’s more but we’ll focus on the simple ones.

Rule of thirds means splitting your photo into thirds, vertically and horizontally. Place your subject in one of the cross-hairs of the imaginary lines. This makes the photo a little bit more interesting.

Simplification can mean a few things. It can mean having a solid background with a single object (a balloon with a blue sky), or singling out one subject out of many, like a bird in a flock. The idea is to make sure your subject is obvious. Nothing else in the picture should distract from it. And in the case of simplification, it helps if nothing else is in the picture anyway. Try mixing simplification with Rule of Thirds.

Symmetry is an obvious one. Weight your picture the same across an imaginary dividing line. That line can be horizontal, vertical or even diagonal. It could be 2 lines, too, with a repeating pattern.

3. Don’t add things to your subject’s head

I’ve seen this in a lot of pictures. Poles, trees and other things jotting right out of the subjects’ heads. It’s easy to avoid and makes the picture that much better.

Don’t do this:

Do this:

Do this

Sorry for the lens flare (the rainbow effect). I didn’t see it on my screen when I took the picture. But you get the idea. Don’t let things come out of peoples’ heads.

4. Lighting & Exposure. Not too dark, not too bright.

When you take a picture, make sure the lighting is accurate for the scene. If you’re at a concert, obviously you want it to be dark, but still exposed enough to be interesting. If you’re outdoors, you don’t want your picture all washed out, and you ESPECIALLY don’t want them to be dark. So try to find a well lit area, and don’t use a flash outside. If your subject is wearing a hat, you can use a flash to fill their face with light, but turn down the intensity. Most point & shoot cameras give you this option.

Don’t do this:

Don't do this

This isn’t horribly underexposed, truth be told, but it doesn’t really represent how much sun we were getting.

Do this:

Do this

Move your subject to a better lit area, keeping the sun to the side. If you shoot with the sun in the back, you could end up making your subject dark. If you shoot with the sun out front, you can get people squinting their eyes and possible overexposure. Also, you can see I got closer for this shot and filled the frame. It really turned out great. The dog is a bit overexposed, but I was using an iPhone so there aren’t any options. You should be able to decrease your Exp. Comp. on a digital point & shoot. I also should have had Andrew move forward to cast a shadow on Bandit.

5. Take a lot of photos, showcase only a few

In the digital age, this is an easy but still forgotten technique. Take a lot of photos. Take hundreds of photos. Richard Stromberg at The Chicago Photography Center teaches that if you can get 1 good shot in a roll of 36, you’re doing well. (cit. Matt at 37signals) So get out there and shoot, shoot shoot!

But when you get ready to display your work to others, pick only the very best of the best. If you have 100 photos, choose 5 to 10 of the very best pictures. This is practice in restraint and taste. Pick the 5 photos that best tell the story of the day. It’s hard, at first, to let go of shots that you’ve grown attached to for one reason or another, but after a while you will be able to critique your photos and prune out all the crap. The more you practice shooting and editing, the better you get at both! In fact, the more you practice editing, the better you get at shooting.

That’s all I have on this subject. Good luck and have fun out there!

Windows, however, adds ellipses at the end of the file name, making it impossible to distinguish between file names.

Screenshot:

How Mac OS X Finder handles long file names

The usability improvement implied in this simple touch is unmistakeable. It’s these small details that can improve your app. Always think about how a feature, used in a particular way, can hurt or help your users.

You’ve tested your web site in the major browsers. IE6, IE7, Firefox and of course you built it in Safari first. It’s looking immaculate. You’ve even fixed the IE6 disappearing background problem. But what you don’t understand is why your images are flickering when you rollover them with the mouse. Assuming you used the CSS background sliding door technique and the Image Sprite Map Technique, this Java Script will take all your problems away:

try { document.execCommand(“BackgroundImageCache”, false, true); } catch(err) {}

Your problem is that you most likely have “Every visit to the page” selected in Internet Explorer’s “Check for newer versions of stored pages:” option in the Temporary Internet Files Settings. This script is a workaround for that. If you don’t have that setting checked, keep searching google!

I’m proud of this, because I wrote the XHTML that’s been helpful in optimizing enlivensoftware.com for robots like googlebot to understand the site and return it high in the rankings for search results lists.

How did I do it?
 
Header tags, Title attributes and Cross-linking, oh my!

Use the proper hierarchy of Header tags in your code. On the home page, H1 belongs to your logo and company name. H2 belongs to the main headline of the page and maybe your company’s motto if you have one. H3 and H4 can be headers of sections, like News or Events.

On your subpages, make your logo/company name a regular anchor tag linking back to the home page. Now H1 goes to your page name and H2 becomes a sub-header for dividing content. H3 and H4 can still designate page sections. It helps if your H1 matches your Page Title

Then you should put titles on those tags and on your navigation menu links. Hell, you can even put titles on divs! These titles should differ from the text in the tag itself. For example, you could have a link named “Events” and its corresponding title could be “Calendar of Events at Company ABC”. This is cross-linking and keyword density rolled into one swift move without overloading the user with too much fluff in the words they see.

Also, a good friend of yours can be the ABBR tag. It’s the tag you use to define abbreviations. In a real-world example, here’s the code I used for the logo for the new MHSAA web site we’re working on:

<h1 id=”logo” title=”Michigan High School Athletic Association”><abbr title=”Michigan High School Athletic Association”>MHSAA</abbr></h1>

Now Google and other robots will know what MHSAA means. That should help in future searches. It also helps that their domain is mhsaa.com.< You can submit your sitemap to google and use webmaster tools and google analytics, as well.

So these are simple ways you as a programmer can help your company and clients succeed in SEO. Don’t forget that you should start with a kick-ass writer, too.

Personally very proud of this picture.

It makes no sense to you. You’ve searched Google. You can’t find anything. You’ve figured out at least that you need to rewrite something in the .htaccess file. (it’s a hidden file - enable hidden files in OS X or enable hidden files in Windows)

If your .htaccess file looks like this:

AddHandler php5-script .php

then follow my instructions. If your .htaccess has a ton of stuff in it, try this out instead

Test if mod_rewrite is enabled

Add these two lines to the bottom of your .htaccess file:

RewriteEngine on
RewriteRule .* http://drupal\.org [L,R]

Visit your website. If you are redirected to drupal.org, mod_rewrite is enabled.

As long as that’s in working order, just erase what you did and replace it with this:

RewriteEngine on

RewriteBase /

#Rewrite current-style URLs of the form ‘index.php?q=x’.

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

That’s it. Go back to the Clean URLs settings page and you should be able to enable it.

I’m calling on the DNN Core Team to encourage web standards and learning professional HTML and CSS, instead of half assed lazy HTML/CSS generated by IDEs for programmers who don’t care to learn. To the Core Team’s credit, they’re getting close with DNN 5.

I’m urging the operators of SnowCovered.com to give careful evaluation of submitted modules for: professionalism, web standards, UX design, simplicity and value. A lot of crappy vendors are ripping people off on your web site with terrible modules, outdated code, bloated features and lazy admin screens. Stop letting it happen.

The leaders in the DNN community need to step up and show people the way. Start by Getting Real (also mentioned on the DNN blog recently, a good sign) and learn what matters: making your web site easy for your customers to use–visitors and editors / administrators.

Hopefully, www.dnngallery.net can be a push in that direction, even if Cuong Dang has a strange affinity for Khoi Vinh ;-P

Thanks.

I’m absolutely amazed that we can accomplish intimate detail and precise understanding in computer languages, and share it all across the globe within seconds.

I just wanted to say I appreciate the feedback and I’m interested in the advancements and improvements being considered in upcoming versions of the platform. Thanks for putting up with my candor and overt angst in these past few bitch posts.

I’d be particularly interested in knowing about any plans to move forward with .Net 3.5 and its ability to allow designers to define all the HTML in the controls. I’d like to see DNN reach the point where all rendered HTML is controlled by the front-end engineer, and we can achieve W3C compliance and simpler control over themes and content generation.

The “default.css” included with all installs of DNN has this (and more CSS for other stuff like it) in it:
H1
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}

H2
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
...

(I think you get the point)

Excuse me, DotNetNuke core team, but isn’t stuff like this up to the Designers and Developers? Why are you including a default stylesheet with definitions for HTML elements that would be used by Web developers? I can’t tell you how many times default.css has left me absolutely baffled about the smallest details not being quite right according to our design specs because it has these random “defaults” in it. It’s not up to DNN Core team to define my font families, sizes, and colors. And seriously, stop using pixel font sizing.

It’s becoming clearer to me almost on a daily basis, that DNN is not the right CMS for a professional Web shop to be using. They probably have this default.css for people who don’t make skins or know anything about Web development. And if you remove default.css, it completely hoses all the Admin pages and Control Panel. It takes way too much time and effort to figure out what’s removable and what’s not, and you always end up surprised when some random element isn’t positioned or styled correctly later on down the road.

It’s time for us to move on to a CMS that gives the developer full control over the theme, and not put a bunch of defaults in it that you can’t get rid of. 

1. Forced Registration to Download their Software
When you go to DNN’s web site and sister sites, like the new DNN Events site, the first thing you have to do before you can download anything is register an account. Now, it’s not all bad because it’s free and I guess they just want to track popularity (ever heard of Google Analytics?), but the registration process takes too long. I registered an account to download the new Events Module beta about 10 minutes ago and still haven’t received my “verify your account” email. Sorry, DNN team, I’ve now lost all interest in your beta.

Not only that, but it’s not clearly obvious you have to register. They bury the instruction to register in their rather long and boring content. If I go to wordpress or drupal’s site, I see big freakin links to download (no registration required of course). It wouldn’t be so bad if they had a big link that said “Register and Download” but no, of course they don’t.

Which leads to my next point,

2. They really don’t support or discuss usability and accessibility
DNN modules and the DNN platform itself are so hard to use. Their website is hard to navigate, most of the icons don’t make sense, and the forums are cluttered and don’t work in all browsers. You can’t make a post in their forums in Safari. Sorry, Safari users, outta luck. Get firefox, I guess. No one seriously talks about how to make the admin screens and layouts of their modules more functional, faster, and easier to understand.

Most of the modules we have to buy (another point) are riddled with awful and outdated front-end code, and have the absolute worst Admin screens.

3. You have to pay for most of the modules
Now this isn’t that bad. I mean, a software developer’s gotta make money, and some people run their business solely off of DNN modules, right? Ok, but step up your game and make a module worth paying for. Refer to point #2.

More later, I have to get back to work.

Don’t drop your iPhone on cement!

It still works, I can answer calls, go online, touch the screen anywhere, but I might also get shards of glass in my hand. Oops.

Well now I have a legitimate excuse to buy a 3G iPhone this summer. (besides the fact that it’s going to be awesome)

I googled and searched everywhere and couldn’t find a single solution. I couldn’t just reinstall MAMP because I had a client’s database on there that I couldn’t afford to lose.

Then it hit me… TIME MACHINE! I could just restore to yesterday at 4:30 (my last known working copy) and everything would be all set.

In 2 clicks and 3 minutes, I was back in business!

Your buddy cannot receive transfers of directories (folders). You could create and send a zip archive of the directory before sharing, or share each file in the directory individually.

This is very nice! Simple easy explanation for what went wrong and how to resolve it. Now go all the way and give a prompt to create and send the zip file for me!

“Would you like us to zip this folder and send it now?” [Yes] [No]

Here’s why companies that come in at the lowest bid are bad for the web: they don’t allow or encourage businesses to think critically about their web site. All that matters to the business owner is the bottom line: cost. So this is partly the fault of the business owner but way more the fault of the web firm that’s cheaper than others. They make price the most important factor in choosing a web solution.

Not research. Not user experience. Not standards. Not compatibility. Not design. Not aesthetics. Just price.

I urge you, if you are working for a company that still uses code, design aesthetics, and usability from 1997, please stop. You are hurting the web. You make it worse for everyone else and you continue to encourage terrible development, harmful user experience, and poor decisions by company executives. You haven’t challenged your clients to think bigger and better about where the web is today. You haven’t encouraged executives to learn more about technology and how their customers might use it.

Just go away.

This poses a couple problems:

1. It can confuse users with unnecessary options
2. It’s pretty meaningless.

Why would someone come to your web site to search other web sites? Read more about Search Usability at Jakob Nielsen’s web site. If they’re going to add this “scope” feature of site and web, then they should at least make it so when you’re on the Results page, and you click the “Web” radio button, it automatically takes their query to web results. But you shouldn’t include the web as a scope anyway. People go to major search engine web sites. In fact, they probably found your site on a search engine in the first place.

Now, if DotNetNuke wants to make their search functionality better, they should do some things to improve the results:

1. They should increase the search scope to a LIKE instead of an exact string match
1. From Jakob Nielsen:

Overly literal search engines reduce usability in that they’re unable to handle typos, plurals, hyphens, and other variants of the query terms.

2. They should allow for the creation of a dictionary (or use the Google Search API) to assist with common spelling mistakes.
3. The Results Page should be configurable to show page names instead of module titles.

Those are just a few things that would make DNN search better. What do you think?

We also worked with a professional web content writer to make the content more effective and search-engine optimized. This, coupled with semantic HTML, CSS, and google web master tools, will help this site rank high in keywords for Texas Dental Services.

So, please visit the site if you get a chance, and enjoy!

Some of the issues with their backend system include:

• Billing / Invoice gives no indication that your hosting plan is being processed
• The Windows HELM system uses a drop-down menu for navigation
• My plan included an MS SQL database, but there was no indication that one was installed, and the only place I could find info on the DB was the page to purchase more MS SQL instances
• There was no section on my DNS / NameServer info to update my DNS records with GoDaddy
• The “Online Help” was a collection of videos, using frames and iFrames with expanding tree menu navigation

This is just a short list of things I ran into while using the admin system. To say the least, I can’t wait to have the web site installed so I can be done with this stuff.

The largest perpetrator of evil from Hostony was their lack of a support phone number. The best you get is to either use the online ticket system which is a third-party system that they didn’t even bother to design their branding into, or to use Online Chat.

Since third-party ticket systems usually mean waiting around for a response, I thought I should use the Online Chat system. There was only one problem: it wasn’t online. In fact, it hasn’t been online yet!

Here is Hostony’s Online Chat button, which turned out to be green today, instead of grey:

And the resulting screen after clicking:

What’s this? Leave a message?

I didn’t click the online chat button to be able to leave a message. That’s what the online ticket system is for. I clicked online chat to talk to someone right away and get help. If your system can’t ever be online, then you should provide a 24 hour, 7 days a week Customer Support phone number.

Why? Because customers want their questions answered immediately. We don’t trust email and message systems. Any time a web site tells me to leave a message or send an email, I say “forget it”. What assurances do we have someone will answer our request in a timely manner?

Three reasons you should provide an 800 number to your customers and potential sales opportunities:

1. Gives customers an easy, free way to contact your business.
2. Lets you project a professional company image and make your business look big and stable.
3. Makes your business more memorable, especially if you choose a “vanity 800 number.”

To Hostony’s credit, they have been extremely fast in answering my trouble tickets, even if messages are easily misunderstood because we aren’t speaking directly and efficiently. It’s been pretty good so far, but it could have been exceptionally better.

Until then, I’m going to share some scripts I wrote for DotNetNuke skins, which I also sent Timo in email.

Included are comments which explain each function, and then I will link to examples.

At the top of my skin *.ascx files, I have included these scripts by default:

Check for Authentication to Show / Hide Elements on a Skin:

/* -------------------------------------
|  Function Name: IsLoggedIn()
|  Primary Purpose: to return a boolean value depending on the user's logged in state.
|
|  Use: for hiding / displaying specific elements in the skin, such as the "logout" link, in order
|         to keep the public from trying to log in to sites that are only meant for an
|         administrator to log into. The way to log in in this scenario is to navigate to "/admin",
|         where a Default.aspx file is redirecting to the login page.
----------------------------------------*/

Public Function IsLoggedIn() As Boolean
        Return HttpContext.Current.User.Identity.IsAuthenticated
End Function

The HTML / CSS / ASP.NET:

<p class='<%= IsLoggedIn() %>'>You are Logged In</p>

<style type="text/css">
.False{
      display:none;
}
</style>

Example:
This one is a little difficult to link to, as you would need to log in to see the end result. But if you navigate to the Antioch Church admin login page, you’ll see almost what I mean. If you were to log in, you would see “Logout” at the bottom of the page.

Return the Name of the Top Ancestor Page of your current location. Good for usability.

/* -------------------------------------
|  Function Name: SectionName()
|  Primary Purpose: Returns the name of the top Ancestor page in a two-tier page heirarchy
|
|  Use: Display the name of the section the user is navigating in. Can be
|         modified to include more levels of navigation.
----------------------------------------*/
Public Function SectionName() As String
If PortalSettings.ActiveTab.ParentId <> -1 then
	Dim tc As DotNetNuke.Entities.Tabs.TabController = New DotNetNuke.Entities.Tabs.TabController
		Dim parentName As String = tc.GetTab(PortalSettings.ActiveTab.ParentId).TabName
		Return parentName
Else
	Return PortalSettings.ActiveTab.tabname
End if
End Function

HTML / ASP.NET:

<h2 class="sectionname"><%= SectionName() %></h2>

Example:
This one is used on the Auto-Owners web site, and one good example is the Life Insurance section. Notice that the words “Life Insurance” are always at the top of the life insurance sub pages. This is deliberate and automatic. It was not typed into the text editor anywhere. It is built into the skin so that each sub page gets it automatically, and if the name of that section changes, the heading would change, too.

To see how it works on sections with more than one tier of navigation, see the City of Southfield Departments. I’ve written the script in these skins to apply up to 6 levels of navigation. At the time of development, the level didn’t go beyond 5.

Assign a class to your navigation, using SectionName(), to show the user where they are:

/* -------------------------------------
|  Function Name: AssignClass()
|  Primary Purpose: Accepts a string, and matches that string against the
|                          SectionName() return value
|
|  Use: Assign the class "here" to the current section's navigation anchor,
|          so it may be styled differently than the rest of the menu.
----------------------------------------*/

Public Function AssignClass(ByVal expectedName As String) As String
	If SectionName() = expectedName Then
		Return "here"
	Else
		Return "menu"
	End If
End Function

HTML / CSS / ASP.NET:
Add the “a” to the anchor tags. The “code plugin” won’t let me put anchor tags in the code blocks.

<ul id="nav">
   <li>< href="/">Home</li>
   <li>< href="/AboutUs/TabId/00/Default.aspx" class='<%= AssignClass('About Us') % >'>About Us</li>
   <li>< href="/ContactUs/TabId/00/Default.aspx" class='<%= AssignClass('Contact Us') %>'>Contact Us</li>
</ul>

<style type="text/css">
#nav a{
   display:block;
   width:100px;
   height:25px;
   background:url(images/nav_bg.gif) repeat-x 0 0;
}
#nav a:hover, #nav a.here{
   background-position:0 -25px;
}
</style>

Example:
This one can be seen in use at the Greater Lansing Sports Authority site. As you navigate through the site, the menu item stays in the “hover” state, indicating that you are in that section of the web site.

I’ve been working (not consistently, because I work too hard to save energy at home) on Logan’s listening abilities and comprehension. Mostly with ’stay’. It’s been working out quite well.

So here’s been my method:

• I taught Logan to sit
• I then would tell Logan to sit, count to 3 or 5 in my head, and then give her the treat
• I eventually worked up to 10, 20, 30 seconds, while adding the word “Stay”
• If she couldn’t stay long enough, I would remind her, say “Stay” again, and keep her succcessful.
• I then moved on to moving around while giving the ’stay’ command. (turning around, walking away, jumping up and down)
• Then I just started tossing her ball and I make her ‘Sit’ and ‘Stay’ before I throw it.
• And as seen in the video below, if she doesn’t stay, I remind her that she should.

This is known as the “Three Ds of the Stay Command.” Duration, Distance, and Distraction. Each method must be done in that order, slowly, one method at a time. Then eventually combined. The ball is the ultimate combination of those three items.

So enjoy this video.

They usually look something like this:

If you’re coming from the NORTH (you’re lucky if they bold it)
Take I-89 S to M-103 W via exit 29
blah blah blah

If you’re driving from the WEST (does anyone really always know if they are WEST or NORTH or whatever?)
Take M-103 E to exit 49
Turn left on Main Dr.
so on and so forth

I don’t know why it’s popular for people to type out directions like this. Google maps has been around for quite some time, and Mapquest has definitely had its tenure on the web.

Why is it still such a big deal for people to type out directions to their location? It’s highly unusable, takes too long to read and comprehend, and is prone to typos and mistakes. A simple link to google maps of your address will work much better for everyone. From there, your users can type in their address and get an exact route from their location. They don’t need to stop and figure out “Ok, wait. Am I coming from the NORTH, or EAST? Or Northeast? Or northwest? Which directions should I jot down?” They can just put in their address and get turn-by-turn directions.

Let your users get a route from Google or Mapquest, and stop wasting your time along with theirs.

The Parallels Forums recently got some redesign and information restructure, which all looks good and is organized quite well. But they’ve missed a couple really easy issues with their login functionality.

When you log into the Parallels Forums, it takes you to a “logging in” screen and redirects you back to where you were, which is fine, but what is this?!

Am I logged in or out?

This is what you see in the top right of the forums after logging in. Apparantly, I’m logged in because I can start threads, but unless I click on the “+” symbol in the top left and opening a post-thread page, I have no visual cue that I am logged in.

Originally, with the old design, you saw your name and a “logout” link next to it. Or you could click your name to edit your profile. This was highly usable and gave immediate feedback to the user that yes, John Smith, you are logged in.

Now, Parallels, if you’re not willing to clean up that little mess, why are you making me erase “Login” from your textbox before typing my user name?

You can solve this with a simple function.

onclick="eraseInput();"

function eraseInput(){
if(this.value == "Login"){
this.value = "";
} else { return false; }
}


Pretty simple usability points, and I can’t believe Parallels just got rid of them with their new design.

Just released, the Michigan Economic Development Association?s (MEDA) 2nd Annual Marketing Materials Competition has announced The City of Southfield web site as ?Best Web Site? for the population below 100,000 residents category.

www.cityofsouthfield.com

Judges scoring (1 ? 5, with 5 being the highest):

* Creativity: 4
* Graphic Design: 4.5
* Content: 5

Judges comments:

?This is an excellent website. It is very up to the minute in its ability to play video, get recent news, updates, and give access to forms, tools and information. You?ve woven the design through all the pages and made a lot of information simple and easy to navigate. Whether I?m a business owner or local resident I can access what I need to know easily. You should be proud, great job!?

?Graphically appealing website that is easy to navigate with a lot of very good information. The photos are outstanding and the links/info are easy to see and access??

?Nice site!?

Congratulations to the E-Business Team for another great project! This project was definitely a team effort in which virtually everyone in the E-Business Team played a part. The City of Southfield is certainly excited over the news and sends their sincerest thanks. Excellent job everyone, well done!

Best,

Chris Bachelder

Director of Web Development

I formally apologize to the entire web development community. My terrible practice over the last seven years has finally caught up with me and put me in my place!

I am deeply ashamed and will be making every effort to step up my game and read all about the wonderful world of semantic web development.

OK — here is where the actual change is:

——————–

AND (sw.Word like ‘%’ + @Word + ‘%’)

AND (t.IsDeleted = 0)

AND (t.DisableLink = 0)

AND (m.IsDeleted = 0)

AND (t.PortalID = @PortalID)

OR (m.ModuleTitle like ‘%’ + @Word + ‘%’)

———–

The bolded lines are the changes

First line is how the search term is matched. Instead of exact, it does a like. We found that a lot of clients would complain that searching “map”, for instance, would not return pages which had the word “maps” on them. Or “auto” won’t give you “automobile”.

Second is the disablelink line. We had the problem of hidden pages showing up in results but realized sometimes we WANT hidden pages to show up, but sometimes we hide pages because they’re not ready to be published. So I decided that if I “disable” the page then I definitely don’t want it to come up in the results, but I might want to keep it for later (we aren’t much for deleting pages around here)

Third is the OR m.ModuleTitle like ‘%’ + @Word + ‘%’ part — now this is kind of a subjective one. I have a web site right now for a client that sells insurance. Home insurance, life insurance, and car insurance. When I searched “car” I didn’t get the car insurance page at all, even though the page was titled car insurance and the module was titled car insurance… The content copy used the word “automobile” because this particular client is very traditional and was picky about that wording. So I added the “OR” line because if we put the search term in the title, it’s most likely relevant. We know module titles are what show up as the links on the SRP and so we make sure those titles are always relevant and helpful for the user.

BUT — we would like to see page name or page title as an option in the settings for how the text displays. we couldn’t figure out how to modify the core to do that.

OK that is all i hope this has been informational

Anyway, I noticed this little straight to the point harsh truth:

It’s true. :I C’mon, YouTube… just one? I’ve picked on YouTube before, and I guess this is my comeuppance.

PAGE TITLE: – the text that shows up at the TOP OF THE BROWSER and in GOOGLE / YAHOO / MSN et al SEARCH RESULTS

Why is the page title important? It is what the casual searching web user will see when searching for content / services offered by YOUR CLIENT. So the page titles MUST INCLUDE keywords relevant to the pageâ??s content. The page title should be formatted well and DEFINITELY BE MORE THAN JUST A COPY OF THE PAGE NAME. The client name should be included.

If you donâ??t know how to do a very quick keyword-density page title, then AT THE VERY LEAST, format your page titles like this:

PAGE NAME | CLIENT / WEB SITE NAME

So if your client is Artemis Solutions Group and the page is Web Design

You can AT LEAST type this much:

Web Design | Artemis Solutions Group

But if you want to be keyword-savvy (just do a quick search and read on SEO Page Titles and Keywords for quick reference)

You could format it like this:

Web Design & Development | Lansing, MI | Professional Web site Design | Artemis Solutions Group

Itâ??s worth a LOT to the client for us as developers to think about their web marketing strategy and how their content and custom features affect that strategy. A little bit of Usability goes a long way, and is very easy to do.

Proper page titles take minimal effort, and add superb value to the client.

Again, it’s very limited and I could have listed more, but I was restricted to so much.

• Web site failed Section 108 Guidelines for Government Web sites:
• http://www.cynthiasays.com/mynewtester/cynthia.exe?rptmode=-1&url1=http%3A%2F%2Fwww.kpl.gov%2Fteen%2FHomeworkHelp.aspx
• Menu navigation only works with Javascript enabled â?? text-based browsers can not navigate
• Images not readable with CSS disabled â?? or no ALT tags
• Events link could be converted to front page list of upcoming events
• Link opens in new window to page that does not follow site theme
• External links open in new window
• This breaks the back button (the most used navigation element by internet users)
• Also, breaks desktop experience for users with Tabbed Browsing, eliminates user choice and control
• Internal links open in new window
• Creates confusing navigation experience for most users
• Branch Libraries section confusing â?? pictures do not help describe the links

Itâ??s been a long 7 months for everyone who worked on the City of Southfieldâ??s website! We are finally live: www.cityofsouthfield.com. Kudos to the team for great work.

This is surely the largest website we have ever built, and surely the most challenging web project we have ever undertaken!

…

Despite all the challenges and hiccups along the way, this was a very unique opportunity for us in many ways.

….

Again, great work to everyone who contributed to the success of this project. Despite the unanticipated size and volume of work and resources that went into thisâ?¦I strongly believe that the visibility benefits from this project will open up several new doors for us.

I’m trying the green in place of the blue. I updated the logo with a little modern twist, but I don’t know if I’m completely happy with it yet, just trying stuff out. I noticed a little icon in their favicon or whatever and might try a little twist on that. I also got rid of the rounded boxes and made the right bar more open feeling, and matched the “empowering people” theme down the entire bar for headers.

Got to talk with the client last night and showed them my ideas for doing video and linking to other site’s content, be it print pieces or podcasts or what have you.

Here’s the screenie:

Read Back…

• Part I
• Part II

I like it.

Read On…

• Part I
• Part III

So without further ado, here’s the beginning draft:

I know it looks like this site’s layout so far. Good artists create, and great artists copy. I feel like right now, their site is very dark and cold. My goal here was to warm up the site and brighten it with more orange, soft green, and soft yellow, to make the site feel, well, more peaceful. Also writing out “peace” in several different languages helps, too.

I used the green leaves pattern in the background as a symbol of growth, and the idea that MPT plants seeds of peace(also a non profit org in the US) around the globe. The frame color is a softer brownish/very suftle green, for a soft and peaceful appeal. The logo I made warmer with the sun rise feeling, like a new day rising, and I straightened out the typography. I used the blue for the header, but I’m not sure if I’ll make it stick. It’s a relaxing color, but not as harsh and cold as the extremes on the current site.
Read On…

• Part II
• Part III

Joseph Sak, the Web Developer on the project was a true, dedicated partner in this process. His know-how, as well as friendly and approachable nature made the project not only seamless from a development side, but truly fun and exciting to work on.

and

After having looked at other cities and their sports event planning specific sites in our research process, we now consider our own truly best-of-class.

Check out their web site at www.lansingsports.org. We’re all quite proud of it here at Artemis

[UPDATE]
Since this time, the GLCVB has invited me to their skybox at the Oldsmobile Park, sent me two Christmas cards (one from an employee, one from the company), invited me to a Member Mixer this week, and gave me passes to Be a Tourist in Your Own Town along with a letter of acclamation. I am very thankful for the gratitude, hospitality, courtesy and friendship of the GLCVB marketing staff. They are the nicest, brightest people I’ve met in this industry, and they make me excited to do my job. We have always worked very well together, with friendliness, honesty and fun. Thanks to Brendan, Laura, Tracy, and Laurie. You guys have been all-stars in our work together.

Oh yea, and Marionette is still strong. I came across an open source framework to build my project on, it’s got all the advanced stuff handled and now it’s just a matter of customizing it to my own, and changing up its function a little bit. More details when the project is in beta stages.

You have to usa a HFS+ format, not FAT32. I finally moved to a GUID Partition with HFS+ (Journaled) format and it’s twice as fast when transferring files wirelessly.

So if you’re out there on Google like I was, looking for this, I hope you find this and do like I did.

1. Plug AEB(n) straight into ethernet jack on wall
2. Configure Wireless to “Create Wireless Network”
3. Configure Connection Sharing to “Off (bridge mode)”
4. Configure your “Internet” settings to set your domain and DNS servers properly
5. Hit update.

And that’s it. Simple, I know, but I thought I’d write about it in case anyone else is searching out there on how to do it.

And there you go,

So, I am working on a new project, teaching myself cakePHP, and for now, it is codenamed “Marionette”. I’m very, very excited about this project and I hope to produce something in the coming weeks. Stay posted.

I’ve set it up at my office to extend the office network, so that I can still have access to the office resources, but I also plugged in my USB hard drive to the back, and am getting speeds similar, at, and even faster than directly connected USB. It’s great! The only problem is if I relocate my Macbook Pro closer to the office 802.11b/g router, I automatically switch to 802.11g, so I have to stay back in my sunless warren in order to be able to work with my hard drive.

That’s fine, but if I can figure out how to make my Airport Card only connect to 802.11n networks at my will, then I will be able to sit anywhere in the office and maintain this speed.

The long of it:

I added in some lipsum text with a blue header for the blogging / page content. Pretty simple and effective. I should include a picture to show how image layout would work but I feel it might be too cluttered for a layout draft. It’s something I can walk through with the client at a later date. I darkened the headers on the right, I felt the bright green was too distracting and hurt my eyes.

I made the navigation centered and justified, added bold and drop shadow, used Gill Sans font, same as the logo. I changed the header background color. I felt the grey was too drab and techie. I wanted to bring more of that blue into the design. I merged “shows” into “events” and got rid of the red header on the right. I made the links to the events that nice dark red color.

This design will now go to my client, Tom Wyatt, for review. I’ll let you know what he says!

• Implemented friendly URLs
  
  
• Replaced generic content with specific keywords like â??heat treatmentâ? and â??brazingâ?
  
  
• Added useful keywords to the Alt tags of all images (note: I didnâ??t add any keywords. I added keywords that describe the image)
  
  
• Linked any instance of the keywords and images with keywords in the alt tags to their respective pages that contain more information
  
  
• Restructured content so that easiest and most scannable content was up front for the siteâ??s visitors (Usually bulleted lists can help shorten otherwise bulky paragraphs. And theyâ??re perfect for links!)
  
  
• Formatted all links to include helpful, descriptive text and keywords. This increases the rank for pages and helps the user, rather than a generic â??click hereâ? or some other such old technique.
  
  
• Checked that every navigation element and important image and all content on the site is text readable by disabling CSS through Firefoxâ??s Web Developer Extension
  
  
• Added a valid robots.txt file to the root of the site to block useless pages from the index (like login)
  
  
• Added a valid sitemap.xml file which is automatically generated through server technology
  
  
• Added MMP to Google Webmaster tools for easy tracking

• modern metal – 8
  
• modern metal processing - 1
  
• heat treating michigan - 9
  
• metal process mmp - 2
  
• heat brazing work - 3
  
• what is heat brazing work - 3

Now with bonus color option! I did some graphic and color updates and came up with this revision:

Tonight, I decided to start my treatment of the search area, a little tagline (oh so similar to mosaic’s :/), the navigation menu, and the right side bar area.

I haven’t figured out what I’m going to do with the navigation elements just yet so I’m leaving them be for now.

My biggest focus was on the right sidebar where I introduced a small quip about Veritas and immediately follow it with a listing of upcoming events. These events might be shows for the venue or community events or perhaps a mix of both.

According to my rough sitemap in the nav bar, I have decided, so far, to separate “Events” and “Shows”. I’m not entirely sure this is the best way to do it right now, but it does seem to make sense for the time being.

So until next time, enjoy the pretty picture.

You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.

So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?

Well, your old pal Joe here figured it out.

Here’s what you do:

1. Create a separate stylesheet called print.css
2. Add this code to your master stylesheet:
   @media print {

   @import "print.css";

   }

3. Implement your javascript for making the stylesheet override your master stylesheet
4. Test
5. Enjoy!

This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.

Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.

Veritas Community is an emerging church being started in Flint and Owosso by Tom and Rachel Wyatt with the help of the Salvation Army. It’s going to be a faith-based community hell-bent on sharing lives, faith, hope, love, music, art, and the occasional Lebowski references. Tom sent me a list of websites he likes, including Mosaic, which will be the base for my inspiration on the project.

The scope of the project will include a blog, a newsletter sign up, some informational pages (about us, contact us, etc), and an event list for music shows. The gathering place will double as a venue for indie rock bands. My vision is to develop this site using XHTML, CSS, PHP, Javascript, maybe some flash, and host it on Wordpress 2.

So without further ado, here is the preview.

This is Veritas home page, version 1.

Most of my focus was on logo development. I knew right off the bat I wanted a font like Gill Sans. I also knew I wanted to incorporate some sort of leafy symbol, to represent growth. You can see I have taken the greys and blue from mosaic and played with it for my layout and header. I hope they won’t mind. This is obviously not close to being finished but it’s a start and hopefully we’ll see something more as we progress.

Part II of my Design Process is now available

I recently had the opportunity to do just that. I had to put in a new design for a client based on roughly the same layout. Eric’s standard coding made it very simple, and a process that takes 4 to 5 hours from a blank sheet took about 1 hour with Eric’s code.

We use the same names for similar layout elements in every single web page we do. It goes kind of like this: (this list identifies common unique DIV IDs)

• Frame (main container)
• Header
• Nav (main nav bar)
• Sidebar (sub page nav bar)
• Main – or – Content
• Footer

So thanks to Eric for the great code, and let this be an encouragement to other development teams to use standard naming conventions for your CSS and HTML elements.

Download a zipped example of our standard code.

She is happy with it because now she can log in and easily make edits to her content. I also set up a method for her to easily change the pictures on her front page.

I created a contact page with a form so people can easily contact her for quotes. I utilized the front page to point visitors to important sections of her gallery.

For Phase 2, we’re hoping to make it possible for her clients to log in and view their pictures online. This might be doable with the help of Flickr.

You can see it here

I noticed lightbox doesn’t load until this flash loads. Bah.

It was a huge success, resulting in 512 pictures. It was a lot of fun and I enjoyed making it.
Here’s how I did it

• I prepared my macbook by creating a managed account that could only open Photobooth
• I set my Macbook Pro atop my closet shelf
• I plugged in a USB mouse
• I used a ton of duct tape to put the mouse on the shelf’s hanger rack, and covered up the optical sensor
• I wrote “Press Here” on the left button
• I positioned the cursor on the “Take Picture” button
• I hung up a sheet around the area with tape
• I placed a lamp inside the enclosed area
• I encouraged everyone to use it

And the Results
Here are a couple of my favorites from the night:

Go see the rest of my 512 photobooth pics

This is a pretty neat little script. My only qualm with it is that it’s currently 760px wide. It’s not exactly going to work within your standard website template. I think the point of the typical lightbox is that you can throw your images into a template where your content area is typically 500 px in width, and the image pops up with an AJAX-y effect of muting out the rest of the screen.

Perhaps this concept can be taken further in this regard! I will definitely be playing with this.

Here’s how it looks compared to the actual menu. It’s an exact replica but smaller.

Once you scroll down, you can easily be fooled into thinking it’s the real menu. I clicked on the search bar several times, thinking it was the actual search bar.

This is ridiculous, and for a company recently bought by Google, I would expect better usability. Yes, I was listening to “This is Why I’m Hot” by MIMS. Problem?

While developing a redesign for a client, we started implementing a flash-based slideshow in the top corner of their home page, with the ability to play an FLV file over the slideshow. Eric did a fine job making the SWF, and the transitions worked quite well.

One little problem: as soon as we uploaded our flash to the server and attempted to play it, it would not load the video. We thought it was a permissions problem because it’s a development website and is password protected until it goes live in order to serve the privacy concerns of the client. So I fumbled around with that for a bit with no results.

I finally decided to try Google. After a couple misses, I finally found the solution to my FLV file problem. The steps in this document worked for me. Turns out you need to set the FLV MIME type on your Windows 2003 server, and restart the World Wide Web Publishing Service.

We don’t have the option of just restarting our IIS service willy nilly, so I had one of our techs schedule a task on the server to restart the service at 2:30 this morning. When I came in and loaded the client’s site, it worked like a charm!

* Googling is not in the OS X dictionary! I added it.

Well, less than a week into using my mouse and the “use of the right click” has deteriorated to the point where it’s exceptionally annoying. If I find a fix, I will post it.

edit: So far, turning it off then back on has solved the issue. This does not bode well.

1. Disable the Rich Text Editor through your Profile Settings
2. Add the Code Markup Plugin to your site
3. Use Simple Code Encoder to convert your HTML easily
4. Post

• With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
• If you set your body’s font-size to 62.5%, you reset browsers to 10px.

Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.

Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:

When you create your body tag, write it as so:

<!--[If lt IE 7]>
<body class="ie6">
<![endif]-->
<!--[If IE 7]>
<body class="ie7">
<![endif]-->
<!--<![If !IE]>-->
<body>
<!--<![endif]>-->
OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:

If Less Than IE 7 then read: <body class="ie6"> If IE 7 then read: <body class="ie7"> If NOT IE, then read: <body>

Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use <![If !IE]>. This tag is not valid XHTML. All we did was put comments around it. IE still understands, and the code is perfectly valid. IE will skip that tag, no other browser will. Everyone is happy.Here’s how you use it in CSS:One thing I noticed is font sizes in IE tend to be bigger than Firefox. Here’s what I usually do at the top of my CSS files:

body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}

Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.

And of course, if you need to fix a width problem due to improper box model:

.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}

Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.

You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.