effectively using nokia web tools 2.0 templates for series 40 web apps

17
Effective templates for Series 40 web apps Tapan Acharya Lead Evangelist & Consultant.

Upload: microsoft-mobile-developer

Post on 16-Jun-2015

1.117 views

Category:

Technology


2 download

DESCRIPTION

This webinar presentation shows you how easy it is to build Series 40 web apps based on templates in Nokia Web Tools 2.0. Tapan Acharya, lead evangelist and consultant with Nokia in Bangalore, describes templates including Multi-view, RSS Feed, Accordion, Carousel, and Tab Control. He presents sample apps and shows you how to use existing templates to localise your apps for languages you choose to support. The knowledge from this webinar will help you to select templates effectively and thus develop Series 40 web apps quickly.

TRANSCRIPT

Page 1: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Effective templates for Series 40 web apps

Tapan Acharya Lead Evangelist & Consultant.

Page 2: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Contents

• Why web apps? • Web app runtime architecture

• Introducing Nokia Web tools.

• How to use different templates in web apps.

• Demo of some templates and UI components.

• Design consistency and templates.

• Demo of advanced templates.

Page 3: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Java and web apps offer options and flexibility

Sophisticated Games

Communication

Productivity Tools

Multimedia

JAVA APPS

News, Info, Guides &

Reference

Brands, Products & Shopping

Social Networks

Simple/Social Games

(e.g., quizzes)

WEB APPS

• Suited for highly interactive and graphics-intensive apps, offline processing

• Available as “native” platform

• Suited to connected information and entertainment apps

• Easier to learn for new developers • Faster time to market & lower

development costs

• Consumer Foot fall. • Usage Trends • Purchase Trends. • Web Extensions

Page 4: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

• Excellent browsing experience, even with the lowest price point devices • Proxy to process complex web pages for better experience • Up to 90% more efficient and more than twice as fast • Dynamic start page with locally relevant content • Cloud-assisted web apps

Web apps leverage cloud-assisted Xpress Browser for Series 40

THE INTERNET

Better browsing

Web apps

BETTER AND PERSONALISED WEB

EXPERIENCE

XPRESS BROWSER FOR SERIES 40 PROXY SERVER

Page 5: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Xpress Browser Client

Application Session

Xpress Browser Proxy Web App Manager

Content Server

Application Session

DOM

JavaScript Context

Client Optimizer

Device APIs

Widget API

DOM Comparison

DOM

MWL

1. User selects web app 2. Requests web app

3. Metadata, HTML, CSS, JavaScript, Images, etc.

4. Create DOM and JavaScript context. Run onload JavaScript

5. AJAX requests for data

6. XML, JSON, etc. from Content Server

8. Web app view (HTML, CSS, Images, MWL)

7. Server processing • Web app JavaScript modifies DOM • Server creates client optimized HTML/CSS from DOM • JavaScript event handlers are wrapped in MWL callbacks • MWL event handlers are passed through to client

Web App Runtime Architecture

Initial web view

Page 6: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Web app tools

Nokia Web Tools

Web Development Environment

(WDE)

Web App Simulator

(WAS)

Web Developer Channel (WDC)

Page 7: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Overview of Nokia Web Tools. WDC

WDE Simulator

Page 8: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Web Developer Environment (WDE) • Built on the Eclipse platform

• WDE leverages the powerful web editing features (editing, packaging, and deploying of web apps).

Toolbar

Menu options

Network trace view

Updated project shortcut menu

options

Page 9: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Web App Simulator (WAS) • Enables to preview and test Series 40 web apps • For Series 40 web apps, WAS must be started from within WDE by

previewing a web app

Local Preview

Web App Simulator

(WAS)

Cloud Preview

Page 10: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Web App Simulator look & feel

Settings

Device Settings

Simulator Menu Bar Simulator

Page 11: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

MWL: • Is a JavaScript library to handle basic on device operations.

• MWL Methods must be invoked inline to execute on the client.

Gestures: • Nokia Browser exposes swipe, long press and key events.

Animated Transitions: • Animated Transitions supported through basic CSS3 Module 3 support.

• Width, height and margin.

Storage • Using widget preferences :http://www.w3.org/TR/widgets-apis/#the-preferences-attribute

Application Cache • HTML5 feature for storing Web assets locally • Current Use: store static images from web app

Web App Platform Features

Page 12: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Choosing template from WDE

© Nokia 2012 / Company Confidential 12

Page 13: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Demo

Page 14: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Templates and Series 40 design consistency

Page 15: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Gesture implementation in templates

© Nokia 2012 / Company Confidential 15

Page 16: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Demo

Page 17: Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Thank you.

© Nokia 2012 17

www.developer.nokia.com/series40webapps