Learning Python

I’m currently teaching a Programming for Beginners, and I thought my students might appreciate some resources for learning Python. Here they are in no particular order:

  • Hello World: Computer Programming for Kids and Other Beginners – one of my students showed me this book. I think this might be my new “textbook” for beginning programming. They have some good PyGame samples, and most chapters cover programming games. They even have a 3D chapter using VPython (Visual Python)
  • One Day of IDLE Toying – If you’ve never worked with IDLE before, you should really start here.
  • Instant Hacking – this is a very short, but jam-packed, introduction to both programming and Python.
  • Young Programmers Podcast – if you would rather learn through video podcasts, this is the place for you. This also contains PyGame tutorials. Note: some indicate Jython, which works with Java (not a bad combination, since it allows you to work with Java classes), but I’m guessing you need the Java SDK for this.
  • Learning to Program – this covers a large amount of Python, but I haven’t had much of a chance to explore it. A nice feature of this site is that it has two different versions: one for version 2 and one for version 3
  • A Byte of Python – If you already know how to install Python and get a new file created, I recommend you jump right to chapter 4 (the Basics) or beyond.
  • How to Think Like a Computer Scientist – this was the site that I initially learned Python with. It’s a bit high-end for younger learners, especially the writing, which almost reads like a college textbook


  • Download Portable Python 2.6 – the advantage with Portable Python is that you can install it and run it off a flash drive AND comes with PyGame
  • Download Python 3.1.2 Windows Installer – just know that with Python version 3, print is a function print(“Hola, el Mundo!”), and there is no raw_input(), it’s just input() and it treats data as a string, so you’ll need to cast your number strings into floats or integers.

Stupid Browser Tricks: Day 3 – PHP Form Validation

Here is my PowerPoint that I planned to present during the workshop: PHP Form Validation PowerPoint 


I must make 2 disclaimers. One, you should type F5 to view this as a PowerPoint, or some slides will not make sense (I overlapped some code and animated the presentation).

Two, the Powerpoint is just an introduction to form validation. The content I present is only at a hobbyist level at best, this is not meant to cover all aspects of security. Trying to create your own email processor would most likely lead you open to all kinds of attacks. If you really want a decent PHP form processor, I highly recommend you look into Tectite Forms.

The SuperFish Menu – “It’s Super-fishey!”

The Superfish plug-in rocks the free world, if you ask me, but I had a few problems implementing the JavaScript on my own CSS-styled menus. I therefore set out to expand their instructions and “fix” the ones that caused problems.

Start with a nested list of links.

There are many resources on using CSS to create fancy navigation bars. My top recommendation for any web designer is to start with CSS Max Design. They have a listutorial that explains the trick to creating horizontal and vertical navigation menus using only HTML and CSS. They also explain how to style nested lists. CSS Max Design also has a repository of probably 100 different menu styles, all using HTML and CSS only.

For the Superfish menu to work, you must begin with a nested list of links. Go to CSS Max Design’s Listamatic 2 and chose a CSS-driven layout that we liked (horizontal or vertical) – my favorite was “borders and indents” – you pick your own. It really doesn’t matter which menu you like because they all use the exact same HTML code.

Step 1: Copy the HTML Code and paste it on your web page.

A good place to stick this code is right after your header (<h1>) or in a banner or header div (<div id=”banner”>

Step 2: Change the <ul id=”subnavlist”> to <ul class=”subnavlist”>

Why? With the listamatic, they only contain 1 nested list (under “item one”). However, in the real world, there are typically 2 or more nested lists. Since the id attribute is a unique identifier, in theory, you should not have the same id attribute twice. That’s reserved for a class attribute.

Your nested list of links should look something like this when you’re done:

You’ll note I added a comment at the top, that was not in the listamatic, but it doesn’t really affect anything. Note also how I added a second “subnavlist”.

You might like to know that you can most probably nest a nested list. In my workshop, I did a quadruple nested list (a list within a list within a list within a list) just to see how the superfish handled it, and the only issue was the width of the entire menu made it a little cramped.

<div id="navcontainer">
<!-- Create an unordered list of links -->
<ul id="navlist">
 <li><a href="index.html">Home</a></li>
 <li><a href="#">Page One</a>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 <li><a href="#">Sub Item Three</a>
 <li><a href="#">Page Two</a></li>
 <li><a href="#">Page Three</a>
 <li><a href="#">Sub Item One</a></li>
 <li><a href="#">Sub Item Two</a></li>
 <li><a href="#">Page Four</a></li>

Create an external style sheet for your Navbar

Did you see my post on Notepad++, because it’s the best web design tool in the universe. If you don’t have Notepad++, download it now, and then you can proceed.

Step 3: Find a Listamatic2 Navbar that you Like

Note: if you are a seasoned code monkey, you may wish to create your own CSS code for the navigation bar. If that’s you, just skip the steps involving copy and paste from listamatic2.

  1. In Notepad++ (or whatever editor you like) Create a new file
  2. Find the listamatic2 CSS code that you want to use on your site
    • Note: you’re welcome to do all the code yourself
  3. Copy all the CSS code and paste it into the file
  4. Title it, “navigation.css”
    • note: I’m a firm believer in having a separate CSS file for your navigation, so it’s easier to locate

Step 4: Make Any Stylistic Changes that You Want

I often times make my students change the color schemes and fonts and encourage them to experiment with background images as well.

Step 5: Fix the CSS to Match the HTML Change from Step 2

What you’re going to do now is change every line of code in your CSS that states, “#subnavlist” to “.subnavlist” That’s because in CSS # is for an id attribute and the dot . is for class attributes.

Have you met my favorite shortcut key from Notepad++? It’s called “Replace.” In Notepad, it’s called “Find and Replace” either way, this is the time to familiarize yourself with that little shortcut.

  1. In Notepad++ AND in Notepad, type “Ctr + H” that opens the find and replace
  2. In the find window, type “#subnavlist”
  3. In the replace window, type “.subnavlist”
  4. Choose “Replace All”

Step 6: Test and Fix the navbar to make sure it looks good

This I can’t help you with. If you get stuck, or things are not working, you may wish to start over. It’s most likely due to steps 2 and 5. If you don’t mind having only 1 subnavlist or you what to throw semantic markup out the window, ignore steps 2 and 5 and hope for the best.

Add Your Superfish Files

Step 7: Download and Extract the Necessary JavaScript Files

Get the zip archive from the Superfish download page. Extract all files, then grab all JavaScript files from the ‘js’ folder and save them into a folder in your website (Note: even though you will link to 2 javascript files, all files will be used–don’t be stingy).

Step 8: Link to 2 External JavaScript Sheets

In the head of your HTML page, you will add 2 <script> tags that will link to two different JavaScript Sheets. WARNING: Make sure you link in the proper order, from top to bottom:

  1. First link to ‘jquery-1.2.6.min.js’ through a script tag
  2. Next, link to ‘superfish.js’ through a script tag

Note: the link to superfish.css is unnecessary for this (since we used the CSS from Listamatic2

Step 9: Initialize the Superfish

Initialize the superfish through a script tag like so

<script type="text/javascript">
//Initialize the SuperFish Plugin

According to the instructions on the Superfish home page, it says to add a class=”sf-menu” to your unordered list, but that’s only because they don’t realize how smart you are. You already gave an id attribute of ‘navlist’ to your <ul>. When you initialize the plug-in, you specify what tag gets adjusted by the Superfish, it’s the section where it says jQuery(‘ul.sf-menu’). Since our list has an id of navlist, you simply change the jQuery function call to jQuery(‘ul#navlist’), and it will work just fine.

Note: you could also just add class=”sf-menu” to your unordered list, but then it would be jQuery(‘ul.sf-menu’)

Stupid Browser Tricks: Day Two Notes

On day two, we began by looking at a modification on the Image Map exercise

Get the PowerPoint: Stupid Browser Tricks – day 2

Image Map Expansion Set

The image map idea we did in day one simply displays text when you hover over a region of your image (the <area> tag). It uses the innerHTML() method to inject content. You can inject tags as well as text. This allows us to inject images, tables, lists, whatever. Taking advantage of this fact, you can inject the image tag and have an image appear when you hover over the region.

I recommend that you inject an image tag inside of a div tag, since the image tag is an inline tag. I also recommend that all images displayed have the same width (and, preferrably) height. I also recommend that you display a default image on mouseout.

For the sample code with notes, view the JavaScript Samples: Image Map (with Expansion Set)

The SuperFish Menu

I should probably review all the steps in general. I decided to make a separate post on just the Superfish, since it is after all, super-fishey. Stay tuned for that. When I get it all up and running, I’ll come back here and post a link.

Troubleshooting JavaScript

After many trials and errors in all of the various projects we did, we came to the conclusion that there were only 2 main sources of errors with our JavaScript coding:

Spelling (Primarily Case-Sensitivity)

Some of the following samples of errors because of spelling or case-sensitivity mismanagement were real examples from our class and some were made up to prove a point (I’ll let you guess):

  • MyFunction(), myFunction(), myfunction() are all different functions
  • alertTxt is not the same variable as alerttxt
  • We initialize the jQuery plugin with the jQuery() function call—not the jquery() function call and not the jQuerry() function call.

The Curly Braces { } v. the Parentheses ( )

As long as you use copy and paste, there typically isn’t an issue with this problem. It usually occurs when you are writing your own home-made code, or you’re in a workshop like mine trying to type what you see. That being said, if you know the difference between the two symbols, you’ll make far fewer mistakes (especially for the “home brewed” JavaScript). Here are the rules:

  • Parentheses ( ) are for function or method calls like alert(“Yikes!”);
    • When you define your function
    • When you call your function
  • Parentheses ( ) are also for comparing values – like after the if, else if, else, for, with, and while keywords
    • if (x > 25)
    • with (thisForm)
  • Curly Braces { } are for surrounding blocks of code
    • When you define a function, all the code for that function goes inside a set of curly braces
    • After conditional statements like if (x > 10), we need to group the code that will run under that condition
    • After loop headers like while (x > 0), we need to group the code that will run each time we loop

Please let me know if I missed anything. Note also that I did not cover the brackets [ ], that’s only because we didn’t have the time to cover those, but if you are interested, it’s used for index values of arrays or strings, and gets used often times with for loops.

Old Possum’s Practical Post on OOP (Object Oriented Programming)

Let’s talk about OOP, and we’ll use cats as our example:

Classes – we skipped this since the objects were built-in, but just know you can write classes to represent other objects. If you recalled biology, you learned about classification. You probably learned that cats (aka felines) are members of the animal kingdom. When we talk about a cat in general, we are referring to the cat class

Objects – objects are things (how’s that for a recovering English teacher?). Objects are specific things. Take Fluffy the cat for instance (Get it? For instance?). Fluffy is a cat, a particular cat. Any “thing” can be described in two ways: it’s traits or attributes (aka properties), and it’s actions (called methods in OOP)

Note: another term I did not introduce, but is almost always introduced with objects, is instances (remember ‘take Fluffy for instance’?). The word instance is pretty much interchangeable with objects. If you want to split hairs, you would use objects as a general term, and instance when you are specifically mentioning an object in particular. To carry the cat analogy even further, you might refer to all the cats running around your neighborhood as cat objects, and when you want to specifically refer to Fluffy, you would refer to her as the Fluffy instance.

Attributes or Properties – are variables associated with an object. Any given cat will all have the same general properties (all have fur, all have (or at least started out with) claws, all have legs). Please note:

  • Properties can have different values among different cats. Fluffy’s fur might be orange, and Morrisey’s fur might be black. The same thing goes for software objects.
  • Methods – are the behaviors of objects. For example, Fluffy, like all cats, meow, eat, like to chase things, etc. In OOP, objects have methods associated with them so that they can interact with other objects or the user.