SharePoint and HTML5


You may also be interested in: Microsoft Project Conference 2012


 

Editor’s note: Contributor Fernando Hunth is a SharePoint Architect and Nintex consultant at Baufest. Follow him @fhunth

2012-03-09-SPandHTML5-001.pngIntroduction

The purpose of this SharePoint and HTML5 series is not to dismember HTML5 but to see how we can apply it within SharePoint. Each article, features relevant research and useful links to other related resources for SharePoint and HTML5, as well as some live samples.

There are lots of resources where you can learn about the new version of HTML, HTML5, in detail.  You can find several resources here:

When asked the question "what is HTML5" here are some of the responses I’ve heard from users:

"it’s about the new Semantic Web."
"it’s the Adobe Flash replacement."
"it’s the new language for mobile applications."
I’ve also heard some people mention structural elements, Client Storage, etc

HTML5 was introduced by The WHATWG  – Web Hypertext Application Technology Working Group and W3C World Wide Web Consortium. Designed to help web developers/Designers, there is no need to add plugins for things like video, Audio/mp3, date select function, placeholder in input box, Canvas, 2D/3D Graphics, Local SQL Database, etc.

With all that available you can start writing more logic and semantic web documents. It’s our job to use those tools in a smart or intelligent way so as to create quality content and enhance the way we write and understand the web.

2012-03-09-SPandHTML5-002.pngBasic Questions

Let’s begin by answering some basic questions

What is <!DOCTYPE> ?

The <!DOCTYPE> is an instruction for browsers as to what version of HTML the page is written in, having no end tag and is not case sensitive.

The <!DOCTYPE> declaration must be the very first thing in an HTML5 document, before the <html> tag. As in HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

2012-03-09-SPandHTML5-03.pngMarkup elements

<article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>

Media Elements

<audio>
<video>
<source>
<embed>
<track>
<canvas>

Input Type Attribute

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
placeholder

Video and Audio

Video


<video width="800" height="600" controls="controls">
  <source src="Satisfaction.mp4" type="video/mp4" />
  <source src=" Satisfaction.ogg" type="video/ogg" />
  </video> 

Audio


<audio controls="controls">
  <source src="Satisfaction.ogg" type="audio/ogg" />
  <source src="Satisfaction.mp3" type="audio/mpeg" />
  </audio>

Canvas Element

You can use the canvas element to draw graphics images on a web page by using Javascript/jQuery like below


<canvas id="SharepointCanvas" width="800" height="600"></canvas> <script type="text/javascript">
var SharepointCanvas=document.getElementById("SharepointCanvas");
var pcdsText=SharepointCanvas.getContext("2d");
pcdsText.fillStyle="#FF0000";
pcdsText.fillRect(0,0,150,75);
</script>

2012-03-09-SPandHTML5-04.pngStorage

localStorage

If you are not using HTML5, you can do it with cookies. Cookies are not very good for large amounts of data, because they are passed on all roundtrips, compromising performance.

Now In HTML5, it is possible to store large amounts of data without affecting the website’s performance and the data is stored in different areas. If you need to create localstores you just need to call localStorage objects like below.


<script type="text/javascript">
localStorage.name="Fernando Hunth";
document.write(localStorage.name);
</script> 
<script type="text/javascript">
localStorage.address="Argentina";
document.write(localStorage.address);
</script>

The sessionStorage object stores the data for your current session. The data is deleted when you close the browser window.

You can take a look at the HTML5 elements and their constant changes at http://dev.w3.org/html5/markup/elements.html 

Let’s get started with SharePoint and HTML5

There are some basic ways to use HTML5 in SharePoint.

  • CEWP
  • Master Pages
  • Custom WebParts
  • Etc

There is also more advanced stuff to use on SharePoint, but we’ll take a look at this later. For this chapter let’s cover how to make use of some HTML5 with a CEWP

Content Editor Web Part – CEWP

Here is a live sample that shows a red rectangle drawn on a CANVAS element using a SharePoint Content Editor Web Part.

2012-03-09-SPandHTML5-05.png

Here are the steps to make it run on your SharePoint Page:

Steps

  • Create  a new .js file and add this code:

<canvas id="myCanvas" width="200" height="100" style="border-bottom: #c3c3c3 1px solid; border-left: #c3c3c3 1px solid; border-top: #c3c3c3 1px solid; border-right: #c3c3c3 1px solid">
 </canvas>
 
 <script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

  • Upload the .js file to a SharePoint Document Library
  • Create a new page with a Content Editor Web Part
  • Edit the Content Editor Web Part
  • On the Content Link attribute write the full path of the javascript file that you have uploaded
  • Click OK
  • Save the page
  • Browse it with a browser that allows rendering HTML (for example Google Chrome)