Australian SharePoint Conference 2012

1. HTML5, CSS3 and jQuery with
SharePoint 2010 – what you
can (and need to) start doing
now
MSPUG - May 2012
~ Chris O’Connor (OBS

2. About Me
 Senior Consultant at OBS
 Blog : www.sharepointroot.com
 Twitter : @GrumpyWookie
 Dad of three boys – and keen cyclist
 Let’s talk MTB (!)

3. Agenda
 HTML5 – what & why
 CSS3
 SharePoint 2010
 jQuery
 REST + JSON
 jQuery Templates
 SharePoint vNext (15/2013?)

4. History of the Web (HTML)
 HTML 3.2 and CSS 1.0 (~1997)
 Browser wars : Netscape vs. Internet Explorer
 HTML 4.01 and CSS 2.0 (~1999)
 Exit Netscape – Enter FireFox, Opera, Safari, etc.
 XHTML 1.0 and CSS 2.1 (~2000)
 HTML content pages written as valid XML documents
 HTML 5 and CSS 3.0 (~2005)
 Rejects the constraints added by XHTML
 New HTML elements, CSS properties and JavaScript APIs
** SharePoint 2010

5. Moving to HTML5
• Why ?
 HTML to work consistently across all modern
browsers
 Eliminate need for Flash, Silverlight, etc
 New JavaScript APIs
 Target mobile devices - CEO's iPad !!
• And, simply…
 New stuff that makes sense
 Evolution of the language of the web

6. A new simpler
DOCTYPE
A new semantic
element
A new functional
element
Example : HTML5

7. New HTML5 semantic tags
 Layout & structure
<header>
<nav>
<article>
<section>
<figure>
<dialog>
<aside>
<time>
<footer>
<header></header>
<nav></nav>
<footer></footer>
<article>
<section>
<h2></h2>
<p></p>
<p></p>
</section>
<section>
<h3></h3>
<p></p>
</section>
</article>
<aside>
<section>
</section>
</aside>

8. New HTML5 Functional Tags
 New Elements Provide Functional Behavior
<canvas>
<svg> [Scalable Vector Graphics – defined by XML]
<audio>
<video>
<source>
<command>
<datalist>
<embed>
<output>

9. New HTML5 Functional Tags
<input type=‘TYPE’ id=‘myField’ />
 New Types :
tel week
search time
url datetime-local
email number
datetime range
date color
month placeholder

10. New HTML5 Functions (API)
 Additional methods & functions (JavaScript)
 Geolocation
 Determine current location
 2D drawing
 Canvas – draw lines & graphics using JavaScript
 Drag and drop
 Images & attachments within browser
 <img draggable="true" />
 Web storage
 Key-value pair framework - like cookies, but much richer
(tastier ?)
 …. plus more
http://html5demos.com

11. New for CSS3
 Rounded corners
#example1 {border-radius: 15px;}
 Text shadow
#title{text-shadow: 2px 2px 2px #000;}
 Gradient
background: -ms-linear-gradient(top,
#2F2727, #1a82f7);

12. BUT…!
 “Modern” browsers support portions of HTML5
specification
 IE 9
 Google Chrome
 Mozilla Firefox v4
 Apple Safari v5 (iOS)
 Full HTML5 support across browsers
anticipated in “2022” !
 Need failback / other way to show if not
supported
 Avoid “if browser-x, then {aaaa}”

13. What about SharePoint 2010 ?
• HTML5 Master Page
• Include HTML5 tags
 ListView + XSLT to render HTML5
 Include in Content Editor WebPart (CEWP)
 Page Layout
• BUT – browser support always an issue
 Need to support IE8 and IE7

14. HTML5 + CSS3 + SharePoint
2010
DEMO

15. jQuery Fundamentals
• Designed to hide differences between browsers
 Eliminate browser-specific code
• Focuses on two primary tasks
 Retrieving sets of elements from HTML pages
 Performing operations on the elements within a set
• jQuery is a great alternative (safe bet)
 Compared to HTML5
 Browser support

16. jQuery and SharePoint 2010
• Load JavaScript to SharePoint
 Download jQuery (eg. jquery-1.7.1.min.js)
 STYLE LIBRARY
• Reference JavaScript file/s
 <SCRIPTLINK> tag – in feature
 <SCRIPT> tag reference – Master Page
• Or – directly within CEWP or XSLT

17. Feature to deploy jQuery
• Create a SharePoint project in Visual Studio
2010
 Create a site collection-scoped feature (i.e.
scope=site)
 Add a Module to deploy jQuery JavaScript files
 Eg. STYLE LIBRARY or SITE ASSETS

18. How to use jQuery
• JavaScript code
 CSS Selectors
 Action
<script>
$('#ContactName').html('Joe Smith');
</script>
 SELECT stuff…
 DO stuff…
 jQuery – should’ve been called jSelect (?)

19. jQuery Selectors
 jQuery leverages familiar CSS selector syntax

20. jQuery Actions
• Perform function/update to a piece of HTML
 html()
 addClass()
 attr()
 slideUp()
• Most jQuery object methods support
cascading calls

21. jQuery Events
• Document ready event handler
 Executed when DOM document is ready for
access
 Can also dynamically add events to DOM
 click()
 hover()
 keypress()

22. jQuery UI Library
• Pre-coded UI components
 Based on built-in theming scheme
• jQuery UI Widgets
 Auto-complete
 Date Picker
 Slider
 Progress Bar
 Tabs
 Accordion
 Dialog
http://jqueryui.com/

23. Demo
jQuery + SharePoint 2010

24. jQuery+ SharePoint 2010
DEMO

25. REST
• Previously had ASMX Web Services
 Eg. GetLists, etc
 Returns as XML data
 Difficult to construct + call (XML packet)
 New WCF REST’ful Web Services
 URL based query
 JSON data format returned
 JavaScript Object Notation

26. REST : using ListData.svc
Get all items in list
http://server/_vti_bin/ListData.svc
Returns all items in MyList
http://server/_vti_bin/ListData.svc/MyList
Returns all items in MyList ordered ascending by Title
http://server/_vti_bin/ListData.svc/MyList?$orderby=Title
Returns all items in MyList that has a column that equal to
'Music'
http://server/_vti_bin/ListData.svc/MyList?$filter=MyColumn
eq 'Music'

27. jQuery + REST
• jQuery provides methods to call across
network
 Call to REST-based Web services (ListData.svc)
 Delegate for OnSuccess + OnError
 Returns results in JSON format

28. jQuery+ REST + SharePoint
2010
DEMO

29. jQuery Templates
• Layout for displaying data collections rendered as
HTML
 Create layout within JavaScript
 using literal HTML and tokens
 Just like XSLT – only easier (!)
 Render data + layout
 tmpl() method
 Process template once for each item in collection

30. Bring it all together
 jQuery
 Call to REST web service
 REST
 SharePoint List Data
 JSON data returned
 jQuery Template
 HTML template

31. jQuery Templates

32. jQuery Templates

33. jQuery Templates

35. Demo
jQuery + REST + jQuery
Templates

36. SharePoint vNext
• Think more about dev. with client-side
 REST
 jQuery
 HTML5 ? Maybe – browser dependant
• Office 365
 Combined code-base w/ SharePoint 15
 SandBoxed Solutions – or Client Side
• Windows 8
 HTML+jQuery – apps

37. Confused ? Where to ?
• Long way before vNext is PROD everywhere
• Get started with jQuery
• Get started with REST
• HTML5
 Browser support – write-once, test-many
 Modernizr – JS library
 Sandboxed Solutions
 Next session – Elaine van Bergen

38. Summary
• HTML5 – what & why
• CSS3
• SharePoint 2010
• jQuery
• REST + JSON
• jQuery Templates
• SharePoint vNext (?)
• Question + Answer

39. References
 www.w3schools.com/html5
 html5demos.com
 jquery.com
 tutsplus.com/course/30-days-to-learn-jquery/
 Sends link to a video every day – learnt LOTS !
 SharePoint 2010 Developer Training Course
 msdn.microsoft.com/en-us/gg620703

40. Contact Details
 Chris O’Connor
 Senior Consultant, OBS
[email]
chris.oconnor@obs.com.au
[blog] www.sharepointroot.com
[twitter] @grumpywookie
 Come and say hello at the OBS booth – or UG
booth

41. Gold Sponsors
Bronze Sponsors Media Sponsors
Silver Sponsors