Given a recent spate of web nostalgia for my TCC keynote, it was a natch to play with something for the tilde club site Jim Groom (more likely Tim Owens) set up

Looks like #ds106 finally has it's own Tilde Club, and guess who got the first site? http://t.co/NhiGtVZEBS Let me know if you want one 🙂

— Jim Groom (@jimgroom) March 20, 2015

I was inspired by ~dkernohan’s classy act of frames. I did a heap of frame-based web sites in the 1990s, it was then a sensible way to create a layout with common header and sidebar links. These sites included (none of these work anymore, they were perl script searches of an indexed text data file) an index of Community College Web sites, examples of Teaching and Learning on the Web (notice the syndication XML link), the Multimedia Authoring Web.

But for my tilde web thing, I wanted to do something with a LOT of frames in it. Somewhere on a beach or a plane I envisioned something like the Simon game, with each frame being a button that would generate a sound.

My frame monster includes 16 different HTMl files that are pulled together in the layout in the index.html file, it uses 9 nested framesets. These are doing by chopping the page into either rows or columns, and putting in them either the HTML link for a static content, or a nested frameset to fill in the row/column with another level of frames.

I am not going to explain much about frames, since I have a tutorial I wrote in the mid 1990s; still it’s a nested monster.

	

				 
			
			
			
			
				
				
			
								 
		
		
							
								
								
							
									
									

										
										

														 


													
														
														
														
															
													
													
													
												
										

									
									
									
							
							
							
							
						
					
			
			
			
		
	



<h2 align=center>NOTE: This site uses old school HTML frames, but apparently your 
browser does not support this 1990s feature. Try the 
<a href="noframes.html">sad dull alternative</a>.</h2>

Each frame source page I made so the entire frame is clickable, and when activated it changes it’s background color and text color of an H1 title, plus it starts (or stops) a looping sound file.

Stop reading and try it out now– http://ds106.club/~cogdog/weblodium/.

The structure of each frame source is about the same- it uses an external stylesheet and some jQuery to make the action work. Let’s breakdown the one second in form the right:

An external stylesheet style.css has commonly used CSS; the style tag below is to override the main stylesheet for the headings- they need different amounts of top padding depending on which frame it is.

Not also a style sheet link to the Font Awesome CSS – this is a slick way yo have icons in your site that are actually a font and not a graphic (hence are smaller and has a few other tricks)

This is really the entire content. The container div wraps everything; it’s CSS is sized to fill the frame and have a hand cursor when mouseovered. The stuff inside the H1 tag is how you put in this case, an image of some cubes from the Font Awesome library (see the examples for ideas what is possible with this code).

The last thing is the audio tag with it’s src attribute linking to the sound file which will be played. By not including controls in the tag, we had the audio player start/stop buttons (we will do this via JavaScript), plus we do add the loop parameter so it plays continuously until the frame is clicked again to stop.

All of the work is done with jQuery. We have an array of background colors ($bcolors) and text colors ($tcolors), and a variable $bstate, which is either 0 (the audio is not active) or 1 (the audio is active).

A click function is set for the entire #container div. The first thing we do is flip the $bstate value (if it is 0, we are turning on the item, so set it to 1). We change the background colors and the foreground h1 text according to the value of $bstate.

Lastly we either play the sound (#instrument is the audio tag ID) if it is not playing, or if it is playing, we might be shutting the lights off.

I could probably code this more cleanly, e.g. the best might be a single configuration file that would be used to swap our entirely different different sounds and button characteristics for the entire instrument. Its a tad hard coded now.

Sue me.

The sounds were grabbed really quickly from mostly Freesound and are quite ready to be retired for a better set.

For my main ds106 tilde club site http://ds106.club/~cogdog/, I have some bits from real pages I made in the mid 1990s:

The top GIF is something I made for ds106 as a play on the early kinds of GIFs. The background texture I used on web sites in the stone age. And the stuff at the bottom is all dynamic generated JavaScript.