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

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