Posted 11.13.2010

Posted 11.13.2010

Technology Alphabet Soup

Everybody has their own language. — I talk to my friends that are teachers that have all kinds of terms for testing and curriculum sequences. My nurse friends use abbreviations and medical terms that I could never remember, even if I tried.

I know on my blog, I’ll throw around my own vocabulary. So, I thought I’d help you out with some of the terminology. I’ll try to describe each of these in a non-geek way. :-)


Domain Name / URL and Hosting

Let me use a non-technology analogy. When you’re building a house, you have to have a few things. (1) A piece of real estate to put the house on and (2) and an address so people know how to get to your house.

The web world is no different. You must have server space (real estate) to store all your site files, this is called hosting. Then, you have to have an address to tell people how to get your site. Mine’s amyhaywood.com. This is a domain name or URL.

When you get ready to create a site, you can go to a site like GoDaddy.com or Hovr.com or Network Solutions to register your domain name. Unfortunately, you can’t have whatever you want. A lot of domain names have already been taken. But, each of these sites will allow you to search and see what’s available. A domain name will set you back about $11 a year, depending on what service you use.

I’ve gotten to the point where I collect domain names like baseball cards. :-) I don’t have sites on half the domain names that I own, you never know…

GoDaddy.com and Network Solutions both offer hosting services as well. My personal preference, however, is MediaTemple. Granted, I’m partial to how great their site looks compared to GoDaddy, but there are a few features that make their service less hassle and easier to use. (GoDaddy’s site is so cluttered that I often feel like I’m clicking in circles.) Besides, MediaTemple has several larger sites using their services, so I know they can handle my bandwidth should my traffic ever spike.


Browser

A browser is what you use to view (or browse) pages on the Internet. In fact, if you’re reading this, you’re using a browser. Internet Explorer, Firefox, Safari, Opera, and Chrome are the most popular.


FTP

FTP stands for File Transfer Protocol. I know, I told you I’d veer away from geek speak. An FTP client is a program that will allow you to upload / download files to your server.

My personal favorite is Transmit. But, there are plenty of options out there: Fetch, CuteFTP, YummyFTP, CyberDuck. It just depends on your personal preference and how much / little $$ you’re willing to throw down.

It’s worth noting that sometimes you’re hosting service will offer an FTP interface within their site. I do this for a living, so it was worth every penny to purchase a license for Transmit.


HTML

HTML stands for Hyper Text Markup Language. Basically, this is what the browser reads when it shows you a website. You can visit any website, right click, and select “View Source.” Usually there will be some other markup there, but for the most part, that’s the site’s HTML. Some of it, you will probably be able to understand, but it will be interspersed with a lot of <s and >s.

HTML is not as hard to learn as you might think. In fact, I’ve written a brief guide in plain English, if you’re interested.


CSS

CSS stands for Cascading Style Sheet. This is used in connection with HTML. It defines the colors, fonts, and placement on a page.

The idea is that I could say in my style sheet, I want all my headings to be Georgia, black 18 point font. I only define it once and it just knows. Then, when I show it the client and they say, “You know, brown is the new black. Will you change all the headings to be in brown?” “Well sure.” instead of going to each heading and changing the color, I can open up my handy dandy stylesheet and change it in one place!


RSS

RSS stands for Really Simple Syndication. I’m not kidding. That’s what it means.

I’ve talked about RSS before, when I talked about Google Reader.

RSS is a feed that a site can provide that contains updates to the site, usually its blog post or news updates. But, it can also contain podcast updates or comments posted on a site.

A site like Google Reader can then manage all your RSS feeds for you. So, instead of visiting 10 sites every morning to see whether any updates have been posted, you check one place, where it gathers all the new content for you.


JavaScript

Javascript is the Flash eater right now. Why? Well, partially because of a man by the name of Steve Jobs. :-) But, also because JavaScript doesn’t require any plugins to work within a browser.

Some of the things JavaScript allows you do:

  • Animations (not Pixar or anything, but fade in, fade out, move objects across the screen, etc.)
  • Form Validation
  • Talking to the Server (typically called AJAX)

You can always tell whether the user is Flash or not by right clicking on an item. If the menu that appears says something like “About Adobe Flash Player 10”, then you know it was created in Flash.


jQuery

jQuery is really JavaScript. But, one of my frustrations with JavaScript is that when you write it, different browsers will interpret it differently. Meaning, I have to write certain functions for Internet Explorer and other functions for Firefox. In my head, it got complicated fast! That’s where jQuery comes in. It’s a library that makes writing JavaScript easier…much easier.

MooTools, Dojo, and Protoype are essentially the same thing, just different libraries.


MySQL

MySQL is a database language. It allows you to Create, Retrieve, Update, and Delete to a database, or as us geeks call it, CRUD.


PHP

PHP is a server language. It allows me to work with dynamic content. How can content be dynamic you ask? Well, take a blog for instance. In the olden days (10 years ago), when you wanted to update a site you have to call your web master (sometimes you still have to do that) and ask them to publish your entry for you. They would probably make a copy of an existing page, put the new content on the page, and then go through the entire site and update the navigation manually to reflect the changes. Tedious and expensive.

With PHP, you can have the site navigation in one file and it gets included on all pages. A change gets made, the update is made in one place and it is reflected everywhere on the site.

Take that a step further. Look at a CMS (listed below).

.Net and Rails

Before I moved on, I did want to mention .Net and Rails. These are different coding languages that accomplish the same thing.

.Net (yes the period intentional, it’s pronounced “dot net”) is Microsoft’s coding language.

Rails is short for Ruby on Rails. Rails is a little different. Ruby is the coding language and Ruby on Rails is a framework that has a lot of functionality built into it, making coding faster and easier.


CMS

CMS stands for a content management system. Sounds complicated. Actually, it’s meant to make your life easier. Back in the olden days of Internet (10-15 years ago), anytime you wanted to update your site, you had to create a new HTML file or modify an existing one. For large sites that meant tons of files. But, it also meant you have to go to someone that could write HTML every time you needed your site updated. Talk about amping up cost!

Now, we can hook up your site to a CMS that will allow you to fill out a web form and it will update the site with as little to no coding knowledge. Actually, all blogging platforms are CMSes: WordPress, Blogger, TypePad, MoveableType, SquareSpace, and my persoanl favorite ExpressionEngine.

A while back, I wrote a post about choosing the right CMS to fit your needs.


CRM

CRM stands for Contact (or Customer) Relationship Management. Think of this as the modern day rolodex. My personal preference is Highrise.



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.