WebCenter User experience. John

(1)

WebCenter User eXperience

iPads - Xbox

John Sim

(2)

About Fishbowl Solutions

• Specializing on portals & content

• Specializing on portals & content management for 13 years

• Customers throughout North

• Customers throughout North America & EMEA

• Enterprise-wide consulting services

•• Packaged software for WebCenter

• 100+ WebCenter-related projects in last 2 years

(3)

Introduction

• Less is more.. .

• One Template - to rule them all!

• Voice Integration

• Touch Events & Gestures

• New APIs GamePad.

(4)

Microsoft Metro UI

Desktop – Console – Tablet – Mobile

• Single UI • Recognised across • Recognised across device • Reusable elements • Reusable elements

• Supports Voice, Touch & Spatial interactions & Spatial interactions

(5)

Developing Windows 8

• HTML 5 applications

• Portable to PC, Tablet, Mobile, Kinect via

• Portable to PC, Tablet, Mobile, Kinect via Microsoft App Store

(6)

(7)

(8)

(9)

Responsive, Adaptive Design

• Fluid Grids – Liquid Layouts

• Flexible Images • Flexible Images • Break Points • Media Queries • Media Queries • Touch of JavaScript Flexible layout Flexible grid system Flexible media Flexible layout through media queries

(10)

Fluid Grids & Liquid Layouts

• Base Framework Skeleton

• Can scale to any resolution

• Wraps content & Grids

• Can Support Desktop to Mobile with 1

• Can Support Desktop to Mobile with 1 template

(11)

Flexible Images

• Scalable Images

• 100% Width attribute

• Device Image Optimisation

Desktop - Mobile Desktop - Mobile

(12)

Code -

https://github.com/filamentgroup/Responsive-Images HTML DOM <img src="small.jpg?full=large.jpg" /> CSS Img { Img { Width:100%; } }

(13)

Break Points

• Defining flexible template

• Resolution Break Points

(14)

(15)

Media Queries

• Muscles & Skin

• CSS Queries

(16)

Using Media Queries

Inline within the style sheet you can encapsulate the required CSS within the query –

@media only screen and (max-device-width: 480px) { @media only screen and (max-device-width: 480px) {

body {

background:red; }

} }

Within the Media attribute of the html <link rel=”stylesheet” /> tag Within the Media attribute of the html <link rel=”stylesheet” /> tag

media="screen and (max-device-width: 480px)" media="screen and (max-device-width: 480px)" href="480.css" />

(17)

Touch of JavaScript

• Browsers don’t all support CSS3 Media queries queries http://code.google.com/p/css3-mediaqueries-js/ http://code.google.com/p/css3-mediaqueries-js/ or https://github.com/scottjehl/Respond https://github.com/scottjehl/Respond

(18)

The Future and what we can do

now to enhance the users

journey

• Voice Enablement

• Device Integrations – Mobile, gamepads

• Touch Events PS5

(19)

Voice Enabled Integration

• Google Chrome / WebKit

• Dragon Speak – MS Kinect Voice SDKs

• Flash

• HTML5 – WRTC (Web Real Time Comms)

• Mobile Applications

(20)

Google Chrome Example

<label>Speech test: <label>Speech test:

(21)

(22)

(23)

Dragon Speak & MS Kinect Voice SDKs

(24)

Flash

• No native ways to pass Audio to Browser

• Plugin Required (Flash)

• SpeechAPI Open Source examples

– Don’t require your own engine

(25)

The Future HTML5 RTC

• HTML5 Standards not yet complete

• Browsers do no fully support HTML5

• <device /> support Audio Video input

• Experimental Development possible with

• Experimental Development possible with latest browser builds!

(26)

Mobile Applications

• Phone Gap – Callback

– Now called Cordova

• capture JS method

• Native Device recording

(27)

Touch Events & Gestures

• WebCenter PS5 – ADF Faces

• Touch Events

• IOS / Android

• Web Frameworks

(28)

WebCenter Capabilities PS5

• DVT Touch HTML5 SUPPORT

• New Touch Integrated Events

• Context Menu and Tooltip Activation from Touch Gestures for Tablets

Touch Gestures for Tablets

(29)

Touch Events

– Touchstart – fires once

– Touchmove – fires continuously

– Touchend – fires once

(30)

IOS / Android

• iOS captures 11 points

– (The eleventh is a mystery to everyone…)

• Android and Others less.. But improving..

• Try to Stick to convention of 2 points

– IMPORTANT gesture events are only

– IMPORTANT gesture events are only supported on iOS device.

– [gesturestart, gesturechange, gestureend]

(31)

(32)

Spatial Operating Environment

Experimental Motion activated Gestures (Kinect)

• New APIs –

– Gamepad API

– Mouse Lock API

– Full Screen API

• No Official Kinect / Spatial release yet!..

(33)

WebSocket Push

• USB Kinect • C++ • C++ • WebSocket • Browser JS WS:// • Browser JS WS://

(34)

DepthJS

• USB Kinect

• Browser Plugins

(35)

Demo

(36)

Questions?

(37)

More from Fishbowl at Collaborate12 Download our Free Collaborate App! at Collaborate12

14 Team & Customer Presentations To view the schedule on your iPad or

App!

To view the schedule on your iPad or iPhone download out app or visit

fishbowlsolutions.com/collaborate App Includes: App Includes: • Session Schedule • Booth Info • Presentations Downloads • Presentations Downloads • Whitepapers Downloads • Expo Map Search: Search: Fishbowl Solutions

(38)

• Booth: #1178 Additional Resources • Booth: #1178 • Web: www.fishbowlsolutions.com • Email: [email protected] • Email: [email protected] • Twitter: @fishbowlE20

• Facebook: facebook.com/fishbowlsolutions Enter to win • Facebook: facebook.com/fishbowlsolutions Enter to win

an iPad!

Learn more about WebCenter Content Mobile, SharePoint Integration, Google