V4 SP2 Snippets
See
also the Snippets tutorial
I've created seven groups of snippets for SP2, described below.
Robots Meta Tags
The Robots Meta Tags cover the normal robots related tags.
HTML5
Note: V2 Update added 20 Sep 2011
The snippets for the new HTML5 semantic layout elements include a
JavaScript shim (sometimes known as a 'polyfill'), 'LT IE9 shim'
and a style definition, 'LT HTML5 style' that enables these
elements to be recognised and styled by versions of IE6 upwards. This
ensures users with non-HTML5 browsers still see the page as you
intended.
Note: that this shim should be placed within the
<head>..</head> tags and the style should be added to your
main stylesheet.
The Microdata snippets follow a data model that is recognised by the
major search engines.
For an explanation of these Microdata parameters see
Schema.org
Google +1
To add a Google +1 button to a page using these snippets, first add the
'JavaScript tag' inside the <head>..</head> section of the page and then
add the 'Google +1' snippet where you want the button to appear on the
page.
Note that this won't show in xWeb's Design View and needs to be
previewed in a browser.
Downloadable from the
Expression Gallery
Lorem Ipsum filler text
The Lorem Ipsum filler text snippet is a reworking, for SP2, of Anna Ulrich's
original snippets for V3, V3 and V4.
These allow you to insert 1 to 5 paragraphs of Latin filler placeholder
filler text. This can be useful when working up a design or demonstrating an
outline to a customer etc.
CND - Javascript libraries
These provide links to the JavaScript libraries on the Microsoft Ajax and
Google CDNs.
If you are not familiar with these you should read the on-line
documentation.
jQuery
Cycle plug-in
jQuery Mobile
jQuery Validate
Modernizr Note
that this is a link to the full 'development' version. For use on a live
site you should use a site-specific version that can be created on the Modernizr site.
Google WebFont Loader
IE Conditional Comments
With the increasing use of HTML5 in particular, it's increasingly
necessary to use conditional styles for both IE9 and the earlier
versions to ensure a common browser viewing experience.
These snippets include the frequently used Conditional Comments.
The "!IE" (NOT IE) comment has the correct format, which is
slightly different to the others and is often used incorrectly.
A test
page shows these in use. Open the page in say IE9 and then use
the Developer Tools to change the browser mode. You'll see the
browser type is detected. If you test in any other browser, you'll
see the green block changes to red.
Downloadable from the Expression Gallery