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. Presented at SharePoint Saturday Austin, TX (January 21, 2012).

1. ENHANCING SHAREPOINT 2010
FOR THE IPAD
January 21, 2012

2. Thank you for being a part of the first
SharePoint Saturday Austin
• Please turn off all electronic devices or set them to
vibrate.
• If you must take a phone call, please do so in the hall so
as not to disturb others.
• Open wireless access is available with no password
• Feel free to “tweet and blog” during the session
• Thanks to our Title Sponsors:

3. THANKS TO OUR OTHER SPONSORS!

4. AGENDA
• Device Orientation Detection
• CSS Approach
• Scripted Approach
• Branding for Device Orientation Demo
• Cross-Platform Video
• HTML5 Video
• Security Considerations
1/7/2012 Enhancing SharePoint 2010 for the iPad 4

5. Core Concepts
DEVICE ORIENTATION DETECTION
1/7/2012 Enhancing SharePoint 2010 for the iPad 5

6. SHAREPOINT 2010 COMPATIBILITY
• SharePoint 2010 is cross browser compatible out of the box
• Fully Supported: IE7 (32bit), IE8 (32bit), IE9 (32bit)
• Supported w/ Limitations: IE7 (64bit), IE8 (64bit), IE9 (64bit),
Firefox 3.6 (Win & Non-Win),
Safari 4.04 (non-Win)
• Safari iPad !=
Is your custom markup cross browser compatible? iPod
Safari iPhone Safari !=
1/7/2012 Enhancing SharePoint 2010 for the iPad 6

7. DEVICE ORIENTATION DETECTION
• 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
1/7/2012 Enhancing SharePoint 2010 for the iPad 7

8. Device Orientation Detection
CSS APPROACH
1/7/2012 Enhancing SharePoint 2010 for the iPad 8

9. CSS APPROACH
• 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
1/7/2012 Enhancing SharePoint 2010 for the iPad 9

10. SUPPORTED ORIENTATIONS
Portrait Landscape
1/7/2012 Enhancing SharePoint 2010 for the iPad 10

11. 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]><! --> All style sheets should be attached after Core.css
and custom CSS registrations.
<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]-->
1/7/2012 Enhancing SharePoint 2010 for the iPad 11

12. EXAMPLES
• Hide Quick Launch when • Hide any content with the
device is in Portrait orientation “notPortrait” class; similar to
ues of “s4-notdlg”.
Portrait.css Portrait.css
#s4-leftpanel { .notPortrait {
display: none; display: none;
} }
.s4-ca {
margin-left: 0px;
}
1/7/2012 Enhancing SharePoint 2010 for the iPad 12

13. Device Orientation Detection
SCRIPTED APPROACH
1/7/2012 Enhancing SharePoint 2010 for the iPad 13

14. SCRIPTED APPROACH
• 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)
1/7/2012 Enhancing SharePoint 2010 for the iPad 14

15. SUPPORTED ORIENTATIONS
-90° 0° 90° 180°
1/7/2012 Enhancing SharePoint 2010 for the iPad 15

16. 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>
1/7/2012 Enhancing SharePoint 2010 for the iPad 16

17. EXAMPLES
• Hide Quick Launch when • Hide any content with the
device is in Portrait orientation “notPortrait” class; similar to
ues of “s4-notdlg”.
jQuery jQuery
if (Portrait) { if (Portrait) {
$(“#s4-leftpanel”).hide(); $(“.notPortrait”).hide();
$(“.s4-ca”).css(“marginLeft”, 0); }
} if (Landscape) {
if (Landscape) { $(“.notPortrait”).show();
$(“#s4-leftpanel”).show(); }
$(“.s4-ca”).css(“marginLeft”, “150px”);
}
1/7/2012 Enhancing SharePoint 2010 for the iPad 17

18. ADVANCED EXAMPLES
• Hide Quick Launch with • Move contents of one
animation when device is in container to another, and back
Portrait orientation again
jQuery jQuery
if (Portrait) { if (Portrait) {
$(“#s4-leftpanel”).animate( $(“#C1”).clone().appendTo(“#C2”);
[“left”: “=-150px”], “slow” $(“#C1”).html(“”);
); }
$(“.s4-ca”).animate( if (Landscape) {
[“marginLeft”: “0px”], “slow” $(“#C2”).clone().appendTo(“#C1”);
); $(“#C2”).html(“”);
} }
if (Landscape) {
$(“#s4-leftpanel”).animate(
[“left”: “=+150px”], “slow”
);
$(“.s4-ca”).animate(
[“marginLeft”: “150px”], “slow”
);
}
1/7/2012 Enhancing SharePoint 2010 for the iPad 18

19. ADVANCED EXAMPLES
• Hide Quick Launch with • Move contents of one
animationSales
when device is in container to another, and back
Portrait orientation again
Chart Title Sales
1st Qtr
jQuery 2nd Qtr
jQuery
jQuery
3rd Qtr
if (Portrait) { if (Portrait) {
if (Portrait) {
$(“#s4-leftpanel”).animate( Qtr 4th
$(“#C1”).clone().appendTo(“#C2”); Qtr
1st
$(“#C1”).clone().appendTo(“#C2”);
[“left”: “=-150px”], “slow” $(“#C1”).html(“”);
$(“#C1”).html(“”); 2nd Qtr
); }} 3rd Qtr
Chart Title if (Landscape) {
$(“.s4-ca”).animate( if (Landscape) { 4th Qtr
$(“#C2”).clone().appendTo(“#C1”);
[“marginLeft”: “0px”], “slow” $(“#C2”).clone().appendTo(“#C1”);
$(“#C2”).html(“”);
); } $(“#C2”).html(“”);
Cat 1 Cat 2 Cat 3 Cat 4
} }
if (Landscape) {
$(“#s4-leftpanel”).animate(
Cat 1 Cat 2 Cat 3 Cat 4
[“left”: “=+150px”], “slow”
);
$(“.s4-ca”).animate(
[“marginLeft”: “150px”], “slow”
);
}
1/7/2012 Enhancing SharePoint 2010 for the iPad 19

20. Demonstration
BRANDING WITH DEVICE
ORIENTATION
1/7/2012 Enhancing SharePoint 2010 for the iPad 20

21. Cross-Platform Video
HTML5
1/7/2012 Enhancing SharePoint 2010 for the iPad 21

22. HTML5 VIDEO
• 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
IE Firefox Safari Chrom Opera iOS
e
Ogg   3.5+ ‡  5.0+  10.5+ 
(Theora/Vorbis)
H.264/AAC/MP4    3.0+  5.0+   3.0+
 9.0†  ‡  6.0+  10.6+ 
WebM will render and video format supported by QuickTime; support for H.264/AACMP4 is
‡ Safari
shipped with QuickTime while other formats require additional client-side plugins.
† WebM video format available in IE9 with downloaded codec.
1/7/2012 Enhancing SharePoint 2010 for the iPad 22

23. 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>
1/7/2012 Enhancing SharePoint 2010 for the iPad 23

24. SECURITY CONSIDERATIONS
• 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
1/7/2012 Enhancing SharePoint 2010 for the iPad 24

25. QUESTIONS?

26. MICHAEL GREENE
@webdes03 mike-greene.com