Still Life

A Series of Mental Snapshots

Posts Tagged ‘design’

Django – Going from development to production

Posted by Steve on March 24, 2009

I recently took my 4th year Systems Design Engineering project, which is a Django web application, from the development environment into a production environment and had quite a bit of difficulty, that could have been easily avoided if I had a tutorial to follow!

  1. Hosting & Domain:
    The first thing is to either build a web host or purchase hosting from a company. I purchased hosting form Webfaction as they had a one click deployment for a Django application.  A domain name should also be purchased, I bought mine from GoDaddy for 10$.
  2. Getting Setup on Webfaction:
    Webfaction takes a little while to setup your account~2-3 hours, when it is complete you will receive an e-mail and you can then login to their control panel. There are some resources that Webfaction offer to help you get setup, the first is a screencast and the other is a text guide.
  3. Setting up the Database
    Once you are in the control panel area there are a few things you’ll want to do. Firstly you will need to add a database (if you have not done so), this can be done by clicking add new databse from the ‘Databases’ drop down menu.
  4. Adding your domain name
    Under domains/websites select the domain link. Click on the add new button, and then enter your domain, for this tutorial we will assume it is ‘mysite.com’. When you add the domain be sure to enter in the subdomains field ‘www’ .
  5. Setting up the application to serve the static media
    The next thing you will want to do is to add Static/CGI/PHP application to your website to serve the static media files (this is highly recommended). To do so go to the applications link under the domains/websites tab. Next click the add new button, name the application ‘media’ and select the app type as ‘Static/CGI/PHP’ and finally click the create button. Now you have to add the application to your domain, to do so click on the ‘websites’ link, and click the edit button for your website. Under subdomains select any that you would like to include, and then under site-apps ensure that you select the media app and set the url/path to ‘/media’. Click update, and you should be taken to the page as seen here:

    After site applications have been configured

    After site applications have been configured

  6. Changes to your settings.py file:
    There are a few changes that need to be made to the settings.py file:
    DEBUG = False MEDIA_ROOT = ‘/home/username/webapps/media/
    MEDIA_URL= ‘/media/’

    Replace ‘username’ with the username that you selected for your webfaction account, now you are ready to upload your site. You will also need to change your database settings such that they match the new database created by webfaction.

  7. Uploading your web applicaion
    To upload your web application, you will need to upload your ‘mysite’ application to the webfaction server. To do so you will need to download putty (an ssh tool) so that you can ssh into the host, the connection info as well as the username and password are provided by webfaction. Once you are logged in navigate to ‘/home/username/webapps/django/’ and replace the ‘myproject’ folder with your web application folder that you used for development. Once it has been uploaded you will need to tell apache where to locate the project, so naviagte to ‘/home/username/webapps/django/apache2/conf/’  and edit the httpd.conf file. You will need to change th PythonPath and SetEnvPythonPath “[‘/home/username/webapps/django’, ‘/home/username/webapps/django/lib/python2.5′] + sys.path”
    SetEnv DJANGO_SETTINGS_MODULE  sitename.settings

    To setup your static media you will need to and another few lines of code to the same httpd.conf file:

    <Location “/media”>
    SetHandler None
    </Location>

    Save the file, and thats all you need to do in the apache folder. One last thing you will need to do is put your existing media into the media directory so that your static files are properly served by apache:
    /home/username/webapps/media

  8. Setting up the Database :
    The first thing you will need to do is to get a dump of your current sql database, I personally used mysql, and got a dump with the following line of code:   mysqldump -u [username] -p [password] [databasename] > [backupfile.sql] . Now you need to navigate to your project on the webfaction host, /home/username/webapps/django/mysite/ and enter the db shell by entering: python2.5 manage.py dbshell . You should see a mysql command line promp where you can upload your mysql dump: mysql – u user_name -p your_password database_name < file_name.sql. Now  you have your database loaded up and you are ready to go.
  9. Firing it Up:
    Everything is ready to go, the last step is to fire up your apache server, to so navigate to /home/username/webapps/django/apache2/ and enter the command bin/stop to stop it in case it was running, and then enter bin/start to start it up.
  10. Pointing the domain name to the webfaction name servers:
    There actualy is one last thing to do, and that is on the domain side of things. You will have to go to the site where you purchased your domain name, and then change the nameservers to those at webfaction, which are as follows:
    ns1.webfaction.com
    ns2.webfaction.com
    ns3.webfaction.com
    ns4.webfaction.com
    Now you can navigate to http://mysite.com and it should come up, congrats your site is live!

There you have it, from development to production. Also remember if you make any changes to the settings.py file you will have to stop and then restart the apache server.  Hopefully this quick tutorial will help you get up and going, and if you have any other questions feel free to ask me!

–Steve

Advertisements

Posted in Fourth Year Project | Tagged: , , , , , , , , , , , , , , , | Leave a Comment »

Revolutionary vs. Evolutionary Design – The 3rd Generation iPod Shuffle

Posted by Steve on March 18, 2009

I am sure many of you have seen the new 3rd generation iPod shuffle, as seen here. What really caught my attention was this line from the VP of product marketing:

“The new iPod shuffle is the world’s smallest music player and takes a revolutionary approach to how you listen to your music by talking to you, also making it the first iPod shuffle with playlists.”

What catches my attention is that they state that their new ‘revolutionary’ VoiceOver feature;  the ‘revolutionary’ VoiceOver feature will tell you the song titles, artists and playlist names. To me the fact that the shuffle talks to you is not a revolutionary change in the way people listen to music.I think they need a little lesson in what constitutes a revolutionary design and what really is an evolutionary design.

The terms evolutionary and revolutionary may seem very similar but there is an important difference, I’ll start by describing both. Evolutionary designs are ones that simply take a design to the next logical step, for example the first iPod nano with video support was an evolutionary design, it brought video to a small portable device but it did not really change how people watch videos. Revolutionary designs are those that fundamentally change how something is done, a classic example of a revolutionary design is the printing press, it fundamentally changed how information was desiminated and possibly led to the prevalence of literacy.

It should be obvious at this point how the new VoiceOver technology is not a revolutionary step in the way that we listen to music. The VoiceOver technology simply provides the same information that a visual display would, just through the auditory channel, thus not really changing how we listen to music.

To me, an example of a revolutionary design for a new music player would be one that could sense our moods and then auto create playlists based on them, or one whose controls could be operated based on our thoughts instead of the current tactile interface. Now obviously I know that these ideas are a little far fetched and currently infeasible, but one can always dream!

———————

Do you agree or disagree with the arguments made above? Let me know, I’d love to hear your thoughts.

Posted in design | Tagged: , , , , , , , , | 3 Comments »

An upgrade to the mechanical pencil

Posted by Steve on October 29, 2008

As a foreword, I am aware that this is one of those ‘out there’ ideas that may never be feasible, but despite that I feel it is a good idea!

The idea came when I was studying for my image processing midterm. I was making notes with my trusty mechanical pencil when I realized that every 3-4 words the lead in the pencil would become dull, I am using 0.5mm lead, in case it matters. When the lead becomes dull my writing becomes very unclear, so I would spin the pencil around about 180 degrees to where the lead was now sharp, and then another 3-4 words I would again spin the pencil to get to the sharp part of the lead. After doing this for a while, I thought to myself, why should I have to spin this pencil 20 times a minute! This is when the idea struck.

I propose that new mechanical pencil designs have a system that results in the lead rotating on its own so that the lead is always sharp. There are a few implementations here, the pencil could have a mechanism where the lead is always turning slightly, the actual amount would have to be ascertained through some calculation in how quickly lead dulls. Another implementation would be for the lead to ‘know’ when to rotate; if the pencil was smart enough it could know how long a person had been writing and the pressure with which they were writing. With this information it would be possible to know when the lead would become dull, therefore at the point of dullness the lead would automatically rotate. A final implementation idea, and probably the most feasible, is to place another button on the side of the pencil that would rotate the lead 180 degrees for you.

The drawback is obviously that it would cost more money to implement this kind of system, and mechanical pencils are meant to be inexpensive. That being said, if there were an automated lead rotating mechanical pencil that did happen to be more expensive, I would definitely be the first to rush out and get one!

–Steve

Posted in design | Tagged: , , , , , , , , | 4 Comments »

4th Year Project: Scraping Pages!

Posted by Steve on October 27, 2008

The first step to my project was to get the main information that I was going to display on my web page. As mentioned in the previous post, the two pages I want information from are the schedule of classes and the undergraduate calendar. I used Ruby to accomplish this, if you want more info on scraping with Ruby drop me a comment.

The information I needed to pull from the schedule of classes was the basics for each class including the department, the class name and number, the enrollment cap and total, what day/time it was schedule for and the instructor.  A quick inspection of the page demonstrated that it was very poorly design, no information had tagged IDs or anything useful in that way. After a little digging and with the help of this command:

ie.show_tables

I was able to ascertain that the schedule of classes page had 2 tables, with the second table containing ALL of the desired information on the page; now if this isn’t bad web design I don’t know what is!

Alright I was getting somewhere, the information is in a table, now it was just a matter of finding the right logic to catch the information I wanted. Again after a little investigation I found that the department name would appear in the first column of a given row, and after I caught the department name there was a concrete pattern to where the rest of the information I wanted was placed. The logic I ended up using (and excuse the lack of indenting, wordpress is being a pain) was:


size.times do

if(classArray[count][0] == dept)

Write desired information to an excel form (for the time being)

end

count = count+1 #Increase count so that it checks the next row

end

So this basically iterates through each department page and pulls down all of the information I need! I apply very similar logic to pull down all of the information from the Undergraduate calendar. As things stand I have all of the current information available to students in an excel sheet, this is only temporary, I will shortly be putting it in to a MySQL database so that I could start putting it with the Django framework!

As far as next steps, well that would be to start learning Python/Django and getting a development environment up to play with, should be fun!

–Steve

Posted in Fourth Year Project | Tagged: , , , , , , , , , , , | Leave a Comment »

Why do doors with handles push in!?

Posted by Steve on September 14, 2008

Or more elegantly put, what a door with two handle affords (An affordance is a quality of an object, or an environment, that allows an individual to perform an action – Wikipedia).

This has to do with an annoyance I have had for quite a while and that is, why are there doors with handles on both sides? Think to yourself, how many doors have push/pull signs? In my opinion much too many considering if a simple design change was implemented they could be done away with and there would never be any question which way a door goes

Currently those doors that have handles on either side afford for a user to either push or pull. If all doors were designed such that one side had a handle on one side did not, it would be very simple because it would be known that the handle is the pull side, and the other is the push side!

Because of this poor design I have actually created my own heuristics to avoid embarrassingly walking into a door (and yes I definitely have walked into one of these doors). If I am uncertain whether it is push or pull, I’ll put my hand on the handle and push in slightly (it is only noticeable if you know what I am doing) and if the door does not budge, I proceed to pull it. I personally think it is a little ridiculous that I have had to come up with a best practice to open a door!

This may be a rather trivial example, but these type of affordance problems can be seen anywhere, whether physical or in software/the web. A (contrived) web example could be a text box that you cannot type in that has a white background. A white background usually indicates that the text box can be typed in, and if the user attempts to type in it and they cannot they will be surprised. Despite the contrived nature of the above the example, it was meant to get you thinking about the software that you use and design affords. It is important in design to always be aware of what a given design affords, if there is any question about what it affords, I can guarantee you that someone is having trouble using it.

So go ahead look around at any physical or software design and think about what it affords, you may be surprised at what you discover.

–Steve

Posted in Uncategorized | Tagged: , , , , , | 4 Comments »