Posted 10.07.2010

Posted 10.07.2010

Building a Basic Blog in CodeIgniter (Part 1)

A while back, I wrote a couple of posts about CodeIgniter (CodeIgniter and Understanding MVC and Getting Started with CodeIgniter). Recently, they’ve gotten a few hits. So, I’d thought I’d expand on that topic a little: we’re going to build a blogging platform.

Note

In real life, I wouldn’t recommend doing this. There are plenty of fantastic blogging platforms already out there. Instead of reinventing the wheel, I’d look into Expression Engine, WordPress, Tumblr, SquareSpace, or Blogger. However, as far as building a basic web application, I figured this would be the perfect example. We already know how they should function, so the up front, discovery process *should be* minimal. (famous last words, right?)


Planning things out

ACTUALLY PLANNING

I always err on the side of planning things out. There are different opinions about how and how much.

I’m a huge fan of 37signals. I know. I talk about them all the time. They hate planning.

That messy planning stage that delays things and prevents you from getting real is, in large part, a waste of time. So skip it. If you really want to know how much time/resources a project will take, start doing it.

But, I have a hunch that’s a slight exaggeration on their part. There are still sketches.. Plus, back in November, Ryan wrote a blog post called A Shorthand for designing UI flows. Besides, I’m going to assume that if you’re trying to assemble a team, particularly a team that’s not centrally located, there’s got to be some sort of planning to know what you need to work on. —I’m going to assume what they mean is that for some teams, planning becomes an excuse not to get started. At that point, just do it!


THE SITE MAP + WIREFRAMES

So, when I first started planning out this project, I sketched out what I wanted to include.


At the top is the site map. There are 2. One for what the user will see and one for the back end. Their corresponding wireframes (if you can call them that) are at the bottom. It’s a minimalist layout. The one on the left (what the user sees) will have a white background (day) and the one on the right (what the administrator sees), a black background (night).

One of the things that I like to do in my sketches is make notes to myself. For example, I thought about adding authors and categories. Go big or go home, right? But, adding those 2 small features, suddenly doubles my pages on the admin side—(1) add and (2) edit authors, (3) add and (4) edit categories. As you can see, next to categories, I wrote KISS. Keep it simple stupid. The benefit here, is that when I come back to my notes, instead of going through the same thought process, I’ve indicated why I ended up making that decision. Now, I won’t try and think through everything again. Do I sound like I speak from experience? because I do!

Here are the final site maps. These, designed site maps are what I would give the client in the creative brief.

User Side Site Map


Admin Side Site Map


The Design

Here’s the design I’m using for the user’s side:

Code Igniter Tutorial - User's Side

and the admin side:

Code Igniter Tutorial - Admin Side


DETERMINING FUNCTIONALITY

Earlier, I referenced 37Signals post, Designing for UI Flows. We’re going to use the same approach, here, for the figuring out the admin side.

I LOVE this method. It quickly describes everything that I need to program and helps me think through everything on the front end. I’ll even highlight / check off items as I finish them, using this as a to do list.


Production Files for the Site

This site wasn’t very complicated, so I actually just went ahead and built it in code before designing it in Photoshop, which is unusual for me.

I’m not going to go into the process of building a site, here. However, if you don’t know how to do something like this, and you’re interested, here are a few places online that can help you get started:


TYPOGRAPHY

I set up TypeKit for this site. I L-O-V-E it. If you’re interested in looking into it, register on their site and you can use their services for free on one site. I went ahead and have a paid account and use it on (almost all) my client sites. —It definitely multiplies my type library.

If you decide to use Typekit, I’m using Kulturista Web. All you would need to do is

  1. Add a kit
  2. Set the domains. (I’ll usually include localhost, if I’m building the site on my computer)
  3. Search for Kulturista Web
    Typekit Screenshot
  4. Click on the “+ Add to Kit” button (top right)
  5. Click on the “Launch Kit Editor” button (top right)
    Typekit Kit Editor Screenshot
  6. In the window opens up, click on the “Embed Code” link (top right)
  7. Copy and paste the javascript into the html header of the site
  8. Click on the “Publish” button (bottom right)

Now that everything’s accounted for, we can dig into Code Igniter…



Posted 10.06.2010

Posted 10.06.2010

Making HTML5 Video Magic Happen

So, HTML5?! Buzz word.

A few months ago, I bought HTML5 for Web Designers by Jeremy Keith. It’s simple, straightforward. I ended up purchasing it after Cameron Moll spoke highly of it at the HOW design conference this past summer. Then, when Dan Benjamin and Jeffrey Zeldman interviewed Jeremy Keith on the The Big Web Show, it was only icing on the cake.

Honestly, I (still) have yet to do a lot with HTML5. But, I did implement its video player a few weeks ago because I wanted the video to be available on the iPad. It was much easier than I thought it would be, but I thought I’d share because converting my file to the proper format did take some googling, which I’d like to spare you.


THE VIDEO TAG

The tag is pretty straightforward.

<video controls width="360" height="240" src="my_greatness.mp4" poster="still_of_my_greatness.jpg"></video>

Let’s walk through each of these items.

  • Controls says that you want to use the browser’s built in controls.—If you really wanted to, you could design your own video player and hook up all the controls yourself.
  • The width and height parameters do exactly what they suggest. It controls the width and height of your video.
  • The src parameter is the source of your video. In this case, we’re calling a video called “my_greatness” that’s mp4 encoded.
  • The poster parameter is a still image (jpg of gif) that shows before the user clicks play.

And just in case you were wondering, here’s a list of items that support the video element:

  • IE 9.0+
  • Firefox 3.5+
  • Safari 3.0+
  • Chrome 3.0+
  • Opera 5.0+
  • iPhone 1.0+
  • Android 2.0+


FILE FORMATS = THE FRUSTRATING PART

The frustrating thing about HTML5 video is that different browsers support different formats. Yeah patents and such!

MPEG 4 (.mp4 or .m4v) is based on Apple’s QuickTime. So, no surprise here, Safari likes.

Theora (.ogv) is open source, which Firefox likes.

I think Chrome plays nicely with everyone.

MPEG 4 wasn’t hard to convert to. A while back, I purchased a license for Xilisoft Video Converter. —It’s a cheap, simple program that I was able to recommend to a client that needed to convert a lot of videos to .swfs. It allowed them to create overlays and perform a few other minor editing commands without purchasing Flash. You can convert videos to just about any format you want…except Theora.

What’s a developer to do? This is the Googling part I mentioned earlier.

Theora.org has a download listed on their site: ffmpeg2theora. Once you download it to your computer, double click to install. Then, open up Terminal. I know. Scary. But, I promise, it’s easier than you think! I typically avoid the terminal because I know a mistyped character could wreck havock on my computer, but really…it’s not that bad!

Then, type ffmpeg2theora [space]

Find the file in Finder that you want to convert. I used an .mov, but it should support some other options. Click and drag the file from Finder to the terminal window. It will auto-magically generate the path for you.

Then, type [space] -o [space] new file path and name

You should be looking at something like this:

Then, once you hit enter, you’ll see the Terminal start processing the file for you:

As soon as it’s done, the new file will appear with the name in the place you specified. In my case, the desktop. See that wasn’t that hard!

FILE FORMATS = THE COOL PART

The cool thing about HTML5 video is that it degrades nicely. So, if I’m in Safari, it will play my .mp4 file. If I’m in Firefox, it will play my .ogv file. If my browser likes neither of those options, I can even get it to play a .swf.

<video controls width="360" height="240" poster="still_of_my_greatness.jpg">
    <source src="my_greatness.gov" type="video/ogg">
    <source src="my_greatness..mp4" type="video/mp4">
    <object type="application/x-shockwave-flash" widt="360" height="240" data="player.swf?file=my_greatness.mp4">
        <param name="movie" value="player.swf?file=my_greatness.mp4">
        <a href="my_greatness.mp4">Download my Greatness</a>
    </object>
</source> 

Done!


MORE (TECHNICAL) INFORMATION

If you want a lot more information (and another alternative for encoding video), check out DiveIntoHtml5.



Posted 10.05.2010

Brand New Day and Breaking the Curse

Blog friends, how I’ve missed you!

I’ve struggled to blog, but as Seth Godin would say, I’ve been busy shipping.

“What you do for a living is not be creative, what you do is ship.”

One of the projects that we got proofs back on yesterday was the LifeWay Kids Conference Listening Guide. It’s a conference in Birmingham, next week, themed “Brand New Day.”

It’s funny…well, not that funny. Most of the people on my team have been struggling creatively, myself included. We’ve affectionately(?) called it “the curse.” I know every creative person experiences it. Those moments when designing comes easy and then the moments when it’s pulling teeth, beating your head against the wall, and considering a career move. The hard part? The past month has been filled with those moments. It’s not just me, it’s been our video producers and writers too.

I’m not sure that we’re all necessarily out the dark, but it has been a good learning experience. Once we all came to the place where we admitted we were struggling, we were able to sit down over a two hour lunch to discuss how we got there and how we can help each other get out.

All that’s to say, this project, Brand New Day, has been that project for me.

When I started out, I wanted to do something similar to Carsonified’s Chirp Conference. It’s a beautiful site with great attention to detail.

Chirp Website

With Brand New Day, we were trying to communicate a new look, sunshine, breakfast, Saturday morning cartoons…a brand new day.

Definitely, not wanting to copy Chirp or rip it off, I went with a green color scheme, which naturally lent itself to a farm. In my head, I was thinking Garfield and Friends. Anyone?

Garfield and Friends

This is what I came up with:

When I walked away from the cover, I knew something was still missing, but knew I’d come back to it. Well, I struggled even more with the interior pages.

Finally, I talked to Darrel, my creative director. The good part was, I wasn’t attached to this design. So, when I had the conversation with Darrel, I was willing to walk away from “Farmville.” He was fantastic and encouraged me to go to the grocery store and look at pictures of cereal boxes.

The hardest part with the shift was feeling like cereal boxes are gaudy…which they are…but embracing that. The new (and much improved) cover:

One thing I love about the kid’s team projects I’ve been able to work on is that I can interject some personality — like saying on the cover “Free schedule inside.” Well, of course you’re going to get a schedule! Or making a cut out watch with the head of the president of our company.

I also love hiding things. We have a list of exhibitors and sponsors. Boring. How can I make it interesting? I made a word search. Not only is that better visually, but it actually helps our sponsors and exhibitors. People will spend more time looking at their names trying to solve the puzzle than they would have before. (Plus, I hid “Haywood” into the puzzle. grin )