Mobile and Touch-Based Web Applications Corsin Decurtins Welcome - - PowerPoint PPT Presentation

▶
mobile and touch based web applications
SMART_READER_LITE
LIVE PREVIEW

Mobile and Touch-Based Web Applications Corsin Decurtins Welcome - - PowerPoint PPT Presentation

Apr 19, 2023 247 likes •800 views

Mobile und Touch-Basierte Web Applikationen Mobile and Touch-Based Web Applications Corsin Decurtins Welcome Please switch off your mobile phones ... No wait! Introduction Mobile Applications Apps Web Apps Facebook cnn.com Gmail Twitter

slide-1
SLIDE 1

Mobile und Touch-Basierte Web Applikationen

Mobile and Touch-Based Web Applications

Corsin Decurtins

slide-2
SLIDE 2

Welcome

slide-3
SLIDE 3

Please switch off your mobile phones...

slide-4
SLIDE 4

No wait!

slide-5
SLIDE 5

Introduction

slide-6
SLIDE 6

Mobile Applications

slide-7
SLIDE 7

Apps

slide-8
SLIDE 8

Web Apps

slide-9
SLIDE 9

Websites Applications

jug.ch cnn.com Google Docs Remember the Milk Gmail Google Reader Facebook Twitter

slide-10
SLIDE 10

Some (Fake) Smartphone Statistics

slide-11
SLIDE 11

Some (Fake) Tablet Statistics

slide-12
SLIDE 12

Cost Deployment Knowhow Reuse

slide-13
SLIDE 13

Web Stack

HTML CSS Javascript

slide-14
SLIDE 14

HTML5

New Markup New APIs New CSS Features

slide-15
SLIDE 15

HTML5 Features

slide-16
SLIDE 16

Interesting New Features

slide-17
SLIDE 17

CSS

slide-18
SLIDE 18

Local Storage

slide-19
SLIDE 19

Offline Capabilities

slide-20
SLIDE 20

Location API

slide-21
SLIDE 21

Application Wrapping

slide-22
SLIDE 22

Web Sockets

slide-23
SLIDE 23

Frameworks and Libraries

slide-24
SLIDE 24

So weʼre ready to go?

slide-25
SLIDE 25

Frameworks HTML/CSS Javascript

slide-26
SLIDE 26

UI Design

slide-27
SLIDE 27

User Interaction

slide-28
SLIDE 28

Sencha Touch JQuery Mobile JQTouch ...

slide-29
SLIDE 29

Sencha Touch JQuery Mobile JQTouch ...

slide-30
SLIDE 30

JQuery Mobile

slide-31
SLIDE 31

JQuery Mobile http://jquerymobile.com/

Builds on top of the JQuery library

slide-32
SLIDE 32

JQuery Mobile

HTML/CSS/Javascript Framework Builds on top of JQuery HTML Markup with HTML5 data-* attributes Instrumentation with Javascript Styling with CSS API, Callbacks, Hooks

slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35

JQuery Mobile

1.0 Alpha 4.1 Focus on Phones for 1.0

slide-36
SLIDE 36
slide-37
SLIDE 37

Demo

slide-38
SLIDE 38

Application http://etc.ch/~corsin/html5/

Source Code http://github.com/corsin/jugshtml5demo

slide-39
SLIDE 39

Demo Environment Follow along on your mobiles (if you want to) Text Editor (itʼs only static files after all) Browser (Google Chrome)

Demo (1/6)

slide-40
SLIDE 40

Overview Demo Application Splash Screen Pages / Functionality Animations, Transitions Navigation Graphics (canvas-based) Fonts Forms (mobile optimized) Widgets Gestures Touch-based, but pointer or keys work as well AJAX for event data lookup

Demo (2/6)

slide-41
SLIDE 41

Files HTML

  • ne document with multiple pages, standard HTML

data- markup (hooks for JQueryMobile) Javascript JQueryMobile (and other libraries) custom code (not required, but used for additional functionality) CSS JQueryMobile custom code (not required, but used for custom styling) Images, Fonts, ... Data (file in the example, could be dynamic)

Demo (3/6)

slide-42
SLIDE 42

Structure of the Application HTML file basic page, one document with multiple screens data- attributes (as hooks for JQueryMobile) normal JQuery instrumentation will probably become available as well (my guess) static pages/screens dynamic pages/screens template pages/screens

Demo (4/6)

slide-43
SLIDE 43

Styling / Theming JQueryMobile themes (baseline)

  • ffers multiple themes

ThemeRoller support will (probably) come later customization through CSS hooks for the customization are a bit difficult to find JavaScript event handlers for events e.g. a swipeleft event, tap events, double tap, ... WebFonts Viewport Responsive Layout

Demo (5/6)

slide-44
SLIDE 44

Local Installation Icons, Startup Screen Local Storage Local database Key/Value store SQL store Offline Capability Manifest Canvas Best used through (abstraction) libraries flot example Location API

Demo (6/6)

slide-45
SLIDE 45

Summary

slide-46
SLIDE 46

Web Applications are an option for mobile and touch-based applications

slide-47
SLIDE 47

Mobile Websites you can build them manually Mobile Web Applications use frameworks

slide-48
SLIDE 48

Frameworks different maturity different styles Pick your poison

slide-49
SLIDE 49

Cost + Installation - Deployment +/- App Store +/- APIs - Knowhow / Reuse + Updates + Monetizing +/- Performance - Responsive Layouts + Desktop and Mobile Web Hybrids + Interoperability + Marketing / Sales +/-

Mobile Web Apps (vs. Native Apps)

slide-50
SLIDE 50

hybrids are an interesting

  • ption
slide-51
SLIDE 51

put HTML5 in your toolbox

slide-52
SLIDE 52

Corsin Decurtins

Software Architect and Engineer corsin.decurtins@netcetera.ch +41 44 247 70 70

slide-53
SLIDE 53

Mobile und Touch-Basierte Web Applikationen

Mobile and Touch-Based Web Applications

Corsin Decurtins