SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad

2,185 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad

  1. 1. Michael Greene<br />SharePoint Saturday Tampa<br />June 11, 2011<br />ENHANCING SHAREPOINT 2010FOR THE IPAD<br />
  2. 2. SharePoint Saturday Tampa<br />6/10/2011<br />Michael Greene<br />2<br />Welcome to SharePoint Saturday Tampa!<br />Introduction<br />Please complete & submit speaker evaluation forms<br />SharePint<br />The Pub, International Mall<br />6 PM<br />
  3. 3. Agenda<br />SharePoint 2010 Compatibility<br />Mobile Device Connectivity<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 />6/10/2011<br />3<br />Michael Greene<br />
  4. 4. sharepoint 2010 compatibility<br />SharePoint 2010 is cross browser compatible<br />Fully Supported: IE 7 (32 bit), IE 8 (32 bit), IE 9 (32 bit)<br />Supported w/ Limitations: IE 7 (64 bit), IE 8 (64 bit), IE 9 (64 bit), Firefox 3.6 (Win & non-Win), Safari 4.04 (non-Win)<br />Is your custom markup cross browser compatible?<br />6/10/2011<br />4<br />Michael Greene<br />
  5. 5. sharepoint 2010 compatibility<br />SharePoint 2010 is cross browser compatible<br />Fully Supported: IE 7 (32 bit), IE 8 (32 bit), IE 9 (32 bit)<br />Supported w/ Limitations: IE 7 (64 bit), IE 8 (64 bit), IE 9 (64 bit), Firefox 3.6 (Win & non-Win), Safari 4.04 (non-Win)<br />Is your custom markup cross browser compatible?<br />6/10/2011<br />5<br />Michael Greene<br />Safari iPad!= Safari iPhone != Safari iPod<br />
  6. 6. Mobile Device Connectivity<br />6/10/2011<br />6<br />Michael Greene<br />WiFi<br />3G/4G/Internet<br />Utilizes Internal Wireless<br />May Require VPN*<br />External FBA<br />Kerberos Delegated by TMG<br />
  7. 7. Device orientation detection<br />6/10/2011<br />Michael Greene<br />7<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 />
  8. 8. CSS Approach<br />Device Orientation Detection<br />6/10/2011<br />Michael Greene<br />8<br />
  9. 9. Css approach<br />6/10/2011<br />Michael Greene<br />9<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 />
  10. 10. Supported Orientations<br />6/10/2011<br />Michael Greene<br />10<br />Landscape<br />Portrait<br />
  11. 11. 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 />6/10/2011<br />Michael Greene<br />11<br />Often not needed<br />
  12. 12. 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 />6/10/2011<br />Michael Greene<br />12<br />All style sheets should be attached after Core.css<br />and custom CSS registrations.<br />
  13. 13. 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 />6/10/2011<br />Michael Greene<br />13<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 />
  14. 14. Scripted Approach<br />Device Orientation Detection<br />6/10/2011<br />Michael Greene<br />14<br />
  15. 15. Scripted approach<br />6/10/2011<br />Michael Greene<br />15<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 />
  16. 16. Supported Orientations<br />6/10/2011<br />Michael Greene<br />16<br />90°<br />-90°<br />0°<br />180°<br />
  17. 17. <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 />6/10/2011<br />Michael Greene<br />17<br />
  18. 18. 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 />6/10/2011<br />Michael Greene<br />18<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 />
  19. 19. 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 />6/10/2011<br />Michael Greene<br />19<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 />
  20. 20. 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 />6/10/2011<br />Michael Greene<br />20<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 />
  21. 21. 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 />6/10/2011<br />Michael Greene<br />21<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 />
  22. 22. Branding for Device Orientation<br />Demonstration<br />6/10/2011<br />Michael Greene<br />22<br />
  23. 23. HTML5<br />Cross-Platform Video <br />6/10/2011<br />Michael Greene<br />23<br />
  24. 24. Html5 video<br />6/10/2011<br />Michael Greene<br />24<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 />
  25. 25. HTML5 VIDEO TAG<br />6/10/2011<br />Michael Greene<br />25<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 />
  26. 26. Security Considerations<br />Cross-Platform Video <br />6/10/2011<br />Michael Greene<br />26<br />
  27. 27. Security considerations<br />6/10/2011<br />Michael Greene<br />27<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 />
  28. 28. 6/10/2011<br />Michael Greene<br />28<br />Questions?<br />
  29. 29. 6/10/2011<br />Michael Greene<br />29<br />Michael greene<br />youtube.mike-greene.com<br />@webdes03<br />mike-greene.com<br />mike@mike-greene.com<br />michaelg@intellinet.com<br />

×