WebCenter User experience. John

Transcription

1 WebCenter User experience ipads - Xbox John

2 About Fishbowl Solutions Specializing on portals & content management for 13 years 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. Spatial Operating Environments (Kinect)

4 Microsoft Metro UI Desktop Console Tablet Mobile Single UI Recognised across device Reusable elements Supports Voice, Touch & 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 Simple Minimalist Visual UI

7

8

9 Responsive, Adaptive Design Fluid Grids Liquid Layouts Flexible Images Break Points Media Queries Touch of JavaScript 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 WebCenter Content Conversion Server

12 Code - HTML DOM <img src="small.jpg?full=large.jpg" /> CSS Img { } Width:100%;

13 Break Points Defining flexible template Resolution Break Points Break Points are always changing!

14

15 Media Queries Muscles & Skin CSS Queries Single Base multiple Looks

16 Using Media Queries Inline within the style sheet you can encapsulate the required CSS within the only screen and (max-device-width: 480px) { } body { } background:red; Within the Media attribute of the html <link rel= stylesheet /> tag <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="480.css" />

17 Touch of JavaScript Browsers don t all support CSS3 Media queries or

18 The Future and what we can do now to enhance the users journey Voice Enablement Device Integrations Mobile, gamepads Touch Events PS5 Spatial Gesture Integrations

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: <input type="text" x-webkit-speech="x-webkit-speech" /> </label>

21 Browser Input Display

22 Architecture

23 Dragon Speak & MS Kinect Voice SDKs Local Voice Recognitions Engines

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 capabilities as Input methods

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 Drag and Drop

29 Touch Events Touchstart fires once Touchmove fires continuously Touchend fires once element.addeventlistener("touchstart", mytouchfunction, false);

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 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++ WebSocket Browser JS WS://

34 DepthJS USB Kinect Browser Plugins DepthJS Library

35 Demo

36 Questions?

37 More from Fishbowl at Collaborate12 14 Team & Customer Presentations Download our Free Collaborate App! To view the schedule on your ipad or iphone download out app or visit fishbowlsolutions.com/collaborate App Includes: Session Schedule Booth Info Presentations Downloads Whitepapers Downloads Expo Map Search: Fishbowl Solutions

38 Additional Resources Booth: #1178 Web: Facebook: facebook.com/fishbowlsolutions Enter to win an ipad! Learn more about WebCenter Content Mobile, SharePoint Integration, Google Search, Intranet-in-a-Box and more.