About Me

I'm just someone struggling against my own inertia to be creative. My current favorite book is "Oh the places you'll go" by Dr. Seuss

Thursday, December 11, 2008

Why did I write the web school awesome articles?

I was doing courses for graphic design, and doing fairly well, I suppose. I originally went into graphic design in the year 2000. While I had a talent with computers, I wanted to avoid all that cross browser crap and just make pretty printed things. Paper doesn't have cross browser issues! So I spent 6 years learning how to do that. But the thing is, there's no escaping one's natural talents and obsessions it seems.

I accidentally got really good at making web pages. I didn't really want to, it just happened. I got way better at it than my peers in the graphic design courses. I ended up with a reputation. I found one of my typography professors taking a "web design" course that I'd taken in a previous semester. While that was amusing, it didn't last long. He commissioned my services to teach him the craft, and so I did what I could.

A couple years later me and all my graphic design friends ended up in a different university together. That was weird, especially since it was full of zombies. And a couple unicorns. Seriously. Then they all decided to take a web design course at this university. I later found out that what the university meant by "web design" was "make a flash movie and hastily slap it in the middle of an html table, then maybe publish it online if you can figure that shit out".

So I got a bug up my ass about that. I couldn't help it. That sort of thing just bothers me. It really shouldn't bother me since I'm just trying to be a graphic designer and make pretty printed things. But the idea of all my friends putting these opaque unfriendly singy dancy binary blobs on the internet really stuck in my craw. And I think someone else was having trouble with web things or something and heard that I was good at it, I don't know. One thing lead to another, and I wrote the webschool awesome articles. I combined it with one-on-one tutoring. It all fell off a bit as I never got to lesson 3 (which would have included some css), but oh well. Then I imploded and moved to australia.

Skip forward a couple years and my teenage nephew is having some kind of identity crisis (happens to all of us). I offer to teach him some web things, and he thinks it's a good idea. So I dusted off WSA and posted it to my blog for his benefit. I meant to get to lesson 3 some months back, but as you can see from this blog.. I'm full of ideas, and not enough experience/wisdom/ability to get them all done and real.

Sunday, August 3, 2008

Web School Awesome: Lesson 2

Web School Awesome: Phoenix Edition

Hey kiddies, here's another round of punishment from your good friend, Breton "Insano Smartypants" Slivka. I'm gonna lay it all out for yah.

In excercise 1, I showed you how to create a basic html file, and open it in a browser to see the results. I showed you 5 types of html tag. In this lesson, the goal is to fully mark up a page of text. I will show you how to create:


  • Subheadings

  • paragraphs

  • lists

  • hyperlinks

  • anchor links

  • images

  • special characters.

  • bolding and italicizing text.



In order to accomplish that, I've got a starting point- a page about a band called the nips. I'm providing two files, one called thenips1.html and another called thenips2.html. This goal of this lesson is to step by step, modify thenips1.html until it's just like thenips2.html, and all along the way, observe the effects that our changes have on the way our page looks in the browser.

The first step is to properly set up a workspace.

  1. in your web school awesome folder, create a new folder named "Lesson 1"

  2. Linked from this blog post are a number of files. You're going to need them all. Save them in a convenient folder.

  3. Print out "lesson2.txt" so you can follow along. The lesson continues in that file.

  4. Arrange your text editor to occupy one half of your screen, and your favorite web browser to occupy the other half.

  5. Follow the instructions in the previous lesson for saving out an html file, and for opening in a browser.

  6. When you make a change in the original file, simply SAVE the change, and press the refresh button in your browser to see the results



the files:

Lesson2.txt
nipsy2.jpg
thenips1.html
thenips2.html

Web School Awesome

Webschool Awesome Lesson 1.
REMOTE E-LEARNING EDITION

HTML 101
________

Okay guys, this is where your uncorrupted and untouched knowledge of html will come in handy. Too many lessons and teachers will teach you how to go making pages the wrong way. Since nobody has done that to you yet, I can teach you the right way, and you don't have to unlearn a bunch of bullshit.  (if I haven't told you by now what I mean by "the right way" and "the wrong way" you can go ahead and ask me.)

How Web School Awesome works is I tell you how to do something, and then I tell you what  happened. This way by the time I start talking theory, you have already experienced the practice, and thus know what I'm talking about already.



Exercise 1: your first web page.
This one is EASY, has only 5 steps, and it will take you 10 minutes, tops.


Tools needed:
a computer (mac or pc will be fine)
A web browser. (I prefer firefox or safari, but any one will do for this lesson)
A text editor.  on the PC, use notepad. On a mac, use textedit.


STEP 1.
Make a new folder called WSA  (it stands for Web School Awesome)

STEP 2.
open up your text editor of choice.

STEP 3.
In your new document, type in the following text: (don't copy and paste!)

<html>
  <head>
    <title>Web School Awesome Rocks!</title>
</head>
<body>
<h1>Web School Awesome</h1>
this is my first web page ever. SWEET!
</body>
</html>

STEP 4.
Save as plain text, with HTML as the file extension.
It is important to know how to save as PLAIN unformatted text.   So pay attention to this bit.


How to do this on a MAC with TextEdit:
Click the "Format" menu and select "Make Plain Text"
Click the "File" menu and select "save"
navigate to the WSA folder.
next to "Save As" type skeleton.html as the filename
in the "Plain Text Encoding" pull down menu, select "Unicode (UTF-8)'
click "save"
a pop up dialogue will ask you whether you really want to use .html as the extension. Click "Use .html"

How to do this on a PC with Notepad
click the "File" menu and select "save"
Navigate to the WSA folder
next to "File Name:" type "skeleton.html"
in the pull down menu "save as type" select "all files"
in the pull down menu "text encoding" select "utf-8"
click "save"


STEP 5.
open the results in a web browser. You can do this by using file>open on most web browsers, or simply drag the skeleton.html file's icon directly into your browser's window.

What you should see is "Web School Awesome Rocks!" in the TITLE bar of the browser.
"Web School Awesome" in large type at the top of the page.
and "this is my first page ever. SWEET!" in small text at the bottom.

WHAT HAPPENED?

Let's look at the content of our file again.

<html>
  <head>
    <title>Web School Awesome Rocks!</title>
</head>
<body>
<h1>Web School Awesome</h1>
this is my first web page ever. SWEET!
</body>
</html>


note that in the file where it says "Web School Awesome Rocks!", to the left there is "<title>" and to the right of it, there is "</title>".   These two html tags tell the web browser to put the text between them, into the browser's title bar!  <title> is an opening tag, and </title> is a closing tag (because of the forward slash). All together  <title>Web School Awesome Rocks!</title>  is an "element".

There's 5 elements in skeleton.html.  They are all nested inside eachother, like a box full of boxes. Also like boxes, there are different kinds, and the different kinds hold different sorts of things.

the first is <html> ....      </html>, and it's the biggest box, and it contains all the other boxes. Always.
the next sort of box is <head> .... </head> Inside this box you put information about the web page, like its title.
then in <title>.... </title> (which goes inside <head>) well, for the third time already! you put its TITLE!
<body>...</body> goes outside of <head>, but is still inside <html>. Inside <body> you put everything you want to show up inside the actual browser window.

and finally, <h1>...</h1> is a box 
for headers! That's why the text inside of it is rendered really large by the browser. That large serif font is the default style for text inside <h1> tags.  When I teach you CSS, you'll be able to change how <h1> tags are rendered to whatever font, size, or color you want! You'll even be able to replace it with an image.

note: <h1> is just for first level headers. There is also <h2>, <h3>, <h4>, <h5> and <h6>, for progressive levels of sub-headers.

IN SUMMARY:


<html>  contains the whole document
<head> contains information about the document
<title> contains the title of the document
<body> contains the content of the document
<h1> through <h6> contain different levels of headers for the document.

There are many more different kinds of "boxes" "tags" "elements" or whatever other euphamism I've used to refer to them. I will cover more in excercise 2.

Until then, Be seeing you....

Thursday, March 27, 2008

Relational Model; Ur doin it wrong.

Databases: did you know that if you follow the convention of naming columns that represent the same things, with the same name (for instance, part id's named Part_Id in all tables), then you can use the SQL keyword "NATURAL JOIN" to join two tables, without having to add a bunch of "where partid=id" style clauses to your query?

Before, ( in psuedo SQL): SELECT PARTS.ID, PARTS.NAME, PRODUCTS.NAME FROM PARTS JOIN PRODUCTS WHERE PARTS.ID = PRODUCTS.PARTID


After: SELECT PARTS.PARTID, PARTS.PARTNAME, PRODUCTS.PRODUCTNAME FROM PARTS NATURAL JOIN PRODUCTS

Let me put this a different way: If you're following a poor naming convention, you're making your SQL queries longer and more difficult than they need to be!

Well, suppose we assume that everyone follows the "Same thing=same name" convention. Then SQL could potentially assume that you mean NATURAL JOIN by default when you say "JOIN".

SELECT PARTS.PARTID, PARTS.PARTNAME, PRODUCTS.PRODUCTNAME FROM PARTS JOIN PRODUCTS

Well, now that we have that assumption, I can't think of a situation where you would need to mention more than one table in a query, if you weren't joining them. (can you?). So let's assume that whenever a query contains the names of more than two tables, you mean to join them. It'll join on likenamed columns automatically, and you've just saved yourself a whole lot of trouble.

SELECT PARTS.PARTID, PARTS.PARTNAME, PRODUCTS.PRODUCTNAME FROM PARTS, PRODUCTS

in fact, why do we need to mention the table names twice? Once in the select clause, and again in the from clause. We already know which tables these fields are from!

SELECT PARTS.PARTID, PARTS.PARTNAME, PRODUCTS.PRODUCTNAME

We also know that the PRODUCTNAME field can only be found on the products table, and that the PARTNAME field can only be found in the PARTS table, and that the column that they both have in common is the PARTID column, so that's where we can join. So simply by examining the schema, we can get most of this information ourselves. So ultimately all the database really needs from the user to perform this query is

SELECT PARTNAME, PRODUCTNAME

But aren't most queries going to be a select? We can optimise this even further by assuming that the user means select unless they say otherwise. Just don't name any of your columns "INSERT" ;)

PARTNAME, PRODUCTNAME

Wow. So my thinking is that SQL is asking way more from the user than it really needs to perform a query- As long as the schema follows a very common convention which is best practice anyway.

We went from this:

SELECT PARTS.ID, PARTS.NAME, PRODUCTS.NAME FROM PARTS JOIN PRODUCTS WHERE PARTS.ID = PRODUCTS.PARTID

and through our optimisations went to this:
PARTNAME, PRODUCTNAME


Admittedly, there's a lot of little gotchas which I haven't covered in this blog post, but none of them are insurmountable, and surmounting them is well worth the time and effort saved by from typing all those big confusing SQL queries! Also, I have only covered the most basic of queries. There are ways to optimise the more complex queries as well.

In conclusion, SQL sucks, and we need something new, and something better designed.

Saturday, March 22, 2008

Live Robot Walking; Another AI thought.

Lots of people have tried and failed to make robots walk upright on two legs. Those that have succeeded, made a robot that walks stiffly, and rather unnaturally. What makes me think that I can do better? I have no idea. In fact, no, I can't. But at the same time, I can't help but have ideas about how I would tackle the problem.

Because while it's apparently difficult to make a physical robot walk, I have seen a number of computer physics simulations where a simulated spring based robot seems to have no problem walking. It's possible, even if the simulations cheat to make it happen.

This is how humans walk though, in a sense. We have in our minds a physics simulation, with a simulated image of ourselves within it. Before we're able to walk as children, we simulate countless times the image of ourselves walking. We attempt to walk, and compare the results to our physics simulation, and adjust our image of physics to closer match reality. In fact, we may even adjust our image of ourselves, and the weight, length and size of our limbs to try and match the results that our senses have delivered to us.

I think to make a robot walk it needs a few things: the program controlling it needs a simulation of the robot's body configuration, and its environment. The robot needs some sensors, such as an accelerometer, to deliver to the program its physical orientation, and the configuration of its limbs. An attempt at walking must be made, perhaps random at first, and the results of an attempt must be compared to the results of the same attempt in the simulation, and in particular the simulations simulated sensors.

Then the physical simulation can be adjusted such that the simulated sensors match the results of the real sensors. Then multiple simulated attempts at walking take place, until something resembling a successful walk is achieved. It is then attempted in the real robot, the results are recorded and fed back into the simulation. One might use a number of different methods for getting the physics simulations to match the results of the real robot: Genetic, Neural network, etc. But the fact is, the more data one can get about the results of the real physics, the closer one can get the simulated physics- AT least, for this one domain: Walking.

I don't know how many iterations of practice, and real attempts it would take to make a robot walk. But research has shown that this process of repeatedly imagining ourselves doing a task, does considerably speed the time it takes for a human to aquire this task. So it stands to reason, that simulating this process in an AI, for a robot may have the same effect.

Thursday, March 20, 2008

Atari Nostalgia

I've been on a kick of nostalgia lately. It's very strange, 1970's nostalgia. What's strange about it, is I was born in 1981, so why on earth should I be nostalgic? Well, It's not really that I'm nostalgic for the 1970's so much as I'm fascinated by the distorted world depicted by advertisements and movies from the 1970's. There is a very recognizable design Aesthetic. Particularly in the videogame systems, and advertisements for them.

Wood panelling, huge metal switches, trapezoidal shapes and angles. Black joysticks, rounded corners, big red round buttons. Big round friendly typeface. It's got one foot in the 70's and one foot in the 80's. There is a very certain and recognisable design language bound up in the Atari 2600. It has a strange effect on me that I can't describe. The sort of warm fuzzy effect something can only have on you if it formed a central role in your early developing childhood. I can remember with some fondness centipede, pacman, space invaders, missile commander, pitfall, and others.

Because the atari 2600 has a design language, it means you can speak the language in art and design, and reproduce it in new works. You could make a room, for instance, that looks like an atari 2600. The grated wood paneling along the walls, trapesoidally angled shelves, big round metal switches for the lights, labelled with that friendly round bauhaus inspired typeface. stained glass windows with big blocky shapes and primary colors. Black furniture with rounded colors, and recliners activated by big round red buttons.

You could make a TV in the same language, with an integrated atari console, all bound up in what might have been thought of as the pinnacle of gaming in 1979. Have a look at the earlier Atari consoles- They have some extra switches, additional to "power" and "reset". There was also "Game A <-> Game B" and "Difficulty Level: Hard, Medium, Easy". They give a sense of modularity and uniformity in the games that was never realized in the actual software. But what if it was? What if games continued along those same lines of thought? What if a sequel console to the atari featured not just those switches, but also two cartridge slots?

Two cartridge slots? What would that mean? Well, perhaps it would finally give meaning to the "Game A <--> Game B" switch. But what if you plugged in two cartridges and it combined them in some way? The rules of one game's character being applied to the other game's mechanics and levels. Or the colors from one applied to the backgrounds to the other? Or maybe they'd be played split screen, with player one playing game A, while player 2 plays game B. If there's no player 2, perhaps player 1 plays both games simultaneously, her controller input being fed into both games at once.

Maybe instead of split screen, they are overlayed?

Maybe the atari has more switches. Aside from game difficulty, you're also able to swap out things like graphics sets, or fine grained control like paddle size ( As you can configure in some modern pong games).


It's a world that never existed, because it can't work in reality. But it can work in a painting or a sculpture. A whole parallel world of gaming, a pathway we never went down. What if we explore it now?

Saturday, March 15, 2008

Funny obsessive ideas

Video game AI constructed from an adapting Stochastic Matrix. The matrix would encode N states- however many situations one wants the AI to be aware of, and M state transitions- The actions that the AI would take given that situation. A random state transition is chosen weighted according to the stochastic matrix probabilities. If the state transition results in success, then the weight for that transition's weight is incremented. If it results in failure, all other transitions are incremented instead. it may be possible to trace back a decision path several steps, and increment several of the transitions leading up to the success or failure.

It may also be possible to do that by stating that several previous conditions constitute a single "state".


The player's behavior can be observed to produce a stochastic matrix as well, and AI behavior could be an average between the computer's own learning, and observing the player.

I'd like a program that analyzes a body of text, and highlights words and letters depending on their relative probability. This would help spot errors in esoteric texts.

I would also like to use stochastic matrices for compression of text. If a run of text conforms to the predictions of a stochastic matrix, then one can specify a character of text by the rank of its prediction. That is, if presented with the digraph Th, the matrix would predict "e" as the most likely letter to occur, and thus encode e as "1", a as the second most likely choice, would be encoded as "2" etc. I haven't tried it, but my hope is that this would produce encodings along the lines of "111111111211121113211111111211132111111311112" Not only can encodings like this be very efficiently run length encoded, but if the predictions stay below low powers of 2, each character needs significantly less than 8 bits to encode it!

Sunday, February 24, 2008

Another dream I had

It was another school regret dream, with a few massive Dalek invasions thrown in. (my my, the panicky crowds of people scrambling to get away!) But it had a couple decent ideas for paintings.

Choose a book, paint a fictional landscape based on that book. But paint it flat first, just flat colors as the sketch.- Then paint it onto an image of a book, such that it appears like the landscape is extending out of the book- 3 dimensionally. Kind of like a pop up book. The process is to copy the flat sketch onto the book first- and then project the dimensional extension out of that.

The other project was kind of strange- It had to do with fictional pop culture characters placed twice across a cloudscape. (Alphred E. Newman, The Simpsons) One pose is large enough to see facial expressions, the other small enough to see body pose. The challenge is to compose it all into a single painting.


I'm not quite sure what the educational purpose of either of these projects were meant to be, but for some reason I felt quite guilty about not being able to do them properly. We'll see about that.