Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
-
Upload
michael-greene -
Category
Technology
-
view
510 -
download
2
description
Transcript of Enhancing SharePoint 2010 for the iPad (Richmond SPUG 10/31/2012)
Richmond SharePoint User Group
October 31, 2012
ENHANCING SHAREPOINT 2010FOR THE IPAD
04/13/2023 2Enhancing SharePoint 2010 for the iPad
• 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 SpeakerRIC, VB, ATL, AUS, TPA, RDU
• Photography
• Travel
MICHAEL GREENE
04/13/2023 3Enhancing SharePoint 2010 for the iPad
• Device Orientation Detection
• CSS Approach
• Scripted Approach
• Branding for Device Orientation Demo
• Cross-Platform Video
• HTML5 Video
• Security Considerations
AGENDA
04/13/2023 4Enhancing SharePoint 2010 for the iPad
DEVICE ORIENTATION DETECTIONCore Concepts
04/13/2023 5Enhancing SharePoint 2010 for the iPad
• SharePoint 2010 is cross browser compatible out of the boxhttp://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+
SHAREPOINT 2010 COMPATIBILITY
Safari iPad != Safari iPhone != Safari iPod
04/13/2023 6Enhancing SharePoint 2010 for the iPad
• 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
DEVICE ORIENTATION DETECTION
04/13/2023 7Enhancing SharePoint 2010 for the iPad
CSS APPROACHDevice Orientation Detection
04/13/2023 8Enhancing SharePoint 2010 for the iPad
• 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
CSS APPROACH
04/13/2023 9Enhancing SharePoint 2010 for the iPad
SUPPORTED ORIENTATIONS
Portrait Landscape
04/13/2023 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.
04/13/2023 11Enhancing SharePoint 2010 for the iPad
• Hide Quick Launch when device is in Portrait orientation
• Hide any content with the “notPortrait” class; similar to ues of “s4-notdlg”.
EXAMPLES
#s4-leftpanel { display: none;}
.s4-ca { margin-left: 0px;}
Portrait.css
.notPortrait { display: none;}
Portrait.css
04/13/2023 12Enhancing SharePoint 2010 for the iPad
• 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
RESPONSIVE DESIGN
@media screen and (orientation:portrait) {
#s4-leftpanel { display: none; }
.s4-ca { margin-left: 0px; }
}
04/13/2023 13Enhancing SharePoint 2010 for the iPad
SCRIPTED APPROACHDevice Orientation Detection
04/13/2023 14Enhancing SharePoint 2010 for the iPad
• 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)
SCRIPTED APPROACH
04/13/2023 15Enhancing SharePoint 2010 for the iPad
SUPPORTED ORIENTATIONS
0° 90° 180°-90°
04/13/2023 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>
04/13/2023 17Enhancing SharePoint 2010 for the iPad
• Hide Quick Launch when device is in Portrait orientation
• Hide any content with the “notPortrait” class; similar to ues of “s4-notdlg”.
EXAMPLES
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
04/13/2023 18Enhancing SharePoint 2010 for the iPad
• Hide Quick Launch with animation when device is in Portrait orientation
• Move contents of one container to another, and back again
ADVANCED EXAMPLES
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#C1
Element
Element
Element
#C2#C1 #C2
Element
Element
Element
#C1
Element
Element
Element
#C2
04/13/2023 19Enhancing SharePoint 2010 for the iPad
• Hide Quick Launch with animation when device is in Portrait orientation
• Move contents of one container to another, and back again
ADVANCED EXAMPLES
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
04/13/2023 20Enhancing SharePoint 2010 for the iPad
BRANDING WITH DEVICE ORIENTATION
Demonstration
04/13/2023 21Enhancing SharePoint 2010 for the iPad
HTML5Cross-Platform Video
04/13/2023 22Enhancing 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 support for embedded video with <video> tag
• HTML5 does NOT standardize video format
HTML5 VIDEO
IE Firefox
Safari Chrome
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.
04/13/2023 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&image=poster.jpg
&file=video.mp4” />
<!-- fallback image -->
<img src=“video.jpg” width=“640” height=“360” alt=“title” title=“Can’t Play Video” />
</object>
</video>
04/13/2023 24Enhancing SharePoint 2010 for the iPad
• 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
SECURITY CONSIDERATIONS
QUESTIONS?
MICHAEL GREENE
@webdes03 mike-greene.com