Category Archives: Articles

Connecting to RPi via Ethernet Cable

There are a lot of how-to’s online describing ways to set up a Raspberry Pi without a monitor or keyboard, but none of them are simple or straightforward. This will be.

I’m going to walk through how to do this on a Mac, but something like this should also work on Windows using internet connection sharing and the Event Viewer.

1. Connect an unpowered raspberry pi to your Mac via an ethernet cable.

rpi-ethernet

2. Enable internet connection sharing.

  • Open “Sharing” in system preferences. (You can just type “Sharing” into spotlight.)
  • Click on “Internet sharing.”
  • In the “To computers using:” box, select the adapter you have the ethernet cable from the Raspberry Pi connected to. In my case this is “Thunderbolt ethernet.” Beware: if you are using a USB ethernet adapter, the generically named “USB Ethernet” is probably not what you want. Your USB adapter is will probably have a different name in this list.
  • Check the “On” checkbox for “Internet sharing.”

Screen-Shot-2015-06-17-at-4.30.56-PM

3. Open Console.

You can just type “Console” into spotlight.

Screen-Shot-2015-06-25-at-12.10.44-PM

4. Power-On your Raspberry Pi.

Screen-Shot-2015-06-25-at-12.31.20-PM

5. Watch Console output for DHCP ACK.

Screen_Shot_2015-06-17_at_4_31_57_PM

6. Log on to your Pi.

You can now log onto your Raspberry Pi via ssh using the ip address acquired in the previous step:

Remote SSH Login

To log into your Raspberry Pi using SSH try the following steps:

In a terminal window in your Mac, type “ssh pi@xxx.xxx.xxx.xxx”, where “xxx.xxx.xxx.xxx” is the IP address you discovered in the previous step.

It will then prompt for your password. Type in the default password raspberry and type return. (Note that this will not echo on the screen.)
It will look something like this:


$ ssh pi@192.168.1.8
pi@192.168.1.8's password:
Linux raspberrypi 3.10.25+ #622 PREEMPT Fri Jan 3 18:41:00 GMT 2014 armv6l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Tue Apr  8 18:42:58 2014 from mbp.home

Booting up Raspberry Pi

Once you’ve formatted a Raspian SD Card you’re ready to boot up your Raspberry Pi (RPi). You have a few options:

  1. Plug a keyboard, mouse and monitor to your RPi to get the full affect.
  2. Run RPi ‘headless’ without monitor or keyboard.

    Either way you’ll need to plug an ethernet cable to RPi and your network router.

Once RPi is up and running, you’ll need to find its IP address, this is easy if you’ve got a monitor installed, just run “ifconfig” in the terminal window and you’ll get the following listing with your IP address:

raspberry-pi-ip-ifconfig

If you’re running RPi headless, you’ll need to find the IP address by scanning the network to find the IP address. Here’s a handy free OS X tool for scanning networks called Fing.

Preparing Raspian SD Card

You can use the Raspberry Pi for all sorts of different things—some of which may require their own special operating systems—but to start out, it’s a good idea to get acquainted with the Pi by installing Raspbian, a Raspberry Pi-focused version of Linux. Here’s what you need to do.

Step One: Prepare Your SD Card

First things first, we need to prepare your SD card for the Raspberry Pi. This involves formatting it properly and putting Raspbian, the standard Raspberry Pi operating system, on it. The steps vary depending on whether or not you’re on a Mac, Linux, or Windows PC, I’ve included the instructions for a Mac below.

  1. Download the lastest version of Raspbian and unzip the .img file inside. (It’s almost 500MB so it may take a little while to download.)
  2. Download RPi-sd card builder (be sure to pick the appropriate version for your installed version of OS X) and unzip the application.
  3. Insert your SD card into your Mac using a card reader.
  4. Open RPi-sd card builder. You’ll immediately be asked to choose a Raspbian image. Choose the .img file you downloaded earlier.
  5. You’ll be asked if your SD card is connected. Since we inserted it earlier, it is, so go ahead and click Continue. You’ll be presented with SD card options. If you only have one inserted, you won’t see anything else in the list and it’ll be checked. If not, just check only the card you want to use and click OK.
  6. Enter your administrator password and click OK.
  7. You’ll be asked if the SD card was ejected. This is supposed to happen, as the application needs to unmount it so it can perform a direct copy. Double-check that your SD card is no longer available in the Finder. DO NOTremove it from your USB port. When you’re sure, click Continue.
  8. RPi-sd card builder finishes prepping your SD card, safely eject it and insert it into your Raspberry Pi unit.

RPi-sd card builder isn’t an app so much as it’s an Automator action that acts like one. Some people have reported issues using it, so if you run into problems just open up the Terminal app (Your Hard Drive → Applications → Utilities → Terminal) and follow the instructions for Linux.

Linux

  1. Download the lastest version of Raspbian and unzip the .img file inside. (It’s almost 500MB so it may take a little while to download.)
  2. Open up your Linux terminal emulator of choice. If you don’t have one, try our favorite.
  3. Insert your SD card. If it mounts automatically, unmount it but make note of its location (e.g. /dev/disk2s1). Even though the card is unmounted, do not remove it from the reader
  4. In the command line, you’re going to need to type a single line to copy the contents of the Raspbian .img file to your SD card. It’ll look like this:sudo dd if=PATH_TO_IMG_FILE of=PATH_TO_SD_CARD_MOUNT_POINT bs=1m

    You’ll need to replace PATH_TO_IMG_FILE with the path to the .img file and PATH_TO_SD_CARD_MOUNT_POINT with the path to the SD card mount point. (The bs=1m just specifies the byte size and you don’t need to mess with it.) When you’re done, the command should look something like this:

    sudo dd if=/Users/adachis/Downloads/2012-12-16-wheezy-raspbian.img of=/dev/disk2s1 bs=1m

    It’s very important that you do not get this information wrong or you could end up writing Raspbian to the wrong disk and cause serious data loss. Be careful! When you’re sure you’ve got everything right, press enter.

  5. You will be prompted for the root password (or your administrator password for those of you on OS X who are using this method). Type it and press enter.
  6. It’ll take some time for the dd command to copy everything over to your SD card. While that happens, it’ll probably look like the Terminal froze up. Don’t worry, it’s still working and will likely take longer than an average 2GB copy to an SD card (so be patient). When it finishes, the command prompt will return and your SD card will be ready. Eject it safely and stick it in your Raspberry Pi.

Raspberry Pi Basics

The Raspberry Pi is a wonderful little computer that fits in the palm of your hand, yet packs enough power to run your home media center, a VPN, and a lot more. This article attempts to cover the basics of this great little prototyping tool.

rpi-hero-shot

The Raspberry Pi may be a computer all on its own, but you’ll still need a lot of other things to make it work:

A monitor: For the purposes of our course we’ll be working with an HDMI-capable monitor because it offers better resolution and built-in sound. But you could however use any composite video-capable television.

HDMI cable: You’ll need this cable to connect your Raspberry Pi to your monitor or alternatively composite video cable if you’re using a television.

SD card: RPi uses an SD card for its hard drive. Almost all cards will work, but some aren’t compatible and will therefore cause issues. You can find out which cards are compatible, or locate a place to buy a compatible card with an operating system pre-installed here.

A keyboard and mouse: Any standard USB keyboard or mouse will do. Wireless (non-Bluetooth) peripherals worked for me, but I had to unplug them and plug them back in after the Raspberry Pi booted. You’ll have fewer issues with fully wired keyboards and mouses.

An ethernet cable: Any standard ethernet cable will do. You only need this to connect to your network and the internet, however, so you can leave this item out if desired.

A power supply: Most micro USB smartphone chargers supply 700mA at 5V, but not all do. Check the bottom of your charger and look for a block of text. You’ll see its output values in that text which may read 0.7A instead of 700mA). If it offers at least that much power, you’re probably good to go.

Now that you’ve got all the hardware, it’s time to create the operating system for RaspberryPi on your SD card.

Check out the following articles on setting up Raspberry Pi:
1. Preparing Raspian SD Card

2. Booting up Raspberry Pi

3. Connecting to RPi with Ethernet Cable

Interaction Design Principles

Download the Lecture Slides PDF

1. IxD Principles

a. Design Values:

Ethical: It does no harm, and hopefully improves situations
Purposeful: It helps people accomplish goals. It is appropriate o
the user’s context
Pragmatic: it achieves business goals and fits within constraints
Elegant: It provides the simplest complete solution
It engages the emotions appropriately

b. Conceptual Principles:

How do we address the needs of both beginning users and expert users with a single, coherent interface?

Optimize for intermediates
Encourage users to skip beginner phase

c. Behavioural Principles:

Optimize the experience by clarifying information and minimizing work in the following areas:

  • Cognitive Work
  • Memory Work
  • Visual Work
  • Physical Work

d. Interface-level Principles:

  • Don’t think of your product as a computer
  • Integrate your hardware and software design
  • Let context drive the design
  • Use modes judiciously, if at all
  • Limit the scope
  • Balance navigation with display density
  • Customize for your platform

2. GUI metaphors

gui-metaphors

3. Design Patterns

design-patterns

4. Best Practices

  • Design based on user scenarios
  • Interfaces should anticipate user behaviour
  • Guide but do not dictate user experience
  • Navigation should indicate where the user is
  • Progress from simple to complex (Undesired complexity confuses user)
  • Prevent users from making errors (ex. electrical sockets)
  • Provide affordances for interactive elements
    (Elements should look like what they are)
  • Focus should be on content, not format or navigation
  • Don’t make users wait, wondering
  • Give the user control over the pace of the interaction
  • Let the user decide their needs, accommodate the user

Information Architecture

In the context of web site design, information architecture describes the overall conceptual models and general designs used to plan, structure, and assemble a site. Every web site has an information architecture, but information architecture techniques are particularly important to large, complex web sites, where the primary aims are to:

  • Organize the site content into taxonomies and hierarchies of information;
  • Communicate conceptual overviews and the overall site organization to the design team and clients;
  • Research and design the core site navigation concepts;
  • Set standards and specifications for the handling of html semantic markup, and the format and handling of text content; and
  • Design and implement search optimization standards and strategies.

There are five basic steps in organizing your information:

  • Inventory your content: What do you have already? What do you need?
  • Establish a hierarchical outline of your content and create a controlled vocabulary so the major content, site structure, and navigation elements are always identified consistently;
  • Chunking: Divide your content into logical units with a consistent modular structure;
  • Draw diagrams that show the site structure and rough outlines of pages with a list of core navigation links; and
  • Analyze your system by testing the organization interactively with real users; revise as needed.

Choosing the right site structure for your site depends greatly on your audience and the content being presented.

3-9-700

Next
Many of the activities above can be achieved using card sorting and whiteboards.

References:
Web Style Guide: Information Architecture

Understanding Information Architecture

Information Architecture 101: Techniques and Best Practices

Jessie James Garrett’s IA resource page

Books:
Information Architecture for the World Wide Web
Designing Large-Scale Web Sites
By Peter Morville, Louis Rosenfeld

Responsive Web Design

Creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. For some that means letting go of strict control of pixel-fixed dimensions in your layout and approaching interfaces in a more fluid way.

As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.

What is responsive design?

Believe it or not, this Course blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone.

Not only does the layout conform to the window size but interactive elements like navigation present themselves differently and anticipate different types of interaction.

It’s impossible to talk about responsive design without mentioning Ethan Marcotte. If you haven’t read Ethan’s seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

A good question to ask might be, what problem does responsive web design solve? As you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this, the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {
 
  .content {
    float: left;
  }
 
  .social_icons {
    display: none
  }
 
  // and so on...
 
}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.

Resources
Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it.
Techniques for Gracefully Degrading Media Queries
Adaptive Layout Media Queries

Don’t Forget the Viewport Meta Tag
Modernizr