• Save
Enhancing SharePoint 2010 for the iPad (SPSAusTX 2012)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Enhancing SharePoint 2010 for the iPad (SPSAusTX 2012)

on

  • 3,959 views

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.

Presented at SharePoint Saturday Austin, TX (January 21, 2012).

Statistics

Views

Total Views
3,959
Views on SlideShare
2,101
Embed Views
1,858

Actions

Likes
0
Downloads
2
Comments
0

7 Embeds 1,858

http://mike-greene.com 1356
http://sharepointsocial.de 459
http://www.mike-greene.com 26
http://162.243.170.104 13
http://paper.li 2
http://a0.twimg.com 1
http://mike-greene.us 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Idera, $199 per user
  • Idera, $199 per user

Enhancing SharePoint 2010 for the iPad (SPSAusTX 2012) Presentation Transcript

  • 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 Considerations1/7/2012 Enhancing SharePoint 2010 for the iPad 4
  • 5. Core Concepts DEVICE ORIENTATION DETECTION1/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 estate1/7/2012 Enhancing SharePoint 2010 for the iPad 7
  • 8. Device Orientation Detection CSS APPROACH1/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 branding1/7/2012 Enhancing SharePoint 2010 for the iPad 9
  • 10. SUPPORTED ORIENTATIONS Portrait Landscape1/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 APPROACH1/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 ORIENTATION1/7/2012 Enhancing SharePoint 2010 for the iPad 20
  • 21. Cross-Platform Video HTML51/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 accessible1/7/2012 Enhancing SharePoint 2010 for the iPad 24
  • 25. QUESTIONS?
  • 26. MICHAEL GREENE@webdes03 mike-greene.com