The first in a series of posts about how I built jrm.cc

This revision of my site is pretty complex. I wanted to meld all my previous sites into one big conglomeration site, so picking WordPress was a default choice for me for a few reasons. Two very important reasons: Themes and Plugins. This post is going to focus on the Plugins I use.

I made a few plugins for WordPress1.2, but 1.5 blew me away. The number of hooks, the functionality you could tap into without modifying the core of WP, is amazing. The plugin architecture for WP has let me do a lot of things that keep this site running.

Plugins

There are several plugins I use to put this site together including:

• CSS Compress -- The blog is compressed, why shouldn't the CSS be too?
  
• Favatars -- A simple way to personalize comments for your visitors.
  
• Live Comment Preview -- Who can say no to seeing yourself type in two places at once!
  

All great plugins I made that you just upload and activate. Real simple, big payoff. However, the two important plugins which I really want to talk about are Post Templates and Text Control.

h4. Post Templates

Post Templates is a plugin I made just for this site. WordPress has this really nice ability to create custom template files for Pages, but there are no templating options for Posts. Seeing as I wanted my portfolio, blog, gallery, links, and most other things on this site to be posts I needed a way to a show different "single.php" templates for each kind of post. Thus "Post Templates" came into being.

Post Templates allows you to create php files that look a little like

<?php /*
Post Template: Play
*/?>
<?php get_header(); ?>
regular single.php stuff...

And when you publish a post you may choose which template the post will take on when being displayed as a single post. So, if I have "gallery.php", "blog.php", and "link.php" my gallery posts will look different from my blog, from my links, and so on.

However, I wasn't satisfied -- setting the post template for every article is tedious. So I extended the plugin to allow you to set a default post template for entire categories. This way you can default any post in the "Gallery" category to take on "gallery.php" when displayed alone. Extremely useful for making the site look different category to category without having to hack the hell out of your "single.php" file.

If you are interested in trying Post Templates, you are welcome to do so but there is no documentation for the plugin yet. Here you'll find the source code to Post Templates.

Text Control

I've been fascinated by text formatting and the multitude of options you have when writing on the web: Textile (1 and 2), Markdown, HTML or just plain text. I like playing with each, writing in a different one here and there. So when I discovered that WordPress supported (almost) all of them, I was really happy. Until I found out that it only supports one at a time, that is.

The problem is that the default WordPress Textile/Markdown plugins assume complete control over the blog. You are either Textile, Markdown, or neither for everything: posts, pages, comments -- everything.

Text Control allows you to take control of how you format your blog. You can set defaults for the blog to wpautop (the basic wordpress plain text formatter), turn all formatting off, use Textile1, Textile2, or Markdown. You can also set a default for comments separate from the blog default. After you've set the defaults, you can change the formatting option on a post-to-post basis. You are in control!

Not stopping there, I added the ability to change the way character encoding is done. You can pick from no encoding, wptexturize (the default), or SmartyPants.

If you'd like to check it out, Text Control is fully documented and ready to go.

Other Plugins?

Nope, not really. I don't use many others simply because I haven't found a need for them. However, there are slews of other great plugins our there. You can find them all over the place.

Next up: Themes...

After 2½ years of hard work, I will be graduating The Art Institute of California — San Francisco with a Bachelor's Degree in Multimedia and Web Design.

An important part of my graduation, and every senior's path at this school, is the Portfolio Show. The Portfolio Show is, for many who graduate, more important than the actual cap and gown ceremony. Portfolio is the culmination of several years of work to be showed to other graduates, family, friends, and industry professionals.

Come, help me celebrate this occasion! If you'll be attending, go ahead and leave a comment here just so I know.

Portfolio Show Details

Graduation Details

As of yet, the location for the graduation ceremony is unknown. However, it will be held the following day, June 17th. I'll update later with more details.

Originally written for the SWAP Club at my school, this article now lives on here.

Encoding video for the web and getting it onto your website can be a time consuming and frustrating experience. These steps will make the process simple and easy.

Media Formats

There a slew of various media players and formats to choose from, here's a few of the major players:

We've chosen to use QuickTime for this demo because of it's support for the excellent MPEG4 video encoder as well as it's availability and ease-of-use.

Quicktime Encoding

Before you begin encoding your video for the web, you will need to get it out of your application in one of two formats:

Perparing an Image Sequence

If you are working from a sequence of images, QuickTime can be used to create a movie out of these in just a few steps. Once you have a .MOV file, you can use the demo in the next section to create a web-ready video file. This demo will show you how to import an image sequence into QuickTime.

Encoding a Movie (.mov)

Once you have a movie you are ready to work with, it is time to export it for web playback. This demo will show you how to encode your .MOV files for use on the web.

Web Page Embedding

Now that you have you video encoded for web playback, you'll need to setup a webpage to play it. We're assuming you know how to upload the files via FTP and already have your HTML pages set up. This will show you what code you need to add to make the videos show up.

Basic, Auto Start

First, lets get the basics of embedding covered. There is a single HTML tag required to embed a video <embed></embed>. This tag has four primary attributes which are required to embed video.

Here is an example of a streamlined embed tag for a video clip at 320px wide and 240px high:

<embed type="video/quicktime" src="mini-ad.mp4" width="320" height="256"></embed>

This tag has four attributes:

1. The type attribute tells the browser to use the QuickTime plugin.
2. The path to the movie that you want to play is inserted into src="".
3. The height of the movie in pixels is inserted into height="".
4. The width of the movie in pixels is inserted into width="".

Important! You'll notice that for a movie with a height of 240, the attribute for height is 256. This is critical because the frame for the player must include 16 pixels of height for the playback bar. Just remember, always add 16 to the height of your movie's height for the playback bar.

While this would embed a video into your webpage, there are several other parameters which can be added to give you more control.

View an example of the basic embed tag →

Wait To Play Movie

Sometimes, you may not want the movie to automatically play. To accomplish this you'll need to add a new attribute to your embed tag: "autoplay".The autoplay attribute should be set to false. Here is an example of the revised embed tag:

<embed type="video/quicktime" src="mini-ad.mp4" width="320" height="256" autoplay="false" ></embed>

View an example of the "Wait to Play Movie" →

Still Frame, Click to Play

Other times, you may want the to show a single frame from the movie, and wait for visitors to click it to begin playback. This method is great because it will only load the small preview movie, and reduce load time and save bandwidth. This method requires two additional attributes in the embed tag along with an extra mp4 or mov.

Single Frame Movie

To create a still frame movie, follow these steps:

1. Create an image to use in Photoshop
   The dimensions should be the same width as the movie, but 16 pixels taller than the movie.
2. Save the image as a JPEG
   Menu "File" > "Save as..."
3. Open QuickTime and open the JPEG file.
   Menu "File" > "Open movie in new player"
4. Export the JPEG as an MP4 Video
   Menu "File" > "Export"
5. Save as an MP4 video

You now have your still frame movie.

The embed tag and extra attributes

The extra attributes are href and target.

Here is a modified embed tag for a "Single frame, Click to play" video:

<embed type="video/quicktime" src="mini-preview.mp4" href="mini-ad.mp4" target="myself" width="320" height="256" controller="false" autoplay="false"></embed>

In this example, SRC is given the path to the single frame movie called "mini-preview.mp4". This is what will be initially shown. HREF is given the path to the movie, "mini-ad.mp4". This is movie will play when visitors click in the video area. Target="myself" instructs the movie to replace the single frame movie with the full movie. Finally, the attribute CONTROLLER set to false hides the playback bar until the movie starts.

View an example of the "Single Frame, Click to Play Movie" →

Extra Precautions

Because no two computers are alike, it's very common for some visitors to not have the QuickTime plugin installed. Should this be the case, the pluginspage attribute can direct the browser to where to download the plugin. Additionally, in cases where the user can not see or hear, the alt attribute will be given to them in place of the movie..

• pluginspage
  Provide the browser a link to where an updated quicktime player can be found.
• alt
  Added as an alternate message for the visually impaired to read

Here is an example of these properties in action:

<embed type="quicktime" pluginspage="http://quicktime.apple.com/" src="mini-ad.mp4.mov" width="320" height="256" autoplay="false" alt="This is a test movie."></embed>

Links

So You Want to Embed A Video, Huh?
http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061

Embedding Video
http://www.fluffbucket.com/nsc/videoadd.htm

Special Thanks

Thanks to Ian Jones, an animator at the Art Institute, for the use of his work for the video clips here.

Complete Overhaul

I was tired of maintaining separate sites for my blog, my personal projects, and my portfolio. It was disconnected and hard to keep things in sync. It was time for a redesign.

Part of this redesign was to move away from the domain “creatimation.net” — mostly because it’s quite difficult to spell. I’ve had the domain going on 5 years now, but it’s time to get a little more professional and recognizeable. My initials (jrm) seemed like a good way to go — not to mention the fact that I actually found a domain name with three letters :D

From Scratch!?

No, actually not from scratch. Most of the content existed on one of three previous sites:

1. thecodepro.com — my portfolio
2. creatimation.net — blog and personal projects
3. hq.servequake.com — community blog I run from home

I took content from all of these places and put it all here. It will be easier to keep it together, redesign for the future, etc. Consolidation just seemed like the right thing to do when it was time to completely reinvent my web presence.

Complexity Simplified

Being that I am a big WordPress fan, I invested a lot of time in discovering if the platform would be up to the requirements of what I would want it to do for this site. Suffice it to say that next to nothing on this site is done outside of WP now.

Being able to manage my portfolio, blog, link log, static pages, and gallery all from one simple interface is, quite simply, awesome. It makes entering new things, and keeping the other fresh and valid really easy.

WordPress also happens to be flexible enough (Themes and Plugins) that I’ve been able to add all the custom functionality I need, without having to worry about upgrading the core package.

“Oh man! Where did XYZ go?!?”

As part of the redesign and change over, I’ve moved from the previous domains to this one — somewhat throwing a lot of stuff out the window. If you are desperately searching for something I used to have around and can’t find it anymore, just send me an email and I’ll get it to you. I still have most everything around somewhere.

Headed to the Ramada Hotel for this quarters portfolio show. First impression was, “Wow, this is a really nice place for the show.” You see, the last two shows we’re pretty aweful in terms of their location. The first I went to was in the school lobby – which is far too small, cramped, and just not cool. The second one was in a bar at the theatre next to the school – again, small but add on to that poor lighting! Yay!

I was primarily there to see my graduating classmates:

Bernie Valdez

and

Brian Crabtree

Brian’s booth was particularily impressive – custom built metal structure and one wicked portfolio book. (And rumor has it that whole thing costing as much as a quarter of tution!)

All in all, a very nice place, good work from the students, and – woah – look at these extras! A stage for a mini-fashion show, a theatre like area with a large screen plasma TV for animations. Space to move around, lots too see. Impressive. The fashion students work this semester was particularily above par:

Suzy, Jorge(designer), and a model I don’t know

Awesome

My “hero code": 2.0u*m1*ChuySkywalker*Hair:Standard, samurai1, 9C4108, 940018, 100, 100, 23, Eyebrows:Standard, eyebrows1, 8D6531, 724D21, 100, 100, 21, Eyes:Standard, newplain, FF0000, CEA66B, 100, 100, 20, Nose:Standard, thincurve, CEA66B, CEA66B, 100, 100, 27, Mouth:Standard, smirk, 636363, AC814A, 100, 100, 18, Beard:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 26, Ears:Standard, fraBlank, 724D21, AC814A, 100, 100, 19, Skin:Standard, wounded, EFD3C6, EFD3C6, 97, 100, 6, Mask:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 22, Headgear:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 29, Undershirt:Standard, tank, 434343, 181818, 100, 100, 7, Overshirt:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 8, Coat:Standard, trenchopen, 202020, 000000, 100, 100, 25, RightGlove:Standard, bandwrap, DDDDDD, 4B4B4B, 100, 100, 17, LeftGlove:Standard, bandwrap, CFCFCF, 434343, 100, 100, 16, Insignia:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 9, Neckwear:Standard, Shoufa, 312829, 312829, 100, 100, 24, Belt:Standard, crossingguard, 312829, 53453A, 100, 100, 15, Leggings:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 10, Overleggings:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 11, Pants:Standard, slacks, 313131, 181818, 100, 100, 14, RightFoot:Standard, floppy, 53453A, 312829, 100, 100, 13, LeftFoot:Standard, combatboot, 53453A, 312829, 100, 100, 12, Back:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 3, Wings:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 4, Tail:Standard, fraBlank, FFFFFF, FFFFFF, 100, 100, 5, Aura:Standard, spacedots, 5A5A5A, 4B4B4B, 100, 100, 2, Companion:Standard, wolf, 53453A, E7E7E7, 100, 100, 31, Background:Standard, fullscreen, 434343, E7E7E7, 100, 100, 1, RightHand:Standard, daimo, E7E7E7, 724D21, 100, 100, 30, LeftHand:Standard, staff, 734901, 6A0108, 100, 100, 28, #

Well that was fun. :D

Definately expect a repeat performance in the months to come. ;)

Being that the housing checks have come through, I consider these my “Good job, you made it another 3 months in school.”

iPodShuffle

If you haven’t heard about or seen these yet, they’re pretty nifty. Big as a piece of gum, and a little thicker, holds 512mb or 1Gb of songs. I got the 1Gb version, since I figured I might as well get the big one.

I also got some sony headphones to go with the iPs

Nvidia 6600GT AGP

Pretty graphics. Very, very, pretty pictures. Yay.

Creative Speakers

Nice set of speakers and a sub, with a fun little volume dial that has ports for headphones and microphones.

I just finished watching Hotel Rwanda and I am astounded. Our ability to despise and hate one another based on this that or the other factor has plagued us since we began talking.

Genocide is a horrifying and frightening issue to deal with, but one that our race is still dealing with. This movie has to be the most intense display of how inhuman humanity can be.

The acting was amazingly real as well. From Paul, the main character, breaking down in the dressing room to his wife at the discovery of their lost nephews, I was thoroughly convinced the whole way through.

If you have the time, and a box of tissues, and a strong stomach*, I highly reccomend you see this movie.

“They say there isn’t room. “
“There is always room.”

* = The movie is not graphic, but extremely powerful in it’s portrayal of the violence.

With the news today about Apple offering a barebones computer system, the Mac mini, at a rock bottom price, and after seeing the new XServe upgrades a day ago, I got to wondering - is Apple spreading themselves to thin?

Apple has always had a strong presence with their customers. Loyalty is the name of the game in Apple fanboi land. I, and many others, have generally had fantastic experiences with Apple Co. in terms of dealing with them for sales, support, and service.

This move, and the push Apple is making into the server market, is good news for Apple. More market share and better brand reconigition across a wider board - all of it leading to higher profits and bigger margins. (At least that’s what their hoping )

However, the draw of this new mac worries me. Some people speculate that this Mac mini is designed to be an “accessory” to the iPod lifestyle. With the extreme popularity of the iPod, and the apeal of a hassel free, cost effectiv machine looming on the candy-like horizon, I can only expect these to fly off the selves.

Good news for Apple - bad news for customers?

I am happy with these new options - I just hope that if the demand for these is a big as people are expecting it to be, that Apple will handle the increase in customers and support issues graciously. Without the “Apple Experience” buying a Mac would really loose its luster.

Happy New Year!

I hope you all have a great 2005.

Our blog is off to a great start for 2005 as well. Accumulating over 1,000 spam messages since last night alone! Yay, fun!

As a perventative, I have activated a spam filter plugin called wp-hashcash. It uses a combination of server-side and client-side MD5 authentication to verify that posts actually come from a browser and not just some spam bot. I’ve also changed a few file names to prevent direct posting. All in all, since I made the change: 0 spams. Go figure.

In addition, I took the time to update from WordPress 1.2 to 1.2.2 (various bug fixes etc).

What does this mean for you? A whole lot of nothing - users here will see a different login screen, but that’s it.

Starting with the WordPress Favatar plugin from Noscope, I have reworked it to do several neat things:

1. The favicon discover process has moved from page load to post processing. This means that instead of looking for favicons every time someone reads a post, it only does the hard part when you post. Much better.
2. The above is achived by adding a column to your `comments` table. The plugin is designed to automatically attempt to create this field if you don’t have it.
3. This version will not only attempt to auto-discover the favicon URL by downloading the webpage at the users URL, but it will also test the favicon URL for a 200 OK header just to make sure it’s really there. (This is nesecary in cases where the favicon URL is guessed by simply plopping “/favicon.ico” at the end of the URL)

Also, I’ve only tested it very rudimentarily on this site. The code is very, very beta 1 and will most likely not work perfectly. Also, I don’t know if it works with 1.3 either.

That said, please download favatars-revised.rar and let me know how it goes.

Big Update

Now it works with Trackbacks and Pingbacks. However, you must edit another file first.

There is a bug in `wp-trackback.php` that stops the plugin from working the way it should. At line 88 and 89 you will fine:

	trackback_response(0);
	do_action('trackback_post', $comment_ID);

The problem is that the function `trackback_response` calls `die()`, thus you never get the actions applied. SOOOO, the solution is to simply FLIP those two lines. You end up with:

	do_action('trackback_post', $comment_ID);
	trackback_response(0);

Also, I don’t know about you, but whoever wrote this went a little nuts with the “add_slashes” on the author for track backs. Go to line 65 and either comment it out, or delete it. This will avoid things like this showing up:

Trackback by Gettin’ Learned Good - 12/29/2004 @ 10:51 pm

Once that file is fixed, go ahead and download the Version 1.0 of the Favatars Plugin (rar) (zip).

Also of note

This distribution includes a file called “favatise.php". If you drop this in you WordPress install right next to you index file and then run it from a web browser, it will cycle through all past comments/trackbacks/pingbacks and pull favatars for them - if available. Awesome.

What’d you get for xmas?

1. $300 in gift certs:
   1. 1GB Cruzer USB Memory Stick
   2. 512 MB DDR400 ram
   3. Fun fiber optic lights
   4. 128MB SD Memory card (for the camera)
2. “Borg” Circle Panels
3. Candy (Various )
4. Some Clothing
5. …and other assorted items

Well, Merry Xmas to all - My gift, when y’all get back, I got CS:S working again. Yay!

(By the way, check out the about page … the number next to the name is the post count. :- )

Update

Oh yeah, the View script is now up and running on this site. (Transplanted from creatimation and updated as well.)

A few thins I’ve been reading lately have caught onto a similiar thread that I find very interesting. Namely - our society has gotten so large and spread out that people are trying to find ways to reconnect with each other and take down these barriers of distance and apathy.

First, in Legalize Neighborhoods Again! David Greusel talks about how many cities are seeing large corporations kill of small town owned stores, and how cars and suburbs are hurting cities all over. He calls for people to move into smaller spaces so that communities and neighborhoods can exist again.

Then in Overcrowded Planet author Dean Esmay talks about how our instilled fear of “overcrowding” the planet is complete bunk - even with project figures the entire world population in 50 years could fit into a a few large cities with the same person per square mile ratios as exist today in a few large cities.

Finally, we have Hans Monderman, a Dutch civil engineer, creating roads with no signs or markings. He does it because making the intersection more dangerous has caused people to stop, think, and interact with each other - not only lowering accidents and casualties, but also moving traffic at an overall faster pace.

Some food for thought - are we too far spread?