Category Archives: HTML5

HOW TO: Google Authorship Markup the Easy Way

Posted on by
1

With the introduction of Google+, Google has introduced a way for authors, both high and low profile, to stand out in search results. Why? What’s wrong with current search results? Well, it turns out people trust certain sources of information more than others. The markup allows users to see the name and profile picture of a link source. So if you’re a well-known author, it lets Google searchers see that authors name and profile picture, enabling them to quickly make a decision as to the quality of the link. Google wins because it gets authors to use their new Google+ service, plus it requires the author to link back to Google. There is a lot of misinformation on the Web about how to set up the links and establish the relationships, so I am outlining a process with some tips to get you started quickly.

Create Your Author Link for Single Author Blogs and Traditional Web Sites

Each page of content needs tagging to establish the link to an “author” page on the domain. Google uses the Google+ profile page to verify the relationship from and to the blog or site. How do you get started?

  1. Set up a Google+ Profile
  2. Create a link to your main site or blog from the Google+ profile (check that the link is “me” or “author”)
  3. Get and customize the standard Google+ button at the Google Profile Button page
  4. Add a button on all pages in the site that link to the Google+ profile (you can see an example on my blog sidebar and footer at kenmorico.com/blog)

Here’s what the final button looks like:

Google’s Matt Cutts and Othar Hansson discuss how to connect authors with their content using authorship markup in this video:

Verify the Link Relationships

You’ll need to verify link relationships after you’ve set up the Google+ profile and the buttons on your site or blog. Luckily Google makes this easy with their Rich Snippets Testing Tool. Just enter your URL and you’re good to go.

Configure WordPress for Google Authorship Markup for Multiple Users

If you have multiple authors writing for a blog you need to tweak WordPress for Google authorship markup. Also, I tweaked my blog to show my bio after each post, so I need this tweak as well.

To configure WordPress for multiple users and get it to work with Google authorship markup you need to perform the above steps for a single author blog and do these two things in addition:

  1. Install the “Allow REL and HTML in Author Bios” WordPress plugin (search for it in your WordPress plugins section and install it from there)
  2. Add a link to the Google+ Profile with rel=”author me”

When you check the Rich Snippets Testing Tool you might get this error:

Error: Author profile page does not have a rel=me link to a Google Profile

It’s important to have rel=”author me” because WordPress creates an author page for each user and having this extra page creates a problem with the standard rel=”author” markup.

Get a Professional Photo

Since profile photos are going to appear next to content links on Google search results pages, it makes sense to get a professional of yourself. Nowadays almost everyone knows someone with a DSLR camera, so you can probably get a session with a friend of yours. That will allow for more creative options and more time getting the right shot. You and your content will be competing with the big boys, so be prepared.

How Long Does it Take to Get My Picture Associated with Content?

Google is slowly rolling out the picture and profile hookup. According to research I’ve done, even if you implement everything correctly, there’s no guarantee that Google will associate your picture and author profile with your content. I have been noticing more and more pieces of content with author profiles, however. Googlebot works at Googlebot’s pace. You can’t get Googlebot to index your site faster, or get it to index all pages on a site. It would seem to me Google would only highlight relevant authors and low-quality authors would be treated like low-quality content. Kind of cold, but dem der da facts.

What Does the Search Results Page Look Like?

Here’s a live example of a real-world search:


As you can see, the listing with the author image really stands out with next to the other listings. What’s great about the authorship markup is that it could be used for any content – images, video, etc. Get on it and get promoted!

Related Posts

Blubrry Releases New WordPress HTML5 Podcasting Plugin

Posted on by
Reply

Blubrry PowerPress HTML5 - LogoBlubrry recently released a new version of their PowerPress Plugin for self-hosted WordPress sites. The plugin makes it really easy to put together a podcast and make it work with browsers that support HTML5. When you post podcasts on your blog, they appear just like regular posts, but with attachments. When your visitors come to your site and view your post, they will see either a Flash-based audio / video player OR the native HTML5 browser player. This future-proofs your podcast. Also, the plugin makes it easy to syndicate your podcast to iTunes. iTunes syndication is complex and requires a lot of code without the use of an easy-to-use plugin. It supports audio and video podcasts.

You can see the plugin in action with HTML5 on my post / podcast about the freemium model and promo codes.

Here is a video from Blubrry explaining how to set up the plugin:

Podcasting is a lot of fun. If you are interested in podcasting, join my LinkedIn group, Podcast Producers.

Related

Web Employment Heating Up – HTML5 Top Job Trend

Posted on by
Reply

It’s good to be in the Web space right now. My filtered inbox of jobs is stuffed with positions from all over the country. I received requests for 37 positions this past January vs. 3 in January 2010. Previous months during the last 6 years averaged 8.3 / month (with my resume in inactive states for a few years). This February was very strong as well, and the quality of jobs has improved significantly. There is a liquidity in the job market that just didn’t exist a few months ago.

html5 job trend graph - Indeed

Healthcare and tech are the top industries now. According to job site indeed.com, HTML5 is the number one job trend right now.  Just look at this graph. Of course, I saw this trend coming in early 2010 and made KenMorico.com fully HTML5. I anticipated the meteoric rise in job postings and skill demand and prepped myself. It seems to be paying off.

You can see job trends and hiring conditions on this wonderful government site, the Bureau of Labor Statistics, part of the United States Department of Labor. There’s an important monthly jobs report the tells you the number of jobs created or lost along with other data. You can see useful industry-specific job trends in the private space on Indeed.com/jobtrends.

Recent years have been quite soft in demand due to the recession and “jobless recovery” in the earlier part of the 2000s. After the dotcom bust and 9/11, tech was hit hard. The maturing of the industry and boost from social media and mobile have re-energized the space, along with a now slow, but moving jobs recovery.

I remember when my career was just getting started in 1999/2000. I was receiving over 20 positions a day in my inbox. Many positions in no way was I qualified for. But recruiters needed bodies. I feel like this will happen again.

I often think what would have happened if I had taken a job in New York I heard about through a recruiter in 2000. At the time I was living in Connecticut near New York. The job was at the World Trade Center. The World Trade Center was a massive space. 50,000 people worked there. I moved to Los Angeles in early 2001. Sometimes you need to follow your gut when it comes to jobs. This time my gut tells me things are getting better and good times are back.

Mobile Web Apps or Native Mobile Apps?

Posted on by
Reply

Native Mobile App - HTML5 Mobile Site ComparisonWhen it comes to developing an application for mobile users, there are two routes to reach users. A dedicated mobile software application like the ones you find in the Apple App Store or Google Android Marketplace is one route, or an HTML Web site optimized for mobile devices like Google.com, latimes.com, or one of many popular blogs.

Both routes have advantages and disadvantages. Mobile software applications run fast. They are compiled and use all the hardware acceleration features built into the phone. 3D games, for instance, run very fast on native apps. WebGL does offer a glimmer of hope for Web-based games, but that is years away. I also contend that software programmers are better programmers than HTML / Web front-end programmers. More experienced programmers write better code which results in faster applications. For example, there is a much higher learning curve when writing Objective C and Java code compared with HTML and Javascript. They don’t use the browser chrome (or frame) so apps can display full screen. One of the biggest advantages is the tie-in with hardware components. Programmers can access a compass, accelerometers, GPS with location information, cameras, pictures, address book, video camera to enable video chat, and more.

Chrome-less Native App- Digitally Imported iPhone App

Chrome-less Native App

Some of my favorite native apps for the iPhone include the Digitally Imported Radio app and Dungeon Hunter 3D game can’t be created on a mobile Web app. The radio app streams audio while detecting if a user is on WiFi or 3G, and allows multitasking (streaming radio while browsing Web or e-mail). The 3D game uses complex graphics APIs not possible on the Web right now. These hardware services simply aren’t available to Web developers. That is changing, however.

The Case for HTML5 Web Apps

Multi-touch gestures and location information is available on the iPhone, and possibly for Android phones as well. Carl Sjogreen of Nextstop, a location service based that was recently acquired by Facebook, talks about why his team decided to use HTML5 instead of a native iPhone app:

Other companies are also stepping up development of HTML5-enabled mobile sites. YouTube just overhauled its mobile site and uses HTML5 video tags to power its video delivery along with a better designed user interface. Here’s what Alex Nicolaou, Engineering Manager, Google Mobile says on this Google Code Blog post

Enter HTML5. We’re very excited about the evolving HTML5 standard because it enables mobile and desktop website designers to deliver the advantages of client-side and server side development to their users simultaneously! New APIs let web applications start offline and store data on the client. The canvas API lets you draw complex user interfaces, or you can use advanced CSS tricks to get the browser to render a rich UI. In addition, the W3C Geolocation API is being adopted and implemented by browser developers, enabling entire new categories of web applications to be built. The benefits are clear: you can develop fantastic new applications, benefit from server-side analytics and iteration to deliver features that your users want, and know that offline functionality keeps things running as the user moves in and out of coverage. Your users can enjoy fast, capable web apps that they can access from any device, without the need to copy their data from place to place or worry about installing software or being online.

iPhone HTML5 mobile site

KenMorico.com Mobile Site

There are many reasons why I prefer a straight HTML Web app. I’ve built a mobile version of my own site, KenMorico.com, so I can tell you from experience the many benefits of using a mobile HTML5 Web app. First, the code can be integrated with the code for your main Web site or Web application. All you are doing is checking which device users are coming from and disabling site features using Javascript. I tailor features on my site for desktop, iPad, and iPhone / Android phones. My full site uses HTML5 video as part of the page background. Currently, iPhones can’t render the video without displaying it fullscreen in its built-in video player. Fine. I just don’t show the videos at all to iPhone users. I also have a slideshow I show to users on desktops / laptops. Phone users won’t be able to see it, but iPad users will because the iPad is slightly more capable than the iPhone.

Note too that to test native apps you need to BUY THE HARDWARE. There are thousands of combinations of hardware – especially Android phones. Most people I know only have one smartphone. With HTML5, you are targeting a screen resolution, not different operating systems or hardware features. Setting up a testing center for Android, iOS, Windows Phone, and Blackberry will be a nightmare.

Rapid Mobile Development with HTML5

HTML5 Web apps take far less time to develop, test, and launch. You don’t need to go through an App store to get it approved. You don’t need to learn multiple languages to develop a separate app. You don’t have to worry about wasting your time, because it’s more likely HTML5 Web apps will replace native apps versus the other way around. However, native apps allow for a lot of cool features and a consistent visual appearance. HTML5 Web apps will mostly look the same on all browsers, but there could be variances here and there. This is because there are hundreds of browsers, versus two major phone operating systems – Apple iPhone iOs and Google Android. This still is one of the major benefits of the now controversial Adobe Flash technologies. Consistent layout design across computers.

It’s Always About the Money, Right?

Michael Calore wrote a nice comparison table of native app vs Web app development considerations in this webmonkey article. He points out the way you can advertise on the platforms differ. With much higher success rates for online advertising using Apple’s new iAd advertising platform – developers may be persuaded to develop native apps only simply for the monetary factor. This LATimes blog post highlights Nissan’s experience with iAds:

Nissan, which created a multilayer interactive ad for its electric LEAF car, said customers spent an average of 90 seconds with the ad — 10 times longer than interaction times for comparable online ads. Moreover, people chose to “tap” on the Leaf iAd five times more frequently than they clicked on regular online display ads for the Leaf.

Also consider it is much easier for developers to monetize native apps because users can purchase the apps immediately.

For now, I expect many of you to surf my HTML5 mobile site while listening to music from a multi-tasking enabled native app. That’s the world now. And it works.

Being an HTML5 Hero and Nunchucking Browser Quirks

Posted on by
Reply

Firefox html5Nunchucks in your face Firefox! Nunchucks from above Apple! With the launch of my new HTML5 site KenMorico.com I felt I had to really bring out some skills to create the kind of site I wanted… a creative, HTML5, cross-platform site with search engine optimization (SEO). It felt like 2000 all over again. Some browser features work here, some work there, and nothing consistent. Throw in the mix iPhone, iPad, and other mobile devices and your head starts spinning faster than a BP CEO.

HTML5 – Smart Choice for the Long Haul, Not the Short

Since Web sites take a long time to build, but stay live for years, I decided it was worth the effort to make it work. HTML5 is the future. A few challenges with my site: getting video to play onload, loop, and get manipulated via javascript commands.

Did you know that Firefox supports the HTML5 video tag, but not the loop attribute? So you can’t just make videos loop. You need to write out code to make it unload and load videos. Safari and other browsers support this. But not this so-called “advanced” browser.

What About Apple?

What about Apple products? iPhones don’t support video on page load. Only full-screen video when a user clicks on a video image. Of course, Apple says this is by design, because of bandwidth issues on the phone. With AT&T’s new stingy data plans, this is understandable. iPad supports video on load, but when I was in line for the new iPhone 4 a person loaded my site and the video displayed but wouldn’t play. I suppose it was because he was on a 3G connection.

HTML5 video isn’t all the same either. Apple and Microsoft browsers use H.264 encoded videos. Firefox uses OGG encoded videos. That means for every video you post, you need to encode two videos to make sure it reaches the widest audience.

Just when you thought iPhone targeting was simple, the new iPhone 4 has quadruple the resolution of the original iPhone. Targeting a browser by resolution gets fuzzy when a mobile display has the capabilities approaching a desktop display. Viewport meta tags get confusing and stylesheet setup complex.

In all, the new site was challenging, and I continue to tweak it for mobile displays, but worth the effort. I feel like an HTML5 hero. My nunchucks are prepped for more HTML5 projects.

[UPDATE 5/7/2011: many popular Web plugins like the JWPlayer video player and the Blubrry PodPress now support HTML5 fallbacks for browsers (or flash fallbacks if you choose). Research your web plugins and software to see if there is an update.]

Additional Reading

Mobile Web Apps or Native Mobile Apps?