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

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

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

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!

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

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