ENHANCING SHAREPOINT 2010      FOR THE IPAD        January 7, 2012
AGENDA           •   Device Orientation Detection                • CSS Approach                • Scripted Approach        ...
Core Concepts           DEVICE ORIENTATION DETECTION1/7/2012               Enhancing SharePoint 2010 for the iPad   4
SHAREPOINT 2010 COMPATIBILITY           •   SharePoint 2010 is cross browser compatible out of the box           •   Fully...
DEVICE ORIENTATION DETECTION           •   Consumer adoption leading to growth in the business sector           •   New ab...
Device Orientation Detection           CSS APPROACH1/7/2012                 Enhancing SharePoint 2010 for the iPad   7
CSS APPROACH           •   Utilizes orientation aware Cascading Style Sheets (CSS)           •   Little overhead, no code ...
SUPPORTED ORIENTATIONS                          Portrait                       Landscape1/7/2012        Enhancing SharePoi...
ATTACHING STYLE SHEETS           •    Standard “link” tag with media attribute           <link rel=“stylesheet” media=“all...
EXAMPLES           •   Hide Quick Launch when                                  •   Hide any content with the              ...
Device Orientation Detection           SCRIPTED APPROACH1/7/2012                 Enhancing SharePoint 2010 for the iPad   12
SCRIPTED APPROACH           •   Utilizes client-side script (Javascript/jQuery)           •   Scripted specifically for iP...
SUPPORTED ORIENTATIONS            -90°                        0°                  90°   180°1/7/2012           Enhancing S...
SCRIPTING ORIENTATION DETECTION           <script type=“text/javascript”>             function ProcessOrientation(currentO...
EXAMPLES           •   Hide Quick Launch when                                  •   Hide any content with the              ...
ADVANCED EXAMPLES           •   Hide Quick Launch with                                   •   Move contents of one         ...
ADVANCED EXAMPLES           •    Hide Quick Launch with                                   •   Move contents of one        ...
Demonstration           BRANDING WITH DEVICE           ORIENTATION1/7/2012               Enhancing SharePoint 2010 for the...
Cross-Platform Video           HTML51/7/2012                Enhancing SharePoint 2010 for the iPad   20
HTML5 VIDEO           •   No third party plugin support on the iPad, only option for embedded               video is use o...
HTML5 VIDEO TAG           <video width=“640” height=“360” controls>             <!-- MP4 file must be first for iPad compa...
SECURITY CONSIDERATIONS           •   iPad passes embedded video requests to QuickTime for rendering           •   QuickTi...
QUESTIONS?
MICHAEL GREENE@webdes03   mike-greene.com
Enhancing SharePoint 2010 for the iPad (SPSVB 2012)
Upcoming SlideShare
Loading in …5
×

Enhancing SharePoint 2010 for the iPad (SPSVB 2012)

2,924 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.

Presented at SharePoint Saturday Virginia Beach (January 7, 2012).

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,924
On SlideShare
0
From Embeds
0
Number of Embeds
1,524
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Idera, $199 per user
  • Idera, $199 per user
  • Enhancing SharePoint 2010 for the iPad (SPSVB 2012)

    1. 1. ENHANCING SHAREPOINT 2010 FOR THE IPAD January 7, 2012
    2. 2. 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 3
    3. 3. Core Concepts DEVICE ORIENTATION DETECTION1/7/2012 Enhancing SharePoint 2010 for the iPad 4
    4. 4. 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 5
    5. 5. 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 6
    6. 6. Device Orientation Detection CSS APPROACH1/7/2012 Enhancing SharePoint 2010 for the iPad 7
    7. 7. 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 8
    8. 8. SUPPORTED ORIENTATIONS Portrait Landscape1/7/2012 Enhancing SharePoint 2010 for the iPad 9
    9. 9. 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 10
    10. 10. 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 11
    11. 11. Device Orientation Detection SCRIPTED APPROACH1/7/2012 Enhancing SharePoint 2010 for the iPad 12
    12. 12. 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 13
    13. 13. SUPPORTED ORIENTATIONS -90° 0° 90° 180°1/7/2012 Enhancing SharePoint 2010 for the iPad 14
    14. 14. 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 15
    15. 15. 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 16
    16. 16. 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 17
    17. 17. 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 18
    18. 18. Demonstration BRANDING WITH DEVICE ORIENTATION1/7/2012 Enhancing SharePoint 2010 for the iPad 19
    19. 19. Cross-Platform Video HTML51/7/2012 Enhancing SharePoint 2010 for the iPad 20
    20. 20. 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 21
    21. 21. 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 22
    22. 22. 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 23
    23. 23. QUESTIONS?
    24. 24. MICHAEL GREENE@webdes03 mike-greene.com

    ×