From tables to an better understanding of CSS - The 'Minima II Blogger Baesball Scorecard'

Simultaneously posted at Michael Holloway's Baseball Blogs - a culmination of three articles at The Blogger Baseball Scorecard

It's been a good week.


Monday, April 18, 2011

The 'Minima' Blogger Baseball Scorecard

Introducing an important milestone in the development of this html baseball scorecard

I began this html scorecard project to score baseball games in a blog about a year ago. I started with very little experience in coding - just a basic understanding of blog writing production coding; like how to write code to make a link, how to code for italics, bold, make a headline sized font - basically stuff I learned producing the style I wanted and fixing problems while blogging over seven years.

Last spring I hacked a table out of an ESPN page that had 10 columns; I figured I could create a 9 inning wide by nine batter deep table with it - and score a baseball game using notations I would invent on the keyboard. (See Michael Holloway's Baseball Blogs - Thursday, May 6, 2010: "My HTML Baseball Score Card Hack".)

It worked fine, but it was pretty sprase looking - and the more data I added to each at-bat 'box' the more distorted the scorecard graph became ... so sometimes one couldn't quite follow what inning or what batter you were looking at. In the first go around I didn't know what 'cascading style sheets' were (they were those scary looking squiggly lines at the top that I never touched for fear of blowing up my computer), and I quickly threw out the CSS notation as they didn't do anything (I hadn't imported the style sheet). So I began by making boxes with html style tags - using width and height in almost every line of code. (Interestingly my development path followed the same path - ten years later - that led programmers to develop CSS.)

My learning curve in table making was all about stabilizing the scorecard graph while at the same time inventing a scoring notation that one could create with a keyboard, and creating a card that had enough room to score 'everything'.

The result is the table below which is made entirely of CSS boxes - 80% of them hidden from view now (thus the "Minima"). Those boxes are the 'skeleton' that keeps the thing stable. Below in the first player row of at-bat boxes, I've input some scoring notations that test every parameter of the scorecard and show some extreme scoring situations that test the size of the text areas - thanks to, for example, the Blue Jays vs. Mariners - April 11th, bottom of the 8th inning - 3 bases loaded walks. (See the 8th inning - April 11)

The places where text is input give you a clue to where the invisible or 'transparent' boxes are - the four quadrants around the diamond shape are the four - of Twenty boxes that make up One at-bat box - that can receive text; the rest hold the diamond shape in place, 'pressing' against the table that holds them, all the tables of all the rows constructed exactly the same so that when a reader zooms in and out, or resets their screen resolution - nothing moves relative to the rest. So anyone can learn to read it with out a jumble of distorting x, y axis making it difficult.


The next step in this project is to set up a web address, turn a computer into a server and rebuild the scorecard with position attributes, and use server-side includes (SSI) to lay in the tables (there are 333 of them in all - but only 13 different tables in all.)

Soon I'll need some programming help (and some financial backing - hint, hint), to produce a web site where people an come and score baseball games - a whole social networking thing with-in a baseball scorekeepers meme - anally retentive people like myself scorekeeping, saving scorecards to their personal accounts, printing copies, sharing them electronically, talking about scoring techniques in forums, developing the craft and the scorecard in wikis... .

Later still, and on the 'drawing board' (in my head) is an idea for a program that can 'lay in' data into these scorecards in real time, taking advantage of the work done at Retrosheet, to produce scorecards that update as the game progresses. Conversely a similar 'scraper' could extract data from html scorecards - written according to Project Scoresheet notations guidelines - to build an digital archive of baseball from across the culture - woman's leagues, children's leagues and even co-ed softball bar leagues.

If information is power then this much baseball information would be... well, confusing - and that ain't all bad.


Much thanks to:

* Kathryn Barrett, Sr. Publicist at O'Reilly Media, Inc who prized me Head First HTML, just for responding to a questionaire after an O'Reilly Web Cast.
* Also kudos to W3C school's CSS Tutorial pages and especially their neat-o "Try It Yourself" widget which I will continue to use extensively as I move forward.
* And thanks to Robert Brodrecht of "Robertdot" for being so clear and concise about "Triangles in CSS".
* And last but not least, my friend Chris F.A. Johnson who's timely tips and regular cues in direction have sped my learning - and who's vast knowledge of coding has helped make me aware of some of the best practices in this sub-culture of coding crafts-people.



Please note: I am self taught and don't follow the paths of teachers - rather the path of necessity (the mother of). Some may find my seemingly gargantuan gaps in knowledge unfathomable - and my blithe ignorance of well known CSS solutions worrisome ... so for those who's materials I have used as reference or who's advice I have sought, it should be noted that they are not to blame for the way I learn - I am. :)

mh


Monday, April 18, 2011 - The 'Minima' Blogger Baseball Scorecard

Wednesday, April 20, 2011

CSS Position at-bat Box - another milestone

Yesterday's milestone, the Minima Blogger Baseball Scorecard, sucks compared with today's milestone.


Below is a new AB box that is made with CSS position elements; the diamonds are where they are because of top and left absolute position elements with-in a relative parent element - rather than a series of boxes that are packed together so none of them move - as in the 'Minima' scorecard I finished yesterday. Yesterday I scored the New York Yankees at Toronto Blue Jays game with the Minima scorecard and I had a great deal of difficulty keeping up, every time I changed the position of the cursor in the graph, the blogger-create-interface would pause for about 2 or 3 seconds as the spider finished crawling the 604 KB file. I guess that might have something to do with my processor speed.


This is how CSS really shines - the code for this is only 64 four lines long as opposed to the Minima scorecard's AB box which took 130 lines to create - that's 66 lines saved X 162 AB boxes in a two team scorecard = 10,692 lines of code!

BBFS BX CS #9 1,2 BH7 #9 2,3

That's good because before I erased all the spacing tabs that make code easier to read, the Minima was at 1.15 MB and Blogger's per-page limit is 1MB - trimming all the indent tabs saved about 300,000 bytes! Like in the Shampoo commercial - wash rinse, repeat - coding is a lot of cut and paste and repeat, and repeat and repeat. I was astonished the other day when I looked at the size of the Minima scorecard; a million bytes?!? How did I create a million keystrokes?



Saturday, April 23, 2011

Minima II Blogger Baseball Scorecard - styling with position

In case you haven't been here before, or haven't been back in a while - the Blogger Baseball Scorecard Project is a ongoing development of an interactive baseball scoring form that you can use in a Blogger blog to score baseball games.

The 'Minima II' is the latest model in the project and I'm very excited about it! Today, April 23, 2011 at 1:00 PM EST I'm going to score my first game with it at this address.

In testing the 'Minima II' I am shocked at how fast and responsive it is - there's no delay from the moment one clicks in a particular text area to the time the blinking prompt is ready for keystrokes - this is surprising to me because although the previous incarnation in this project, the 'Minima I' has twice as many bytes, it was infinitely slower (a function not of size, but architecture).

The difference between the two scorecards in coding is qualitatively different. The first, the 'Minima I' represents the old way that websites were contructed in the 1980's and early 90's - the New Minima II is constructed with Cascading Style Sheet coding the way modern web pages are made today - the two scorecards represent two points on a learning curve which is me teaching myself to write code. Oddly, my epiphany from one style of coding to the other happened with out any thinking - as soon as the older card was done I started writing Minima II - and had it ready for scoring in 2 days.

Yesterday I was going to score Game 1 of the Tampa/Jays series (that's Game 2 that I'm scoring today) but blogger kept discarding the bottom pitching table - so last night I added an relative position outer wrapper CSS element and added absolute position wraps around the five tables, and gave them all top and left positions - now Blogger reads the whole scorecard correctly (and dosn't mistake repeating data for an error).

So below is a first attempt at adding some style with position - it looks at little less like a brick wall now I think. :)

Next, maybe some images here and there.

mh

Saturday, April 23, 2011 - Minima II Blogger Baseball Scorecard - styling with position

(All Images 'Rebigulate' on click)



mh

Click-on Radio - Where 2.0 - with-out all the business

"The future of radio in part, is the experience of listening via a Multimedia Player that has on screen, pop up links that a mp3 producer adds to the stream - like a lower bit rate Youtube."

I like radio as a medium a lot.

In the breaking new world of New Media I have always thought that Radio is full of potential. It offers a flexibility that allows it to mesh it with other media - and as the world wide web is all about connecting things - it's only a matter of imagining the right combination until we realize a magical new mix of media that will mesmerize like movies, radio and television have done in the past.

This vision of the potential of radio is always in the back of my mind.

The history of radio has been not only the content coming out of it, but also Where we listened to it.

The vacuum-tube radio for the Home

Console vacuum-tube radio - 1930

Stromberg-Carlson 561 (1947, Toronto)

Then we tried to put radios Everywhere:

Huffy Bicycle radio - 1955

Nash-Healey Roadster with dashboard radio - 1952

Then came the pocket sized portable radio

Battery powered transistor radio

Now radios looks like this:

GOM Media Player

Apple iPod nano

Android Phone

Apple iPod Touch

Windows Media Player on a 'left-handed' desktop computer

I grew up with radio because my parents made the great sacrifice of permanently un-plugging our family television set after it became apparent I was hopelessly addicted to it. I would sit and stare - oblivious to all else. If someone spoke to me while I was watching I actually couldn't hear them - only shouting and jumping up and down could break the spell I was under. I spent every waking hour paying homage to that amazing piece of furniture.

One day, home from school sick, I found that I could connect with my cathode-ray god with-out the constant interruption of people. That was pretty well my last day of school for that school year - I quickly became an expert at faking cold symptoms and my parents, both of whom worked, didn't have the time to do battle with me each morning. They would almost always relent and let me stay home. After a week of this I don't believe they thought I was sick, but they knew I certainly didn't want to go to school. They took the long-view; they determined to address the problem 'going forward'. (It turned out my attachment to the 'boobtube' as my dad called it, was as much an inability to find an identity as I struggled to fit in to this, my third school, and third different community in my first ten years - and this new place, a rural farming community was extremely xenophobic compared to big city cultures like Vancouver's and Edmonton's. This change was a tough cultural acclimation for me.)

I failed grade four and but saw every episode of "Truth or Consequences", "The Saint" and "Gilligan's Island" - whatever was on during school hours, I watched it. I became an expert at positioning the TV-top antenna to pick up broadcasts from as far away as Erie Pennsylvania, Cleveland Ohio, and even Buffalo New York!

Après TV I became a big fan of radio. I turned my 'ability to focus' to multitasking (which the experts say doesn't exist). I've heard many people say the same thing, that they can do other things while listening to the radio - listening to radio leaves part of the mind free to do other things. For some reason radio allows this 'duel-tasking' - while TV engages every neuron of my brain - and if I don't manage my viewing turns me into a drooling moron.

On radio I no longer presented the symptoms of someone with the asocial personality disorder - instead I listened and wrote or drew - I was normal - and I attended school. (Also, I had discovered that playing sports during school lunch-hour helped me form an identity, make some friends and fit in a little.)

The role that lunch-hour pick-up soccer played in my life is, now in these next generations, filled in a huge way I think by mobile technology. Young people it occurs to me, must be marked by what technology they're using; what cell phone they have, what mp3 player they use - even to the extent that what is playing on the devices doesn't matter. Now the fact that you have those white ear pieces from Apple plugged into your ears is much more important than what you listen to with them. In my youth the 'what', the Dead Kennedys, Fleetwood Mac verses Donna Summer or Village People defined one much more than the brand of cassette player you used - in fact the device was completely irrelevant. I listened on a big bulky, book-sized cassette play/recorder with headphones.

But 'Where' was important. 'Where' one listens was as important then as it is now. It affects the 'experience' of the media you've chosen to play. A particular song can have a completely different meaning played on the beach for example, as opposed to hearing it on a home stereo in the basement rec-room.

Right now for example sitting at my desk writing this, I'm experiencing a weekly radio show called "Counter Spin" which is playing on my desktop GOM media player via an mp3 download. I've embedded an audio player below as another example of how "Where" shapes content.

I think is interesting that the flexibility of  'New Radio', allows someone to experience this writing in a simular audio-scape to that which I was immersed in when I wrote it. 

Counter Spin Radio show for,
Friday, March 25, 2011
(in a "The Podcast Place" mp3 player)




Where you are - whether your reading on your phone while walking down the street or sitting at your desktop at home - is another element in a "cluster" of experiences that combine to create a unique time and place relevant experience. This all speaks to the Tim O'Reilly idea of the Internet Operating System - the idea that all the communications tools we use, where we use them, and how we are connecting them - are in the process of producing a global Internet Operating System - a globe-wide soft-wired consciousness, or usual way of doing if you will.

"Where" is not a new idea; it has been much talked about around the explosion of the smart phone usage in the last few years. Tim O'Reilly has a conference for that. The seventh "Where 2.0" Conference is titled, "The Business of Location" - and is happening Tuesdasy April 19th to Thursday April 21st 2011 in Santa Clara California. This year's major theme is marketing in the "Geospatial Web" - exploring the emerging characteristics and opportunities offered by a bazillion gigabytes per nano-second of new data.

But where doesn't just mean the physical position on the globe, what latitude and longitude. It can also mean, with-in what context. Like, listening while your riding the subway to a work; while bicycling on a nature trail or while writing an essay at your desk. Radio is a very common thread in the tapestry of our "Where" experience which is a cumulative mix of experiences that very often includes audio or the cultural audio construct, 'radio' which is extraordinarily flexible compared to any other media form.

Much of the Where Web data is created by technology people use, that they carry around with them. The Where 2.0 Conference meme is now more than ever, a focus on how to read this complex real-time data that is an extrodinarily intimate view of the daily routines, choices and connections of individuals. This data that can create telemetry of our behaviors in so many different ways. As such, an understanding of this data is thought to be the much sought-after 'Holy Grail' of Advertisers.

But not all Where Web ideas focus on the server side (the vendor) perspective and O'Reilly Media has not alays focus thusly on the marketing side of this. O'Reilly Media's recent preoccupation with monetization of all things web, I think, is a reflection of the amount of hurt caused by the on-going Great Recession and the fact that the technology has reached a point where it is maturing into marketable products that are in demand.

But the client side experience (the end user, the shopper, the sucker as W C Fields would say) is a much more interesting place I find; it's the current anthropology of technological progress.

Today I realized that a new experience of radio is not only about where one listens to it, but what the state of technological progress offers in the "shape" of the "box" that the person is able to experience, where.


Mapping is an important part of the 'Where' explosion of understanding; it places the 'clients' (shoppers) on a map, and helps 'servers' (retailers) target customers based on their location. It changes everything when viewed from the server side of the client/server relationship. But Where also includes a view from the 'client' side of the experience the envisioning of the shape of the future web Operating System we are building with Web 2.0 tools.

The experience of listening to the radio anywhere is not new, the transistor created that experience in the 1954 - but now the web is creating a new kind of Where radio experience. Now, out of what construct one listens to radio is important. The idea that a radio can throw up a visual link window is an example of a brand new radio experience.

It is this new way to listen to radio that is at the heart of this article - while listing to the content plush radio program I found that I wanted to link to a news piece that was referenced by a host. It made me think of Youtube's on screen link capability. A Youtube user can add a link to a video that they post there, the link pops up on screen at a moment chosen by the user, in an on screen box that the user can define by size, position, shape and colour.

The future of radio, in one part, is the experience of listening in a Player on one's desktop. A Multimedia Player, like the GOM Player I use, should be enabled to allow on screen pop up links - like those in Youtube - that the mp3 producer can add to a stream.



References: 

Counter Spin RSS feed (with mp3 addresses for past episodes):

http://www.fair.org/index.php?page=29&rss_content=counterspin

Frontline - 02 Feb 2010 "Digital Nation" (ref. 'multitasking'):
(http://www.pbs.org/wgbh/pages/frontline/digitalnation/view/?utm_campaign=viewpage&utm_medium=grid&utm_source=grid)






Photo Credits

http://www.deadprogrammer.com/category/technology/vacuum-tube
http://www.audiodramatalk.com/showthread.php?t=301
http://www.etsy.com/listing/38649934/vintage-ge-transistor-radio
http://opusurbanista.blogspot.com/2009_08_01_archive.html
http://www.pushclicktouch.com/blog/?p=124 
http://www.art.com/products/p13834686-sa-i2759556/1952-nash-healey-roadster.htm?sorig=cat&sorigid=20908&dimvals=20908&ui=1eab85842c6c49b7a51f81e7b20393f5http://www.cnet.com.au/apple-ipod-nano-4th-generation_images-339291900.htm
http://www.letsgomobile.org/en/review/0040/apple-ipod-touch/
(edited by author)
http://www.mobiletor.com/2009/05/25/driver-generated-live-map-platform-launched-by-waze/
(edited by author)
http://roguediamond.com/?p=34 | http://gom-player.en.softonic.com/
(edited together by author)
http://www.interweb.in/pc-news/6546-intex-desktop-pc.html | http://rocketdock.com/addon/icons/15110
(edited together by author)



mh