Kevin's CS5 Project Page

Test

This is mostly intended as filler text to have enough material to test layout scrolling. Given enough content, this should show reasonably tastefully-positioned scroll bars. :P The tab layout isn't quite as resilient to horizontal resizing, but not many things are.

In the interest of being informative though, here's some stuff this tab interface does:

• Hides and reveals the appropriate tab content in response to clicking the menu buttons
• Is designed to fail reasonably gracefully for users with JavaScript disabled, with the tab buttons jumping to the position of the content on the page instead of revealing it
• Includes a 'Main' button on each tab to return to the default content view. Functionality is provided by a JavaScript hook, so adding it to a tab is as easy as <a class="button go-back" href="#top">Main</a>
  • Specifically: the button class makes it look like a button, go-back is the JavaScript hook, and the HREF is there so if a user has JavaScript disabled, the button will still at least jump to the page top
• Adds the correct fragment identifiers to the URL (i.e. #week1 in this case) to facilitate linking directly to a given tab
• Uses JavaScript to determine the location of document fragments so that even fragment IDs which don't correspond directly to an interface tab will still cause the correct tab to be displayed when the page is loaded

A potential project for the future: use class names and element attributes as described here to make the interface WAI-ARIA compliant, making it more accessible to users with screen readers. Note that this is not a trivial undertaking, and I have neglected to do so as it adds a lot of confusing markup to what is intended as a learning document. But ARIA is a good thing to know about!

If you check Week 4 you'll see that I ended up integrating the js-py interface as part of the tab's content, but some other methods were also considered:

• Open interface in page, back button either uses history API or a hardlink to index
• Open in pop-up window, back button closes pop-up
• Navigate within the tab in an iframe, back button restores tab content
• Interface appears in new or overlaid div, back button removes or hides it

And if you were wondering, here's what the Main button looks like:

Week 2

This is the second week

As further demonstration, it is now possible not only to link to other tabs but also fragments within tabs and have the tab interface update its appearance accordingly. Success.

If you want to add your own tabs, it's pretty easy. First add a tab panel with the content you want. Tab panels are just section elements in the tab-content div with the ID attribute set to whatever you want (e.g. id="myTab") and the class set as class="tab-panel". Second, add a button to the tabs-menu nav element with an HREF attribute corresponding to your tab panel's ID, like so:

<li class="tab-title"><a href="#myTab">My New Tab!</a></li>

Finally, if you feel like being nice to your users, add a "Main" button as described in Week 1.

TANGENT!

Here's an example of the power of CSS: the heart below is created using nothing but an empty div and CSS styles. (Cheers to CSS-Tricks.) Try hovering over it!

Week 3

You know the drill. More tabs, more content, MORE MORE MORE. And more filler text. The useful item on your right is a figure element! I've floated it right so that other text on the page will wrap around it. Observe!

I need more filler text on this web page to demonstrate text wrapping around floated elements, so I'm going to add some. This is quite egregious. Bleep bloop blop bap bump bep. Lorem ipsum dolor sit amet adipiscing blehkjshdkjh. Etc.

Something HMC students may find relevant... there is such a thing called MathML which is essentially XHTML's LaTeX. Check it out:

MathML has both content encoding and presentation encoding--the above is presentation encoding, as I understand it renders correctly in more browsers. TBH I would probably write equations in TeX and use a tool to translate it into MathML (but those DO exist!) If you're wondering why, look at the source for the above equations and you'll get it...

Week 4

Whatever man.

This is an AJAX interface for server-side python scripts. This is the "generic" interface, meaning you can use the drop-down to choose a script and pass it arbitrary command-line arguments if relevant. This generic interface is somewhat limited in its capabilities, so I've also made some stand-alone versions which are tailored to work with a specific script. The subpages include brief technical descriptions of the differences between the interfaces and a list of associated files. Check them out:

• Caesar Cypher: (Basic) (Advanced)
• Mandelbrot Generator: (Basic) (Advanced)

Because of the way it invokes them, one advantage of the generic interface is that it should play nicely with both Python 2.7 and 3.x scripts with no additional fiddling. Another is that the JavaScript hook for the generic interface is by class name instead of ID, which means as long as they have the correct elements nested at the correct levels you can have as many instances of the generic interface on a page as you want. This could probably be made even more flexible by making the interface wrapper div into a form element and modifying the JS, so the interface could send whatever form fields you felt like. However, this would be a bit pointless without modifying the backend for the generic interface, because it only has one relevant field which is passed as given to the script.

It could probably be spruced up in other ways as well, but I'm not precisely sure which ones.

One small TODO: the generic interface currently doesn't actually work with the Caesar Solver, because of how it passes arguments. That could probably be fixed.

Py-JS Interface