The 2011 starting pitchers of the Cincinnati Reds did not excel the way everyone thought they would have.  Due primarily to injuries, and early they came.  At the beginning of last year’s season, Homer Bailey and Johnny Cueto were on the DL and again later  in the year.  Cueto missed the first 5 weeks of the season and was knocked out my another injury in mid-September missing the rest of the season.  I believe if those two were to stay healthy and the offense came alive more often than they did we could have seen October ball in Cincinnati again.  With the new addition to the starting rotations (Mat Latos) and more dedicated players, I believe WE WILL see October ball in Cincinnati.  Along with that, they will need to stay healthy throughout the season and the offense needs to perform more on a consistent level.

Six guys, Five spots

When it comes to the decision of the opening day starter there shouldn’t be a mystery to that question.  Johnny Cueto had the best season last year of the team.  Some of the numbers may not show it, but his season was shorter than the Reds wanted.  When it comes to choosing the number one starter in the rotation you have to think about the ERA.  When it comes to ERA, Cueto would have won that title last year but he was a few innings short of qualifying for it.  You want to match up the pitcher will the best ERA with the opponents best ERA pitcher.  So it’s a no brainier picking Cueto for the opening day starter.  Cueto went 2.31 ERA with a record of 9 – 5.  He pitched just 156 innings with 47 walks and 104 strikeouts.  Also he only gave up an impressive 8 home-runs.  Cueto has excellent stuff and with that his goal is to start 30 games and pitch 200 innings, but he knows that the key to that is staying healthy.  If he can stay healthy, Cueto could reach both goals. He adjusted his delivery early last season, and got more groundball outs while using less pitches.  ”I want to go maybe 30 starts,” Cueto said. “That would mean I am throwing strong.”

If you were to judge how good Mat Latos is just based on who all the Reds gave up for him, well, he better be pretty good.  Walt Jocketty sent top prospects Yonder Alonso, Brad Boxberger and Yasmani Grandal along with starter Edinson Volquez to the Padres for starting pitcher Mat Latos.  Latos is thought to be expected to be the number 2 starter behind Cueto with the future potential of becoming the Reds Ace.  Last year Latos went 9-14 with an ERA of 3.47.  But the stat that I like most is the 31 games started.  Even though Latos is young, those 31 games shows me that he knows how to stay healthy.  And healthy starting pitching is what the Reds need to win the division this year.  Also, Latos allowed a respectable 16 homeruns and striking out 185 batters while walking 62.  Being a young 25 years old this year, Latos has a top of the rotation arm and the potential to be an ace.  To me, this is the one two punch the Reds have been looking for.

Following the one two punch of Cueto and Latos, the Reds have Bronson Arroyo.  Arriving during Spring Training in 2006 from the Red Sox in a lopsided trade for Wily Mo Pena, Arroyo is the longest tenured member of the Reds. He is also signed through the 2013 season as part of a three-year, $35 million extension that he signed in December of 2010.  Arroyo had a rough season last year posting a 9-12 record with an ERA of 5.07.  He gave up a league worst of 46 homeruns while walking 45 and striking out 108.  Again, one stat that I like to see is that you started 32 games last year.  Arroyo is 35 years old has no plans of slowing down.  He has changed and retooled his entire workout program in the offseason.  He worked on his legs and lower back along with the flexibility around the hip area.  He has realized that in order to keep his fast ball down and the breaking balls accurate, his legs and back  need to be stronger and last throughout the entire season.  He says that he has never felt so anxious to get back onto the field.  His goal is to become a 15 game winner again and pitching 200 innings in doing so.  On the annual perspective, Arroyo has be very consistent but hasn’t always had a pretty record to show.  Besides last year, (199 innings) Arroyo has pitched 200+ innings for the past 6 years and in the years of 2008 thru 2010 has won 15 games with 17 wins coming in 2010 when the Reds won their division.  Arroyo doesn’t want to be the guy or just vanishes and has everyone asking, ‘what ever about to that guy’.

To me, I think the the first three spots of the starting rotation belong to Cueto, Latos and Arroyo.  There are three more pitchers competing for the final two spots.  Those pitchers are Aroldis Chapman, Mike Leake, and Homer Bailey.  Even though he has a 105mph fastball, Chapman has yet to prove himself to the Reds as a starter.  He was suppose to be tested in winter ball but shoulder issues put a stop to that and he was told not to throw until spring training.  Last year he was used as a set-up man posting a 4-1 record along with a 3.60 ERA in 54 games.  In those 54 games in pitched 50 innings allowing 41 walks and 71 strike outs.  Towards the end of the year last year Chapman began to show some control issues and was sent on the DL and rehabbed in the minors.  Within a month after his return, Chapman retired 30 of 31 batters over a stretch of nine appearances.  Starter or Reliever?  Well, for Chapman he is mentally and physically preparing himself to be a starter.  Only time will tell.  With the Reds happy with the five starters they have now, I feel Chapman will start the year in the minors as a starting pitcher to get the innings in.

A heavier (by 15lbs in a good way) Homer Bailey is determined to help the Reds win the division by staying healthy.  He met with a nutritionist and continued his winter workouts to reach is goal of getting stronger and lasting through the entire year.  He has spent more time with weights than he has with throwing.  He is taking his throwing a lot slower this year and focusing on his health.  He started the season last year on the DL and eventually made it back by the middle of the year.  “Obviously he has good enough stuff to win 12 games in his sleep if he stays healthy”, Bronson Arroyo says.  So, the key for Bailey making the starting rotation is staying healthy.

With a strong second half of the season, Mike Leake is probably more of a shoe-in for the fourth spot than having to compete for it.  With a 12-9 record and an ERA of 3.86, Leake is flying under the radar.  He started 26 games playing in 29 and pitching 167 innings giving up 23 homeruns and 38 walks along with striking out 118.  With the talk of the winter being mostly about the organization of the Reds and the moves the office has made, I feel Leake has flown under the radar.  He very well has the chance to become one the of stand out pitchers for the Reds this year.  In just 26 starts he lead the team in wins with 12.

Key to Winning

If the Reds get 30+ starts and 15+ wins out of at least 3 starters and the other two give quality starts with around 8-10 wins, the Reds will be in the playoffs.  The key to that though is for the pitching staff to stay healthy throughout the season.  With Chapman being a question mark as far as a starter or reliever goes, he is very well capable of being in the bullpen as well.  That is not out of the question.  Respectable outings of  6 or 7 innings from the starters will allow the bullpen to be well rested throughout the season.  Healthy starters with long outings will allow the bullpen to be rested and ready to go which will lead to another Championship in 2012.  Go Red Legs! 

A function is a piece of reusable code that performs a common task.  Functions are one of the fundamental building blocks of JavaScript.  A function is a JavaScript procedure, a set of statements that perform a task or calculates a value.   Functions allow you to make JavaScript code more efficient and reusable.  Functions are task-oriented, good at code organization, and excellent problem solvers.

Defining a Function

When it comes to creating a function, there is a consistent  syntax that you must follow that ties the name of the function with the code that it runs.  The syntax that is following is the most basic JavaScript function:

function + name + () +  {
   Body
}

You start a function with the keyword, function.  Following the keyword of function is an identifier that uses lowerCamelCase.  Meaning the first word is in lower case, the second words’ first letter will be in upper case and the rest in lower case, and the same goes for the third word and so on.  Also there is no spaces in between the words.  Next is the set of parentheses.  These are a tell-tale sign that this is a function.  More on these later.  Last but certainly not least is the place where the code of the function will go, called the body of the function.  Surrounded by two curly brackets { }, the code is what makes the function do what you want it to do.  This is where all the work will take place to complete the common task at hand.  Here is another example:

function square(number) {
  return number * number;
}

The function square takes one argument; ‘number‘.  The function consist of one statement and that statement is telling it to return the argument of the function (which is, number) multiplied by itself,  (number * number).    The return statement specifies the value returned by the function.

Calling the function

Defining the function does not execute it.  Defining it simply names the function and tells it what to do when it is called.  Calling the function is what actually performs the action of the function.  For example, to call the function from above:

square(5);

The function, square, was called with the argument of 5, resulting in the function being executed and therefore returning the value of 25, (5 * 5).  A pretty important piece of the code is the semi-colon.  You do not want to forget that.

Scope

In JavaScript, scope refers to the context of data, as in where the data lives and how it can be accessed.  Depending on its scope, global or local, some data can be seen everywhere in a script, while other data is limited to a specific block of code, such as a function.  For example:

var x;
function doSomething(z) {
  var y;
}

The above code has two variables that are declared in two very different places in the script.  First the variable x is declared outside of the function and any other block of code for that matter.  With that said, it means that the variable x is considered a global variable.  Therefore, it can be seen throughout the entire script and more importantly is ‘alive’ as long as the script is running.   Now, on the other hand, the variable y is considered a  local variable.  This is because it is declared inside the body of the function ‘doSomething’.  This means that the variable y is only visible in the body of the doSomething function.  Also, y only exists while the doSomething function is being executed.  The variable y is created when the function is called and is destroyed when the function is done.

More to Come

When it comes to learning about functions, there is obviously a lot more to learn.  Right now I am just concentrating on the basics of JavaScript.  Once I learn the basics I will go back and dig deeper into all the basic areas of JavaScript.  It’s going to be a long haul, but taking baby steps and making sure I understand the area I’m working on before I move on I will be able to survive the long haul and achieve my goals.   I hope all you other beginners out there are benefiting from my blogs.  If you would like me to concentrate on a certain piece of JavaScript, leave me a comment and I’ll be happy to do so.  Till next time, Keep Learning , Keep Coding.

WGT!

Do you know what the best thing about winter is?  Near the end of winter means that pitchers and catchers report for spring training.  The Red’s office was busy in this past off season adding players that have a few more people predicting the Reds will win the Central Division this year.  I’m not much on predicting the future, but I must say that the Reds are definitely contenders.  I believe that if the injuries stay short and low, the Reds will have a excellent chance to make the playoffs for the second time in three years.

Bold Trades/Free Agent

One of the boldest trades during the winter months was made by Reds General Manager Walt Jocketty.  He sent top prospects Yonder Alonso, Brad Boxberger and Yasmani Grandal along with starter Edinson Volquez to the Padres for starting pitcher Mat Latos.  Some people are saying that Jocketty gave up way to much for what the Reds got in return.  Me, well, I think only time will tell.  Latos is only 24 years old and is likely the number two starter behind Johnny Cueto.  Also the club is thinking Latos as ‘ace’ potential in the future.

Another bold trade by Jocketty was made just one short week later.  The Reds sent Travis Wood, Dave Sappelt and Minor Leaguer Ronald Torreyes to the  Chicago Cubs for set-up man, Sean Marshall.  With this move, the bullpen was help and that leaves Marshall as the set-up man for the Reds new closer, Ryan Madson.   Madson was acquired off the Free Agent market.  He was not picked back up by the Philadelphia Phillies.

Ready to Win

Starting rotation helped…….check.  Relief pitching helped………check.  Closer position helped…….check.  The Reds have successfully improved all three areas of pitching during the off-season.  Yes, the Reds gave up a lot to get it, but that is why the Reds have a great farm system and they will continue to have one.  The prospects that were traded have great talent and a great future ahead of them.  Unfortunately, the Reds had no roster room for them to play right away.  Why should a team keep that talent in the minors?  Put the talent to good use, and that is exactly what the Reds did.  The Reds are in it to win it in 2012.  I can’t wait for the season to start……oh wait……it already has. (At least to me it has.)

My first Opening Day

I have been to the past 6 Opening Days and I will continue the streak to 7 on April 5, 2012 against Florida Marlins.  On April 3, 2006, I went to my first Opening Day and it started out great.  I showed up to the stadium when the gates opened at 10:00am.  My brother-in-law, Freddy and I started to walk around to enjoy the scenery, but not without walking through metal detectors first.  They had high security due to George Bush throwing out the first pitch.  We soon found the spot to get some autographs.  I didn’t get to exciting of autographs but I did get Billy Hatchers along with about 5 others on a Reds hat that I still have today.  The forecast for the game was typical for the Cincinnati area.  A high temperature of 55 degrees (which was at 7:00 am) and with the rain coming in temperatures dropping to the mid 30′s as the game went on.  Needless to say, it was a cold, wet,  bitter end to the day with a  loss to the Chicago Cubs with the score of 7-16.

My Opening Day stats

With 6 Opening Days under my belt I like to look back at them and compare the days.  My record is a horrible 2-4 with my second win coming from last year’s game winning walk-off heroics by Ramon Hernandez, (more to come on this later).  The year before that the Reds played the Cardinals.  The Cards started off the game with a 1-0 lead and that set the pace for the remainder of the game.  The Reds hung in there until the top of the ninth where Nick Masset walked 2, gave up 2 hits and a whopping 5 runs.  This loss hurt more because the fact that it was against the Cardinals.  The Reds have been outscored by 12 runs on Opening Day since I have been going; 28-40.

Most Memorable

As mentioned before, Opening Day 2011, will go down in history as the best Opening Day game ever that I have been to.  Volquez was our starting pitcher (our new Ace) and he had a rough first inning giving up 3 runs. But, as the Reds did in 2010, they hung in there throughout the game and was still in it in the bottom of the ninth.  With Axford, the Brewers dominating closer coming in with a 3 run lead, a few people began to walk out.  That was a decision that I’m sure they are still regretting.  Things were happening in the Reds favor and before you knew it Ramon Hernandez was up with 2 men on and down 2 runs.  On one pitch he hit a towering shot down the left field line but foul.  I started to think to myself, ‘Man, this place would have went crazy if that was a home-run.  Then, what I think was two pitches later, Hernandez hit a line drive shot down the right field line over the wall into the visitors bullpen for the game winning 3 run home-run.  And let me tell you, that place went crazy.  I was jumping around like a crazy maniac giving out high fives to everyone and anyone that I could reach.  I even believe I was giving high fives out to security guards as I was walking out.  It took about two hours before I calmed down from all the excitement about the game.  I talk about the game with the people I went with all the time and will continue to do so….. forever.

Looking Forward

As I sit in front of my computer typing this blog, I am getting more and more excited about Opening Day 2012.  The Reds have been very busy this off season and I can’t wait to see if it pays off this year.  I hope to still be going to Opening Day games for as long as I am capable of walking, and if I can’t walk my son Henson will be pushing me in a wheel chair or carrying me in on his shoulders.  One way or the other, I will be attending Opening Day games in Cincinnati for as long as I am alive.

Bring on the 2012 season.  GO REDLEGS!!

WGT!!

For me, when it comes to learning the basics of JavaScript there are an endless number of places to go. Reading through the book from ‘Head First’  I was beginning to get lost….and really quick.  I didn’t let myself get overwhelmed or discouraged about it.  I just chose to take a few steps back, and a few deep breathes and relax.  The next thing I did was something I wish I could/should have done back to high school.  I “googled” it.  The results I got back were amazing.  I got a wide variety of websites ranging from beginners to professionals  Now, I was ready to get back at it.  One of those web sites was ‘Codecademy‘.  It’s a nice site where you can learn to code in an interactive way.  For me that is perfect.  Another website I was told about was  Mozilla Developer Network.

Variable

Variables are a big part of JavaScript (JS).  Variables are symbolic names for values in your application.  A variable is a storage location in memory with a unique name; like a label on a box to store things.  Variables start out without a value.  When you create a variable it is a good practice to go ahead and give it an initial value, also known as initializing a variable.  It is okay to not initialize the variable, but just be careful not to attempt to ‘read‘ its value before doing so.  It’d be like trying to play a song on your iPod before loading it with music.  When declaring a variable you will want to use the keyword, var.  For example:

var redlegs = 'champs';

The first part is the keyword ‘var‘ and it is used for creating the variable;  ’redlegs‘ is the name of the variable, and ‘champs‘ is the specified value.  Unlike an undefined variable, an initialized variable is instantly ready to be used.  Initializing a variable is all about setting its first value and with it being a variable there is nothing stopping that value from being changed later.

Constants

Constants, on one hand, are like variables, but on the other hand are not.  Just like the name hints, constants will keep the same value unless you change the value you set for it the first time.  To store a piece of data that can never be changed while the script is running, you would create a constant.  Creating a constant is done the same way you did a variable.  But the only difference is the keyword.

const TAXRATE = .06;

The keyword ‘const’ is what you need to use to create a constant.  TAXRATE is the name of the constant and .06 is the given value.  The first initial value of the constant becomes permanent.  This constant cannot be changed while the script is running.  It is a good practice to put the name of the constant in ALL CAPS so it is easily told apart from the rest of the variables in your script.  Constants are good for storing information that you might directly code in a script, like a tax rate.  Instead of using .06 in your code, it is much easier to understand TAXRATE when you or someone else sees it in your script.  Also if you ever needed to change the value of the TAXRATE you would only have to change it where you initialized the constant.

Identifiers

Variables, constants, and other JS syntax constructs are identified in scripts using unique names known as identifiers.  Notice the word, unique. Variables and constants cannot have the same name.  They must be different for things to work and be less confusing for people.  Along with everything else to do with web development, naming identifiers comes with some rules which are laid down by JS.

• An identifier must be at least one character in length.
• The first character in an identifier must be a letter, an underscore (_), or a dollar sign ($).
• Each character after the first character can be a letter, an underscore, a dollar sign, or a number.
• Spaces and special characters other than _ and $ are not allowed in any part of an identifier.

When creating an JS identifier for a variable or constant you not only want to follow the rules mentioned above but you want the name to be descriptive so that the data is easily identifiable.  Granted, you will come across some data where it is hard to do so, but just do your best with it.

The next step????

When it comes to learning JavaScript, don’t rush into things and be patient with it.  If you keep up with it and never give up, things will start to come around and you’ll be a professional web developer before you know it.  Don’t be afraid to take a few steps back and reread a chapter or two so you can understand it.  If you move to the next step before understanding the first one, you will be in a tough battle when it come to learning JavaScript.  Take your time and enjoy what you are doing.  In the end….Keep Learning Keep Coding.

WGT!!

I know I have only been learning about HTML and CSS for about four months and you’re probably thinking, ‘Why are you moving onto JavaScript so soon? Surely there is a lot more to learn about HTML and CSS.”  Well, you are right.  There will always be new things coming out for HTML and CSS.  Heck, there is already HTML5 and CSS3.  I feel like I have a good grasp on things and I want to move on.  For me, learning comes a lot easier when I just………do it.  Learn by doing, that is what I am about.  I may not have the patience that I should, but I am hanging in there and learning what I can, when I can.  WGT!!

It’s time for JavaScript

Why JavaScript?  Well, how would you feel if the internet was like a book?  I mean, the interaction part of a book (which is none, unless you are counting the pop-up books from kindergarten class).  If web sites had no interaction, do you think the internet would be as popular as it is?  The interaction part is where JavaScript comes into play.  JavaScript can turn a web page into an interactive application as opposed to a static, lifeless page.  Sure you can work some code is CSS and make pages interact with its’ users but not like you can with JavaScript.  JavaScript is a scripting programming language, you can learn to write code to respond to user interactions, like performing calculations, dynamically swapping images on a page, or even validating data.  JavaScript brings a webpage to life by allowing it to respond to a users input.  JavaScript sits with HTML and CSS as one of the three pieces of modern web page construction.  Use HTML for the structure, CSS for style, and JavaScript for the action.

What’s to come?

I have started a new chapter in my journey of web design; JavaScript.  As I work through the book, Head First JavaScript, I will be blogging about what I am learning and will pass along my knowledge as best as I can.  Until next time; Keep Learning – Keep Coding.

WGT!!

The Browsers’ Flow

What am I meaning when I say the browsers’ flow?  Well, flow is what the browser uses to lay out a page of HTML elements.  Browsers will start at the top of the file and follow the flow of elements from top to bottom, displaying each element it encounters.  When the browser comes to a block element it will follow it will a line break.  Inline elements are done a little differently.  The browsers flow will have the inline elements be next to one another horizontally and from top left to bottom right.  As long as there is enough room on one line the inline elements will be next to each other.  If the window of the content is  made smaller, the browser will use as many lines as necessary to display all inline elements (word wrapping).  Furthermore, while dealing with margins of inline elements that are side by side, a browser will keep margins of both bordering sides of the inline elements.  On the other hand, when it comes to block elements the browser will keep the margin of greater size of the bordering block elements.

Floating

The float property specifies whether or not a box (an element) should float.  For every floating element, there is one requirement and that is it must have a width specified for it.  So, for example say we want to float a paragraph which I gave an id of reds:

#reds {
		width:	200px;
		float:	right;
}

First I gave the paragraph a width of 200 pixels (width is required).  Next I used the float property with the value of right.  You have an option of left, right, and none.  If you were to view this in the browser along with the rest of your code, the browser will start reading the file from the top left to the bottom right.  When the browser comes across this paragraph it will float it according to the value of the float property, in this case to the right of the browser window.  Also, it removes the paragraph from the flow of the content; like it’s just floating on the page.  Hence the property name of float.  As the inline elements, that are inside the other block elements, come to the floating paragraph, the inline elements will begin to wrap around to the next line of content.

Types of Layouts

There are so many ways to layout a page.  There is not one perfect way to do it.  Certain content looks better with certain layouts.  You just have to mess around with it and see what looks better.  I’m going to  talk about a few types of layouts.  First is the type of layout called a liquid layout.  They are called liquid layouts because they expand to fill whatever width we re-size the browser window to.  This is useful because by expanding, they fill the space available and allow users to make good use of their entire screen.  This layout will work for some but not for others.  For example, some designers might want their pages to look the same no matter what size the browser window is made.  Meaning, locking down the layout to look the same in small or large windows.  Two layouts will work for this technique and one of them is called the frozen layout.  Frozen layouts lock the elements down (frozen to the page) so they can’t move at all.  Using a frozen layout will allow one to avoid issues that may occur when a user is expanding the window.

#allcontent {
	width:			800px;
	padding-top:		5px;
	padding-bottom:		5px;
	background-color:	#675c47;
}

With the above css rule I have frozen the content of my page to 800 pixels wide.  First thing I did was contain all the content into the “allcontent” <div>. Next I gave the width property a value of 800 pixels.  This is going to “freeze” the main content at 800 pixels no matter how much the browser window is expanded.  Sometimes with a frozen layout the browser window can be expanded enough to make the look of the site just plain awful.  There is a fix for that.  What is the  between state of frozen and liquid?  It’s jello.  The jello layout locks down the width of the content area in the page, but centers it in the browser window.  It is easy to change the layout to a jello layout.

#allcontent {
	width:			800px;
	padding-top:		5px;
	padding-bottom:		5px;
	background-color:	#675c47;
	margin-left:		auto;
	margin-right:		auto;
}

Rather than have fixed left and right margins on the “allcontent” <div>, I set the left and right margins to “auto”.  With “auto” margins the browser will figure out the correct size of the margins for you while keeping in mind that left and right margins are the same, therefore, keeping the content centered.  If you were to make the browser wider the content in the “allcontent” <div> will remain 800 pixels wide but the also centered in the page.

Absolute Positioning

#sidebar {
	position:	absolute;
	top:		100px;
	right:		0px;
	width:		280px;
}

What is absolute positioning?  Well, it’s another way to make a two column layout for your page.  As you see above, I have the css rules for the sidebar <div>.  First thing is the position property with the value of absolute.  When the browser sees this it first removes the element out of the flow of content.  Next the browser positions the element according to the top and right values.  (Could also use bottom and left)  This element will be position 100 pixels from the top and 0 pixels from the right.  Also it will be 280 pixels wide.  After you have the sidebar positioned where you want it you will probably notice that the rest of you content is flowing underneath the sidebar with the inline elements not wrapping around the sidebar. That is because when an element is absolutely positioned not only is it removed from the flow of elements, but it is also completely ignored by the other elements.  As if it isn’t even there.  To fix this small problem you will have to go back and change the right margin of your other elements that are flowing underneath the sidebar to at least match the width of your sidebar if not a little bigger to show some separation between the two.

Fixed Positioning

#redsimg {
	position:	fixed;
	top:		300px;
	left:		0px;
}

Fixed positioning is pretty straight forward.  You specify the position of an element just like you would be absolute positioning.  But with fixed positioning the position is an offset from the edge of the browsers window (view point) rather than the page.  The interesting fact is that once the content is positioned where you want it, it will remain there no matter what happens to the page.   If you scroll up or down that fixed positioned content will stay in the same spot.  With the above css, I have an image with the id of “redsimg”.  I am putting this imagine 300 pixels from the top of the view point, (browser window) rather than the web site page itself.  Also is will be hugging the left side of the screen (0 pixels from the left) as well.  This image will stay at this position not matter what.

Laying it all Out

Making up a website can be very aggravating at times.  There are so many different possible ways to layout your website.  I suggest that you browse the web to get some ideas on what looks good and what doesn’t.  Like I said before, some content looks better in certain layouts than others do.  You just have to play around with it and keep working hard at it.  Don’t be afraid to try different layouts that you might come up with.  What’s the worse that can happen?  People don’t like it and they tell you about it?  Oh well, take their advice or criticism and use it to better your layout.  Like always, Keep Learning, Keep Coding.

WGT!

Okay, okay, okay.  I know what you’re asking.  ’It’s been longer than 2 weeks, where have you been?’  Well…..um…….yeah, I got nothing.  As you may recall, I stopped running due to shin splints.  I usually get them but am able to work through them.  This time around, not so much.  The plan was to take some time off (2 weeks, not 4) and get back into it nice and slow.  The only reason I can come up with is that I just didn’t feel like running.  I was being lazy and I am very unmotivated.  Where did I get my motivation you ask?  Well, my legs are hurting.  I can hear you asking me now, ‘if your legs are hurting then why are you running?’  My theory is if I get my legs back in shape then they won’t hurt anymore.  That is at least what I’m going to try.

My Times

Before I started to run again I asked my friend, Adam, if he had any advice for me.  Adam said, “Just take it nice and slow.  Don’t rush and you will get where you want to go.”  Easier said than done.  I started out at a slow pace to get my legs warmed up.  That didn’t last long.  I was still running at a slow pace of what I thought was around the 12 minutes per mile pace.  Once I reached the 1 mile marker, the app on my phone yelled out ’1 mile in 10 minutes and 30 seconds.  Now, I know that is not a world record pace or even one worth talking about.  But it is faster than I thought I was going.  I was feeling good so I kept up the pace and at the end of my 2nd mile my phone yelled out ’2 miles in 21 minutes and 36 seconds.

Stretch Time

After the run I walked it off a bit and came into my house where I proceeded to drink some fluids and begin to stretch.  Stretching is another thing that I am going to concentrate more on to keep injuries down.  Also, I plan to keep posting my journey in the running world.  I will accept any advice giving to me, and I will send my appreciation your way in advance.  WGT!!

Adding a table of data to your web page can be quit time consuming.  That part I can not help you with.  It is what it is.  However as far as how to put it into your HTML, well, that I can help you with.  HTML has a <table> element that will help out with making tables.  The <table> element starts the whole thing off.  It is what you put first to start the table.  Within the opening and closing tags of the <table> element is where the data will go.  In order to add the data there are other elements that we are going to use.  First will be the <th> element.  This stands for table heading.  It is the heading for the column.  The first row you insert into your table is usually the headings for all the columns.  In case you didn’t know, when making a table you add data to your table row by row.  So, after the <th> element you will add the next row by using the <tr> element, which stands for table row.  Each <tr> element forms a row of information.  To add the information we will use the <td> element, which is table data.  Each <td> element holds one cell of the table and each cell makes a separate column.  You can have as many <tr> and <td> elements as needed to get your information out there.  What follows is an example of a few players on my softball teams stats:

<table>
	<tr>
		<th>Name</th>
		<th>Nickname</th>
		<th>Number</th>
		<th>Position</th>
		<th>AVG</th>
		<th>HR</th>
	</tr>
	<tr>
		<td>Brian Henson</td>
		<td>Sniff</td>
		<td>13</td>
		<td>2B</td>
		<td>.600</td>
		<td>3</td>
	</tr>
	<tr>
		<td>Cory Dorning</td>
		<td>Joggs</td>
		<td>1</td>
		<td>LC</td>
		<td>.601</td>
		<td>5</td>
	</tr>
	<tr>
		<td>Dennis Race</td>
		<td>Dino</td>
		<td>22</td>
		<td>LF</td>
		<td>.450</td>
		<td>1</td>
	</tr>
</table>

Like I said before, you start it off with the <table> element.  After that is the first row of data.  You wrap your row of data with the <tr> element.  What ever is in between the opening and closing tags of <tr> will be displayed as your data.  In the above code I started out with the <th> element.  These are the headings of the columns for my table.  Once I get the headings done I moved onto the data (stats) for the rest of the table.  Remember, each row of data will be wrapped by <tr> and </tr> and this will form on row of data.  <td> is the table data, this is where I added the names of the players and the stats are following.  Each <td> element holds one cell of the table and each cell makes a separate column.  Tables give you a way to specify tabular data in your HTML.  Tables consist of data cells within rows.  Columns are implicitly defined within the rows.  The number of columns in your table will be the number of data cells you have in a row.   In general, tables are not meant to be used for presentation; that’s the job of CSS.

Lets Improve the Table

There are a few ways to improve this ‘plain jane’ looking table.  First we could have a summary to it:

<table summary="This table holds data about the Mens Slow Pitch Softball Class E team named 
'Balls Deep'">.......</table>

The summary will not appear on the web page.  It is purely for accessibility and acts as a bit of text a screen reader may read aloud to a user.  The <caption> element on the other hand:

<caption>
    Balls Deep 2011 Individual Stats
</caption>

The caption is displayed on the web page.  By default, most browsers display this above the table.  Some browsers don’t allow it yet, but if you are not happy with the location of the caption you can use CSS and move it where you feel.

Using CSS to style table

Styling a table can be fairly easy.  First we’ll style the table as a whole.

table {
		margin-left:		20px;
		margin-right:		20px;
		border:			thin solid black;
		caption-side:		bottom;
		border-collapse:	collapse;
}

Here we are adding style to the table.  Both left and right side margins are set to 20 pixels.  The border is a thin solid black line, and I ended up moving the caption from the default location on top of the table to the bottom.  Also if you noticed, the border-collapse property with a value of collapse.  Instead of setting the margin of an individual table cell (cause you just can’t), you will set a common spacing around all cells by using the border-spacing property.  On a personal level, I believe border spacing is a little distracting.  There is a fix for this; the border-collapse property.  This will collapse the borders so that there is no border spacing at all.  Leaving the table cells boxed in with a single line.  You can also change the style for the table data cells:

td, th {
	border:		thin dotted gray;
	padding:	5px;
}

Nothing to major going on here.  I simply made the border a thin dotted gray line and added 5 pixels of padding in the table data cells.  How bout we add a little more style to the table to make it stand out a bit more:

th {
	background-color:	red;
}

.cellcolor {
	background-color:	gray;
}

Here I am making the background color of the table headings to red to make the headings stand out a little more.  Also, I am going to give the remaining table rows a ‘stripped’ effect.  This will allow users to more easily see each row without getting confused about which column goes with which row.  I defined a new class and called it cellcolor and gave it a back ground color of gray.  The CSS part of it is done.  Don’t forget to add this attribute in your HTML code to each row you want to add the gray background color to, like so:

<tr class="cellcolor">
		<td>Brian Henson</td>
		<td>Sniff</td>
		<td>13</td>
		<td>2B</td>
		<td>.600</td>
		<td>3</td>
</tr>

This will make this row gray.  The next row will have the default color, the next gray, and so on.  Giving the rows alternating colors for their background.

In the End

Tables are a good way to present a lot of data to your users.  Try to keep your tables organized and keep useless data out.  Tables can get to a point where they are presenting to much data, (just to big of a table).  Style the table where it is easy on the eyes of the users.  Practice around with different color and font variations until you feel like you have the right combination.  In the end….Keeping Learning, Keep Coding.  WGT!

If you ever been on the web you know what a form is.  Anything from filling in your username and password to filling out your billing address and shipping address.  But, do you know how they work with HTML?  Well, if you don’t you came to the right place and I thank you.  A form is basically a web page with input fields that allows you to enter information.  When the form is submitted, that information is bundled up and sent off to a web server where a web application processes the information.  After the processing is done, a response in the form of another web page is sent back to you to see.

Browser’s Job

First the browser will load the HTML code like it would any other time.  When the browser encounters the form elements it will create controls that allows you to input various kinds of data.  Controls are simply just something like a button, text input box, or a drop down menu (more info and these later) – basically just something that allows you to input your data.  So, you use the controls to enter your data and you press the submit button.  Hitting the submit button cues the browser to package up all your data and send it off to a server.  Once the server receives the data, it passes the data onto a web application for processing.  This processing results in a new web page.  Since the new web page is simply just another page of HTML, you get a response in the form of a new web page.

What can go in a form?

Just about any block element can go into the form element, but we are most interested in the form elements that create controls in the browser that allow users to enter their information.  The first one is the text  input element.  It is used for entering one line of text and optional attributes can be used to control the maximum length of characters and the width of the control.  As follows:

<input type="text" name="fullname" maxlength="20" />

In the input element, using the ‘type’ attribute of text creates a one line control in the browser page.  The ‘maxlength’ attribute sets the maximum length of characters to 20.  Most form elements require a name that is used by the web application which allows the sever and web application to process the data and return a response correctly.  The submit input element creates a button that allows you to submit a form.  This is the button that you click in order to tell the browser to package up the data and send it off to the server where the web application is waiting for it.

<input type="submit" value="click to send to server" />

The input type is submit.  That is what makes the button on the browser.  The value attribute is where you type in what you want the button to say.  For example, most people put ‘send’ or ‘submit’.  It’s your choice but make it appropriate.  After someone has filled in their information in the form, they will click on the submit button and off goes their information to a server.  Another input type is the radio button.  The radio input element creates a single control with several buttons.  Only one of these buttons can be selected at once.  Think of it like an old school car radio.  Where when you push one button in and the rest pop out.

<input type="radio" name="hotornot" value="hot" />
<input type="radio" name="hotornot" value="not" />

For each choice you have to use the radio input element.  Also, all the radio buttons associated with a given set of choices must have the same name.  On the other hand, each choice will have a different value to choose from.  The checkbox input element is another way to input information on a form.  It creates a checkbox control that can be either checked or unchecked.  You can use multiple check boxes together, and if you do, you can check as many or few as you like.

<input type="checkbox" name="sports" value="baseball" />
<input type="checkbox" name="sports" value="softball" />
<input type="checkbox" name="sports" value="bowling" />

Just like the radio input element, here you will use the checkbox input element for each choice.  Also, related checkboxes will share the same name.  And you guessed it, the value will all be different.  Okay, so far we have talked about input elements for a form.  That is not all that can go into a form.  What if you want someone to leave comments on your page?  They would need more and one line of text to do so, usually.  For this we can use the textarea element.  It creates a multi-line text area that you can type into.  If you type more text than fits in the area, a scroll  bar will be used to see all the text.

<textarea name="comments" rows="10" cols="48"></textarea>

First, the textarea element is not an empty element so it needs both opening and closing tags.  Again, use the name attribute to give the element an unique name.  Next, the rows and cols attributes tells the browser  how many characters to make the text area.  The select element creates a menu control in the web page.    The menu provides a way to choose between a set of choices.

<select name="reds">
	<option value="votto">Joey Votto</option>
	<option value="bruce">Jay Bruce</option>
	<option value="phillips">Brandon Phillips</option>
	<option value="stubbs">Drew Stubbs</option>
</select>

The select element goes around all the menu options to group them into one menu.  Also, just as before, give the select element a unique name using the name attribute.  The option element works with the select element to create a menu on your web page.  You use the option element for each option in your menu.  The content of the option element is used for the menu items description.  Each menu option also includes a value representing the menu item.

The <form> element

Okay, now that I have told you some of the things that can go into a form, what is the next step?  That is creating the form.  You ready for this?  To create a form,  you must use the <form> element.  Crazy, right?  The <form> element holds all elements that make up the form, and also tells the browser where to send the information entered in the form.  When it comes to creating the form, the first thing you have to know is the URL of the Web application that is going to process your form data.  Once you know this all you have to do is plug it into the action attribute of your form element like this:

<form action="http://www.thedennisrace.com/processcomments.php" method="POST">
<!--Input elements will go here--!>
</form>

First is the opening tag of the form element, and I went ahead and added the closing tag as well.  The action attribute contains the URL of the web application that will do the processing of the form once it is submitted.  Also, we are using the method attribute with the value of post.  There are two primary methods the browser uses; post and get.  They both accomplish the same thing but in different ways.  Post packages up your form variables and sends them behind the scenes to your server.  Get also packages up your form variables, but appends them on the end of the URL before it sends a request to the server.

Last step

After all you have read about forms and the controls that can go in a form, what is the next thing to learn?  Well, that is for you to find out.  You can start by writing some code and just doing it.  Just make forms.  Use all the above information about controls and input types and put them in between the opening and closing tags of the form element. Play around with it until you are perfect at it.  Make up various forms for various situations.  The more you code the more you learn.  Well, on that note….

Keep Learning, Keep Coding  WGT!!