SharePoint 2010 - Enhancements for the Apple iPad

uglyveinInternet and Web Development

Jun 24, 2012 (5 years and 1 month ago)

358 views









W
En
h







W
hit
e
h
anc
e
e
Pa
p
e
men
p
er:
S
ts fo
S
har
e
r th
e
mic
h
e
Poi
n
e
App
P
r
Octob
P
Mic
h
h
ael
g
@in
T
w
A
w
n
t 20
1
le iP
a
r
epared
Intelli
er 26, 2
0
repared

h
ael Gre
tellinet.
c
w
o Concourse

A
tlanta, GA
3
404.442
fax 404.442
w
ww.intelline

1
0
a
d
for:
net
010

by:
ene
c
om



Pkwy
3
0328
.8000
.8001
t.com
Intellinet Contents
2010 Intellinet | www.intellinet.com Page i
Contents
OVERVIEW ................................................................................ 2
 
CROSS-PLATFORM VIDEO SOLUTIONS ...................................... 3
 
HTML5 ................................................................................................................... 3
 
V
IDEO
F
ORMAT
R
EQUIREMENTS
......................................................................................... 3
 
S
ECURITY
C
ONSIDERATIONS
............................................................................................ 3
 
M
ANAGEMENT
&

S
CHEDULING
.......................................................................................... 4
 
R
ENDERING
&

C
ONTROL
................................................................................................. 4
 
V
IDEO
P
LAYER
............................................................................................................ 4
 
IPAD ORIENTATION DETECTION ............................................... 5
 
U
NDERSTANDING
R
ESOLUTION
.......................................................................................... 5
 
D
ETECTING I
P
AD
O
RIENTATION
......................................................................................... 5
 
Cascading Style Sheets ..................................................................................... 5
 
Client Side Scripting ......................................................................................... 5
 
G
ENERAL
U
SER
I
NTERFACE
A
DJUSTMENTS
............................................................................. 6
 
D
YNAMIC
D
ATA
........................................................................................................... 7
 
SUMMARY ................................................................................. 8
 
R
EFERENCES
.............................................................................................................. 8
 


Intellinet Overview
2010 Intellinet | www.intellinet.com Page 2
Overview
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 business systems. Adoption by employees and
users outside of the workplace is helping to push internal iPad adoption as users try to
streamline their flow of information and minimize the number of devices they use. This
whitepaper provides an overview of iPad specific enhancements to SharePoint 2010
that adds iPad functionality and compatibility.
Intellinet Cross-Platform Video Solutions
2010 Intellinet | www.intellinet.com Page 3
Cross-Platform Video Solutions
As rich media continues to gain acceptance as a preferred medium of communication,
a cross-platform compatible video solution is one of the challenges faced by today’s
businesses moving towards iPad adoption.
HTML5
With the iPad’s lack of plugin support and ridged video requirements, HTML5 becomes
the only true way to deliver an embedded video solution to the client. This poses a
challenge to businesses built around Microsoft Internet Explorer as the current version
(IE8) does not support HTML5 video. A failover solution is required to play the video in
Internet Explorer using a third-party plugin, such as Flash. Fortunately, Internet
Explorer 9 will support HTML5 video, which should alleviate issues for organizations
quick to adopt IE9.
Video Format Requirements
Despite the popularity of HTML5, formatting video for a cross-platform compatibility
can be complex. While the HTML5 standard addresses the support for inline video
within the browser, there are no standards specified for the format of the video
content. This becomes a hassle on the content management side as multiple video
formats are needed to support multiple browsers. If serving a public facing site or
supporting multiple browsers (Internet Explorer, Firefox, Chrome, Safari and/or
Opera), as many as four different versions of video content will be needed in order to
ensure proper rendering in all of the browsers.

The chart below provides a summary of formats needed to ensure true cross-platform
compatibility in the current browser landscape (as of October 2010).


IE
Firefox
Safari
Chrome
Opera
iOS
Ogg (Theora/Vorbis)


;
3.5+


*

5.0+


10.5+



H.264/AAC/MP4


:

;
3.0+


5.0+




3.0+

WebM

±



:
*

6.0+


10.6+



*Safari will render any video format supported by QuickTime; support for H.264/AAC/MP4 is
shipped with QuickTime while other formats require additional client-side plugins.
±WebM video format expected for Internet Explorer 9.0+

Security Considerations
iPad compatible video solutions also create additional security considerations. Unlike
most browser behavior where credentials of the current user’s session are used to
authenticate the content, the iPad passes the video request to QuickTime for
rendering. QuickTime does not support any proxy or authentication methods and will
attempt to connect to your video content anonymously. This poses additional
challenges in scenarios where security trimming access to the video content is desired.


Intellinet

㈰㄰⁉湴e汬楮
e
e
t†簠⁷睷⹩湴
e
Man
For e
a
sched
u
nume
r
conte
n
into a

under
s
Ren
d
One o
f
exam
p
Safari

and o
t
with i
n
custo
m
Vid
e
There

based

as pa
c
Web
P
Lists
w

llinet.com
a
g
emen
t
se of manag
e
u
le and over
s
r
ical order fi
e
n
t based on
m

process that

s
tand.
d
erin
g
&

f
the advant
a
p
le, when a
u

controls to t
t
her browser
s
n
tuitive cont
r
m
controls cr
o
e
o Player


are many di
f

on depth of
c
kaged soluti
o
P
art. For a lig
w
eb services
t
& Sche
d
e
ment, it is
r
s
ee your vid
e
e
ld (like a pla
m
eta data.
Th

SharePoint
a

Control

a
ges of HTM
L
u
ser accesse
s
he video. Th
i
s
that suppo
r
r
ols they are
o
ss-browser

f
ferent appro
solution and

o
ns with we
b
htweight vid
e
to load the p
d
ulin
g

r
ecommende
d
e
o content. B
ylist), sched
u
h
ese settings
a
dministrato
r
L
5 video is th
e
s
the site usi
n
i
s same proc
e
r
t HTML5. Th
i
used to seei
n
compatible.

aches to buil

scope of req
b
parts or as
l
e
o player, co
laylist and g
e
d
to use a cu
uild playlists

u
le content r
e
s
tie the man
a
r
s or specific

e use of bro
w
n
g Safari, Sa
f
e
ss holds tru
is helps to e
n
n
g, and solv
e
ding the act
u
uirements.
V
light as code

nsider using

e
nerate the
p
Cross-Plat
f
stom Share
P

of content b
a
e
levant to d
a
a
gement of t

delegates c
a
w
ser specific
f
ari will appe
e for Chrom
e
n
sure that us
e
s the proble
m
u
al video pla
y
V
ideo players


in a simple
C

jQuery with
p
layer.
f
orm Video So
l
P
P
oint list to
a
sed on a
a
tes, or selec
t
he video con
a
n easily
controls. Fo
r
nd the defau
e
, Firefox, O
p
ers are pres
e
m
of making

y
er which wil

may be as r
o
C
ontent Edit
o
the SharePoi

l
utions
P
age 4
t

tent
r

lt
p
era,
e
nted

l vary
o
bust
o
r
nt
Intellinet iPad Orientation Detection
2010 Intellinet | www.intellinet.com Page 5
iPad Orientation Detection

As workplace adoption of the iPad increases, the need for compatible access to
common business applications will increase. While Microsoft has ensured cross-
platform compatibility with the ribbon and general usability of SharePoint,
opportunities still exist for improvements of the iPad user experience.
Understanding Resolution
Today, websites designed with the iPad’s native landscape resolution of 1024x768 are
far less common compared to five years ago. Recent browser display statistics reveal
over 75% of current displays operate at or above a width of 1280 pixels. To add
further complication, the iPad’s ability to rotate to portrait orientation reduces usable
horizontal width to just 768 pixels. Fortunately, the limited width is not an issue for
static content as the SharePoint 2010 user interface (UI) floats to fit usable space.
Detecting iPad Orientation
The first method of detecting device orientation is to link style sheets specific to each
orientation. Some browsers (such as Chrome) will measure the window width and
height to calculate the orientation. This means that this method of orientation will port
over to portrait oriented PC browsers in addition to mobile devices. Orientation based
style sheets are linked by appending the orientation to the media attribute. Once style
sheets are linked, simple CSS can be used to hide or show elements or modify
element sizes based on orientation.

Example:
<link rel="stylesheet" media="all and (orientation:portrait)"
href="portrait.css" />

<link rel="stylesheet" media="all and (orientation:landscape)"
href="landscape.css" />

The only drawback to this method is that Internet Explorer does not recognize the
orientation property of the media attribute and will consequently load both style
sheets. For this reason, there should be a simple browser check to ensure only non-
Internet Explorer browsers are shown both stylesheets.

The second method of detecting device orientation is to analyze the value of
window.orientation and use window.onorientationchange to detect when that value
changes. Changes to the document object model (DOM) can then be made through
jQuery or other methods.

The window.orientation property will return an integer value of the orientation (0, 90,
180, or -90). Note that the browser provides a value of “-90” as opposed to “270”.
This value can then be used to execute changes to the DOM.
Cascading
Style Sheets
Client Side
Scripting

Intellinet

㈰㄰⁉湴e汬楮
e
e
t†簠⁷睷⹩湴
e
Gen
e
Orien
t
creat
e
detec
t
it is i
m

In the

orient
a
lands
c


llinet.com
e
ral Use
r
t
ation-based
e
d to hide or
s
t
the content
s
m
portant to n

following ex
a
tion. This p
r
c
ape orientat
i
r
Interfa
c
c
hanges to t
h
s
how conten
t
s
of a particu
ote that a li
t
a
mple, the
Q
r
events the li
i
on.
c
e Ad
j
us
t
h
e UI do not

t
relative to
t
lar element
a
t
tle thought
c
Q
uick Launch
st data from

t
ments

need to be
c
t
he orientati
o
a
nd move it
t
c
an greatly i
m

menu has b
e

being displa
y
iPad
O
c
omplicated.
S
o
n or jQuery
c
t
o another el
e
m
prove the
u
e
en hidden i
n
y
ed smaller
t
O
rientation De
t
P
S
tyles can b
e
c
an be used
e
ment. How
e
u
ser experien
n
the portrait

t
han in the
t
ection
P
age 6
e

to
e
ver,
ce.



Intellinet

㈰㄰⁉湴e汬楮
e
e
t†簠⁷睷⹩湴
e
Dyn
a
In sce
intera
c
user
e
is app
difficu

In the

prese
r
the ch
displa
y
charts


llinet.com
a
mic Da
t
narios wher
e
c
tive lists an
d
xperience. C
roximately 3
0
lt to interpre
t

following ex
r
ves the cont
e
art navigati
o
y
of the cont
e
to scale do
w
t
a
e
the ShareP
o
d
forms the
d
harts and lis
t
0
0 pixels sm
a
t
.
a
mple, a si
m
e
nt’s size an
d
o
n to the spa
c
e
nt in both p
w
n and comp
r
o
int portal co
d
efault floati
n
t
s will resize
a
ller, data
w
m
ple layout c
h
d
readability.
c
e above the

ortrait and l
a
r
ess into the

ntains dyna
m
n
g may disto
r
to fit the av
a
w
ill become s
m
h
ange based
.
By detectin
g

chart we’re
a
a
ndscape ori
e

smaller usa
b
iPad
O
m
ic data suc
h
r
t content an
a
ilable space,
m
aller, comp
on the devic
e
g
the orienta
t
a
ble to ensu
r
e
ntation, ver
s
b
le area.
O
rientation De
t
P
h
as dashboa
r
d degrade t
h
and if the s
p
ressed, and
m
e
orientation

t
ion and mo
v
r
e consistent

s
us forcing t
h
t
ection
P
age 7
r
ds,
h
e
p
ace
m
ore

v
ing

h
e

Intellinet Summary
2010 Intellinet | www.intellinet.com Page 8
Summary
As workplace adoption of the iPad increases , requirements for cross-platform
solutions and iPad specific solutions will continue to be included in major projects and
system deployments.
References
Browser Display Statistics
Enhancing the SharePoint 2010 UI: iPad Orientation Detection
Enhancing the SharePoint 2010 UI: Scripted Orientation Aware Content
HTML5 – The Video Element