Your SlideShare is downloading. ×
0
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SharePoint Saturday Tampa, Enhancing SharePoint 2010 for the iPad

1,974

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,974
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Michael Greene<br />SharePoint Saturday Tampa<br />June 11, 2011<br />ENHANCING SHAREPOINT 2010FOR THE IPAD<br />
  • 2. SharePoint Saturday Tampa<br />6/10/2011<br />Michael Greene<br />2<br />Welcome to SharePoint Saturday Tampa!<br />Introduction<br />Please complete &amp; submit speaker evaluation forms<br />SharePint<br />The Pub, International Mall<br />6 PM<br />
  • 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. 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 &amp; 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. 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 &amp; 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. 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. 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. CSS Approach<br />Device Orientation Detection<br />6/10/2011<br />Michael Greene<br />8<br />
  • 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. Supported Orientations<br />6/10/2011<br />Michael Greene<br />10<br />Landscape<br />Portrait<br />
  • 11. Standard “link” tag with media attribute<br />&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:portrait)&quot; href=&quot;Portrait.css&quot; /&gt;<br />&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:landscape)&quot; href=&quot;Landscape.css&quot; /&gt;<br />Cross-Browser Support<br />&lt;!--[if !IE]&gt;&lt;!--&gt;<br /> &lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:portrait)&quot; href=&quot;Portrait.css&quot; /&gt;<br /> &lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:landscape)&quot; href=&quot;Landscape.css&quot; /&gt;<br />&lt;!--&lt;![endif]--&gt;<br />&lt;!--[if IE]&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;Landscape.css&quot; /&gt;<br />&lt;![endif]--&gt;<br />Attaching style sheets<br />6/10/2011<br />Michael Greene<br />11<br />Often not needed<br />
  • 12. Standard “link” tag<br />&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:portrait)&quot; href=&quot;Portrait.css&quot; /&gt;<br />&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:landscape)&quot; href=&quot;Landscape.css&quot; /&gt;<br />Browser Support<br />&lt;!--[if !IE]&gt;&lt;!--&gt;<br /> &lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:portrait)&quot; href=&quot;Portrait.css&quot; /&gt;<br /> &lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:landscape)&quot; href=&quot;Landscape.css&quot; /&gt;<br />&lt;!--&lt;![endif]--&gt;<br />&lt;!--[if IE]&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;Landscape.css&quot; /&gt;<br />&lt;![endif]--&gt;<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. 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. Scripted Approach<br />Device Orientation Detection<br />6/10/2011<br />Michael Greene<br />14<br />
  • 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. Supported Orientations<br />6/10/2011<br />Michael Greene<br />16<br />90°<br />-90°<br />0°<br />180°<br />
  • 17. &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<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 /> &lt;/script&gt;<br />Scripting Orientation Detection<br />6/10/2011<br />Michael Greene<br />17<br />
  • 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. 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. 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. 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. Branding for Device Orientation<br />Demonstration<br />6/10/2011<br />Michael Greene<br />22<br />
  • 23. HTML5<br />Cross-Platform Video <br />6/10/2011<br />Michael Greene<br />23<br />
  • 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 &lt;video&gt; 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. HTML5 VIDEO TAG<br />6/10/2011<br />Michael Greene<br />25<br />&lt;video width=&quot;640&quot; height=&quot;360&quot; controls&gt; &lt;!-- MP4 must be first for iPad! --&gt; &lt;source src=&quot;__VIDEO__.MP4&quot; type=&quot;video/mp4&quot; /&gt; &lt;!-- Safari / iOS video --&gt; &lt;source src=&quot;__VIDEO__.OGV&quot; type=&quot;video/ogg&quot; /&gt; &lt;!-- Firefox / Opera / Chrome10 --&gt; &lt;!-- fallback to Flash: --&gt; &lt;object width=&quot;640&quot; height=&quot;360&quot; type=&quot;application/x-shockwave-flash“ data=&quot;__FLASH__.SWF&quot;&gt; &lt;param name=&quot;movie&quot; value=&quot;__FLASH__.SWF&quot; /&gt; &lt;param name=&quot;flashvars&quot; value=&quot;controlbar=over&amp;amp;image=__POSTER__.JPG&amp;amp; file=__VIDEO__.MP4&quot; /&gt; &lt;!-- fallback image. --&gt; &lt;imgsrc=&quot;__VIDEO__.JPG&quot; width=&quot;640&quot; height=&quot;360&quot; alt=&quot;__TITLE__&quot; title=&quot;No video playback capabilities” /&gt; &lt;/object&gt;&lt;/video&gt;<br />
  • 26. Security Considerations<br />Cross-Platform Video <br />6/10/2011<br />Michael Greene<br />26<br />
  • 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. 6/10/2011<br />Michael Greene<br />28<br />Questions?<br />
  • 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 />

×