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 rder
  • 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

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.

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.

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?

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();"

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

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