Fixtures

Dumpdb

• –indent=2 – This makes the output easy to read and edit.
• –natural – This removes foreign key ids from the output and replaces it with the unique field in the referenced model. This is most notable with exporting Permissions. This not required, but is something to remember.

Example

./manage.py dumpdata --indent=2 auth.user > initial_data.json

[
  {
    "pk": 1,
    "model": "auth.user",
    "fields": {
      "username": "admin",
      "first_name": "Admin",
      "last_name": "Strator",
      "is_active": true,
      "is_superuser": true,
      "is_staff": true,
      "last_login": "2012-01-13T14:18:47",
      "groups": [],
      "user_permissions": [],
      "password": "pbkdf2_sha256$10000$MIath2Pzfcc8$vykFKAQ1A0XoGKrSQwwksDxjzLFGnocknZaChiPdeC8=",
      "email": "admin@mydomain.com",
      "date_joined": "2011-11-10T15:55:55"
    }
  }
]

python ./manage.py syncdb

python ./manage.py syncdb --noinput

If this doesn’t excite you, you probably haven’t spent hours trying to track down a trivial rendering bug on an iPhone, all the while knowing it would take you five minutes to fix if only you had access to an actual testing environment.

Adobe Shadow is free, and works on Windows and Mac, iPhone and Android.

• The Idiot’s Guide to viewport and pixel is an excellent, no-nonsense explanation of the challenges presented by mobile viewport and media queries, and the current working solutions to them. It explains why MB is set up to the way it is, but it’s 100% generalizable to your web site whether you’re using the templates or not.
• Webkit Remote Debugging is something I have not tried yet, but it promises to allow you to run the Web Inspector tool from Safari on web pages displayed on another browser, even on another computer. This includes mobile devices like the iPhone, if you do a couple tweaks in xcode. Given the difficulty of developing mobile apps without a good built-in debugger, this could change everything.

1. Begin with your shape, in its own layer. Select that layer in the layers panel.
2. Apply a stroke: Right click on the layer, select Blending Options… then Stroke. Another way to do this: in the file menu, select Layer ►Layer Style ►Stroke…
3. In the Stroke dialog, apply the gradient by selecting Position: Inside, Fill Type: Gradient, and (the most important part) Style: Shape Burst. Choose your own gradient, and adjust the size of the stroke to suit your needs.

In Illustrator

1. Make a blend. The blend will be your gradient, so adjust it accordingly. Also, the width of the blend will become the width of the stroke when you’re done.
2. Select your blend, and drag it into the Brushes palette. When you do, the New Brush dialog pops up.
1. Select “Art Brush” then click OK.
2. In the next dialog, make sure “Stretch to Fit Stroke Length” is selected, then click OK. A new brush has been created.
3. Now, whenever you select a stroke you want your gradient applied to, just click the new brush you created and it will be made for you.

Design is full of trends and rebellions against those trends. Some technique, element or outlook becomes fashionable, then a backlash forms seemingly out of nowhere proscribing it. I find it difficult to keep up on trends, and I try to base my process on my own experience rather than the mode of the times. It’s hard enough coming up with the best design for your requirements without ruling anything out ex facie . However, there are some popular design trends that just don’t suit the needs they’re commonly applied to, and skeuomorphs are a good example of this.

What are Skeuomorphs?

Skeuomorphs are design elements that serve no purpose, but stick around because they used to be useful. Software products that do something analogous to an older physical product often contain skeuomorphs: for example, circular knobs to change the volume in a music player, or pages that have to be flipped in a document reader. You don’t need to flip knobs or turn pages in a digital world, and it’s quite a bit of extra effort to implement these special controls.

While cute, these elements transfer the limitations of the analog world to the digital one, where they’re unnecessary and sometimes even counterproductive.  Don’t make me turn pages for no reason!

Why use them?

So why use them? Apple uses skeuomorphs in apps like iCal, Find My Friends, even on their standard virtual keyboard. They claim these artifacts evoke an emotional response in users and immediately orients them to how to use a product.

While it is usually difficult to argue with Apple’s design rationale, I’m suspicious of this argument simply because I see no research to support it, and the history of user interface design provides plenty of anecdotal examples to the contrary¹.

I suppose the real reason for skeuomorphism on first-party iOS applications is simply that they look really, really cool, and even if they don’t actually make an application more intuitive to use, they make it more approachable. These elements don’t contribute to usability, they contribute to marketability. In other words, they help inform you about an app does rather than how to do it.

But I can think of at least one case when the use of skeuomorphism adds genuine value to a user’s experience: aiding in the transition between a physical process and an analogous digital process.

For example, a fine artist used to blending colors on a palette may not at first understand the discrete ” RGB color picker” model that is the standard in graphic applications like Photoshop. Instead, they may want to select primary colors (or a set of predefined colors mapping to common paints) and mix them together to get the hue they’re looking for. This works at first, but it’s inefficient and unnecessary, and as they become familiar with the application they’ll probably outgrow it. So, why not let them blend colors together on a palette, but also let them select that color, browse through variations of it (a slightly warmer tone, a slightly brighter one, etc.) and then save the color for later use. In other words, use skeuomorphs to help the user approach the application, but do not limit functionality according to any artificial constraints.

Note that the transition between analog and digital processes could go both ways. You could also use skeuomorphic design to help people on a computer to understand how to use physical tools. For example, on a GPS-enabled phone, you can easily locate North with (or even without) the push of a button. On a manual compass, it’s slightly more involved — let the magnetic arrow settle, align directions on the housing to the arrow, and change your orientation relative to the compass. But how about a GPS-enabled application that teaches you how to use a manual compass by retaining the artificial limitations and forcing them into the interface?

I’m skeptical of the use of skeuomorphic design when it is claimed to benefit the usability of a design. I generally believe skeuomorphs serve a mostly decorative purpose and while that’s not necessarily an argument against them, form should always follow function rather than dictate it.

¹I’d even wager to guess that the trend towards skeuomorphism is cyclical, rising in prominence as new platforms emerge, and waning as these platforms become more familiar. See for example early desktop computer interfaces, which ultimately resolved into the WIMP model, then early web site designs, from which emerged the standard web site interface we’re all pretty familiar with. No doubt the standard interface for touch-based mobile applications is still being shaken out.

Radius of minimum touchable pixel area = (PPI / 1.414) / 2.54)

]]> http://pugetworks.com/blog/2012/02/minimum-touchable-area-on-mobile-devices/feed/ 0 http://pugetworks.com/blog/2012/02/django-tips-filefield-and-uploadto/ http://pugetworks.com/blog/2012/02/django-tips-filefield-and-uploadto/#comments Wed, 22 Feb 2012 23:18:14 +0000 Bill http://pugetworks.com/blog/?p=860 read the rest of the article]]> The Model Object The FileField model in Django is used to store files in Django. The file itself is not stored in the database but on the filesystem, with a reference to the file location saved in the database. Once saved, the file can be easily accessed with 2 functions:

• document.path – returns the absolute location to the file in relation to the filesystem
• document.url – returns the absolute location to the file to be used in a web browser

Settings

• MEDIA_ROOT – Absolute path to the directory that holds media…
• MEDIA_URL – URL that handles the media served from MEDIA_ROOT

MEDIA_URL='/media'

MEDIA_ROOT = os.path.join( os.path.dirname(__file__), 'media/').replace('\\','/')
MODEL_DOC_ROOT = os.path.join( 'model', 'documents' ).replace('\\','/')

( r'^model/documents/(?P<path>.*)$', 'django.views.static.serve',
        { 'document_root': '%s/%s' % ( settings.MEDIA_ROOT, settings.MODEL_DOC_ROOT ) } ),

uploadto

Default

A local filesystem path that will be appended to your MEDIA_ROOT setting to determine the value of the url attribute.

As a function

This may also be a callable, such as a function, which will be called to obtain the upload path, including the filename. This callable must be able to accept two arguments, and return a Unix-style path (with forward slashes) to be passed along to the storage system.

def doc_location( instance, filename ):
    root_path = path.join( settings.MODEL_DOC_ROOT, instance.name.slug ).replace('\\','/')
    full_path = settings.MEDIA_ROOT + path.join( '/', root_path ).replace('\\','/')
    
    if not path.exists( full_path ):
        mkdir( full_path )

    return path.join( root_path, filename ).replace('\\','/')

Obscure Pitfalls

• If MODEL_DOC_ROOT starts with ‘/’ then MEDIA_ROOT is NOT appended as indicated the docs!
• In the doc_location function, if settings.MEDIA_ROOT is included in path.join it doesn’t get added!?

Step 1.  Isolate your network calls with a thread call.

makeNetworkCall();

new Thread(new Runnable() {
   @Override
   public void run() {
      makeNetworkCall();
   }
}).start();

Step 2. The Handler

private Handler handler = new Handler() {
   @Override
   public void handleMessage(Message msg) {
      updateTheUI(); //This method is for whatever needs to happen after the network call is complete
   }
};

handler.sendEmptyMessage(0);

Step 3. Smarter Messages

private static final int REDRAW = 42;

private Handler handler = new Handler() {
   @Override
   public void handleMessage(Message msg) {
      if(msg.what == REDRAW) {
         updateTheUI(); //This method is for whatever needs to happen after the network call is         	
      }
   }
};

handler.sendEmptyMessage(REDRAW);

In conclusion

As a Ruby on Rails developer, you have a lots of choices for creating visually wonderful websites. And with the introduction of Sass in Rails 3.1, CSS has become easier to code then ever. But, say, your Rails app grows and with it so does Sass and CSS. With such growth, your files expand. You begin distributing Sass and CSS code to different files, files such as header, footer, content, but, all this becomes a messy business. Get the picture? What if you could consolidate each file to, say, just a file or two? Well, with Compass and Sass, you can!

This article deals with the introduction and installation of Compass and Sass and their basic features.

Solution with Compass and Sass

Compass is a generic-framework that heavily uses Sass to generate CSS output. Sass, on the other hand, is a metalanguage that implements programming functions such as “nested rules, variables, mixins, selector inheritance, and more”. Compass and Sass are tightly coupled and are marriage in heaven for web designers: the two eliminate redundancy if you were to code everything in CSS. And, if you are currently implementing CSS3, then you’ll love Compass and Sass. Compass has many great CSS3 functions, such as box-shadow, that saves you so much time typing vendor prefixes.

Compass and Sass Features

1. Top Level
   1. CSS Rest
   2. Basic Element Styling
   3. Basic Structural Rules
   4. Rules for Browser Inconsistencies
2. Form and Table Styling
3. Typography
4. CSS Grid

Installing

For this example, I am using iMac and its Terminal to generate necessary files and move around file structure. My Ruby and Rails are run on RVM.

With the RVM installed on your computer (and I hope you have RVM installed on your system, if not, take a look at the RVM site for the installation guid), initiate the following command;

gem install compass

However if you are not using RVM, initiate the following command;

sudo gem install compass

Now make sure compass is installed:

compass version

If all went well, you should see compass’s version number as well as its credits.

Creating a Compass Project

To create a Compass project, it’s very simple.

compass create /path/to/project --using blueprint

Notice at the end of the command, I am using the option flag --using and blueprint as the CSS framework for the project. I could have left out both of these and would have ended with the project itself. But I like blueprint, so I am going to leave it the way it is. Oh, and if you wish to have something other then the blueprint, you can. Just make sure you have the right type of framework compatible with Compass. Here are a few for your creative juices. However, it isn’t necessary to have any frameworks. Compass has it’s own CSS library too!

This command also spits out initial file structure Compass has created for you, and it also tell you to place the last part of this message, which is the stylesheets location, in your index.html page. Do that and you are ready to move on to a final step before getting into the application itself. Here is my stylesheets code:

   href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"
   href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css"
   href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css"

During this final step is make sure that Compass watches for any changes in your files. In this case, files that end with .scss or .sass. These files will then be converted to CSS (generated into CSS) as the final output! Wow. That’s going to be a lot of CSS! Yes, but it will be a compressed CSS that’s much faster for browser rendering. To do so, issue the following:

compass watch /path/to/project

That’s it! From here onwards, all we need to do is get into one of those .sass or .scss files and start coding.

Next Article Coming Soon

Candy

Vitamins

Medicine

Heart Meds

Conclusion