Richmond SharePoint User Group
October 31, 2012
ENHANCING SHAREPOINT 2010
FOR THE IPAD
• Location
• Born & Raised in Upstate, New York
• Currently Live in Raleigh, North Carolina
• Professional Experience
• Wo...
• Device Orientation Detection
• CSS Approach
• Scripted Approach
• Branding for Device Orientation Demo
• Cross-Platform ...
DEVICE ORIENTATION DETECTION
Core Concepts
6/6/2014 4Enhancing SharePoint 2010 for the iPad
• SharePoint 2010 is cross browser compatible out of the box
http://technet.microsoft.com/en-us/library/cc263526.aspx
• Fu...
• Consumer adoption leading to growth in the business sector
• New ability to touch and interact with business data
• Incr...
CSS APPROACH
Device Orientation Detection
6/6/2014 7Enhancing SharePoint 2010 for the iPad
• Utilizes orientation aware Cascading Style Sheets (CSS)
• Little overhead, no code or script required
• Detects Portrait...
6/6/2014 9Enhancing SharePoint 2010 for the iPad
SUPPORTED ORIENTATIONS
Portrait Landscape
6/6/2014 10Enhancing SharePoint 2010 for the iPad
ATTACHING STYLE SHEETS
• Standard “link” tag with media attribute
<link ...
• Hide Quick Launch when
device is in Portrait orientation
• Hide any content with the
“notPortrait” class; similar to
ues...
• Responsive Web Design (RWD) leverages CSS3 media queries to
adapt to the user’s platform and resolution.
• Paired with a...
SCRIPTED APPROACH
Device Orientation Detection
6/6/2014 13Enhancing SharePoint 2010 for the iPad
• Utilizes client-side script (Javascript/jQuery)
• Scripted specifically for iPad
• Identifies numerical orientation valu...
6/6/2014 15Enhancing SharePoint 2010 for the iPad
SUPPORTED ORIENTATIONS
0° 90° 180°-90°
6/6/2014 16Enhancing SharePoint 2010 for the iPad
SCRIPTING ORIENTATION DETECTION
<script type=“text/javascript”>
function...
• Hide Quick Launch when
device is in Portrait orientation
• Hide any content with the
“notPortrait” class; similar to
ues...
• Hide Quick Launch with
animation when device is in
Portrait orientation
• Move contents of one
container to another, and...
• Hide Quick Launch with
animation when device is in
Portrait orientation
• Move contents of one
container to another, and...
BRANDING WITH DEVICE
ORIENTATION
Demonstration
6/6/2014 20Enhancing SharePoint 2010 for the iPad
HTML5
Cross-Platform Video
6/6/2014 21Enhancing SharePoint 2010 for the iPad
• No third party plugin support on the iPad, only option for embedded
video is use of HTML5
• HTML5 standard dictates supp...
6/6/2014 23Enhancing SharePoint 2010 for the iPad
HTML5 VIDEO TAG
<video width=“640” height=“360” controls>
<!-- MP4 file ...
• iPad passes embedded video requests to QuickTime for rendering
• QuickTime lacks support for any proxy or authentication...
QUESTIONS?
MICHAEL GREENE
@webdes03 mike-greene.com
Upcoming SlideShare
Loading in …5
×

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

955 views

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 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
955
On SlideShare
0
From Embeds
0
Number of Embeds
558
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Richmond SharePoint User Group October 31, 2012 ENHANCING SHAREPOINT 2010 FOR THE IPAD
  2. 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. 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. 4. DEVICE ORIENTATION DETECTION Core Concepts 6/6/2014 4Enhancing SharePoint 2010 for the iPad
  5. 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. 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. 7. CSS APPROACH Device Orientation Detection 6/6/2014 7Enhancing SharePoint 2010 for the iPad
  8. 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. 9. 6/6/2014 9Enhancing SharePoint 2010 for the iPad SUPPORTED ORIENTATIONS Portrait Landscape
  10. 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. 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. 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. 13. SCRIPTED APPROACH Device Orientation Detection 6/6/2014 13Enhancing SharePoint 2010 for the iPad
  14. 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. 15. 6/6/2014 15Enhancing SharePoint 2010 for the iPad SUPPORTED ORIENTATIONS 0° 90° 180°-90°
  16. 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. 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. 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. 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. 20. BRANDING WITH DEVICE ORIENTATION Demonstration 6/6/2014 20Enhancing SharePoint 2010 for the iPad
  21. 21. HTML5 Cross-Platform Video 6/6/2014 21Enhancing SharePoint 2010 for the iPad
  22. 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. 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. 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. 25. QUESTIONS?
  26. 26. MICHAEL GREENE @webdes03 mike-greene.com

×