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.
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).
Input Type Attribute
Video and Audio
<video width="800" height="600" controls="controls"> <source src="Satisfaction.mp4" type="video/mp4" /> <source src=" Satisfaction.ogg" type="video/ogg" /> </video>
<audio controls="controls"> <source src="Satisfaction.ogg" type="audio/ogg" /> <source src="Satisfaction.mp3" type="audio/mpeg" /> </audio>
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.
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.
- Master Pages
- Custom WebParts
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.
Here are the steps to make it run on your SharePoint Page:
- Create a new .js file and add this code:
- 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
- Click OK
- Save the page
- Browse it with a browser that allows rendering HTML (for example Google Chrome)