How to score games with the new "2011 Blogger Baseball Scorecard"

(This piece was simultaneously published at "Michael Holloway's FilterBlogs".)

Microsoft's Internet Explorer browser won't show certain properties of border tags which make up the diamond shape of the 'At Bat' boxes that are at the centre of the new 2011 Blogger Baseball Scorecard's design.

The two images below (side by side) show Microsoft's Internet Explorer's rendering of my code:

Internet Explorer Rendering

Below are images as above, from the same web page, this one rendered by Firefox 3.6.15 browser:

Firefox Browser Rendering

The code has been validated at W3C as HTML 4.01 Transitional - Passed. I'm working on finding out why Internet Explorer won't render the border tags properly, and fixing it. In the meantime if you want to read this years scorecards, you'll have to do it with a different browser.

Firefox browser is available here. I have found that I can have more than one browser on my Windows XP Operating System. In my experience even running both at the same time doesn't compromise performance on my machine.

On Sunday March 6th, I used the new scorecard to score-keep the Toronto Blue Jays at Pittsburgh Pirates spring training game in Bradenton Florida, which was on Rogers SNET-1 in this market. You can see it here - if you must, it's an awful mess of scoring. As I say at the Internet Baseball Scorecard Blog, "This is the new, never before used in-game, 2011 Internet Baseball Scorecard - bear with me." I scored all the runs, but missed a lot of outs, and substitutions and even the staring line-ups were incomplete - etc., etc., etc.. But you can see that it functions as it's supposed to. So far, I'm really happy with it.


How it Works

Above is an example of a border tag used to make a simple two tone border - note the angles at the corners. In the scorecard, each quadrant of the diamond is actually the corner of a border (see Figure 1.) - it's the only way to make an angle with HTML!

At the top of this post - in the Firefox Browser Rendering, 2 image set - the left image has all four of the vertical border lines set to "solid black" - and the horizontal border lines set to match the background colour, thus they are invisible. In the image right next to that, the four horizontal border colours are set to a slightly darker colour than the background - so the appearance is of a frame around a diamond.

A scorekeeper can change the horizontal border's colour attributes on the fly, using the Blogger Compose mode "Text background color" widget. By selecting one of the four horizontal borders in each AB box, and changing it's colour with the "Text background color" button, one can indicate the progress of a runner around the bases:



The first box on the left, is how all the boxes in the entire scorecard appear before the game starts. The next box shows a runner on First Base, next one on Second Base, and so on. A solitary black diamond indicates a Run Scored - just like in pencil and paper scoring! :)


How to score with it

To change the attributes of the borders that make up the black diamond while scoring a baseball game is easy. Below I've taken a screen shot of me about to change the colour of the south-east quadrant - in order to indicate a runner is on First Base The colour indicated in the palette is the slightly darker peach. I'm about to change the colour of the horizontal border to the colour right above the one indicated - to the same colour as the background of the quadrant box:

First you highlight the border attribute by left clicking beside the diamond in the quadrant you wish to change. Next, left click on the "Text background color" button and choose the colour you want.

And Viola, a runner is on First Base:

Specifications

I think there's more than enough space in the 2011 Blogger Baseball Scorecard to score the game with any iconography you wish to invent.

Below (or above) each angle of the diamond there are four lines for text, room for 10 uppercase letters or 12 lower case letters on each line.

In the Pitches column there is again, more than enough room for the number of pitches in the best plate appearance (a great plate appearance is around 12 pitches).

Modern Project Scoresheet defensive notations and ball trajectory notations can be noted in the Pitches column as well.

Also note that if you have to, you can keep on writing outside of any of the boxes - the letters render where you put them - by hitting return you can create a block of script that extends into the next inning's AB box (which usually remains empty - unless the team bats around).

In a few days I will finish the new 2011 Blogger Baseball Scorecard.  It still needs Per-Inning totals boxes; Pitchers Totals boxes and a Per-Inning Box Score table for across the top. When all that is done I will post the code for the 2011 Blogger Baseball Scorecard to a Google Document and you can run it in a special extra-wide Blogger blog.

The Extra-wide Blogger code is available below:

Blogger Code to make your Blog Wider

<br /> <?xml version="1.0" encoding="UTF-8" ?><br /> <br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <br /> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><br /> <br /> <head><br /> <br /> <b:include data='blog' name='all-head-content'/><br /> <br /> <title><data:blog.pageTitle/></title><br /> <br /> <b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Minima Date: 26 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */ /* Variable definitions ==================== <variable name="bgcolor" description="Page Background Color" type="color" default="#ffe599" value="#ffe599"><br /> <br /> <variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"><br /> <br /> <variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa"><br /> <br /> <variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#A80" value="#A80000"><br /> <br /> <variable name="descriptioncolor" description="Blog Description Color" type="color" default="#FFFF66" value="#FFFF66"><br /> <br /> <variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc6600"><br /> <br /> <variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"><br /> <br /> <variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"><br /> <br /> <variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"><br /> <br /> <variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999"><br /> <br /> <variable name="bodyfont" description="Text Font" type="font" default="normal normal 110% Georgia, Serif" value="normal normal 110% Georgia, Serif"><br /> <br /> <variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 130% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 130% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"><br /> <br /> <variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 475% Georgia, Serif" value="normal normal 475% Georgia, Serif"><br /> <br /> <variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 125% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 125% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"><br /> <br /> <variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 130% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 130% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"><br /> <br /> <variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"><br /> <br /> <variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"><br /> <br /> */<br /> <br /> /* Use this with templates/template-twocol.html */<br /> <br /> body {<br /> <br /> background:$bgcolor;<br /> <br /> margin:0;<br /> <br /> color:$textcolor;<br /> <br /> font:x-small Georgia Serif;<br /> <br /> font-size/* */:/**/small;<br /> <br /> font-size: /**/small;<br /> <br /> text-align: left;<br /> <br /> }<br /> <br /> a:link {<br /> <br /> color:$linkcolor;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> a:visited {<br /> <br /> color:$visitedlinkcolor;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> a:hover {<br /> <br /> color:$titlecolor;<br /> <br /> text-decoration:underline;<br /> <br /> }<br /> <br /> a img {<br /> <br /> border-width:0;<br /> <br /> }<br /> <br /> /* Header<br /> <br /> -----------------------------------------------<br /> <br /> */<br /> <br /> #header-wrapper {<br /> <br /> width:1632px;<br /> <br /> margin:1 auto 10px;<br /> <br /> border:1px solid $bordercolor;<br /> <br /> }<br /> <br /> #header-inner {<br /> <br /> background-position: center;<br /> <br /> margin-left: auto;<br /> <br /> margin-right: auto;<br /> <br /> }<br /> <br /> #header {<br /> <br /> margin: 5px;<br /> <br /> border: 1px solid $bordercolor;<br /> <br /> text-align: center;<br /> <br /> color:$pagetitlecolor;<br /> <br /> }<br /> <br /> #header h1 {<br /> <br /> margin:5px 5px 0;<br /> <br /> padding:15px 20px .25em;<br /> <br /> line-height:2.2em;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.2em;<br /> <br /> font: $pagetitlefont;<br /> <br /> }<br /> <br /> #header a {<br /> <br /> color:$pagetitlecolor;<br /> <br /> text-decoration:none;<br /> <br /> }<br /> <br /> #header a:hover {<br /> <br /> color:$pagetitlecolor;<br /> <br /> }<br /> <br /> #header .description {<br /> <br /> margin:0 5px 5px;<br /> <br /> padding:0 20px 15px;<br /> <br /> max-width:1460px;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.2em;<br /> <br /> line-height: 3.4em;<br /> <br /> font: $descriptionfont;<br /> <br /> color: $descriptioncolor;<br /> <br /> }<br /> <br /> #header img {<br /> <br /> margin-$startSide: auto;<br /> <br /> margin-$endSide: auto;<br /> <br /> }<br /> <br /> /* Outer-Wrapper<br /> <br /> ----------------------------------------------- */<br /> <br /> #outer-wrapper {<br /> <br /> width: 4800px;<br /> <br /> margin:0 auto;<br /> <br /> padding:10px;<br /> <br /> text-align:$startSide;<br /> <br /> font: $bodyfont;<br /> <br /> }<br /> <br /> #main-wrapper {<br /> <br /> width: 4800px;<br /> <br /> float: $startSide;<br /> <br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> <br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br /> <br /> }<br /> <br /> /* Headings<br /> <br /> ----------------------------------------------- */<br /> <br /> h2 {<br /> <br /> margin:1.5em 0 .75em;<br /> <br /> font:$headerfont;<br /> <br /> line-height: 1.4em;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.2em;<br /> <br /> color:$sidebarcolor;<br /> <br /> }<br /> <br /> /* Posts<br /> <br /> -----------------------------------------------<br /> <br /> */<br /> <br /> h2.date-header {<br /> <br /> margin:1.5em 0 .5em;<br /> <br /> }<br /> <br /> .post {<br /> <br /> margin:.5em 0 1.5em;<br /> <br /> border-bottom:1px dotted $bordercolor;<br /> <br /> padding-bottom:1.5em;<br /> <br /> }<br /> <br /> .post h3 {<br /> <br /> margin:.25em 0 0;<br /> <br /> padding:0 0 4px;<br /> <br /> font-size:200%;<br /> <br /> font-weight:normal;<br /> <br /> line-height:1.4em;<br /> <br /> color:$titlecolor;<br /> <br /> }<br /> <br /> .post h3 a, .post h3 a:visited, .post h3 strong {<br /> <br /> display:block;<br /> <br /> text-decoration:none;<br /> <br /> color:$titlecolor;<br /> <br /> font-weight:normal;<br /> <br /> }<br /> <br /> .post h3 strong, .post h3 a:hover {<br /> <br /> color:$textcolor;<br /> <br /> }<br /> <br /> .post-body {<br /> <br /> margin:0 0 .75em;<br /> <br /> line-height:1.6em;<br /> <br /> }<br /> <br /> .post-body blockquote {<br /> <br /> line-height:1.3em; <br /> <br /> }<br /> <br /> .post-footer {<br /> <br /> margin: .75em 0;<br /> <br /> color:$sidebarcolor;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.1em;<br /> <br /> font: $postfooterfont;<br /> <br /> line-height: 1.4em;<br /> <br /> }<br /> <br /> .comment-link {<br /> <br /> margin-$startSide:.6em;<br /> <br /> }<br /> <br /> .post img, table.tr-caption-container {<br /> <br /> padding:4px;<br /> <br /> border:1px solid $bordercolor;<br /> <br /> }<br /> <br /> .tr-caption-container img {<br /> <br /> border: none;<br /> <br /> padding: 0;<br /> <br /> }<br /> <br /> .post blockquote {<br /> <br /> margin:1em 20px;<br /> <br /> }<br /> <br /> .post blockquote p {<br /> <br /> margin:.75em 0;<br /> <br /> }<br /> <br /> /* Comments<br /> <br /> ----------------------------------------------- */<br /> <br /> #comments h1 {<br /> <br /> margin:1em 0;<br /> <br /> font-weight: bold;<br /> <br /> line-height: 1.4em;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.2em;<br /> <br /> color: $sidebarcolor;<br /> <br /> }<br /> <br /> #comments-block {<br /> <br /> margin:1em 0 1.5em;<br /> <br /> line-height:1.6em;<br /> <br /> }<br /> <br /> #comments-block .comment-author {<br /> <br /> margin:.5em 0;<br /> <br /> }<br /> <br /> #comments-block .comment-body {<br /> <br /> margin:.25em 0 0;<br /> <br /> }<br /> <br /> #comments-block .comment-footer {<br /> <br /> margin:-.25em 0 2em;<br /> <br /> line-height: 1.4em;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.1em;<br /> <br /> }<br /> <br /> #comments-block .comment-body p {<br /> <br /> margin:0 0 .75em;<br /> <br /> }<br /> <br /> .deleted-comment {<br /> <br /> font-style:italic;<br /> <br /> color:gray;<br /> <br /> }<br /> <br /> #blog-pager-newer-link {<br /> <br /> float: $startSide;<br /> <br /> }<br /> <br /> #blog-pager-older-link {<br /> <br /> float: $endSide;<br /> <br /> }<br /> <br /> #blog-pager {<br /> <br /> text-align: center;<br /> <br /> }<br /> <br /> .feed-links {<br /> <br /> clear: both;<br /> <br /> line-height: 2.5em;<br /> <br /> }<br /> <br /> /* Sidebar Content<br /> <br /> ----------------------------------------------- */<br /> <br /> .sidebar {<br /> <br /> color: $sidebartextcolor;<br /> <br /> line-height: 1.5em;<br /> <br /> }<br /> <br /> .sidebar ul {<br /> <br /> list-style:none;<br /> <br /> margin:0 0 0;<br /> <br /> padding:0 0 0;<br /> <br /> }<br /> <br /> .sidebar li {<br /> <br /> margin:0;<br /> <br /> padding-top:0;<br /> <br /> padding-$endSide:0;<br /> <br /> padding-bottom:.25em;<br /> <br /> padding-$startSide:30px;<br /> <br /> text-indent:-30px;<br /> <br /> line-height:1.5em;<br /> <br /> }<br /> <br /> .sidebar .widget, .main .widget {<br /> <br /> border-bottom:1px dotted $bordercolor;<br /> <br /> margin:0 0 1.5em;<br /> <br /> padding:0 0 1.5em;<br /> <br /> }<br /> <br /> .main .Blog {<br /> <br /> border-bottom-width: 0;<br /> <br /> }<br /> <br /> /* Profile<br /> <br /> ----------------------------------------------- */<br /> <br /> .profile-img {<br /> <br /> float: $startSide;<br /> <br /> margin-top: 0;<br /> <br /> margin-$endSide: 5px;<br /> <br /> margin-bottom: 5px;<br /> <br /> margin-$startSide: 0;<br /> <br /> padding: 4px;<br /> <br /> border: 1px solid $bordercolor;<br /> <br /> }<br /> <br /> .profile-data {<br /> <br /> margin:0;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.1em;<br /> <br /> font: $postfooterfont;<br /> <br /> color: $sidebarcolor;<br /> <br /> font-weight: bold;<br /> <br /> line-height: 1.6em;<br /> <br /> }<br /> <br /> .profile-datablock {<br /> <br /> margin:.5em 0 .5em;<br /> <br /> }<br /> <br /> .profile-textblock {<br /> <br /> margin: 0.5em 0;<br /> <br /> line-height: 1.6em;<br /> <br /> }<br /> <br /> .profile-link {<br /> <br /> font: $postfooterfont;<br /> <br /> text-transform: uppercase;<br /> <br /> letter-spacing: .1em;<br /> <br /> }<br /> <br /> /* Footer<br /> <br /> ----------------------------------------------- */<br /> <br /> #footer {<br /> <br /> width:4800px;<br /> <br /> clear:both;<br /> <br /> margin:0 auto;<br /> <br /> padding-top:15px;<br /> <br /> line-height: 1.6em;<br /> <br /> text-transform:uppercase;<br /> <br /> letter-spacing:.1em;<br /> <br /> text-align: left;<br /> <br /> }<br /> <br /> ]]></b:skin><br /> <br /> <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1777332-3']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><br /> <br /> </head><br /> <br /> <body><br /> <br /> <div id='outer-wrapper'><div id='wrap2'><br /> <!-- skip links for text browsers --><br /> <br /> <span id='skiplinks' style='display:none;'><br /> <br /> <a href='#main'>skip to main </a> |<br /> <br /> <a href='#sidebar'>skip to sidebar</a><br /> <br /> </span><br /> <br /> <div id='header-wrapper'><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <br /> <b:widget id='Header1' locked='true' title='Internet Baseball Scorecard Blog (Header)' type='Header'/><br /> <br /> </b:section><br /> <br /> </div><br /> <!-- STOP REFRESH <script language='javascript' type='text/javascript'><br /> <br /> setTimeout("StratRefresh()", 30000);<br /> <br /> function StratRefresh()<br /> <br /> { window.location.reload(); }<br /> <br /> </script><br /> <br /> --><br /> <br /> <div style='float: left; margin: 10px 2px;'><img alt='' border='2' height='18' src='http://png-5.findicons.com/files/icons/767/wp_woothemes_ultimate/128/arrow_cycle.png' width='22'/><b> During games the scorecard automatically refreshes every 30 seconds. </b></div><pre></pre><br /> <div style='float: left; margin: 10px 0px;'><br /> </div><br /> <div style='float: left; margin: 10px 0px;'><br /> <a href='http://baseball---blog.blogspot.com/' target='blank'><button style='background-color: rgb(153, 0, 0); color: rgb(255, 204, 0);'>The Score Card's Sister Blog "BaseballBlogs"</button></a><br /> <br /> <a href='http://bikingtoronto.com/michaelhollowayblog' target='blank'><button style='background-color: rgb(153, 0, 0); color: rgb(255, 204, 0);'>Biking Toronto Blog</button></a><br /> <br /> <a href='http://bikingtoronto.com/bicycleroutemappingwiki' target='blank'><button style='background-color: rgb(153, 0, 0); color: rgb(255, 204, 0);'>BT Bicycle Route Mapping Wiki</button></a><br /> <br /> <a href='http://filter--blog.blogspot.com/' target='blank'><button style='background-color: rgb(153, 0, 0); color: rgb(255, 204, 0);'>FilterBlogs</button></a></div><br /> <div id='content-wrapper'><br /> <div id='crosscol-wrapper' style='text-align:center'><br /> <b:section class='crosscol' id='crosscol'><br /> <br /> <b:widget id='HTML3' locked='false' title='' type='HTML'/><br /> <br /> </b:section><br /> <br /> </div><br /> <div id='main-wrapper'><br /> <b:section class='main' id='main' showaddelement='no'><br /> <br /> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br /> <br /> </b:section><br /> <br /> </div><br /> <div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /> <br /> <b:widget id='HTML2' locked='false' title='' type='HTML'/><br /> <br /> <b:widget id='HTML4' locked='false' title='' type='HTML'/><br /> <br /> <b:widget id='HTML1' locked='false' title='' type='HTML'/><br /> <br /> <b:widget id='HTML7' locked='false' title='StatCounter' type='HTML'/><br /> <br /> <b:widget id='HTML6' locked='false' title='Calling for a Public Inquiry into Policing at the G20 Summit.' type='HTML'/><br /> <br /> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br /> <br /> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/><br /> <br /> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br /> <br /> </b:section><br /> <br /> </div><br /> <!-- spacer for skins that want sidebar and main to be the same height--><br /> <br /> <div class='clear'> </div><br /> </div><!-- end content-wrapper --><br /> <br /> <div id='footer-wrapper'><br /> <b:section class='footer' id='footer'/><br /> <br /> </div><br /> </div></div><!-- end outer-wrapper --><br /> <br /> </body><br /> <br /> </html><br /> <br />

To read an overview of how to install this code into a Blogger Blog go to, "2011 Scorecard: Bigger! Better!"

(Note the "2011 Scorecard Bigger! Better!" is an article about a simpler version I used in the 2010 MLB Postseason - it doesn't have the diamond feature - but the width of the blog you'll need for this, new version is the same.)


mh