If you’re like me, you’re seeing all the hype about video in HTML 5 and thinking “that’s nice, but what else?”

As a web developer going on 10 years of working on the web, I was looking for a quick way to get caught up on the “what else” without having to read through 3 chapters of how HTTP is a stateless protocol and who Tim Berners-Lee is and get straight into some practical examples.  Well, that’s exactly what the new title, Introducing HTML5, does. And all in under 250 pages.

Book: Introducing HTML5

The New Semantic Web

After a nice intro on how the HTML5 spec actually came about, the authors devote the first third of the book diving into the new, more meaningful tags touted by the HTML5 spec that should ultimately replace all the DIV tags that we’ve been using ever since table tags were ousted for layouts 5 years ago. The book’s examples of the header, footer, and article tags, as well as the new form validation attributes demonstrated in the context of a typical blog will certainly appeal to many of us out there with an “ah ha” moment. 

The other refreshing element that the authors touch on thorough the book is accessibility.  While often overlooked on the web in most development books, these guys definitely take away your “I didn’t think of that” excuse.  After reading this book, you’ll definitely know what you’re not today to help those non-sighted or otherwise impaired users of your website or app.

A Little Bit of Video

Halfway through the book, there’s a short chapter on the audio and video tags; more so on how they are to be used and not the parading “kill flash” banter you read everywhere else on the web.  If you only want HTML5 for the video tags, this book isn’t for you.

Along with video, there’s an in-depth look at the canvas tag and the related API. While an interesting topic to cover, I can’t think of any immediate uses in my own development plans. Still, it lets you see what else is included in the spec.

Build Me a Web App

Spending almost all of my professional career working with Microsoft technologies, most of my application building has been using WinForms, ViewState, and Session management to handle some of the issue stateless session and cookie headaches, I can certainly appreciate the new features in the HTML5 spec to make things a little easier on my open source work.

In fact, the too biggest reasons I wanted to dive into HTML5 were the local storage and offline access features. While short and to the point, these chapters are a good enough example to know what to use and when, all within the context of HTML and JavaScript. Now, there will no doubt be libraries built on top of the main spec elements to help us with our PHP or similar applications, but getting to know the basics in such a simple format is always a big help.

Wrap Up

In short, this book is a great read if you just want a primer to know the what and why of the new HTML5 spec before venturing into more in-depth titles on the specifics of a particular topic. The fact that it’s short, to the point, and has pretty relevant examples in it are all big selling points for me. The humor and the dual authors’ subtle digs at each other is rather entertaining, too.

Book cover image credit: Amazon.com

Related posts:

1. Book: iPhone Apps with HTML, CSS, and JS

It only took a year after the site launch, but I finally spent a little time (and dough at iStockphoto) to put together a logo for Maui by Photo.

Now, it’s my no means extravagant or anything, but I think even as simple as it is, it certainly adds a more inviting feel to the site than just the plain – and I mean plain – masthead text did previously. With the month of June set aside for MBP updates and now that July is here already, I added a few more tweaks, but not as many as I would have hoped. Here’s a short recap:

• Facebook Integration – I mentioned this previously as a potential advantage of having a fair amount of fans on the site’s Facebook page (500+) it’s a nice way to allow for easier comments when linking from Facebook. I’ve also started to roll out the Like buttons on a few of the pages, and those seem to be getting clicked on now, too.
• Newly Designed Footer Lists – I redesigned the footer of the site to include many of the links previously in the sidebar, which I think adds a cleaner look. I also added links to a few additional pages such as About, Flickr, and the Locations page I mentioned in the Posts by Tag post.
• Static Map Updates – You won’t notice the difference on the posts, but I updated the code to use a static-map plug for showing the island view of the map rather than copying the entire HTML for it in each post. A benefit of knowing how to write plugins.
• Testing Out New Photo Galleries – I just recently installed very popular NextGen Gallery plugin for WordPress to try out better photo management and display. The first post to get the new look is the Haleakala article, so take a peek there if you’d like to chime in on the improvement.
• WordPress v3.0 Upgrade – The site is now running v3.0 of WordPress, although I’m not taking advantage of any of the new features yet. The custom taxonomies feature looks like something I’d like to try out with locations.

I think that about covers it for the updates this month. There are a few things I might try to sneak in during the next few weeks, but July is the month I move my attention to the re-launch of Nighthawks Hockey Online, which is going to be huge. Be sure to stay tuned for that this summer.

- Kris

Related posts:

1. WordPress Plugin: Posts by Tag
2. Updates to Maui by Photo

When one of my friends on Facebook pointed out yesterday that there was now a “Like” button next to each comment on a Facebook post or status, I sort of rolled my eyes. To me, that just seemed to be overkill. I mean, know that the Like button has made it’s way outside of the walls for Facebook and into the rest of the Internet (including one of my sites), but trying to push it down another level of detail into the comment thread didn’t really seem necessary.

So, I went looking for an official post or other blog coverage of this new feature, and I found myself at the popular Inside Facebook blog. Here’s the article I found:

Facebook Adds Likes to Comments

To my surprise – and who am I to judge – they reported that this is actually a commonly requested feature. For real? People are asking to have a Like button when someone comments on their status or the status of a friend? I think I may just be missing the point.

What’s Really Missing

To me, I think the bigger gap related to comments to posts and statuses is not a Like button, but better notification and comment tracking for Facebook Page admins. As an admin of 4 pages currently, it’s less than ideal for me to have to check each one everyday or every other day to feel responsive to my visitors. And I know it would be difficult to create a reasonable solution that works for both smaller pages like mine vs. the thousands of comments on the page of your favorite championship sports team, but still, it feels like there’s more value to be made there.

As another example, I have a few photographer friends that have created Facebook pages to share their work. When they post photos and people comment, there’s no notification or anything. Now I know first hand in the case of photos there is a View Comments page – like this one – but would a subscribe or RSS feed option be too much to ask? Or maybe something similar to the Facebook Page Digest emails we admins received weekly for a brief while. Something daily like that might work to show a summary instead of each individual comment.

Any Insight?

I know that Facebook has been working to improve their Insights stats section, and I can only hope that those tools start getting closer to real-time soon. It’s Thursday night as I finish this post and stats are only current through Tuesday. Again, not horrible from a longer range trend perspective, but not a tool I can use for engagement.

Your Thoughts?

Getting back to topic, do you think the Like button for comments is a useful feature or just more fluff? And if you’re a Facebook Page admin, I’d sure like to hear your thoughts – or any tricks or tools – on staying current with engaging your visitors.

Thanks for reading,
- Kris

Related posts:

1. Facebook Connect-ed, For Now
2. Updates to Maui by Photo

This post is a short example of how I used the Posts by Tag plugin by Sudar for one of my new pages on the Maui by Photo website.

The concept of the page was simple: to build a directory of sorts for posts that were tagged with different locations on the island.

WordPress Repository Location: Posts by Tag

What Was Needed

I wanted to have a page that listed all the locations on Maui that my website featured, as well as each post associated with that location.

For the website, I’m was already using Categories for the primary navigation, such as Beaches, Activites, etc. But in order to track the location of each post, I was also tagging each post with a specific place name, such as Lahaina or Kapalua. After accumulating more than 40 posts from 11 different locations that were tagged, it was time to create a page that featured each location and list the posts assigned to it.

What Was Done

The Posts by Tag plugin actually works in two modes: a widget mode for use in a sidebar, and a shortcode mode that let you embed the list inside a post or a page. For this case, I was looking to the shortcode feature to help get the job done.

The post_by_tag shortcode functionality offered by Posts by Tag uses most of the same parameters as the get_posts template tag that WordPress offers, so right away I knew it had everything I needed.  In my case, I wasn’t as concerned with the dates of the posts (as in a traditional blog sense) as much as having a directory listing of posts. So the fact that I could order the posts by Title and in Ascending order was perfect. The only other parameter required for me then was the number of posts to return, which I set at a generous 25.

With the shortcode usage planned, it was just a matter of laying out my page just like you would any other page. While the shortcode supported multiple tags at once, I was looking to add a photo and a link for each tag. At the time, there were 11 location tags that I wanted to display posts for, so I needed 11 instances of the shortcode on the page. I added all 11 locations and photos in the order I wanted, knowing that the next time I added a post and tagged it with one of these locations, it would be automatically added in correct list and in its proper order alphabetically.

Now, if I added a tag for a new location at some point, of course I’d have to go back and manually update the page, but that is a less frequent occurrence that I was not concerned with at time.

The Result

With the shortcodes utilized and the page in place, I was all set. A screenshot of the final result is below, but if you’d prefer to see the page itself, visit the Maui by Photo Locations page.

Feedback

Please let me know if you think this short demo helped or if you’ve used this or a similar plugin on your own site, too.

- Kris

Related posts:

1. Maui by Photo Gets a Logo

After just one year of working with the WordPress platform, it’s pretty safe to say that I’m a big fan. What’s not to love? All the functionality right out of the box already, a nice theme system with loads of designers, a rich set of plugins, and the support of a great developer community. Sure, some say it might be a resource hog or slow, but I haven’t experienced too much of that (yet). So, where do I want to fit into this process?

Plugin Development

After getting familiar with the standard installation and customization on a few different blogs, followed by theme hunting and modifications, the next logical step for me was working with plugins. It’s usually easier to find an existing plugin that fits your needs than reinvent the wheel. But just like themes, there were a few cases were something was close, but still needed to be tweaked for my own personal needs.

So, I picked up a book, started reading, and was ready to take on the plugin world. Like everything else, I just dove right in and started coding away, creating a few custom plugins that fit neatly into my sites. That was the first revelation for me, that these were for me and not necessary useful for a larger audience. For example, the Daily Maui Photo widget over there on the left is a plugin I created, and it’s currently deployed on a few other of my sites as well. It’s customizable with 3 different views to be adaptable to various themes and scenarios. Yet it’s still not something that may ever be available for public consumption.

There are a few other plugins that I’ve built recently, such as the recent posts display on the home page and the display view for site details on the links page. Those might be more useful to others, but that quickly led to the next few revelations: testing and support. It takes a lot of testing and dedication to release plugins that can potentially be used by hundreds or thousands of users. And while I give many kudos to all the awesome, hard-working folks doing that today with their plugin development, I just don’t have the time at the moment (or ever). The support side is huge, too. Check out the thread on this page for the Simple Facebook Connect plugins I mentioned last month. It has over 1,200 responses and growing daily. Not something I can commit to.

Plugin Contributions

So, now I’ve come to terms with not writing my own plugins for public use, I do feel comfortable and interested in helping users extend their own plugins with features that are useful for me that hopefully others might find helpful. This right here is another great feature of the WordPress platform as being open source, because if something isn’t working correctly or not meeting my needs, I can dig into the code and hack away at it. Much faster than I could do if I was building it from scratch, I might add.

On the contribution side, if I feel my modifications to the plugin are something that others might be interested in, and the original developer is accessible and approachable – most of them seem to be – I’m more than willing to engage and return the favor by handing over my code. In all honesty, this is actually in my best interest because by adding my own custom code, I put myself at risk because future updates and features added in newer versions will likely override my changes. So, if something I write for my needs ends up being included in the official release of the plugin, I’m much safter.

As a Resource

With only one year working with WordPress, I can’t by any means claim to be an expert. But as someone having multiple blogs running the software and having a strong development background to help understand how things work behind the scenes, I think I can also be a resource to help others. For example, I have collected a fairly sized list of plugins that I gravitate towards with every new install. In addition to that common list, I’ve also used various plugins for more specific reasons on a site-by-site basis.

My plans here now lead to creating a resource section here at the site that will serve as a reference for others that may just be starting out or looking for a not-so-obvious plugin to accomplish a particular goal. Acting as an extension of my web portfolio here, I’ll be adding a more detailed WordPress section of the site that will not only feature the plugins I’ve used, but also link to and reference where on my websites I’ve used them. I find helpful so readers can view by example before deciding if something will work for them or not. I mean, how many times have you seen a neat plugin that you think will work but can’t find an example of where it’s used? Not one of my favorite experiences, either.

More Soon

I seem to be ending most of my posts with “more soon” these days just because I have so much going on these days. But still, be on the lookout for this new section and some of the features that it will contain. In the meantime, I am also sharing interesting articles and posts from other blogs related to WordPress development over on my Facebook page, so that is a good place to check out in the meantime.

- Kris

Related posts:

1. Starting WordPress Plugin Development
2. Facebook Connect-ed, For Now

Just about a year after launching Maui by Photo, I’m getting back to putting some of the finishing design touches on the site to polish it off. These are mostly minor design tweaks for now, but I’m hoping to add more features my month’s end, too.

A Year Wiser

MBP was my first site using WordPress, so much of the initial effort involved was spent learning how to customize themes and organize posts than more of a focused effort on look and feel and navigation. So, with a year of WordPress under my belt, and another year of web design practice, minor changes are already underway.

While the premise of Maui by Photo is fairly straightfoward (a la the About page), there was more effort involved with editing and managing all the photos than I originally anticipated. Not only am I a year more experienced with WordPress, my photography and post processing work with Photoshop has also risen to a new level. Therefore, one of my tasks for later this summer (or year) is going to be re-editing all 300 current photos featured on the site, plus adding at least 100 more that aren’t featured yet. Heaven help me, that’s a lot of work ahead.

Quick Wins

In the meantime, I’ve been attacking a few quicker wins to make the site more interactive. The biggest update so far has been the integration of Facebook comments and Like buttons using the Simple Facebook Connect plugins I posted about recently. It’s been installed on my Kris and Cindy site and you may even notice it’s slowly being phased in at this blog, too.  Since the Maui by Photo page on Facebook has been a relatively big draw, I see this as an opportunity to bring in some of those users to contributing to the site as well. More to come on that.

While the Kris and Cindy site just uses the auto display for the Like button, I’m working that feature into MBP a little more selectively than that.  I have a few ideas of where it will end up to be intuitive but not obtrusive, but it’s not completely rolled out yet.

Also while I was at it, I added the Twitter @Anywhere integration that made it here, too (previous post).

More Content

The goal of Maui by Photo is to let the pictures do the talking, and get the sites visitors to leave their own stories about Maui. But in order to help raise awareness and education about the goals of the site, I’ve been writing a little bit more content to fill in the gaps. Therefore, the home page now has more of a traditional website landing page feel to it than the previous list of blog posts as before. Also, the About page has been updated with a bit more organization and some photos to help keep the reader engaged.

In addition to that, the portfolio page here on the site has been updated with a little background on how the site came together, so this collective information should be a good start. I’ve also uncovered a few additional items to add as mentioned in this post about creating effective About pages. Even though there is still a ways to go, I’m pretty happy with the subtle progress that’s being made so far.

Next Update

Even with these changes to the site underway, Maui by Photo is still fully functional and awaiting your favorite Maui stories. As far as the next update goes, I’m targeting another post here at the end of the month with news of bigger changes that are in the works. Be sure to stayed tuned if you’d like to see what I have in store next for this site.

– Kris

Related posts:

1. Facebook Connect-ed, For Now
2. Maui by Photo Gets a Logo
3. A Photo a Day, On Facebook

Continuing to share more from my own bookshelf, I picked up this title earlier in the year as I started to dive more into the mobility realm. I had already started with a few iPhone SDK books, I had Mac, installed the SDK, and had been tinkering with it for a few months prior. But when this book gave me the idea of just building a mobile website using the skills I already had, I was innately curious.

Book: Building iPhone Apps with HTML, CSS, and JavaScript

Since I was already motivated to work on something for the iPhone, it was pretty easy to gather the momentum that made this a pretty quick read. I was through the first four chapters in a matter of hours, and I hate to admit it, but the chapters on client side storage and the offline application cache were my first hands-on introductions to new features in HTML5. I know, I should have been on top of that by then. Whatever.

I found the book easy to work with because I already had a small mobile web idea in my head. So as I followed along with the example app built in the book, I was working with both that example and my own little project. There were a few minor snags with references to jQTouch in a few places, but that’s only expected because everything in this space is changing so fast. I mean, come on, the book was written in January of this year, and there were already updates to the referenced software in March. That’s pretty fast.

What’s also interesting about this book is that author Jonathan Stark worked with O’Reilly under their Open Feedback Publishing System, which means as it with through various drafts, they were published online for users to review and provide feedback. Even the final version is still available under that program – Free – so if you don’t want to pay for this guys hard work, check it out before the program ends.

Other Details

While I had my mobile web app up in less than 2 days, I haven’t gone through the PhoneGap chapter yet to migrate it to a native app. I’ve been meaning to get back to that soon. Also, the author is currently finishing up a similar title for the Android platform (since both devices using the same WebKit mobile browser as a base) by summer’s end. That has me equally as interested as well, so I can’t wait for that.

In the meantime, if you wanted to take a sneak peak at the mobile web app I put together using this book on your iPhone or iPod Touch (haven’t tried it with the iPad yet), point your browser to http://www.mauiphotocal.com/iphone/. I’m still sort of considering it a beta right now, and I’ll soon be adding all the details to my portfolio section as well. Just trying to find the time.

Thoughts?

If you’ve seen this title before and either grabbed the book or thought it better not to, I’d like to hear your take on it. Also, if you’ve worked with similar titles, I’m always looking for suggestions, too.

Thanks,
-Kris

Book cover image credit: Amazon.com

Related posts:

1. Book: Introducing HTML5

Don’t take that title the wrong way. I’m not one of those that thinks you have to have thousands and thousands of followers to consider Twitter valuable. Nor do I really concern myself with which celebrity or team of celebrity PR staff has more followers than the other. For me, it’s quality over quantity.

So, why the title? Well, I recently came to the realization that I’m following a diverse group of tweeps in a few distinct categories. In an effort to wrap my head around just how many people I follow for different reasons, I took some time to revisit my Twitter lists and did a little organizing. From that, I came up with an interesting breakdown of my interests and how Twitter fits in. Let’s have a look, shall we?

The Lists

The lists I have created for my @webnelly account:

• Hawaii, 134 tweeps – Folks that I follow in the Twitter Ohana.
• Maui, 67 tweeps – My pals on the Valley Isle.
• Photog, 38 tweeps – Photographers and other photo services I follow.
• Hockey, 34 tweeps – Keeping tabs on updates from various hockey teams and leagues, and their crazy fans.
• Tech, 22 tweeps – A relatively new list of techie and development folks that I’ll likely be expanding rather quickly.
• Music, 9 tweeps – A handful of musicians that I follow on Twitter, neat if you’re interested in seeing some of what I’m into.

Lastly, I have an IRL list for the users I have met in real life (not the Indy Racing League). Currently 26 handshakes out of 343 following, not too bad.

Now, there is some obvious overlap since some of the people I follow cross multiple boundaries, such as photographers on Maui, etc. I’ve tried to separate the Maui folks from the rest of Hawaii as to not count them twice in those lists, but it’s still interesting to note that at least half of the people I follow are in the 50th state of the union. And believe me, it used to be a higher percentage when I was just starting out.

What It All Means

Not trying to read a whole lot into it, but it ended up being a pretty neat experiment, if nothing else, something to kill 30 minutes organizing everything. As my interests and hobbies evolve, more so the time I have for each, it’s interesting to see how my value and use of Twitter changes. Since my photography is on hold for now and my work on this portfolio site and other WordPress blogs I manage increases, the Photog and Tech list will likely flip-flop in numbers. And it’s crazy right now on the Hockey list with the Stanley Cup finals nearing completion, but that will likely die down over the summer.

By the way, if you’re interested in a better way to manage your lists than just using twitter.com, I did all of this with the latest version of TweetDeck. If you prefer other tools for list management, please drop the name in a reply since I’d like to check them out, too.

So, turning to the other side of the table, what types of topics do the tweeps you follow gravitate around?

Related posts:

1. Social, Networking, and Social Networking
2. Hovercars: No, Hovercards: Yes

With all the hype about Facebook’s Open Graph announcement and all the bad press about their privacy issue, talk about the Twitter @anywhere platform.

So, when I came across this simple how-to from TwiTip, I went right at it. And, in just a matter of moments, references to my Twitter accounts @webnelly and @MauiByPhoto had neat interactive hovercards.  All I needed to do was follow the instructions in that post to setup my a new @anywhere application for my website and install the Twitter Anywhere Plus plugin for WordPress.  And that was it.

In Action

As you can tell, I have things setup on this blog, but I don’t have too many Twitter references here (yet). So, I also installed this over at my Ka’anapali Dreamin’ blog where many of my Maui Tweeps were featured regularly.  I even had a few Follow Friday posts over there last year which should made for a good demo if you’re interested in seeing more.

One note if you’re interested in adding this to your own websites, the particular plugin I’m using won’t work if you have already added a link to the Twitter name you’re referencing. So, I’m going back – as time allows – to remove those static links so the plugin can work its magic.  You’ve been warned, plan the time accordingly.

Much More

If this is all that the Twitter @Anywhere platform could do, it wouldn’t be that big of a deal.  For now, I haven’t played around with anything else in the platform.  As that changes, and I get more time to experiment, I’ll post more details and examples.

If you’d like to learn more in the meantime, check out the official Twitter @Anywhere site for all the goodies.

Happy hacking, and if you do integrate this into your site (or already have), please leave a note with your thoughts and experiences.

– Kris

Related posts:

1. Counting My Tweeps

One of the Add-ons that I’ve used regularly for Firefox over the last few years has been the Web Developer Add-on by developer Chris Pederick.

So, when I switched over from Firefox to Google Chrome a little over a year ago, those handy tools were surely missed.  Every now and then I’d have to revert back to Firefox to debug a little JavaScript, troubleshoot a few CSS tweaks, or view some generated source markup.  But life still went on.

So, when Chrome Extensions official came out of Beta earlier this year, I knew there was hope.  And sure enough, I recently came across the official port of the Web Developer toolkit as a Chrome Extension.  Happy dance.

A Little Deeper

Take a closer look at the features that I’ve found the most helpful to my workflow in both Firefox and now the Chrome version, here’s a list of the functions I use the most:

• Edit CSS – this option lets you view all the CSS references in your web page and make adjustments while seeing the results real-time.
• View Generated Source – haven’t found this in the Chrome Extension yet, but in Firefox, this one let you view all the HTML that was currently rendered on the page.  This is helpful for any markup that’s generated dynamically using JavaScript or AJAX that isn’t part of the original markup sent to the browser.
• View JavaScript – let’s you view all the JavaScript files, local and external, referenced by your page all in one view.
• View Style Information – same deal as View JavaScript, and came in handy when I was just searching for something and not needing to edit just yet.
• Resize – this option let you set different view settings so you can view your page rendered with different resolutions.  Even more handier now for testing mobile websites.

There are a ton of other features that I use less often but it’s good to know they are available when needed.

Plus, one of the things I like about the Chrome version is that the tools are a flyout menu and not a dedicated toolbar like they are in Firefox.  One of the early reasons I liked Chrome in the first place was that it removed all the clutter in the browser, so that stays true to form here, too.

Thoughts?

Have you used the Web Developer add-on for Firefox or now the Chrome Extension?  Do you have other extensions for Chrome that you’re head over heels about that you’d like to share?  I’m still experimenting with a few myself, so if you feel like leaving a recommendation, I’m all ears.

– Kris

No related posts.