HTML5 is the up and coming standard for web development. It can create rich user experiences with less effort, enhance search functionality, and ensure a more consistent experience across different platforms. But what does that have to do with SharePoint? This session will answer that questions and cover the new features that are only available in HTML5, SharePoint 2013 HTML5 mobile pages, new SharePoint branding options, and some limitations organizations face when it comes to HTML5. Demonstrations will include: a custom map SharePoint webpart, dynamic animations, a rich video experience without plugins, and more. No coding experience is needed for this presentation.

1. SharePoint Saturday Chicago Suburbs - June 1st, 2013
SPS EVENTS
Chicago-Suburbs
In Plain English: What it means for SharePoint
and Your Organization
Jonathan Littleton

2. SharePoint Saturday Chicago Suburbs2
Agenda
• Introduction
• HTML5 Primer and Overview
• New Functionality
• New UI Features
• HTML5 Limitations
• Projects with HTML5
• HTML5 in SharePoint
• Next Steps

3. SharePoint Saturday Chicago Suburbs3
Sponsors
Platinum
Gold
Silver

4. SharePoint Saturday Chicago Suburbs4
About
Inspired thinking.
Purposeful execution.
Loyalty that lasts.
We cultivate customer
loyalty with ideas you can
do, data you can use, and
impact you can see – all for
the customers you want to
keep.
Customer
Experience
“
”
CRM
Salesforce.com
Technical Integration
Custom Development
Analytics
Salesforce.com
Technical Integration
Custom Development
Digital
Mobile platform development
(iOS, Windows 8)
SharePoint, Adobe CQ
High Performance
Contact Center
Customer Satisfaction
IVR Integration
As a Firm As a Practice
It’s a fast-paced world. Fluctuating
market conditions, increased
regulation, industry consolidation
and evolving technologies can
make “success” feel like a moving
target. To keep up and move ahead,
you must be prepared to
continually rethink how your
organization does business.
We partner with our clients to help
them thrive in today‘s economy:
 Seizing growth opportunities
 Understanding and focusing
on the right customers
 Uncovering new operational
efficiencies
 Developing data-driven
actionable insights.
The result: a clear course of action
that confidently takes you from the
goals you want to achieve to the
success you’ve always imagined.

5. SharePoint Saturday Chicago Suburbs5
About Me - Career
Developer
C#
Certifications
JavaScript
HTML
CSS SQL
BI Solutions (SSRS + PerformancePoint)
Custom Social Features
Custom Branding
Custom VisualStudioWorkflows
SharePoint Projects
ASP.NET
2007 to 2010 Upgrades
Microsoft: Programming in HTML5
with JavaScript and CSS3
MCITP: Microsoft SharePoint 2010,
Administrator
TS: Microsoft SharePoint 2010,
Configuration
IVR Integrations
Custom BCS Solutions
CMS => SharePoint Migrations

6. SharePoint Saturday Chicago Suburbs6
About Me - Personally

7. SharePoint Saturday Chicago Suburbs7
Overview
History of HTML Primer, History of HTML, HTML5 Myths

8. SharePoint Saturday Chicago Suburbs8
A Quick Primer
HTML CSS JavaScript
HyperText
Markup
Language
Browsers Read
and Render
HTML
Cascading Style
Sheets
Primarily Styles
HTML
Scripting
Language
Runs on End
User Computer
HyperText
Markup
Language
Browsers Read
and Render
HTML
Cascading Style
Sheets
Primarily Styles
HTML

9. SharePoint Saturday Chicago Suburbs9
A Little Bit of History: From HTML 1.0 to HTML5
1989
HTML Standard
Proposed
1991
Publically
Available
1995
First “Browser War”
1996
World Wide Web
Consortium Founded
1997
First W3C
Recommendation
2008
HTML5 Published
as Draft

10. SharePoint Saturday Chicago Suburbs10
What Exactly is HTML5?
Myth Reality
HTML5 Defines a
Toolset
HTML5 Defines a
Feature/Tool
HTML5 Only Applies
to HTML
CSS
JavaScript
HTML HTML5 Applies to
HTML, CSS, and
JavaScript
CSS
JavaScript
HTML
HTML5 is New
Technology
HTML5 is a Set
Definitions
Official

11. SharePoint Saturday Chicago Suburbs11
Why Do We Care About HTML5?
HTML5 is the Future
HTML5 Can Make
Development Faster
HTML5 Can Make
Websites Faster
HTML5 is Relevant in
Windows 8 and
Mobile Development

12. SharePoint Saturday Chicago Suburbs12
New Features and Functionality
Drag and Drop, Forms, Geolocation, Client Storage

13. SharePoint Saturday Chicago Suburbs13
Drag and Drop
Library
DesktopBrowser
Drag and Drop App
List A List B List C
Upload Here
Document.docx …
TPSReport.docx …

14. SharePoint Saturday Chicago Suburbs14
New Field Functionality

15. SharePoint Saturday Chicago Suburbs15
Location Based Functionality
Office
Announcements
User’s Latitude
and Longitude
Your HTML5 Site!
JavaScript

16. SharePoint Saturday Chicago Suburbs16
Client Side and Offline Storage
Client Side
Storage
Offline App
Cache
Local Storage
Web SQL
Index DB
FileSystem
Your HTML5 Site! Internet
Your HTML5 Site!

17. SharePoint Saturday Chicago Suburbs17
Under the Hood Enhancements
CSS Effects
Search
Engine
Optimization
Web
Workers
Google
Bing
Yahoo

18. SharePoint Saturday Chicago Suburbs18
UI and Design Changes
Drawing and Graphics, CSS Transforms, and Video Enhancements

19. SharePoint Saturday Chicago Suburbs
S
19
Dynamic Pictures and Graphics
Canvas SVG
Scalable
Vector
Graphics
S

20. SharePoint Saturday Chicago Suburbs20
CSS Transforms, Transitions, Animations
Rotation
Skew
Translate
3D Transforms
Scale
TransitionsTransform Animation
How to Change
Styles
Gradual Style
Changes
A => B
A => B => C =>
etc.
Demo Demo

21. SharePoint Saturday Chicago Suburbs
21
Media Enhancements
Adobe Flash
Player
Java
RealPlayer
Unity
Silverlight
Shockwave
QuickTime
Windows
Media Player

22. SharePoint Saturday Chicago Suburbs22
Limitations
Browser Implementation and Current State of HTML5

23. SharePoint Saturday Chicago Suburbs23
Inconsistent Browser Implementation
IE10 Safari Firefox Chrome
320
378
394
468
Source: www.HTML5test.com HTML Logo from W3C
500 500 500 500
0 0 0 0
300 300 300 300

24. SharePoint Saturday Chicago Suburbs24
Inconsistent Browser Implementation
Windows Phone iOS Android BlackBerry
320
386
468 485
Source: www.HTML5test.com HTML Logo from W3C
500 500 500 500
0 0 0 0
300 300 300 300

25. SharePoint Saturday Chicago Suburbs25
Compatibility Trends
Source: www.HTML5test.com
Desktop Compatibility Mobile Compatibility

26. SharePoint Saturday Chicago Suburbs26
HTML5 is a Moving Target
HTML Logo from W3C
2008: First
Working Draft
April 2013: Element
Removed from HTML5
2011: Last Call
for Suggestions
December 2012:
“Feature Complete”
Present: 20 Features
Still at Risk of Being
Removed

27. SharePoint Saturday Chicago Suburbs27
Projects with HTML5
Internal Applications and Public Sites

28. SharePoint Saturday Chicago Suburbs28
Internal Web Applications
Your New Internal Site!
Target Audience
I I
Faster Applications
Coolest thing since
sliced bread
More Features
Forms
Identify HTML5
Features Based on
Requirements
Compare Available
Features in Target
Audience Browsers
Implement and Test
Like Normal
Manage
Expectations
Canvas
Geolocation

29. SharePoint Saturday Chicago Suburbs29
Public Websites
Your New Company Site!
I I I I I6 ?
Target Audience
Same as Internal
Sites But More
Planning is required
Larger Audience
Means More
Complexity
Plan for Browsers
with Missing
Features
Diminishing Returns
are a Factor
Forms?
Canvas?
Geolocation?
ROI
Level of Effort

30. SharePoint Saturday Chicago Suburbs30
Public Websites – Search Engine Optimization
Your New Company Site!
Search Engines
I
Results
Company Site
Search Engine
Your New Company Site!
Other Site
?
Google
Bing
Yahoo
Ask

31. SharePoint Saturday Chicago Suburbs31
HTML5 in SharePoint Solutions
Solutions, Apps, and Device Targeting

32. SharePoint Saturday Chicago Suburbs32
Enhanced Web Part and App Functionality
SharePoint
Apps
Site
Pages
SharePoint Solutions
and Apps
Mobile Solutions
Mobile Browsers
Implement more
HTML5 Features
Web Apps
vs
Hybrid Apps

33. SharePoint Saturday Chicago Suburbs33
Device Channels in 2013
Home Page
BB CSS iOS CSS
IE CSS Chrome

34. SharePoint Saturday Chicago Suburbs34
What Can I do?
Next Steps and Tools for success

35. SharePoint Saturday Chicago Suburbs35
What Can I do as Next Steps?
Advocate & Educate
Inventory & Analyze
Current Web Apps
Never Forget
Stay Current on
HTML5 News
Communicate
with Your Team
Use HTML5 in
Projects
Web Analytics is
Your Friend
Happy Medium
for ROI
May have to Start
from Scratch
People use Your
Web Apps
To Stay Curious
Usability and
Design Principles

36. SharePoint Saturday Chicago Suburbs36
Tools For Success
HTML5 Rocks
HTML5 Demos
HTML5 Gallery
W3.org
MS Virtual Academy
Browser Stack
Browser Shots
Can I Use...?
HTML5 Test
SharePoint Experience
MS SharePoint Dev Blog
Apps for Office and
SharePoint
Advocate & Educate
Inventory & Analyze
Current Web Apps
Never Forget

37. SharePoint Saturday Chicago Suburbs37
Thank You!
Email:
jlittleton@westmonroepartners.com
Twitter:
https://twitter.com/jonlittleton
Blog:
http://thesharepointdive.wordpress.com/
West Monroe Website :
http://www.westmonroepartners.com/
West Monroe Blog:
http://blog.westmonroepartners.com/

38. SharePoint Saturday Chicago Suburbs - June 1st, 2013
SPS EVENTS
Chicago-Suburbs
38

39. SharePoint Saturday Chicago Suburbs39
Attribution Slide
• HTML5 Shield
HTML5 Shielfd was created by the World Wide Web consortium.
• SharePoint and Internet Explorer
SharePoint and Microsoft Internet Explorer Logo are either registered trademarks or trademarks of Microsoft Corporation in the
United States and/or other countries.
• Chrome Icon
Google Chrome™ is a Trademark of Google Inc. All other company and product names may be trademarks of the respective
companies with which they are associated.
This speaker and West Monroe Partners is not affiliated with or sponsored by Google Inc.
• Kinect Sensor Image
Kinect_Sensor_at_E3_2010_(front).jpg: James Pfaff (litheon)
derivative work: AlphathonTM (talk)
Captions by Dancter (talk) (added to this version by AlphathonTM (talk))