HTML 123

Tim Back / TIP C UI Web Technologies , Michael Falk / CPO User Interfaces

November 2011

HTML5 for lightweight SAP Applications

© 2011 SAP AG. All rights reserved. 2

Disclaimer

This presentation outlines our general product direction and should not be relied on in making a

purchase decision. This presentation is not subject to your license agreement or any other agreement

with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to

develop or release any functionality mentioned in this presentation. This presentation and SAP's

strategy and possible future developments are subject to change and may be changed by SAP at any

time for any reason without notice. This document is provided without a warranty of any kind, either

express or implied, including but not limited to, the implied warranties of merchantability, fitness for a

particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this

document, except if such damages were caused by SAP intentionally or grossly negligent.


Configuration Personalization Customizing

Solution Map for SAP User Interfaces Todays focus ..

Integration Repositories Infrastructure

UI Solutions Products

User Interface Clients Desktop Browser Mobile

Applications

& Content

Applications with

Enhanced User Interfaces Pre-Defined Content

Adaptation

Technologies Composition and Orchestration

Develop your own

user interfaces

Extend or tweak

your user interfaces

Adopt latest

UI enhancements

Ad

op

t T

we

ak

De

ve

lop

Development


Agenda

Introduction to HTML5

HTML5@SAP

Building lightweight Applications

Introduction to HTML5


Introduction to HTML5 The History of Web Technologies

A diagram drawn (maybe with CorelDRAW!® or

Inkscape) by Felipe Micaroni Lalli

([email protected]).

Milestones

1990: First HTML Version released

1996: CSS 1.0 (Cascading Style Sheets)

1997: HTML 4.0

1998: Introduction of XML

1999: HTML 4.01 – latest HTML release so far

2000: SVG (Scalable Vector Graphics)

2002: XHTML 1.0

201X: HTML5 – so far a working draft

.

mailto:[email protected]?subject=File:Web_development_timeline.png


Introduction to HTML5 News at a glance

Successor of HTML4

New semantic and functional elements

Focus on semantic HTML: Use markup for structuring documents

New APIs

• Audio

• Video

• Offline applications

• Drag & Drop

• History

• …


Introduction to HTML5 Differences between HTML5 and HTML4

Well Integrated Multimedia support

• Native Video and Audio support

Built-In Graphics and Charting enablement

• Vector graphics directly in the browser (SVG Tag)

• Creation of Pixel Perfect Bitmaps (Canvas Tag)

New Element Tags for convenience

• Slider Control, Date Picker and more ..

Structure elements like <header>, <section> , <sidebar> Slider Control

Date Picker


Introduction to HTML5 Design and Layout

Cascading Style Sheets

• Separation of structure and layout design changes without changing the document structure

CSS3

• Huge amount of new styling capabilities

Rounded corners, shadow effects, color gradients

Common styling tasks are possible without using images

Rotation and 3D perspective

Animated transitions

…many more (250 properties)


Introduction to HTML5 Additional functionality by related Standards

New JavaScript APIs

• Web SQL Database & Web Storage

• Web Workers (multithreading)

• WebGL (hardware-accelerated 3D graphics!)

Openness

• ARIA (accessibility)

• OpenAJAX (interoperability)

Dramatic performance improvements

• JIT JavaScript compilation, hardware acceleration for rendering


Introduction to HTML5 Browser Situation

IE6 and IE7

• Functional gap to HTML5 is too big for support in a meaningful way

IE8

• Does not support HTML5 and CSS3, workarounds are envisioned

• Does not have JIT JavaScript nor new JS APIs

Latest versions of Safari, Firefox, Chrome, Opera, IE9. All of them

• Comply with most HTML5 features

• Comply with most CSS3 features

• Have JIT JavaScript

• Implement new JavaScript APIs

http://rumsey.org/space/Space.html


Introduction to HTML5 What may come next – experimental features

Multimedia

• Speech recognition and Text-to-Speech

• Webcam/Microphone capture

• Full fledged Audio API

Operation system Integration

• Desktop integration

• Frameless windows

Google abandoned Gears in favor of HTML5

Evolution from document markup to UI programming model

HTML5@SAP


HTML5@SAP Trends and Demands

http://www.apple.com/ipad/features/safari.html

http://www.sapdesignguild.org/editions/edition6/images/chrome-portal.jpg


HTML5@SAP HTML5 Control Library and Framework

“Any Screen on any Device”

• Native, device-specific Views and Screens

• Clear separation of UI Structure and Layout

Beautiful and interactive UI`s

• Modern UI Controls

• Interactive and integrated Business Graphics

• Pixel Perfect Design

Standards and Openness

• Based on ―Open Source‖ framework(s) and Web Standards

• SAP Product Standards compliance

Adaptation and Flexibility

• Extensibility concepts for ―custom controls‖

• Theming and Branding framework

Future-proof UI Rendering and highest possible flexibility with HTML5@SAP


Professional

UI

Orchestration

Firew

all

Consumption

Business

Suite

Application

Gateway

Multip

le S

yste

ms

Others Analytical

Data ON

PR

EM

ISE

ON

DE

MA

ND

On Demand

Application

OData

<unknown> SDK

Desktop SDK

Adapter Adapter

HTML5@SAP People Centric Content Provisioning

• Easy to consume Interfaces

• Open standards + SAP Extensions

• Unified Data access for

heterogeneous Applications

• “Any Client on any Device”

With the OData Protocol Business Information can be described as ―People-Centric

Consumption Model‖ (CM)


ON

PR

EM

ISE

SAP

Business

Objects

Adapter

Sybase Unwired Platform

(SUP)

HTML5@SAP Fit into SAP`S Mobile Strategy

Two Alternatives

Native Applications with Sybase SDKs via SUP

Consumption technologies:

• RFCs/BAPIs

• NetWeaver Mobile

• SAP Business Objects

• Project Gateway (new)

HTML5 Container-based Applications (new)

Consumption technologies:

• RFCs/BAPIs

• Project Gateway

• SAP Business Objects

Mobile, enterprise-grade business applications for SAP Business Suite and SAP Business Objects.

Orchestration

NW Mobile

SAP

Business

Suite

Gateway


TODAY FUTURE PLANNED (6-12 months)

HTML5@SAP Roadmap - summary of key themes and capabilities

TODAY PLANNED INNOVATIONS FUTURE DIRECTION

Pilots and Prototyping

Rich, state-of-the-art UI control set

SAP Control design time

Google Web Toolkit (GWT) integration

Fully integrated extensibility concept

Flexible Theming

Model View Controller concept

Server agnostic runtime

Framework based on jQuery

OData consumption

Leverage full HTML5 capabilities to achieve best

possible RIA behavior for SAP UIs at low TCO/TCD

Additional UI capabilities and better responsiveness

Extensible framework for highest flexibility

Deliver modular reusable components

Provide full fledged core services like connectivity,

security and supportability

Provide client side tools like sophisticated Design

Time, UI analyzer and dependency browser & profiler

for enhanced supportability and developer

productivity

Easy, out-of-the-box OData consumption


HTML5@SAP Planned innovations - features & functions

Html5 Control Library

Feature Area Functionality

Enterprise-grade Library and Framework

• Client-side HTML rendering library based on JavaScript • RIA-like feature set • Open AJAX compliance (-> run together with other non-SAP JavaScript libraries) • SAP product standards compliance for accessibility and security

Rich control set Major and most important UI Controls (e.g. Table, Tree, Checkbox, Date Picker, Roadmap, Dropdown, several Layout

options)

Extensibility and flexibility concept Enrichment with native HTML, JavaScript and CSS Theming capabilities Custom built UI controls and control libraries

Data Binding Data binding for numerous controls like table, tree, dropdown Support of XML and JSON models OData support

Openness & flexibility Server agnostic HTML5 library Based on jQuery library

Building

lightweight Applications


Further Information

SAP Public Web:

SAP Developer Network (SDN): www.sdn.sap.com

Business Process Expert (BPX) Community: www.bpx.sap.com

SAP BusinessObjects Community (BOC): www.boc.sap.com

Related SAP Education and Certification Opportunities

http://www.sap.com/education/

Related Workshops/Lectures at SAP TechEd 2011

CD263 - Developing and Consuming OData Services Using SAP NetWeaver Gateway

TEC203 - SAP UI Strategy and Roadmap

http://www.sdn.sap.com/

http://www.bpx.sap.com/

http://www.boc.sap.com/

http://www.sap.com/education/


SAP Usability Test Center@SAP TechEd Madrid

Shape the Future of SAP Products

Try out new and existing SAP solutions and tools, and provide on-

the-spot feedback to SAP developers and usability experts

Come by the SAP Usability Test Center and schedule a session.

Sessions are running throughout the conference; each one is 90

minutes

The Usability Test Center is in rooms A10.1-A10.3, Level 1, just

above general conference registration. Take the elevator located

in the middle of the registration area.

UI Development Toolkit for HTML5 Try out SAP UI5

Provide input about your UI development needs

Feedback Please complete your session evaluation.

Be courteous — deposit your trash,

and do not take the handouts for the following session.

Thank You! Contact information:

Michael Falk

Product Strategist

TIP C CPO UI

Twitter: http://twitter.com/#!/Michael_Falk

XING: https://www.xing.com/profile/Michael_Falk3

LinkedIn: http://de.linkedin.com/in/michaelfalk01

Contact information:

Tim Back

Product Owner

TIP C UI Web Technologies

http://twitter.com/

https://www.xing.com/profile/Michael_Falk3

https://www.xing.com/profile/Michael_Falk3

http://de.linkedin.com/in/michaelfalk01

http://de.linkedin.com/in/michaelfalk01


No part of this publication may be reproduced or transmitted in any form or for any purpose

without the express permission of SAP AG. The information contained herein may be

changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary

software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft

Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x,

System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer,

z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server,

PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER,

OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP,

RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,

Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered

trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or

registered trademarks of Adobe Systems Incorporated in the United States and/or other

countries.

Oracle and Java are registered trademarks of Oracle and/or its affiliates.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are

trademarks or registered trademarks of Citrix Systems, Inc.

© 2011 SAP AG. All rights reserved.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World

Wide Web Consortium, Massachusetts Institute of Technology.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer,

StreamWork, and other SAP products and services mentioned herein as well as their

respective logos are trademarks or registered trademarks of SAP AG in Germany and other

countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports,

Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and

services mentioned herein as well as their respective logos are trademarks or registered

trademarks of Business Objects Software Ltd. Business Objects is an

SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase

products and services mentioned herein as well as their respective logos are trademarks or

registered trademarks of Sybase, Inc. Sybase is an SAP company.

All other product and service names mentioned are the trademarks of their respective

companies. Data contained in this document serves informational purposes only. National

product specifications may vary.

The information in this document is proprietary to SAP. No part of this document may be

reproduced, copied, or transmitted in any form or for any purpose without the express prior

written permission of SAP AG.

HTML 123

Documents

Transcript of HTML 123