Michael Greene<br />Triangle SharePoint User Group<br />February 1, 2010<br />ENHANCING SHAREPOINT 2010FOR THE IPAD<br />
Agenda<br />Device Orientation Detection<br />CSS Approach<br />Scripted Approach<br />Branding for Device Orientation Dem...
Device orientation detection<br />2/2/2011<br />Michael Greene<br />3<br />Consumer adoption leading to growth in the busi...
CSS Approach<br />Device Orientation Detection<br />2/2/2011<br />Michael Greene<br />4<br />
Css approach<br />2/2/2011<br />Michael Greene<br />5<br />Utilizes orientation aware Cascading Style Sheets (CSS)<br />Li...
Supported Orientations<br />2/2/2011<br />Michael Greene<br />6<br />Landscape<br />Portrait<br />
Standard “link” tag with media attribute<br /><link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait...
Standard “link” tag<br /><link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait.css" /><br /><link r...
Hide Quick Launch when device is in Portrait orientation.<br />Hide any content with the “notPortrait” class; similar to t...
Scripted Approach<br />Device Orientation Detection<br />2/2/2011<br />Michael Greene<br />10<br />
Scripted approach<br />2/2/2011<br />Michael Greene<br />11<br />Utilizes client-side script (Javascript/jQuery)<br />Scri...
Supported Orientations<br />2/2/2011<br />Michael Greene<br />12<br />90°<br />-90°<br />0°<br />180°<br />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script><br /><script type="text/javascript"><br />varisiPad = n...
Hide Quick Launch when device is in Portrait orientation.<br />Hide any content with the “notPortrait” class; similar to t...
Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, a...
Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, a...
Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, a...
Branding for Device Orientation<br />Demonstration<br />2/2/2011<br />Michael Greene<br />18<br />
HTML5<br />Cross-Platform Video <br />2/2/2011<br />Michael Greene<br />19<br />
Html5 video<br />2/2/2011<br />Michael Greene<br />20<br />No third party plugin support in the iPad, only option for embe...
HTML5 VIDEO TAG<br />2/2/2011<br />Michael Greene<br />21<br /><video width="640" height="360" controls>  <!-- MP4 must be...
Security Considerations<br />Cross-Platform Video <br />2/2/2011<br />Michael Greene<br />22<br />
Security considerations<br />2/2/2011<br />Michael Greene<br />23<br />iPad passes embedded video requests to QuickTime fo...
2/2/2011<br />Michael Greene<br />24<br />Questions?<br />
2/2/2011<br />Michael Greene<br />25<br />Michael greene<br />youtube.mike-greene.com<br />@webdes03<br />mike-greene.com<...
Upcoming SlideShare
Loading in …5
×

Enhancing SharePoint 2010 for the iPad

6,547 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.

Published in: Technology

Enhancing SharePoint 2010 for the iPad

  1. 1. Michael Greene<br />Triangle SharePoint User Group<br />February 1, 2010<br />ENHANCING SHAREPOINT 2010FOR THE IPAD<br />
  2. 2. Agenda<br />Device Orientation Detection<br />CSS Approach<br />Scripted Approach<br />Branding for Device Orientation Demo<br />Cross-Platform Video<br />HTML5 Video<br />Security Considerations<br />2/2/2011<br />2<br />Michael Greene<br />
  3. 3. Device orientation detection<br />2/2/2011<br />Michael Greene<br />3<br />Consumer adoption leading to growth in the business sector<br />New ability to touch and interact with business data<br />Increased user experience<br />Efficiently manage limited screen real estate<br />
  4. 4. CSS Approach<br />Device Orientation Detection<br />2/2/2011<br />Michael Greene<br />4<br />
  5. 5. Css approach<br />2/2/2011<br />Michael Greene<br />5<br />Utilizes orientation aware Cascading Style Sheets (CSS)<br />Little overhead, no code or script required<br />Detects Portrait vs. Landscape<br />Browser determines ratio of browser width vs. height<br />Use to display, hide, or change size of elements for specific orientations<br />Ideal for integrating orientation detection with site branding<br />
  6. 6. Supported Orientations<br />2/2/2011<br />Michael Greene<br />6<br />Landscape<br />Portrait<br />
  7. 7. Standard “link” tag with media attribute<br /><link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait.css" /><br /><link rel="stylesheet" media="all and (orientation:landscape)" href="Landscape.css" /><br />Cross-Browser Support<br /><!--[if !IE]><!--><br /> <link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait.css" /><br /> <link rel="stylesheet" media="all and (orientation:landscape)" href="Landscape.css" /><br /><!--<![endif]--><br /><!--[if IE]><br /> <link rel="stylesheet" href="Landscape.css" /><br /><![endif]--><br />Attaching style sheets<br />2/2/2011<br />Michael Greene<br />7<br />Often not needed<br />
  8. 8. Standard “link” tag<br /><link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait.css" /><br /><link rel="stylesheet" media="all and (orientation:landscape)" href="Landscape.css" /><br />Browser Support<br /><!--[if !IE]><!--><br /> <link rel="stylesheet" media="all and (orientation:portrait)" href="Portrait.css" /><br /> <link rel="stylesheet" media="all and (orientation:landscape)" href="Landscape.css" /><br /><!--<![endif]--><br /><!--[if IE]><br /> <link rel="stylesheet" href="Landscape.css" /><br /><![endif]--><br />Attaching style sheets<br />2/2/2011<br />Michael Greene<br />8<br />All style sheets should be attached after Core.css<br />and custom CSS registrations.<br />
  9. 9. Hide Quick Launch when device is in Portrait orientation.<br />Hide any content with the “notPortrait” class; similar to the use of “s4-notdlg”.<br />Examples<br />2/2/2011<br />Michael Greene<br />9<br />Portrait.css<br />Portrait.css<br />#s4-leftpanel {<br /> display: none;<br />}<br />.s4-ca {<br /> margin-left: 0px;<br />}<br />.notPortrait{<br />display: none;<br />}<br />
  10. 10. Scripted Approach<br />Device Orientation Detection<br />2/2/2011<br />Michael Greene<br />10<br />
  11. 11. Scripted approach<br />2/2/2011<br />Michael Greene<br />11<br />Utilizes client-side script (Javascript/jQuery)<br />Scripted specifically for iPad<br />Identifies numerical orientation value<br />Orientation value returned by device hardware/accelerometer<br />Uses:<br />Bind functions to orientation changes<br />Animate element changes<br />Make changes to the Document Object Model (DOM)<br />
  12. 12. Supported Orientations<br />2/2/2011<br />Michael Greene<br />12<br />90°<br />-90°<br />0°<br />180°<br />
  13. 13. <script type="text/javascript" src="jquery-1.4.2.min.js"></script><br /><script type="text/javascript"><br />varisiPad = navigator.userAgent.match(/iPad/i) != null; //Boolean, is device iPad<br />if (isiPad) { // Process only for iPads<br />ProcessOrientation(window.orientation); // Process initial orientation<br />window.onorientationchange = function() { // Process on orientation change<br />ProcessOrientation(window.orientation);<br />}<br /> function ProcessOrientation(currentOrientation) {<br /> if (currentOrientation== 0 || currentOrientation== 180) {<br /> // Is Portrait<br /> } else if (currentOrientation== 90 || currentOrientation== -90) {<br /> // Is Landscape<br /> }<br /> }<br />}<br /> </script><br />Scripting Orientation Detection<br />2/2/2011<br />Michael Greene<br />13<br />
  14. 14. Hide Quick Launch when device is in Portrait orientation.<br />Hide any content with the “notPortrait” class; similar to the use of “s4-notdlg”.<br />Examples<br />2/2/2011<br />Michael Greene<br />14<br />jQuery<br />jQuery<br />if (Portrait) {<br /> $(“#s4-leftpanel”).hide();<br /> $(“.s4-ca”).css(“marginLeft”, 0);<br />}<br />if (Landscape) {<br /> $(“#s4-leftpanel”).show();<br /> $(“.s4-ca”).css(“marginLeft”, “150px”);<br />}<br />if (Portrait) {<br /> $(“.notPortrait”).hide();<br />}<br />if (Landscape) {<br /> $(“.notPortrait”).show();<br />}<br />
  15. 15. Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, and back again.<br />ADVANCED Examples<br />2/2/2011<br />Michael Greene<br />15<br />jQuery<br />jQuery<br />if (Portrait) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=-150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “0px”], “slow”<br /> );<br />}<br />if (Landscape) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=+150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “150px”], “slow”<br />);<br />}<br />if (Portrait) {<br /> $(“#C1”).clone().appendTo(“#C2”);<br /> $(“#C1”).html(“”);<br />}<br />if (Landscape) {<br /> $(“#C2”).clone().appendTo(“#C1”);<br /> $(“#C2”).html(“”);<br />}<br />
  16. 16. Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, and back again.<br />ADVANCED Examples<br />2/2/2011<br />Michael Greene<br />16<br />jQuery<br />jQuery<br />if (Portrait) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=-150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “0px”], “slow”<br /> );<br />}<br />if (Landscape) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=+150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “150px”], “slow”<br />);<br />}<br />if (Portrait) {<br /> $(“#C1”).clone().appendTo(“#C2”);<br /> $(“#C1”).html(“”);<br />}<br />if (Landscape) {<br /> $(“#C2”).clone().appendTo(“#C1”);<br /> $(“#C2”).html(“”);<br />}<br />
  17. 17. Hide Quick Launch with animation when device is in Portrait orientation.<br />Move contents of one container to another, and back again.<br />ADVANCED Examples<br />2/2/2011<br />Michael Greene<br />17<br />jQuery<br />jQuery<br />if (Portrait) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=-150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “0px”], “slow”<br /> );<br />}<br />if (Landscape) {<br /> $(“#s4-leftpanel”).animate(<br /> [“left”: “=+150px”], “slow”<br /> );<br /> $(“.s4-ca).animate(<br /> [“marginLeft”: “150px”], “slow”<br />);<br />}<br />if (Portrait) {<br /> $(“#C1”).clone().appendTo(“#C2”);<br /> $(“#C1”).html(“”);<br />}<br />if (Landscape) {<br /> $(“#C2”).clone().appendTo(“#C1”);<br /> $(“#C2”).html(“”);<br />}<br />
  18. 18. Branding for Device Orientation<br />Demonstration<br />2/2/2011<br />Michael Greene<br />18<br />
  19. 19. HTML5<br />Cross-Platform Video <br />2/2/2011<br />Michael Greene<br />19<br />
  20. 20. Html5 video<br />2/2/2011<br />Michael Greene<br />20<br />No third party plugin support in the iPad, only option for embedded video is the use of HTML5.<br />HTML5 standard dictates support for embedded video with <video> tag<br />HTML5 does NOT standardize video format<br />‡ 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.<br />† WebM video format expected for Internet Explorer 9.0+<br />
  21. 21. HTML5 VIDEO TAG<br />2/2/2011<br />Michael Greene<br />21<br /><video width="640" height="360" controls> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /> <!-- Safari / iOS video --> <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. --> <imgsrc="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities” /> </object></video><br />
  22. 22. Security Considerations<br />Cross-Platform Video <br />2/2/2011<br />Michael Greene<br />22<br />
  23. 23. Security considerations<br />2/2/2011<br />Michael Greene<br />23<br />iPad passes embedded video requests to QuickTime for rendering<br />QuickTime lacks support for any proxy or authentication methods, and iPads cannot join a domain<br />Video files must be anonymously accessible<br />
  24. 24. 2/2/2011<br />Michael Greene<br />24<br />Questions?<br />
  25. 25. 2/2/2011<br />Michael Greene<br />25<br />Michael greene<br />youtube.mike-greene.com<br />@webdes03<br />mike-greene.com<br />mike@mike-greene.com<br />michaelg@intellinet.com<br />

×