Archive for the ‘Web Tech’ Category

  • First Thoughts on the iPad

    8

    Imagine this scenario:

    You wake up in the morning and notice your digital photo frame. You sit down to eat, check your email and read the news. You commute into work and read a book on the bus or carpool in. You head to a meeting at work and take some notes, then email them out after. Over lunch you take a break and watch a video, then check your schedule. On the evening commute, you decide to listen to some tunes and play a video game. As you go to bed, you lay down to read a novel.

    That could be a pretty typical day that has all sorts of things involved. Your laptop, book, video game system, folio, etc. Now imagine if you could have one device to do that all. That could be the iPad. That is why I think it is going to be a huge deal. The biggest thing for me, is that it doesn't have to do all of the things I described well, it could do three of the things, like playing games, checking your email and reading a book, and it would still be worth it.

    When the iPhone came out, it was a big deal because it condensed my phone, iPod and digital camera into one device. The iPad has a chance to do that again, but with more things around the house and office. And again, it doesn't have to do all of those things well to be valuable. But the awesome part is, it very well might do all of those things well!

    Changes the Web

    I see the potential for all of the things the iPad can change, but from my web tech perspective I am even more excited. The iPad puts the web on the same playing field as print media finally. If you want to argue that the laptop was fine for viewing the web, go ahead. But in my experience, reading a magazine to read an article was nicer than trying to read a lengthy article on the laptop or smartphone. With the iPad, the web is now on equal footing with size and ease of reading.

    The other huge thing is the fact that Webkit continues to support leading edge web standards that web designers and developers want to use. This means designers have the ability to mimic magazine article layouts and now have a platform to present them in a similar fashion. Imagine seeing an elaborate design, now in the ease of reading like a magazine.

    Oh, and no Flash is no problem for me. For me, 90% of the things you see in Flash on a website can now be done with Javascript and HTML5. I want the open standards supported, and if the iPad gives the web standards more of a nudge forward, that is fantastic!

    My Apps Just Work on it?

    As much as I hate the whole App Store approval stuff, I will give Apple credit on keeping a tight lock on how apps get developed. By using the tools Apple provides, almost all apps will work on the iPad without any changes. The biggest reason for this is the common set of UI elements that developers have in creating their app. Now, when the apps get doubled in size on the iPad, all of the UI elements that Apple provides will increase in an elegant way. This isn't to say that you would design an app for the iPad to look like a doubled in size iPhone app, but the fact that day one apps will work, that is impressive and throws a bit of a bone to App Store developers. And for the end user, the apps you have will work with no extra cost.

    I realize that I am labeled as a Mac fanboy, so you might just throw all of this away as Mac hope. Sure I want to see the iPad succeed, but I also think this is going to honestly be a gamechanger with how some folks interact with technology. The ease of use with, that size screen and a decent weight means people will be able to do things more efficiently and with a pleasant experience. Will it be perfect? No, but I think it will be well worth the $500 entry price.

  • Giving Cable the Boot – Part 2

    4

    At the end of the last post, we were about to receive our Mac Mini instead of using the AppleTV. We got the Mac Mini and started working with Boxee on it, only to find that within a week, the machine would not boot. Luckily Apple was good enough to ship out a new machine once they got confirmation the bad one was shipped back, but it did mean we had a few days without a media station again. This time ended up being valuable though as it let us investigate Plex on our other computer.

    Plex is a Mac-only spinoff of the XBMC project. The first time we tried Plex, we were impressed by it's interface. The folks who work on this definitely are Mac people as the UI was stunning. We were then wowed by the "App Store" within Plex. This is basically a list of plugins for Plex that allow streaming from a number of other sources, such as Netflix, The Daily Show, South Park, etc. What is especially nice about this is that it automatically updates when new sources are available. Since we have received the Mac Mini, Food Network and HGTV have been added, allowing viewing of some full episodes from each.

    Plex also has the ability to watch movies and TV shows saved to the computer. It is impressive in that it can get movie and TV information from the internet, including TV theme songs when browsing through the different programs. We were so impressed by the ability to organize and view shows that we are starting to rip our DVDs of TV and movies shows so they can be easily accessible from the mini.

    The one last big thing is Hulu. With the release of Hulu Desktop, we thought that might be a good option for us. This was reinforced when we found that Plex an open any other application on the Mac from it's interface. The issue with this was Plex had a difficult time releasing the remote to work with Hulu Desktop. While mildly frustrating, we worked with it. That was until we found that Plex has a Hulu "app" that works amazingly well. Because of this, we are now using Plex for everything.

    It has been a bit of an adventure getting here, but we both agree it was the right decision. Within 6 months, the money that would have gone to cable and Tivo will pay off the Mac mini. While we are not getting as much HD content, we are getting almost everything we want to see (A side note: Discovery Channel, please start streaming your programs somewhere. Mythbusters is the only program we cannot get online that we used to watch). The biggest thing is that Plex really just works, where all of the other things we tried were going to be bigger headaches in the end run, so if you are looking to go this route, I highly recommend Plex.

  • Giving Cable the Boot

    3

    Month after month, we receive our cable & Tivo bills and cringe at the near $100 total. Before Will, I was able to justify the cost a lot more, but with the economy and less time in front of the TV it is more difficult to do so. With this in mind, Rebekah and I decided to experiment with the AppleTV to see if it could meet our needs of watching videos from our hard drive and streaming Netflix and Hulu with reasonable quality.

    The first thing was getting the AppleTV, not too tough since the University Bookstore carries them. This worked well for the potential need to return it, no need to deal with shipping or restocking fees. After getting it home, I started it up connected to the TV via HDMI and the receiver with an optical cable. All worked well and I had a working AppleTV that basically allowed watching iTunes content. We did know going into it that we would need to hack the AppleTV to get Hulu and Netflix (via Boxee or XBMC), so that was the next step.

    I decided to go the easy route and try the atvusb-creator. This was a piece of cake, downloaded and ran the app, installed to the USB key and done. I then rebooted the AppleTV with the USB key connected. The installer just did it's business and after the restart, there were a bunch of new options on the menu. This is when things were not as easy as I would have preferred.

    I tried starting Boxee and nothing came up. I tried the same with XBMC, and nothing. I started getting a little concerned, so I started poking around the settings and found an update section. I ran the update for the Installer program, and then the Boxee and XBMC programs after that. Luckily that got both of those working, I just wish there had been a little more documentation about that beforehand.

    I decided to try Boxee and it instantly went to a blank screen. After some checking online, I found I had to update the AppleTV software and then do all of the hacks again. This took some time, but after that Boxee came up just fine. I logged in, tried out Hulu and found that it was a bit choppy. I tried Boxee on my laptop as well to confirm it was not a Boxee issue, and Hulu ran just fine through that. I decided to give Netflix a try and it wouldn't even start on the AppleTV through Boxee, again, something that worked great on my laptop.

    It was a this point I checked and found that the AppleTV only has 256MB of RAM, not really enough to handle HD streaming. Because of this, we have decided to return the AppleTV and instead go with a Mac mini. The mini is on the way from China, so there will be a followup to this when we get that setup. We are both optimistic that this will work better and be the cable replacement we are looking for, so stay tuned next week for an update.

  • And WordPress Moves Into the Lead!

    0

    There has been some competition in the open source CMS area in the last couple of years, specifically between Drupal and WordPress. As each grows and matures, they each gain loyal followers who claim that their system can do everything the other can do, and more! While I am not here to speak on which you should be using, I will say that the recent release of WordPress 2.7 has potentially changed the game. Users of both systems know that the biggest headache for either is trying to keep it up to date, not only the standard install, but also with plugins/modules for each. WordPress 2.7 introduced the ability to update from within the browser and with this, makes it my recommendation until Drupal does the same. If you have not used one or both of these systems, I can show you what I mean.

    Updating the Core System

    Below are two series of screenshots, one for Drupal and one for WordPress on updating the core system.

    Drupal

    drupal1

    drupal2

    WordPress

    wp1

    wp2

    wp3

    As you can see, after the WordPress update was completed in 3 steps, while after two steps with Drupal, I am just getting to downloading the core and then have to FTP it to my site and hope nothing is overwritten.

    Updating Plugins/Modules

    Here are the respective upgrade paths for add-ons for each system

    Drupal

    drupal1a

    drupal2a

    WordPress

    wp4

    wp5

    wp6

    Same thing here, WordPress is updated through the browser, Drupal I have to download and FTP. An added step for Drupal is making sure there are no dependancies on other modules which also need updates. This means that you might have to run your system with the big red banner on it for awhile until the supporting modules are also available.

    Admin Interface

    Taking WordPress really over the top is the new admin interface. When Drupal came out with a new default design in version 6, it was a big step up from the previous theme. The problem is that they didn't go far enough because they didn't address the structure and organization of the admin panel. Below are two views of the Drupal admin panel, one with what shows up above the fold, the second a full list of a typical install.

    drupal3

    drupal4

    Now compare that admin navigation to the sidebar in WordPress 2.7, both standard and fully expanded

    wp8

    wp9

    In preparing to write for this, I gave myself the minor task of trying to figure out how I would change the sidebar of my site in both systems. I won't go into the detailed process on how to do this for either system, but I will just show you two options below and let you decide which is easier to figure out how to change.

    drupal5

    wp10

  • Anatomy of a New Design

    1

    If you have been to my site in the last couple of weeks, you have likely noticed the new design for the site.  In the past, with a new design I just made a post about it and tossed it out there for the "I like it!" comments. This time, I wanted to write a post about how this design came about, some details about it and where I see it going in the future.

    The Front Page

    I realize that the front page might not always be the landing spot for people searching, so I decided to take some of the actual content off the front and instead try to cram as much about me as possible out there. For example, on the previous design I linked to my Last.fm and Flickr profiles.  This time, I wanted to bring a little bit of that content here, so the bottom of the front page now has that info.

    In eliminating posts from the front page, I did want to leave a teaser for posts out there, so I am taking advantage of the excerpt field to display a byline of sorts for each post. I think this is a good middle ground where people can see what a post is about but not have a lengthy page to navigate to see posts they may have missed.

    Organization

    Awhile back, I decided to take advantage of only a few categories and then use lots of tags to organize stuff on the site. This worked pretty much, but I found that some content didn't warrant a new category, but would be useful to navigate back and forth through. For this I found the Organize Series plugin. An example of this is the 2008 Albums series. Instead of trying to fit my top ten list into a tag called bestof2008, now I can create a series so you can quickly navigate through the albums or songs for the year. This would also work for the American's Guide to Soccer, I just need to port the content from pages to posts and put them in a series.

    Design

    When starting work on the design, I wanted to keep the elements fairly simple.  To start, I decided to use just one typeface. I love messing with typefaces, but I wanted to challenge myself to see if I could use just one type throughout the site. For this I went with Helvetica Neue with Arial as a backup. This works for a couple of reasons.  First, if you compare the two "versions" you can see there is a distinct difference between Helvetica and Arial. Second, it makes the site nicer for Mac users since Windows doesn't provide Helvetica by default.

    Another example of making it simple is to limit the use of graphics in the design. The only real graphics in the design are the logos for the social sites on the front page. Everything else is handled using just CSS styling. Because I wanted to focus on CSS styling only, I decided to go with the model of graded browser support. For browser that support some CSS3 properties, the site will have some little touches, such as the rounded bottom on the Marktopia banner.  I plan on tweaking a few more elements to take advantage of these new properties. This means that people using browsers that are leading edge will have a little nicer experience while IE6 users can still use the site.

    I also realize that I have gone through designs on this site fairly regularly and that some people like those old designs. If you are one of those people, then feel free to use the theme switcher on the sidebar. I won't be making sure that posts like perfect in those old designs though, so don't complain if images or text look funny.

    How I Made the Design

    Using Wordpress, the default theme can be a fickle beast. Because of that, I decided to start from scratch with my CSS on the design. This gets rid of any weird things and allows me to make sure that the only things styled are things I want. Because it is easier to work locally, I decided to go with MAMP and get Wordpress installed on my machine, then used Textmate to create the CSS and edit any template files I needed to.

    Content for Wordpress posts can be rather varied and with over 500 posts, it would be difficult to test my new design on all of them. To help with this, I found an import of content that has all of the common (and not so common) content types in it. I then designed around that and got all of the CSS the way I wanted. After that, I did a full import from my blog to the local site to double check there was no obvious weirdness.

    For page navigation, I found another plugin that creates something a little more elaborate than "Older Posts" and "Newer Posts". Mimicking many forums or news sites, the paging allows you to jump a page or two back, or all the way to the beginning of the site easily.

    Comments are also styled a little nicer with this design. I took advantage of the new threaded comments in 2.7, did some light zebra striping of multiple comments and called out when I post a comment on the site. Comments usually suffered in my previous designs, so I hope these are a little nicer to read.

    What Next?

    In the past, when I got tired of a design, I would always start over. The average lifespan of a design was usually about 3-4 months. The last design lasted 8 months and this one I want to last for even longer, but with some tweaks along the way. A few of these I am aware of include:

    • Messing with the logos for the social sites
    • Adding a teaser about myself on the front page
    • Tinker with the Last.fm view to have albums instead of songs
    • Better styling of the delicious posts
    • More CSS3 stuff (Rounded corners and box shadows for some elements)

    I am always open to suggestions, so if you have questions about my process, thoughts about the design or just general ideas about the site, feel free to post them in the comments!