• No results found

WebCenter User experience. John

N/A
N/A
Protected

Academic year: 2021

Share "WebCenter User experience. John"

Copied!
38
0
0

Loading.... (view fulltext now)

Full text

(1)

WebCenter User eXperience

iPads - Xbox

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!

• One Template - to rule them all!

• Voice Integration

• Touch Events & Gestures

• Touch Events & Gestures

• New APIs GamePad.

• New APIs GamePad.

(4)

Microsoft Metro UI

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

• 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

• 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

• 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

• Resolution Break Points

(14)
(15)

Media Queries

• Muscles & Skin

• CSS Queries

• 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

<link rel="stylesheet" type="text/css"

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

now to enhance the users

journey

• Voice Enablement

• Device Integrations – Mobile, gamepads

• Device Integrations – Mobile, gamepads

• Touch Events PS5

• Touch Events PS5

(19)

Voice Enabled Integration

• Google Chrome / WebKit

• Dragon Speak – MS Kinect Voice SDKs

• Dragon Speak – MS Kinect Voice SDKs

• Flash

• HTML5 – WRTC (Web Real Time Comms)

• HTML5 – WRTC (Web Real Time Comms)

• Mobile Applications

(20)

Google Chrome Example

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

<input type="text" x-webkit-speech="x-webkit-speech" /> </label>

(21)
(22)
(23)

Dragon Speak & MS Kinect Voice SDKs

(24)

Flash

• No native ways to pass Audio to Browser

• Plugin Required (Flash)

• 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

• 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

– Now called Cordova

• capture JS method

• Native Device recording

• Native Device recording

(27)

Touch Events & Gestures

• WebCenter PS5 – ADF Faces

• Touch Events

• Touch Events

• IOS / Android

• Web Frameworks

(28)

WebCenter Capabilities PS5

• DVT Touch HTML5 SUPPORT

• New Touch Integrated Events

• 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

– 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

• 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

Spatial Operating Environment

Experimental Motion activated Gestures (Kinect)

• New APIs –

– Gamepad API

– Gamepad API

– Mouse Lock API

– Full Screen 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

• Browser Plugins

(35)

Demo

Demo

(36)

Questions?

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: info@fishbowlsolutions.com • Email: info@fishbowlsolutions.com • 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

References

Related documents

Avito is the fastest growing Avito – Mobile Listing fees Voluntary fees Display Contextual Shops Page 8 App downloads. Downloads until

I t’s easy to overlook the common details of everyday life that make a toy train layout look more realistic.. In the photo on this page, for example, did you notice that the

By implementing ASO best practices and improving your app store listing you can increase the number of users finding your app via app search while also maximising the downloads

A Library of The Department of Vermont Health Access (DVHA) Advisory Publications can be accessed by clicking the Downloads button located in the top yellow bar of the Portal