HTML5 “ecard”

Posted on June 24, 2011 by Pedro

So…today is my brother’s birthday.  He’s a nomad who is always on the road to exotic locales managing the lights for none other than Alice Cooper.  Along the way he posts pictures of his travels to Facebook for those of us stranded in the American mid-west to follow along.

What do you get someone like that for their birthday?  Usually I try some gimmicky travel gift that he can take on the road with him, with mixed results.  This year, I bought him a domain and made him an eCard using full blown HTML5/CSS3. Huzzah!  Once again, I might be more excited for his gift than he is.

ChasAlbea.com - Ecard

It's a paperless birthday card! You see? HTML5 is good for the environment...right?

This is technically my first full foray into the world of HTML5.  I’m technically delving into that at 501creative right now, but that project isn’t finished whereas this one is. I thought I’d write about some of the new tools and tricks I used for those interested.

First of all, let it be known that I am in no way a designer.  I don’t know jack about color palettes, typography, hierarchy, and just general form. I go to professionals when I need something to look spiffy.  I’m just a coder.  So if you’re laughing at my awesome background tiles, don’t be jealous.

Now for a general skeleton I used the HTML5Reset. It’s a great resource for getting off the ground with a basic HTML5 document.  It comes with robot.txt, index.html, a jQuery implementation (because everybody seems to be using jQuery these days), modernizr for IE, and a full blown CSS Reset.  You basically can just chop off what you don’t need and get to work.

What’s made me nervous the most is the use of <section> and <article> and when to use one of those instead of a <div>.  I’ve read Jeremy Keith’s HTML5 for Web Designers and browsed the online copy of Mark Pilgrim’s Dive into HTML5 and still use div’s.  I decided the real meat and potatoes of the page was the map and made that an article.  Everything within (the unordered list of locations and the birthday message) is related towards the message that my traveling brother’s birthday is today.  Non-semantic elements (like the wrapper div for my bro’s picture and the site’s container) are just simple divs because they’re really just there for styling purposes.

“Why use a secondary div for your brother’s picture instead of multiple backgrounds?”, you ask? I originally rocked the multiple backgrounds for that but that caused no backgrounds to show in Internet Explorer.  If it was important enough, I’d throw CSS3Pie at it.  My personal view on CSS3 techniques is that they should be used to add to an already solid experience.  If they’re used more for speed and efficiency, then maybe CSS3Pie would be needed so that at least IE can keep up.  For the most part, rounded corners are not important.  Drop shadows are not important.  Multiple backgrounds (if used to just create visual textures) are not important.  If viewers want to see those bells and whistles, they should try a browser designed to display the web like it’s meant to be seen and not Internet Explorer 5-8 which seems to have its own agenda. With this site, the multiple backgrounds are necessary.  I needed the map to show up and, for future updates, I need my brother’s picture to also show up, even in IE. Instead of throwing CSS3Pie at it, I decided to cut IE a break and just add the div.

The pins are an unordered list of links, absolutely positioned in place (thank you Google Maps!).  Each link has a &nbsp; and a div containing the image and location caption.  On hover, I display the photo.

The only other CSS3 technique used is border-radius to Web 2.0 the whole thing.  Like I said before, I’m not a designer but hear these rounded corners are the latest and greatest thing!

So there you have it!  Happy birthday to my bro!  Here’s to 27 years of you being cooler than me! Here’s to venturing into new territory!  Here’s to HTML5 and CSS3!

Posted in Web Development | Tagged , , , | Leave a comment

Super 8

Posted on June 13, 2011 by Pedro

Super 8

At its core, Super 8 is a monster movie.  If I were asked to sum it up in one sentence as simple as possible, that would be my response.  That said, it’s also so much more than that. It has everything a big, blockbuster classic-in-the-making should have: humor, excitement, beauty, thrills, mystery, and emotion. It wasn’t a movie I was really excited to see (the trailer was just too mysterious to get excited about), but, now, Super 8 is my prediction for the best film of the summer.  No wait…the year!  Well…maybe even better than that.

Amblin Movies

Goonies and E.T. - Other Amblin Films with Strong Child Leads.

The film is centered on a group of kids (a la other Amblin movies The Goonies and E.T.) trying to shoot a zombie movie in what I can only guess is the late 70′s.  While shooting in the middle of the night, they witness a train crash which, unbeknownst to them, unleashes a creature from containment. The remainder of the film focuses on the investigation of the kids as they try to find out what is going on as the town is quickly taken over by the Air-Force.  There are plenty of sub plots and some interesting drama between the various families which I found to be the real gem of the movie.

The performances of the child actors was outstanding.  There were moments where they made you feel so much and usually without saying a word.  Their range was impressive. They really captured what it felt like to be a kid at that age.  They were intelligent yet childish.  They weren’t some bratty kid with one gimmick the whole movie, but fleshed out characters. The relationship between the male and female leads, Joel Courtney and Elle Fanning, was probably my favorite part.  Both were children to parents who were conflicted due to a past tragedy yet their children found ways to look past that and see each other with a depth that you don’t see too often in adult trained actors.  It was a treat to watch.

If there was anything to nitpick about the movie for me it was the creature.  While it was far from harmful to the movie, it visually didn’t seem all that impressive and I couldn’t even make out what it was for the most part.  Purposefully dark and blurry through out the whole movie, you never got a really solid reveal.  You see it plenty of times enough but it’s usually a close up or a fast action sequence or it’s obscured or far away.  I couldn’t even draw it for you accurately if I saw the movie another time or two.

Creature design aside, the visuals in this movie were outstanding.  Big scenic shots to the chaos of a train crash.  Cluttered children’s rooms to a small town under siege by the tanks to the breathtaking finale. It was one beautifully shot scene after another.  It really captured the era to my understanding.  It took place before I was born, but I still had that feeling of nostalgia from growing up back when you stayed out late with your friends, riding your bikes where you needed to go.  It felt very much like the other Amblin movies in that way.

All in all, I can’t remember the last time I left the theater loving a movie this much.  It’s, by far, the best film I’ve seen in a long, long time and I’m going to go ahead and claim it as my current favorite.  It made me jump a few times, I was enthralled with the characters, and really enjoyed the ride. Another hit for J.J. Abrams and Co.  5/5

Posted in Movies | Tagged , , | Leave a comment

Summer Man Day 2011

Posted on June 13, 2011 by Pedro

Saturday was my annual opportunity to embarrass myself in front of 40+ other “manly men” in this year’s summer Man Day.  For the 99.99999% of you who have never heard of it, it’s a little event (run by Sean Wright and Greg Austermann) that occurs twice a year (one summer and one winter) where 50+ men gather to compete in a series of sporting events that I have to assume are manly in some way.

The day starts with a round of par 3 golf.  At this stage, you’re “randomly” paired up with another guy and you two play a scramble (each player hits and you play the best ball).  Each pair travels with another to prevent cheating.  I quoted the word randomly because, this year, my foursome included my only three friends that I knew at this thing.  What a coincidence.  We also are the four worst golfers so our day didn’t start off so well.  I had a blast because I got to play 9 holes with people I knew, but I’m pretty sure both pairs finished dead last in that event.

After golf comes a rigorous tournament of dodgeball where you get to see a clear division between the people who are there to win, the people who are there to get drunk, and those there just to participate (like myself).  There’s always tons of posturing, cheating, and arguing at this point.

Following dodgeball, they bring in like 30 pizzas and everyone pigs out before continuing on to kickball and then whiffle-ball on a full stomach.  As an added bonus, all tie breakers are decided with a five man beer chug. Good times! Some of those guys can throw a whiffle-ball so fast, you can’t even really see it.  A guy on my team this year was actually knocked out for a second when he took a pitch to the temple.  He literally dropped like a sack of potatoes…in whiffle-ball.  Man Day indeed.

After all of that craziness we cool things down with washers.  The winner is then calculated by individual scores for the day:

  • Golf pairing’s score based on ranking
  • Dodgeball team’s score
  • Kickball team’s score
  • Whiffleball team’s score
  • Washers pairing’s score based on ranking

The winner gets some cash I believe. I wouldn’t know.  I believe my best finish was a tie with three other people for 15th place last summer. The loser gets the most dreaded trophy: the golden vagina.  It’s a heavy gold plated chain with, what appears to be, a gold plated die-cut vagina as the pendant.

My first year, my friend Gabe and I entered together and Gabe won the Golden V.  This year, he brought his friend, Shane, with him and Shane went home with the V this time.  Our little circle of friends seems to have a lock on that thing.  I can only dread when it’s my turn.

And now, for a visual record of how bad we are at golf, I recorded a few holes to demonstrate our “mad skillz”.  Enjoy.

Posted in Health | Tagged , , | Leave a comment

Paleo in the wild

Posted on June 7, 2011 by Pedro

This weekend marked my first foray into camping with only Paleo permitted foods available for sustenance.  Well, that’s a bit of a stretch.  I’m sure I could have eaten non-paleo foods if I really wanted.  Our campsite was only 20 minutes from a Walmart and everyone else I was with was eating brats, sugar coated desserts, granola bars, etc.

As of Friday, when the trip started, I was on day 8 of eating exclusively Paleo so I’m still a bit new to it.  Here’s a list of what I typically have eaten in the past:

  • Orange juice
  • Eggs
  • Bacon
  • 2 Bags of Bratwursts
  • Hotdog Buns
  • 3 bags of chips
  • Beer
  • Whiskey
  • Vodka (Okay so maybe I had a small problem)
  • Pepsi
  • S’mores
  • Hamburgers (cheapest lean meat I could find)

What I went for this weekend was all fresh vegetables and grass fed meat.  I thought it would be a lot of work and be crazy expensive, but it ended up being a breeze and much cheaper.  Here’s what I went with:

  • Breakfast: 3 scrambled eggs, slice of ham
  • Snack: 2 hard-boiled eggs, yellow bell pepper (ate it like an apple…first time I tried that…)
  • Lunch: Chicken breast (grilled before the trip), nuts
  • Dinner: Filled a pot with 8 ounces of ground beef, probably a third cup of olive oil, a zucchini, a bell pepper, broccoli, and shredded red cabbage.  Stirred over the fire for about ten minutes.  Amazing.
  • Drink: Water

I think when all was said and done, it was about $21, I had a hard time eating everything, and I wasn’t hungry in between those three meals each day (even with a 7 mile float involved).  That’s a success in my book.

Posted in Health | Tagged , , , | Leave a comment

Submitting a form when a select element is changed using jQuery

Posted on June 3, 2011 by Pedro

Here is something I do fairly regularly as the designers I work with like to create “slick” looking html forms but frequently leave off a button to submit the data.  Usability issues aside, this isn’t really anything to panic about.

First things first, we’ll need a form.  Here is a sample form:

<form id="fruit-processor" action="process.php" method="post">
	<select name="fruit" name="fruit">
		<option value="-">-</option>
		<option value="apple">Apple</option>
		<option value="orange">Orange</option>
		<option value="banana">Banana</option>
	</select>
	<input type="submit" name="submit" id="submit">
</form>

You’ll notice that I included a submit button even though we have no intention of it showing up on the page.  Even though the percentage of users who disable javascript is pretty small, I still like to build my sites as if javascript is disabled and then have the javascript alter the content itself if something isn’t meant to be there.  That way, everyone gets a fully functional website!

The next step is the javascript.  We’ll create a file called fruit.js which will contain:

$(document).ready(function() {
	$('#fruit').change(function() {
		$('#fruit-processor').submit();
	});
	$('#submit').hide();
});

Here we will wait until the DOM is loaded before we start mucking around with things with:

$(document).ready()

When it’s loaded, it will call the function passed to ready().  In this case, we target the select element whose id is fruit.  We then register an event listener for the onchange event using jQuery’s change function:

$('#fruit').change()

This function takes a function as its argument that will be executed whenever the control is “changed” or altered.  In our case, when this happens, we target the form itself and chain it to the submit method.

$('#fruit-processor').submit();

Submit can be run as either a listener in and of itself (in case you want to do something when the form submits) or you can call it with no arguments to submit the form.

The last task is to hide the submit button that we put in there for non-javascript users.  We target the submit element and then call jQuery’s hide function which will basically set it’s display to none.

Now that our code is complete, we just need to include it in the source of the page.  I like to keep my javascript at the bottom before I close the body tag so it doesn’t cause the valuable content to hang.  I believe more modern browsers have gotten over the previous restriction of only being able to download two resources at a time, but better save than sorry.

Since this runs jQuery, you’ll have to include it first.  You can use a local copy that you’ve downloaded or you can link to an external copy.  I like to link to google libraries’s code api and don’t include the revision number so that I always get the latest revision of the version I want to work with.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fruit.js"></script>

There you have it!  Simple jQuery form modification like this isn’t anything to be worried about.  Maybe next time I’ll come up with something that takes more than four lines.

Posted in Web Development | Tagged , | Leave a comment

Hello Internets…again!

Posted on June 1, 2011 by Pedro

This is probably the fifth time I’ve started a blog.  Every time I begin with a purpose.  “I’m going to contribute with the web development community by posting how-to’s!” or “I’m going to talk exclusively about movies!”.  Well, ultimately I give up because…well…I don’t always want to write about that stuff.

So here we go again.  I’m rocking WordPress even though I’m a Drupal guy.  For blogging it works right out of the box and I should probably spread my knowledge about anyway.  I hope that, with time, I’ll clean this site up.  I’ll theme it in something that I’ve designed and written.  I might even throw a portfolio up.  Look out!

This time I’m coming it with no focus.  Instead I’m just going to try and write often and hope not to bore anyone who wanders onto my little piece o’ the internet.  I’m an avid gamer (with a focus on boardgames and table top rpgs).  I love me some movies (blockbusters and rom-com‘s).  I’ve recently adopted the Paleo diet and have been working out at dawn every morning and learning to actually cook.  Finally, I’m a professional web developer working for nonprofits through 501creative and trying to start up my own small shop on the side with a few friends of mine over at Heroic.  The general plan is to keep you all abreast of what I’m up to on all of the previous topics and any new that find myself obsessing over in the future.

I’m feeling pretty good about this.  Wish me luck!

Posted in Miscellaneous | Leave a comment