2012 - HTML5, CSS3 and jQuery with SharePoint 2010

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

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

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

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

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

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

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>

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

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

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

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);

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}”

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

HTML5 + CSS3 + SharePoint 2010 DEMO

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

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

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

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 (?)

jQuery Selectors  jQuery leverages familiar CSS selector syntax

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

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

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/

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

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'

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

jQuery+ REST + SharePoint 2010 DEMO

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

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

Demo jQuery + REST + jQuery Templates

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

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

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

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

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

Gold Sponsors Bronze Sponsors Media Sponsors Silver Sponsors

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

More Related Content

What's hot

Similar to 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

More from Chris O'Connor

Recently uploaded

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Editor's Notes