HTML Goodies: Lots of Education Waiting For You

Artikel
04/20/2011

Anyone noticed the HTML5 articles appearing at the HTML5 Development Center at HTML Goodies ? Not only am I seeing some good content, but I also see that they are supporting IE9 site pinning. Not to step over the valuable articles there, I looked into their site pinning implementation and there are several lessons in their effort.

Here’s their jump list menu for Windows 7 users:

HTML Goodies META tag’s

For reference, I’ve provided a snippet of their code below:

    1: <!-- Install Meta-->
    2: <meta name="application-name" content="HTMLGoodies" />
    3: <meta name="msapplication-tooltip" content="HTMLGoodies: The Ultimate HTML Resource" />
    4: <meta name="msapplication-starturl" content="https://www.htmlgoodies.com/html5/index.php/" />
    5:  
    6: <!-- Static Jump list task items -->
    7: <meta name="msapplication-task" content="name=Latest HTMLGoodies Articles; action-uri=https://o1.qnsr.com/ads2/r?%3Bn=203%3Bc=806673%3Bs=9518%3Bx=7936%3Bf=201103291502070%3Bu=j%3Bq=1%3Bz=TIMESTAMP%3B; icon-uri=https://www.htmlgoodies.com/favicon.ico" />
    8: <meta name="msapplication-task" content="name=HTML5 Development Center; action-uri=https://o1.qnsr.com/ads2/r?%3Bn=203%3Bc=806674%3Bs=9518%3Bx=7936%3Bf=201103291506150%3Bu=j%3Bq=1%3Bz=TIMESTAMP%3B; icon-uri=https://www.htmlgoodies.com/favicon.ico" />
    9: <meta name="msapplication-task-separator" content="Forum Tasks" />
   10: <meta name="msapplication-task"  content="name=HTML Discussion Forums; action-uri=https://o1.qnsr.com/ads2/r?%3Bn=203%3Bc=806675%3Bs=9518%3Bx=7936%3Bf=201103291518190%3Bu=j%3Bq=1%3Bz=TIMESTAMP%3B; icon-uri=https://www.htmlgoodies.com/favicon.ico" />

Static and Dynamic Jump Lists

Nothing earth shattering here, but I tell folks all the time: anyone can throw out a static jump list, but making the site more interactive will improve your customer retention – and you do that with dynamic jump lists and notifications. I believe that IE9 consumers will be the most valuable consumers to a site – if a site has a valued business proposition and creates an appropriate experience for the consumer through site pinning. But the site has to do its part. My soap box: simple experiences and low-valued content do not retain the consumer – so build something cool and engaging. It’s a win with IE9 consumers!

Semicolon in the static meta URL

If you’ve looked at the syntax for a static jump list, then you know that the format for building a static item is:

    1: <meta name="msapplication-task" 
    2:       content="name=Check Order Status;
    3:                action-uri=./myPage.aspx;
    4:                icon-uri=./favicon.ico"
    5: />

The content entry communicates 3 values: menu item text in name, the URL to jump to via action, and the icon to show. These fields are delimited by a semicolon. Easy enough!

But, what to do if you have semicolons in your URL? Notice what HTML Goodies did – just replace the semicolon with %3B, and problem solved. Note their code in lines 7, 8, and 10. (Thanks to Justin Posey and Brandon Satrom for this learning.)

Space in the static meta

Nothing note worthy here, but I haven’t left spaces around the proper field delimiter (semicolon) as in line 7 of the Html Goodies code. Just making a note that this was evidently valid syntax. I had no idea.

Another angle that caught my by surprise: when looking at their menu in the F12 Developer Tools on a static item that is broken across multiple lines (as in the semicolon example above), it shows the content attribute as one line, but with spaces in between the delimited string

Separator

I know that the MSDN doc’s talk about separators or dividers (my term) in the jump list menu. As you might notice in the HTML Goodies menu above, they have these dividers in the middle of the static jump list (what the UI exposes as the Tasks section). But this is the first production usage of the msapplication-task-separator that I’ve seen. Note line9 in the HTML Goodies sample above.

Got my curiosity going, so in my playing on my machine, here are few other pointers about this item:

Using a separator does not take away from your limit of 5 static items.
Back to back separator’sresult in one divider in the menu.
Multiple separator’srequire a unique value in the content attribute.

More explanation here on MSDN.

StartUrl Pointing to a Page

In most cases, I see msapplication-starturl pointing to a folder. (I’ve blogged about the issues with this entry, so assuming you know those facts already.) But, in the case of HTML Goodies, they point to a page (see line 5 in their code above), and this is definitely acceptable. The path is in there, and it has the trailing slash already.

Salutations

Thanks for stopping by again. Hoping that someone learns from these observations. I document them so my old mind won’t lose them.

Also, check out the content on HTML Goodies. Lots of good stuff there. I’m enjoying the HTML5 page. And you should pin it too!

Dela via