Archive for Ruby on Rails

Testing

Website Testing Plan

A testing plan for any website or new media product should really be split into multiple layers. First and foremost, the website should be tested on its main function and ideal path. For example, an e-commerce model should be tested on the ability to a) find the desired product b) add the product to the basket c) finalise payment, and perhaps d) have the product dispatched to the customer. After these factors are tested, it then makes sense to test the lower-level functions and aesthetic continuity. For this reason, the first port of call for testing will be the blog application.

Testers

I hope to be able to gather some beta testers on a variety of different system configurations – a mix of PC and Mac users running older and new versions of operating systems together with a decent spread of browsers. However, in the pre-production stages, this may be a little problematic seeing as Ruby on Rails must be set-up on the users’ machines. I will certainly be getting a selection of users of different abilities to test the system on my own machine using various browsers; of which I currently have installed: Google Chrome, Firefox, Safari and Internet Explorer running Windows Vista. I will also be testing on an iMac running Safari and Firefox with OS X 10.5.5. The benefit of having users test the system in front of me is that I will be able to observe the way the users interact with the site and how long it takes them to accustom themselves to the layout and functionality.

With this in mind, it is important that the intrinsic factors are put on trial first – these being those relevant to the product itself. Extrinsic factors then would be those relating to the system configurations on which the product is being tested.

Intrinsic Factors:

  • does the site work?
  • do the functions work? (again with the functionality, because it is so basic)
  • do the links work?
  • are the files present and accounted for?
  • are the graphics MIME types correct? (I used to think that this couldn’t be screwed up)

Extrinsic Factors:

Once the intrinsic factors are squared away, then start on the extrinsic points:

  • cross-browser and cross-platform compatibility
  • clients with cookies disabled
  • clients with Javascript disabled
  • monitor resolution
  • browser sizing
  • connection speed differences

(Philosophe.com)

Feedback & Analysis

I will be designing a questionnaire-style form for users to fill-in after they have used the system which will firstly ask a few basic questions about usability: for example;

  • Were they able to create a comment one of the posts?
  • Were authoring controls hidden from unauthorised users?
  • Did all links lead to the correct pages?
  • Did the gallery function as the user expected?
  • Etc…

I will also then include a less-structured section that asks for users’ opinions on the product broken-up into separate functions such as blog, gallery, contact page, etc. The last part of the testing feedback form will be a general opinion section that allows users to comment on the look and feel of the site.

Jonathan Kelham Portfolio Site: Final Proposal

I plan to work towards building a portfolio site for a local artist named Jonathan Kelham who is a third year Fine Art student in Birmingham. The client needs a website to display a selection of his work including images, videos, a biography, contact page and blog. The purpose of the website is to provide prospective clients and collaborators with an online portfolio of his current and ongoing work and enhance his networking capability as an artist.

The blog will be the main part of the project as I will be building it from scratch using Ruby on Rails. This blog will act like a sketchbook as Jonathan will be able to upload and write about his work in progress which will add more of a dynamic feel to the website. Similar to most blogs, this will have a comments feature that will allow Jonathan to gauge feedback and allow users to contribute to the website with resources, recommendations and opinions. The comments section will initially be hidden, accessible via a link at the foot of the post so as not to distract the user from each post when first viewed.

The sketchbook will be the most significant element in giving the website that dynamic feel that is so important in today’s websites. In general, when a website changes frequently, users will return to it more often which, of course can only be a good thing. After researching the top 100 most visited websites in the UK, it is immediately evident what most if not all of the sites have in common – they all have highly dynamic content.

1.       Google UK
2.       Facebook
3.       Yahoo
4.       Windows Live
5.        YouTube

Also ranking very highly are site such as Flickr, WordPress, Amazon, Wikipedia, etc. Obviously, this website will not be ranked as highly as any of these websites as even the most popular artists hold only a very small corner of the public’s interest on the internet. David Carson is a very popular artist and graphic designer, however his page ranking is a meagre 723,707. Even the controversial Tracy Emin, has a low page ranking of 1,547,901. To add a local slant to the statistics, Birmingham Artists (collection of artwork and biographies for prominent Midlands-based artists) comes in at 5,941,255. Whitecube.com which serves as a directory for contemporary art in London has a relatively respectful traffic rank of:  286,876.

As an artist, he needs exposure in order to make a name for himself within the local art community. For him to have a digital presence would be of great benefit to him as he would be able to refer people to his website while networking amongst Birmingham’s creatives.

The ‘sketchblog’ will be a very important feature of the website as it will serve as a source of news about Jonathan’s work and exhibitions. This is one particular element that most of the art websites I visited have in common – they all contain up-to- date news sections that give information about upcoming events and current activities.

The blog will also have an administration feature where he will be able to upload his own material and manage the content of his blog in a simple but functional manner. The simplicity of this aspect is significant to this client as by his own admission, he is only really competent with technical matters.

The gallery section of the website will be a fairly simple setup, perhaps with some enhanced viewing techniques that give the section more of a tangible feel. Specifically I am speaking about gallery effects; smooth transitions and pleasing enlargements. The gallery will be built again using Ruby on Rails. Works will be organised by medium. Some good examples of galleries that have been built using RoR include:

Eyelook

Gullery (example on http://geoffreygrosenbach.com/)

LogiLogi (working demo) teams up nicely with Lightbox, a Javascript plugin that allows smooth englargements of images with a slideshow style interface when required.

The look and feel of the website as a whole will be quite minimal, but reflective of Jonathan’s work which features a fair amount of white space and natural colour. We have discussed giving the website the feel of paper media without being excessive in use of texture and shadow. Subtlety and understatement is key.

I have completed an initial mockup of the sketchbook page:

Jonathan Kelham - Sketchbook Page (click to enlarge)

Jonathan Kelham - Sketchbook Page (click to enlarge)

As you can see, I have refrained from use of excessive graphical elements so that the page allows the content to be the main feature rather than the site itself.

 I have chosen to use Ruby on Rails mainly because I have been won over by the testimonials from designers and developers who have migrated from the use of PHP in favour of this relatively new framework. Emphasis has been on speed, consistency, manageability and intelligible coding methods. I have been impressed with the existing uses for Ruby on Rails in sites such as Digg, Twitter, 43 Things, and A List Apart to name but a few.

Statistics were gathered from Alexa.com.

Proposal: Portfolio for Local Artist, Jonathan Kelham

I plan to work towards a portfolio site for a local artist named Jonathan Kelham who is a third year Fine Art student in Birmingham. The client needs a website to display a selection of his work including images, videos, a biography, contact page and blog. The blog will be the main part of the project as I will be building it from scratch using Ruby on Rails.

The blog will act like a sketchbook as Jonathan will be able to upload and write about his work in progress which will add more of a dynamic feel to the website. In general, when a website changes frequently, users will return to it more often which of course can only be a good thing. As an artist, he needs exposure in order to make a name for himself within the local art community. For him to have a digital presence would be of great benefit to him as he would be able to refer people to his website while networking amongst Birmingham’s creatives.

The blog will also have an administration feature where he will be able to upload his own material and manage the content of his blog in a simple but functional manner.

The gallery section of the website will be a fairly simple setup, perhaps with some enhanced viewing techniques that give the section more of a tangible feel. Specifically I am speaking about gallery effects; smooth transitions and pleasing enlargements. The gallery will most likely be built again using Ruby on Rails. Works will be organised by medium.

The look and feel of the website will be quite minimal, but reflective of Jonathan’s work which features a fair amount of white space and natural colour. We have discussed giving the website the feel of paper media without being excessive in use of texture and shadow. Subtlety and understatement is key.

 I have chosen to use Ruby on Rails mainly because I have been won over by the testimonials from designers and developers who have migrated from the use of PHP in favour of this relatively new framework. Emphasis has been on speed, consistency, manageability and intelligible coding methods.

Say Hello to Ruby on Rails

I am writing this tutorial with the assumption that you have already installed Ruby on Rails on your computer. Installing Ruby on Rails isn’t exactly the easiest process if you are inexperienced with command-line interfaces, like I am, but I found Lynda’s Essential Ruby on Rails Training to be a huge help.

Before we get started with the Hello World app, you need to install a text editor such as E Text Editor which is available from http://www.e-texteditor.com/ This is just a good tool for editing web pages and great for working with Ruby on Rails. If you’re on a Mac, TextMate is the original inspiration for this program.

Step 1:

First of all you’re going to need to launch Command Prompt from Start > Programs > Accessories > Command Prompt.

Once you have Command Prompt open, navigate to your Ruby on Rails directory (most likely to be C:\Ruby unless you specified otherwise during installation) by typing:

cd c:\ruby

OK, so if your screen command prompt now starts with “C:\Ruby” we can now move on to creating the project.

To create your first project (or any new project for that matter) you need to alter your command line to read:

C:\Ruby rails my_app

This will tell Rails to create a new set of project files as below:

Rails has now created a series of directories and files in your Ruby directory that will be the basis for your application.

Step 2:

The next step is to launch our server. Currently, the web server that ships with Rails is Mongrel.

What we’re going to do now is run a script. You can view the scripts in your project by going to C:\Ruby\my_app\Scripts but as you might guess, the one we are concerned with at the moment is ‘Server’.

To start the server we need to first go to our project directory by typing:

cd my_app

Now we’re in our project folder we can run our server by typing:

ruby script/server

If you see something like the screen adobe, your web server should be up and running. However, just to test this, we need to open our browser and enter:

http://localhost:3000

Hopefully you should see a page like the one below:

If not, just go back and make sure you followed the previous steps correctly.

Step 3:

So, working from the project we generated earlier on in step 1, we are now going to create a controller. The controller is what will be responsible for the actions we request from our application.

To generate a controller, all we need to do is run another script from our scripts directory that we saw earlier. To do this, open another Command Prompt window so as not to interrupt the web server we already have running. Make sure you are in our project folder and alter the command line to read:

C:\Ruby\my_app\ruby script\generate controller Say

If you did this correctly, you should see the following:

What we are doing here is telling RUBY to use the script GENERATE to generate a CONTROLLER called “Say”. As you can see, the script has also created other files, but we’ll worry about those later.

Step 4:

Once we’ve created the controller, we now need to open-up E Text Editor. We can do this from the command line by adding the following line to c:\ruby\my_app in Command Prompt:

e app\controllers\say_controller.rb

You should now see the contents of say_controller.rb in E, and we can go on to edit this to serve some kind of function:

After adding

def hello
end

We can go on to add a VIEW to this controller. A view is exactly what you might think it is. It is the front end of what the user will see and interact with. So what we are going to do now is create a view that we can display in a browser.

The GENERATE script has already created a folder for us within VIEWS, so all we need to do is create the RHTML file. This particular extension is practically the same as HTML, but the ‘R’ at the beginning of the extension implies that the file will include some elements of Ruby on Rails.

The extension .rb as you might guess belongs to Ruby. It implies that the content of the file is PURE Ruby, whereas files such as RHTML only include SOME Ruby.

Click the new file button in the lower-right of your E window and name the file hello.rhtml

We can now edit this view file as we would a normal HTML file. Enter the following (or something similar) into your currently blank hello.rhtml file:

<html>

                <head>

                                <title>Hello World</title>

                </head>

                <body>

                                <p>Hello World!</p>

                </body>

</html>

…and save it.

Now, before we try and view it in our browser we need to restart Mongrel (our web server) by returning to the first Command Prompt window that is running the server and pressing Ctrl+C and then re-launching the server by entering:

ruby script\server

This is necessary in this case to let us view the changes we have made.

Now we can open our browser and go to the address:

http://localhost:3000/say/hello

You should be seeing ‘Hello world!’ in your browser window.

Conclusion

This was a starting block on your way to learning Ruby on Rails and up to now you have learnt how to make a static web page. Of course, RoR is not just for making static web pages, but web applications. This was just a very basic introduction to the framework.

My Current Position

Where am I now?

I have reseached the background and applications of Ruby on Rails and have a loose understanding of how RoR compares to other languages, specifically PHP.

What is the next logical step?

The next logical step in my learning is most likely trying to develop a working product using RoR working from tutorials. I have found various RoR tutorials explaining various applications of the language such as to do lists, blogs, search engines, etc.

Resources

Getting started with Ruby on Rails

Four Days on Rails (PDF)

Top 12 Ruby on Rails Tutorials

Ruby on Rails for Beginners (appears to be more up to date)

Tutorial in Ruby on Rails

Having looked through all of these, it appears that the most up to date and suitible tutorial for me would be the last one, ‘Tutorial in Ruby on Rails’. I’m feeling quite daunted at the moment as most of these tutorials seems to presume you have come from a pretty successful coding background, which I have not. The only coding I use is HTML and CSS at the moment, so this will be a challenge.

Four Days on Rails is a great concept for a tutorial but it appears to be a little out of date. I will however start it and will soon know how out of date it is.

I will document my ‘progress’ here… Eek.

SCAMPER

Given that my project is not fully conceptualised as yet, I will use an example of a portfolio website for a photographer that I recently built a website for, Ian Davies (No ID Photography). I think this has potential to be the basis for my project – perhaps a redesign using a different web framework to see how the two compare with regards to ease of maintenance and usability etc.

So, SCAMPER:

  • Substitute HTML for Ruby on Rails
  • Combine RoR with Flash and/or Javascript for gallery function. Perhaps even WordPress for a blog
  • Adapt the existing portfolio to use a different web platform
  • Modify/magnify the content of the website, adding more pictures on one screen, perhaps having a seemingly massive selection of thumbnails under different headings
  • Put the site to other uses by making it standard enough to be translated for different purposes; for example, a website for a new art exhibition…
  • Eliminate/minify the amount of unneccesary code and images for improved loading times
  • Reverse/rearrange the storyboard so that photos are displayed randomly on the initial page seen by the user to give the website more of a dynamic feel. The site could even be one page, inclusive of a mini blog, video player, selection of thumbnails and an ‘about’ section
No ID Photography site

No ID Photography site

Three loose ideas

I’ve been thinking about what I want to do with this assignment, and I have come up with a few very vague ideas. I think whatever I do I am going to have to learn a new programming language by the looks of things, so it’s going to be either AJAX, Ruby or ActionScript 3.

Not so long ago I saw something in a Web Design special of Computer Arts about Microsoft’s Silverlight 2, specifically an item on Deep Zoom (an example can be seen from the link). I liked the idea of being able to create a portfolio that was more like a real-world exhibition and apparently, Silverlight is the way to do that. I am not sure I would want to create a portfolio site, but perhaps an exhibition would work well if I can find an artist who wants to show something off.

Ruby on Rails is a recent web development framework that essentially borrows bits and pieces from other programming languages in the hope of creating something simpler and easier to understand. The examples of work I have seen that use RoR have been quite clever, for example; Wayfaring.com allows users to create custom maps based predicably on Google Maps. People have posted various different kinds of maps including favourite drinking spots, locations of celebrities, etc.

The last thing I considered was creating an Adobe AIR application, but again I am unsure of what kind of app I would like to produce. I find the AIR apps really convenient and undemanding of system resources, so they effortlessly run in the background. One I use very frequently is Twhirl, a desktop Twitter client. Another advantage with this method of app creation is that the language is universal to Windows and Unix. 

A fair bit to think about! I think I will need to see how much learning will be involved in each of these languages. I already know a little ActionScript, but my experience is quite minimal.