Your SlideShare is downloading. ×
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)

491

Published on

Despite being marketed as an entertainment device rather than a mobile platform for business, the iPad continues to gain traction as a mobile device for the next generation business user. For some …

Despite being marketed as an entertainment device rather than a mobile platform for business, the iPad continues to gain traction as a mobile device for the next generation business user. For some organizations, the rich user interaction and usability afforded by the iPad is a compelling reason to work towards cross-platform capability or iPad specific versions of line-of-business systems. In this session we’ll review custom iPad specific enhancements for SharePoint 2010, including changes to the user interface based on the orientation of the device. - See more at: http://mike-greene.com/2011/02/02/trispug-presentation-212011/#sthash.9aMfnjgs.dpuf

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
491
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Richmond SharePoint User Group October 31, 2012 ENHANCING SHAREPOINT 2010 FOR THE IPAD
  • 2. • Location • Born & Raised in Upstate, New York • Currently Live in Raleigh, North Carolina • Professional Experience • Working w/ SharePoint since 2007 • Consulting since 2010 • Public web design since 2003 • Hobbies • SharePoint Saturday/UG Speaker RIC, VB, ATL, AUS, TPA, RDU • Photography • Travel 6/6/2014 2Enhancing SharePoint 2010 for the iPad MICHAEL GREENE
  • 3. • Device Orientation Detection • CSS Approach • Scripted Approach • Branding for Device Orientation Demo • Cross-Platform Video • HTML5 Video • Security Considerations 6/6/2014 3Enhancing SharePoint 2010 for the iPad AGENDA
  • 4. DEVICE ORIENTATION DETECTION Core Concepts 6/6/2014 4Enhancing SharePoint 2010 for the iPad
  • 5. • SharePoint 2010 is cross browser compatible out of the box http://technet.microsoft.com/en-us/library/cc263526.aspx • Fully Supported: IE7 (32bit), IE8 (32bit), IE9 (32bit), Google Chrome (latest version), Mozilla Firefox (latest version) • Supported w/ Limitations: IE7 (64bit), IE8 (64bit), IE9 (64bit), Apple Safari (latest version) • Supported Mobile Platforms: Windows Phone 7.0+, iOS 4.0+, Android 2.1+, BB 4.0+, Symbian 3+ 6/6/2014 5Enhancing SharePoint 2010 for the iPad SHAREPOINT 2010 COMPATIBILITY Safari iPad != Safari iPhone != Safari iPod
  • 6. • Consumer adoption leading to growth in the business sector • New ability to touch and interact with business data • Increased user experience • Efficiently manage limited screen real estate 6/6/2014 6Enhancing SharePoint 2010 for the iPad DEVICE ORIENTATION DETECTION
  • 7. CSS APPROACH Device Orientation Detection 6/6/2014 7Enhancing SharePoint 2010 for the iPad
  • 8. • Utilizes orientation aware Cascading Style Sheets (CSS) • Little overhead, no code or script required • Detects Portrait vs. Landscape • Browser determines ratio of browser width vs. height • Use to display, hide, or change size of elements for specific orientations • Ideal for integrating orientation detection with site-wide branding 6/6/2014 8Enhancing SharePoint 2010 for the iPad CSS APPROACH
  • 9. 6/6/2014 9Enhancing SharePoint 2010 for the iPad SUPPORTED ORIENTATIONS Portrait Landscape
  • 10. 6/6/2014 10Enhancing SharePoint 2010 for the iPad ATTACHING STYLE SHEETS • Standard “link” tag with media attribute <link rel=“stylesheet” media=“all and (orientation:portrait)” href=“portrait.css” /> <link rel=“stylesheet” media=“all and (orientation:landscape)” href=“landscape.css” /> • Cross-Browser Support <!--[if !IE]><! --> <link rel=“stylesheet” media=“all and (orientation:portrait)” href=“portrait.css” /> <link rel=“stylesheet” media=“all and (orientation:landscape)” href=“landscape.css” /> <!--<![endif]--> <!—[if IE]> <link rel=“stylesheet” media=“all and (orientation:landscape)” href=“landscape.css” /> <![endif]--> All style sheets should be attached after Core.css and custom CSS registrations.
  • 11. • Hide Quick Launch when device is in Portrait orientation • Hide any content with the “notPortrait” class; similar to ues of “s4-notdlg”. EXAMPLES 6/6/2014 11Enhancing SharePoint 2010 for the iPad #s4-leftpanel { display: none; } .s4-ca { margin-left: 0px; } Portrait.css .notPortrait { display: none; } Portrait.css
  • 12. • Responsive Web Design (RWD) leverages CSS3 media queries to adapt to the user’s platform and resolution. • Paired with a fluid grid using percentages and Ems as opposed to fixed units (pixels or points). • Must account for all browser sizes if using min/max-width 6/6/2014 12Enhancing SharePoint 2010 for the iPad RESPONSIVE DESIGN @media screen and (orientation:portrait) { #s4-leftpanel { display: none; } .s4-ca { margin-left: 0px; } }
  • 13. SCRIPTED APPROACH Device Orientation Detection 6/6/2014 13Enhancing SharePoint 2010 for the iPad
  • 14. • Utilizes client-side script (Javascript/jQuery) • Scripted specifically for iPad • Identifies numerical orientation value • Orientation value returned by device hardware/accelerometer • Uses: • Bind functions to orientation changes • Animate element changes • Make changes to the Document Object Model (DOM) 6/6/2014 14Enhancing SharePoint 2010 for the iPad SCRIPTED APPROACH
  • 15. 6/6/2014 15Enhancing SharePoint 2010 for the iPad SUPPORTED ORIENTATIONS 0° 90° 180°-90°
  • 16. 6/6/2014 16Enhancing SharePoint 2010 for the iPad SCRIPTING ORIENTATION DETECTION <script type=“text/javascript”> function ProcessOrientation(currentOrientation) { // Handle orientation processing if (currentOrientation == 0 || currentOrientation == 180) { // Is Portrait } else if (currentOrientation == 90 || currentOrientation == -90) { // Is Landscape } } var isiPad = navigator.userAgent.match(/iPad/i) != null; if (isiPad) { // Process only if true ProcessOrientation(window.orientation); // Process initial orientation window.onorientationchange = function() { // Process when orientation changes ProcessOrientation(window.orientation); } } </script>
  • 17. • Hide Quick Launch when device is in Portrait orientation • Hide any content with the “notPortrait” class; similar to ues of “s4-notdlg”. EXAMPLES 6/6/2014 17Enhancing SharePoint 2010 for the iPad if (Portrait) { $(“#s4-leftpanel”).hide(); $(“.s4-ca”).css(“marginLeft”, 0); } if (Landscape) { $(“#s4-leftpanel”).show(); $(“.s4-ca”).css(“marginLeft”, “150px”); } jQuery if (Portrait) { $(“.notPortrait”).hide(); } if (Landscape) { $(“.notPortrait”).show(); } jQuery
  • 18. • Hide Quick Launch with animation when device is in Portrait orientation • Move contents of one container to another, and back again ADVANCED EXAMPLES 6/6/2014 18Enhancing SharePoint 2010 for the iPad if (Portrait) { $(“#s4-leftpanel”).animate( [“left”: “=-150px”], “slow” ); $(“.s4-ca”).animate( [“marginLeft”: “0px”], “slow” ); } if (Landscape) { $(“#s4-leftpanel”).animate( [“left”: “=+150px”], “slow” ); $(“.s4-ca”).animate( [“marginLeft”: “150px”], “slow” ); } jQuery if (Portrait) { $(“#C1”).clone().appendTo(“#C2”); $(“#C1”).html(“”); } if (Landscape) { $(“#C2”).clone().appendTo(“#C1”); $(“#C2”).html(“”); } jQuery
  • 19. • Hide Quick Launch with animation when device is in Portrait orientation • Move contents of one container to another, and back again ADVANCED EXAMPLES 6/6/2014 19Enhancing SharePoint 2010 for the iPad if (Portrait) { $(“#s4-leftpanel”).animate( [“left”: “=-150px”], “slow” ); $(“.s4-ca”).animate( [“marginLeft”: “0px”], “slow” ); } if (Landscape) { $(“#s4-leftpanel”).animate( [“left”: “=+150px”], “slow” ); $(“.s4-ca”).animate( [“marginLeft”: “150px”], “slow” ); } jQuery if (Portrait) { $(“#C1”).clone().appendTo(“#C2”); $(“#C1”).html(“”); } if (Landscape) { $(“#C2”).clone().appendTo(“#C1”); $(“#C2”).html(“”); } jQuery if (Portrait) { $(“#C1”).clone().appendTo(“#C2”); $(“#C1”).html(“”); } if (Landscape) { $(“#C2”).clone().appendTo(“#C1”); $(“#C2”).html(“”); } jQuery Sales 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr Cat 1 Cat 2 Cat 3 Cat 4 Chart Title Cat 1 Cat 2 Cat 3 Cat 4 Chart Title Sales 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
  • 20. BRANDING WITH DEVICE ORIENTATION Demonstration 6/6/2014 20Enhancing SharePoint 2010 for the iPad
  • 21. HTML5 Cross-Platform Video 6/6/2014 21Enhancing SharePoint 2010 for the iPad
  • 22. • No third party plugin support on the iPad, only option for embedded video is use of HTML5 • HTML5 standard dictates support for embedded video with <video> tag • HTML5 does NOT standardize video format 6/6/2014 22Enhancing SharePoint 2010 for the iPad HTML5 VIDEO IE Firefox Safari Chrom e Opera iOS Ogg (Theora/Vorbis)   3.5+  ‡  5.0+  10.5+  H.264/AAC/MP4  9.0+   3.0+  5.0+   3.0+ WebM   3.5+  ‡  6.0+  10.6+ ‡ Safari will render and video format supported by QuickTime; support for H.264/AACMP4 is shipped with QuickTime while other formats require additional client-side plugins.
  • 23. 6/6/2014 23Enhancing SharePoint 2010 for the iPad HTML5 VIDEO TAG <video width=“640” height=“360” controls> <!-- MP4 file must be first for iPad compatibility --> <source src=“video.mp4” type=“video/mp4” /> <!-- Safari/iOS --> <source src=“video.ogv” type=“video/ogg” /> <!-- Firefox/Opera/Chrome10 --> <!-- fallback to Flash --> <object width=“640” height=“360” type=“application/x-shockwave-flash” data=“flash.swf”> <param name=“movie” value=“flash.swf” /> <param name=“flashvars” value=“controlbar=over&amp;image=poster.jpg &amp;file=video.mp4” /> <!-- fallback image --> <img src=“video.jpg” width=“640” height=“360” alt=“title” title=“Can’t Play Video” /> </object> </video>
  • 24. • iPad passes embedded video requests to QuickTime for rendering • QuickTime lacks support for any proxy or authentication methods, and iPads cannot join a domain • Video files must be anonymously accessible 6/6/2014 24Enhancing SharePoint 2010 for the iPad SECURITY CONSIDERATIONS
  • 25. QUESTIONS?
  • 26. MICHAEL GREENE @webdes03 mike-greene.com

×