2012 - HTML5, CSS3 and jQuery with SharePoint 2010
Download as PPTX, PDF1 like1,127 views
This document provides an overview of HTML5, CSS3, jQuery, and REST and how they can be used with SharePoint 2010. It discusses the new elements, functions, and APIs in HTML5 and CSS3 and how they allow for richer user experiences. jQuery is presented as a way to select and manipulate page elements as well as call REST web services. REST services through ListData.svc and returning JSON data are demonstrated. jQuery templates are shown as a way to display data collections. The future of SharePoint development moving more to client-side technologies like these is also discussed.
![New HTML5 Functional Tags
New Elements Provide Functional Behavior
<canvas>
<svg> [Scalable Vector Graphics – defined by XML]
<audio>
<video>
<source>
<command>
<datalist>
<embed>
<output>](https://image.slidesharecdn.com/html5css3andjquerychris-150828055150-lva1-app6892/85/2012-HTML5-CSS3-and-jQuery-with-SharePoint-2010-8-320.jpg)
![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](https://image.slidesharecdn.com/html5css3andjquerychris-150828055150-lva1-app6892/85/2012-HTML5-CSS3-and-jQuery-with-SharePoint-2010-40-320.jpg)
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 (!)
- 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
- 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] [email protected] [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
Editor's Notes
- #2: Chris O’Connor (OBS) [email protected]
- #7: HTML5 example – sample ‘page’ – not necessarily ASP.NET or SharePoint – but just as an example
- #8: Good description : http://www.ibm.com/developerworks/library/x-html5/
- #9: EXAMPLES : <input list="browsers" name="browser" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <i>Your browser does not support the video tag.</i> </video> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
- #11: Drag + drop to document library – in SharePoint vNext – wouldn’t that be cool ?!?
- #12: Other links : http://www.css3.info/preview/multiple-backgrounds/ http://css-tricks.com/examples/CSS3Gradient/
- #14: Master page – using Header, Nav, Content, Footer
- #26: REST = Representational state transfer JSON = JavaScript Object Notation
- #27: Turn off feed view http://www.walkernews.net/2007/03/25/ie-7-xml-feed-display-rss-feed-validation/ Comes back as RSS feed – need to view as XML