Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
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 (!)
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
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
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 (?)
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/
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
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
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
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