Start Programming Quick and Dirty

Warning: This really is a quick and dirty start to computer programming, and if you know anything about software development, I'm sure you will find plenty of defects in my crude descriptions of computing. The point here is to communicate the basic understanding to begin learning without submarining a person's brain with useless detail. If a beginning programmer learns the quick and dirty way, then as their knowledge and interest grows, they can go back and fill in all the little details later. When you are writing computer code, or even just using a computer, it really helps if you keep in mind the three things that make up all computing devices.

1. The processor.
2. The memory.
3. The storage.

These are the building blocks of every computer program and the only things we know for sure that all computing devices have in common. An iPhone, a laptop, or a server; Each of these computers has these three components in common. 1. Processor The processor is a collection of transistors that can do simple computing operations like evaluating if two bytes are equal, or adding two integers together, etc. A processor fetches values from memory, performs operations on them, and then puts them back into memory. 2. Memory System memory is a collection of computer chips that are able to store bits of information while the power is on. As soon as these memory chips lose power, the information is lost. Inside each memory chip there are 'rows' of data, and each 'row' is addressed with a special addressing number. The processor can remember where values are stored in memory using these addresses, but as soon as the power is shut off, it is all gone. 3. Storage The system storage can come in two forms. First is a set of spinning disks called a 'disk drive' and the second is a set of computer chips called 'solid state'. Most desktop and laptop computers have disk drives, while cell phones and memory sticks use solid state. Disk drives can be thought of like a record player, but imagine a record player that could play records and write them too. Solid state storage devices are banks of computer chips that do not lose the information stored in them when they lose power. So how does a programmer link these 3 fundamental computing functions together to make a computer program? We can demonstrate this process with a program called Python. Python is actually a computer programming language, which we will learn more about later. But for now, you should start the Python interpreter in your terminal by simply typing: python and hitting enter. (if you do not know what a 'terminal' is, please post a comment and I'll send you some more detailed instructions. If you type 'python' in you terminal and nothing happens, then you probably need to install it. Some good instructions can be found here: http://diveintopython.org/installing_python/index.html ) You should see something like this on your screen: Python 2.6.2 (release26-maint, Apr 19 2009, 01:56:41) [GCC 4.3.3] on linux2 Type "help", "copyright", "credits" or "license" for more information. >>> The '>>>' is what we will call the Python prompt. Now enter in this program, hitting enter after you have typed in each line: >>> myvar = 1 >>> myOtherVar = 2 >>> mySum = myvar + myOtherVar >>> print myvar >>> print myOtherVar >>> print mySum See what has happened? First we stored a value, the integer 1, in the computer's memory. Remember that each value stored in memory has an address? Well that address would look something like 'f8a9b6' to the computer, which is really hard to remember for humans when we are trying to write a computer program. So, Python does us a favor and remembers that when we refer to 'myvar' we are really referring to the 1 we stored at address 'f8a9b6'. Second we stored another value, this time the integer '2' into memory. Now, if we were to keep adding values to memory without removing any of them we would eventually fill it up and cause our computer to crash. So, the Python interpreter also does something else really useful for us; It can tell when we are done with a value and it will remove unused values from memory so that we can go on with our program without having to remember to remove all our values when we're done with them. Third, we told Python to add the two values together. However, adding two values together is not much fun unless we store the result somewhere in memory so we can use it again. What actually happened here is that the Python interpreter remembered the address in memory pointed to by 'myvar' and 'myOtherVar', and then sent those addresses to the processor along with the instruction to add them together. A processor always does exactly as it is told, and so it fetched the values from their addresses in memory, added them together and put the result back into the memory location that Python pointed to with 'mySum'. Last, we used the 'print' statement of Python to retrieve each of our values from memory and print them out on the screen. Statements like 'print' are just shortcuts for longer instructions to the processor. So instead of saying: >>> send value from memory address at myVar to the graphics card to display We can just say: >>> print myVar or instead of saying: >>> take the value at myInteger and add 1 we can say >>> myInteger++ This is why computer programmers often refer to the terms 'writing code'. Because, all a programming language really is, is a set of statements or verbs that tell the computer to do something. So, instead of writing out long instructions in plain English, each programming language has a list of codes we can use to save time and space. So, that is only half of the story on a programming language. The other half is what is called the interpreter or compiler. We don't need to get into the specifics on each of these but what we do need to know is that the programming language we are writing must be translated out of the code, and into a language the computer can understand. Computers don't understand English, Latin, or even any programming languages for that matter. The only thing that the processor, memory, and storage understand is something called machine-code. Machine-code is written as a series of 1's and 0's like this: 100011 00011 01000 00000 00001 000100 While this is the only thing that a computer understands, it is very hard for humans to read and write, so in the early days of computing some smart folks came up with an answer. They would create an interpreter to translate machine-code into a programming language and vice verse. Today there are many different kinds of interpreters and compilers, one for each of the many different programming languages. Incidentally, an interpreter or compiler is a computer program written in machine code, but the nice thing about them is that once an interpreter or compiler program is completed by the smart people who write them, the rest of us can use it to write our programs in a language a little easier to understand. So, with a basic understanding of what is going on, and the right programming language interpreters in hand, we can tackle larger problems, like designing the interface to our program. There are many ways to do this, but one of the most popular, and the easiest to learn is XML and CSS. We'll move on to those later. At this point, I would encourage you to continue to learn a little more Python, and this is one of my favorite tutorials: Dive Into Python You can skip section 1, but you should thoroughly understand sections 2 and 3.

The Fireworks Project Logo is Done

I'm really excited to be done with our logo. It seems silly, but this is a big milestone for the Fireworks project. We're an open, online company, and we designed this logo using only online collaboration tools. Most of the credit is due to Martin Hipp, who did the lion share of the graphical design work. Why is this significant? Because, if we can learn to design, build, and innovate using online collaboration tools, then we can engage with and share ideas with anyone in the world who has access to an occasional internet connection. Our talent pool then becomes much larger than just the people who work within the 4 walls of a typical brick and mortar organization. So, while a logo is not such a big deal, leaning to design and build something online is a big deal. So what did we learn? Constant communication is key. Use twitter, instant chat, and news groups to leave messages and critique to everyone working on the project. Do this constantly. Nobody should go more than a day without either responding to an ongoing discussion or starting a new one. We didn't do this very well and the project lost momentum whenever we lost contact. When designing it is also very easy to get caught up in a design contest of sorts. This should be avoided, because it is an inefficient use of everyone's time. Instead of trying to create "knock your socks of" designs right out of the gate, the whole team would be better served if each member worked on creating minimal sketches of their ideas. Each sketch should only have enough detail to simply communicate the idea, and nothing more. A sketch could be on any medium, but for graphical design it is often easiest to use the typical computer graphics tools. In general, the guidelines I outlined in a previous post still hold true. Now, with our first project under our belt, I'm really excited to keep moving and learn how to improve our online workflow. Our next project is our website, and you can follow along here.

The Fireworks Project Website Design

At the Fireworks Project, we are in the midst of designing our home page. We are an open, member managed company, so we are working with a team from around the globe without any face to face collaboration time. There are some challenges, but it is going to be interesting to see what comes out of it, and a big sense of satisfaction in having done it. So at the time of this post we are in the layout and navigational wire frame phase. We have some constraints, and a couple of wire frames that we are currently working on. Remember, that this phase of the design process is focused on layout and navigational elements, so although suggestions for colours, logo, and other graphical elements is welcome, what we really need to hear is your thoughts on the layout. So let's get down to business and get some critique. Concept A is available here. Concept B is available here. 1. The first bit we need some comments on is the content switching mechanism we are using. The problem: Our home website needs to reach late adopter users of our software, whom we target. (They are not on Facebook or Twitter and often enter URL's into the Google search bar). The site also needs to reach technically proficient graphical designers and user experience designers. And, to make things even more difficult, we also need to reach an open source community of developers. Each of these knowledge domains has a unique language jargon used within the domain, and cannot be mixed with others... A content strategists nightmare. The solution: Available in Concept A and B are content switching tabs on the left side of the relevant content area which you can see in this screen shot on the left. JavaScript code smoothly transitions the content from one knowledge domain language to another. Pitfalls: Accessibility issues will have to be worked out for users that have to use screen readers or are unable to use a mouse. Awesomeness: We don't need to have different websites, which creates brand confusion, and we don't have to have different URL's for different content types. 2. Our second sticky bit is the layout of the navigational elements. The problem: As a company focused on user experience, we want more than 1 word hints on our navigation buttons indicating where they will take you and what you will find when you get there. This means our buttons are going to be larger than normal to fit the extra text. The Solution: Well, we don't have a good solution yet... So, a little help would be appreciated. Concept A lays them out horizontally, while concept B lays them out vertically. Personally I like the look of horizontal navigation, but in our case the typeface within them would need to be quite small to fit 5 large buttons across the top of the screen along side a logo header. While the vertical buttons in concept B provides plenty of space for large text, they complicate the layout of the rest of the page by hanging down so far.

So, help us out and lend your expertise in the comments here. And while you're at it, if you are not already a member of the Fireworks Project, then check it out.