Sunday, January 4, 2009

Interaction Design and Theatre

Although this blog is primarily dedicated to my technical trials and tribulations in all their dramatic and/or not-so-dramatic glory, on occasion I've decided to start blogging on related topics, such as tech news, business, and interactive design.

One of these topics, which I hope to learn a lot more about, is user interaction design. Coming from a background in theater, I always felt that my undergraduate training somehow indirectly prepared me for further study in HCI, but also thought I was likely imagining things (I do that often.)

Turns out I'm not the only one who has made the connection. In this really interesting discussion thread on IxDA, a few interaction designers chime in on the relationship between theatre and UI.

Seamus Bryne, a Senior User Experience Designer from Ireland writes:
"I find that some principles from stage direction to be very relevant and applicable to interface visual design. Concepts such as "selection" and "emphasis" and "levels" help me understand designing within space and therefore lend themselves very well to the informed placement of UI elements. After all, a screen has similar characteristics to the traditional proscenium stage."
My (hobby) work as a theater director definitely has employed elements of interactive design. Where the audience is looking at, and what of the script they are processing at any given time based on focus is a key element in any directorial project I take on. Sure, I don't have to get my audience to click a button, but if they aren't mentally clicking buttons as the show progresses, I haven't done my job as a director.

One thing that drives me nuts about directing theater is that as the director, you only have so much control over the actor and design, which are your page elements leading your audience through the script. As a director, I want ultimate control. Maybe in film direction I would get that, but in theater direction that control is lacking.

In programming, you do have control, at least, to set the page elements and adjust as needed based on research, in order to guide your audience through a psychological and physical process.

The most important part of the entire puzzle is the feedback from that audience, so you can make the appropriate changes to your educated guesses of what takes your audience from your point A to point B. In theater, design needs to be holistic - you can't design one scene or interaction without thinking of the rest of the play. You also need to consider your audience (will they be fidgety children, affluent seniors, teens who'd rather be texting on their iPhones, or all of the above?), where your audience will be sitting and how that will effect the audience/user experience, your budget, your "talent" (which in the case of programming is both the power/flexibility of the chosen language and the actual talent/ability of your development team), the physical design elements, and every last variable which contributes to the experience of a performance.

A visit to an interactive website is a performance. With the thrill of discovery (the same thrill that you have as an audience member in a play or film when something is revealed or things "click"), your audience members get excited and want to delve further into the product/story.

There are plenty of differences between theater and interactive design, of course, but I am fascinated by the similarities.

I do feel like I've finally found a place where I can both excel and grow, and my current position in community management is a great spot to start out and get to know how users interact, what they expect, and what they want out of their experiences interacting with a product.

Ultimately, I may want to pursue an MBA and focus more on overall product development (which honestly seems closer to the "theater director" role, with a crossover into stage management), but learning about user experience and programming is one of the many things I must do to begin my journey to wherever it is I may end up.

Constants: Beyond Stubborn

Think back to 8th or 9th grade Algebra I, and you'll remember that in addition to "variables" there are "constants." The constants always bored me, they made it impossible to be creative in math class. But in programming (and heck, in normal math too) they're important. Some things don't change, and it's easier to set a constant and reuse it over and over again.

If you ever want to change the value of that constant, you can do it in one place, instead of all throughout your code. The textbook example, which seems like a good one to use and remember, is a constant tax rate in the equation of figuring out how much tax is owed on a purchase. The tax rate doesn't change, so it's a constant, not a variable.

Constant's JavaScript keyword is longer than the one for variable (var)...

const: the JS keyword for constant

const CONSTANTNAME = CONSTANTVALUE;
Formatting Note:
Constants are written in ALL CAPS and Variables are written in MixedCase.
If your constant changes at some point down the road, you can always go back and change it in your script. It just can't change while the script is running.

***like variables, constants can be named just about anything, but their name must start with a letter, $, or _

Variables are Fun!

So the book finally got around explaining variables and "var" on page 44.

variable: a storage location in memory with a unique name.
var: the JavaScript keyword used to create a variable.

It looks like the way to create a variable is to write
var variablename ;
* every variable must be unique and meaningful, says the book. Unique, obviously, because if you have two different variables named the same thing that will cause an error. Meaningful, because, let's face it, you're not going to remember what xijoije means. Programming is very organized - you don't have the luxury of letting your code get messy before taking a day to clean it up. Practically any programming book will beat you over the head about formatting and naming standards, and for good reason.

... so you want your variable to have an initial value? Yea, me too. Good thing the next page tells me how to do this. Apparently that's called initializing a variable. (Creative lingo here, huh?) The good news is that the code to do this is fairly obvious. You just add a = initial value and viola, you're set.
var variableName = Initial value;
JavaScript makes some things easy for us programming noobs. I just found out that it will assign a value for your variable automatically based on what initial value you give it. So if you say it's initial value is 300, for instance, it will know that it's a number. Sometimes JavaScript can't guess or guesses wrong and you have to go in and tweak it... but they don't want to tell me how to do that yet.

data types

Reminder to self:

Basic Data Types in Javascript...

text: a sequence of characters (also known as a "string" in various programming languages)
number: in JavaScript, numbers can be integers or decimals.
boolean: true or false data. Anything that has two scenarios (on/off, yes/no, left/right, etc)

Chapter 1 Summary

In chapter one of Head First JavaScript I learned about alerts, events, and functions. I also learned some basic ingredients of interactivity - onclick and onload. I am unclear what "var" means (though I know it's important in the code) and am looking forward to learning this later in the text.

The next chapter is entitled "storing data" so it seems a little more important than how to annoy users with an automatic greeting on page load. I'll let you all know how it goes.

(edited to add: variable is explained on page 44)

Saturday, January 3, 2009

It's a slow start

I'm on page 26 in the Head First Javascript book, and trying to get a function to "get the user's name" to work. After trying to figure out their fill in the blank exercise (with what they call "magnets") I transferred the page to my server and it's not working. So now I have to figure out what I'm doing wrong.

I'm obviously doing something wrong...



Fixed it!

What was wrong...

("rockImg".src was missing the ) after Img"

and

the last ) should have been }

See it in action.



Friday, January 2, 2009

Javascript: Trial and Error Bug

Apparently alert's don't like when you're grammatically correct. My apostrophe was breaking the code. I changed the alert text from what the book told me, which led to my bug.

So now it says "I am the best pet rock youll ever have." The "youll" is killing the copywriter in me, but I'll leave it for now. At least it works.

ie:
< onload="alert('I am the best pet rock youll ever have');"> works, but,
< onload="alert('I am the best pet rock you'll ever have');"> doesn't.

[Maybe there's a way to add quotation marks in there to keep the string whole?]

Luckily, that was an easy bug to figure out. Though there must be a way around apostrophe's breaking alerts, right?

(follow up: you know that "there are no dumb questions" section of the book? Well, on the next page it explains that you can use apostrophes OR quotes in your string, you just have to use the other on the outside. So I guess you can't use both at the same time.)

(follow up 2: a coworker who's a Javascript expert, I'll call him DevGuy1, just informed me that you can get around this another way...using \' (which, apparently, is called "escaping a character.")

alert('I am the best pet rock you\'ll ever have');
[Sweet.]

Meet the iRock, Virtual Pet Superstar

Isn't he cute?
Head First JavaScript uses this, uh, "rock" to lead us through a series of exercises. This is the "iRock." He doesn't look happy, and it's not because he's a poorly-drawn version of a rock. It's because he's not able to interact with anyone. Aw, poor rock.

In this exercise of pages 18 - 20 in the book, I will learn a little bit about events, functions and greetings.

Here are some starter learnings that seem important...

"Events are notifications that you can respond to with JavaScript code." You can respond to an event like a click, or a page finishing loading. I bet you can even respond to when a user clicks on more than one object in a row, but they're not going to teach me that stuff yet. We're starting simple.

"Functions are reusable pieces of code that perform common tasks." In other words, I wish that I could write a function to do my laundry and make my bed. Unfortunately, I don't think that's going to be taught in this book.

(onload) = when a page loads
< onload="alert('I Am the Best Pet Rock You'll Ever Have!');">
(This is an evil event/alert that I will never use again, unless a tutorial makes me.)

(onclick) = when a user clicks

See how this exercise pans out at iRock: The Virtual Pet

Geek Aside #1: SuperHappyDevHouse *LOVE*

My goal in life (ok, in the next year) is to learn how to program so I can attend one of these Dev House events... they seem like a blast of productivity and inspiration!

Javascript: Your Browser Isn't Psychic

To start, the book says get used to putting JavaScript directly into an HTML page.

Let your browser know you're using JavaScript by putting the...
< script type="text/javascript" >
after < /title > in the head. Close it with a < /script >

One thing I really like about the Head Start book is that it has a section called "There are no dumb questions." Basically, they try to guess all of your questions and answer them after reading through a page/section. One interesting learning from this section on page 11 is that the < script > tag doesn't tell the browser you're going to input in JavaScript, it just says "hey there's script coming." You have to include the type="text/javascript" so your browser goes - "here comes JavaScript!"

Tutorial Errors

One thing I can't stand is when a tutorial (online or in print) features an error. Debugging is certainly a good skill to have as a programmer, but when you're just getting started a tutorial needs to be free of errors.

Page 9/10 in Headfirst Javascript features a neat starter exercise. On page 9, they show a page of code with a few sections circled, and prompt you to write what you think those things are (to prove that JavaScript really isn't all that scary and a lot of it is common sense). For instance...
function validateZIPCode (value) {
// Validate the ZIP code
// if (!isZIPCODE (value))
alert("Please enter a ZIP code in the form XXXXX.")
...means enter a zip code with five digits (page 10 fills me in on this answer.)

I guessed it meant "enter a zip code, and if it is a certain value, validate it." Close, but not quite.

Lower down the page, another section is circled...
onclick="findHouses(this.form);
Except, on page 10 there is no answer for what this means. The wrong section is highlighted, so I still don't know what onclick="findHouses(this.form);" means. I guess I will have to keep reading and learning to find out.

Javascript: Why Bother?

This is pretty much the first part of any Javascript tutorial / book out there, so while it's obvious, I thought I'd include a quick post to say...

HTML is for structure, CSS is for style, and Javascript is for interactivity (or at least basic interactivity.)

Javascript can do cool things like perform calculations, dynamically swap images on a page, and validate data. (Yea, that's why it's worth learning. It's important in making a web page that isn't totally 10 years ago.)

You should know some HTML and CSS before jumping into Javascript.

If you don't know CSS yet, I recommend checking out the free tutorials over at w3schools.

Thursday, January 1, 2009

Javascript, Part 1: Buying a Book

After reading through a few internet tutorials, I decided it would be best for me to buy a beginners book to at least get a few of the basic concepts of programming down. I looked at quite a few books and settled on Head First Javascript.




I chose this book for a variety of reasons. At first, I was put off but how picture-heavy it was. It looked like it was designed for a kindergartner, practically. But then I realized that being such a right-brained thinker, a tutorial like this could be extremely helpful... at least to get started. Most programming books are impossible to grok. This one seemed like a good place to start, at least. And reviews on Amazon say pretty much just that... "If you are taking a class in javascript or want to know how to make your web pages more interactive, this is a great introduction to javascript."

After reading through the intro, I now understand that all those silly pictures have a purpose in the Head First series. The book style is supposedly designed for "learning" based on education theory. They encourage all sorts of tricks that helps you understand and *remember* what you learn. One of those tricks is reading your work out loud, and doing the examples. So, I'm adding in my own twist and sharing what I learn with the interwebs. I'll start with chapter one.

Ready. Set. Hack.

This is the blog of one non-programmer girl attempting to learn how to program. My friend who DOES know how to program suggested I start a blog on my process so others can learn with me along the way, and if I ever actually know what I'm talking about I can provide help here as well.

(I am not going to be able to provide help on programming anytime soon.)

My plan is to start learning Javascript and move on from there. I have yet to decide if I want to take on Python or PHP next. Eventually, if all goes as planned, I'll move on to an advanced programming language like C++ or Java.

I am a slow learner and an ADD one at that, but hopefully my narcissistic motivation will aid in my progression on this subject.