html5 for mobiles

28
page 1 HTML5 for Mobile Applications for Learning Christian Glahn

Upload: christian-glahn

Post on 15-Jan-2017

11.618 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Html5 for mobiles

page 1

HTML5 for Mobile Applications

for LearningChristian Glahn

Page 2: Html5 for mobiles

page 2

Page 3: Html5 for mobiles

page 3

Why are smart phones interesting for learning?

Page 4: Html5 for mobiles

page 4

personal ubiquitous computing

device

Page 5: Html5 for mobiles

page 5

personal ubiquitous computing

device

Learner knows the system

Personal informationmanagement

lose to the learner

Page 6: Html5 for mobiles

page 6

personal

ubiquitous computing

device

Environmental sensors

Network connectivity

Supports multi-sensorial interaction

Persistent information“on your fingertips”

Page 7: Html5 for mobiles

page 7

personal ubiquitous computing

device

Help to personalize and contextualize learning experiences in new ways.

Page 8: Html5 for mobiles

page 8

What is inside?

Page 9: Html5 for mobiles

page 9

What is inside?

Web-applications•Multi Touch-screen•GPS receiver•Accelerometer•Gyroskop• Loads of Memory•W-LAN• 3G Connectivity

… more• Camera• Microphone • Sound• Clock/ Timers• Vibration

Page 10: Html5 for mobiles

page 10

Why should we go web-based on

mobile devices?

Page 11: Html5 for mobiles

page 11

Target audience has a great variance of devices

and this will not change

Reason 1

Page 12: Html5 for mobiles

page 12

Vendor Images used without permission, but this slide is their fault

Page 13: Html5 for mobiles

page 13

Native applications are very expensive

Reason 2

Page 14: Html5 for mobiles

page 14

If you need to support for more than one device you need•One developer team for each (sub-) platform

•Use different development frameworks

• Implement different UI guidelines

•Align to the deployment requirements of each platform

Page 15: Html5 for mobiles

page 15

Most applications don’t really need system functions

most of the time

Reason 3

Page 16: Html5 for mobiles

page 16

Serious Smart Phones come with a HTML5

capable web-browser

Reason 4

Page 17: Html5 for mobiles

page 17

Avoid the App-store Mania

Reason 5

Page 18: Html5 for mobiles

page 18

How does HTML5 support the development of

mobile applications?

Page 19: Html5 for mobiles

page 19

HTML5 helps to reduce costs

1 application for several devices

Page 20: Html5 for mobiles

page 20

HTML5 CSS Features

•Fancier styles and transitions•Web-apps can look as good as native apps

•Consistent visual experience•Lightning fast •First point for improving web-application performance

Page 21: Html5 for mobiles

page 21

HTML5 features for Mobiles

•Offline Cache for static content• Users can be offline without loosing the application

•Offline Storage for user data• No data-loss when returning back online

•Geo-location API• Adapt the application to the users location

•Multi-touch Event API• Use Fingers instead of Mice

Page 22: Html5 for mobiles

page 22

A few examples

Page 23: Html5 for mobiles

page 23

Social Networking

• Offline Cache for static content

• Offline Storage for user data

Page 24: Html5 for mobiles

page 24

Widget-basedPersonal Learning Environments

• Offline Cache for static content

• Offline Storage for user data

• Geo-location API

Page 25: Html5 for mobiles

page 25

Knowledge Exchange

• Offline Cache for static content• Offline Storage for user data• Multi-touch API

Page 26: Html5 for mobiles

page 26

W-Augmented Reality

• Offline Cache for static content• Offline Storage for user data• Geo-location API• Multi-touch API

Page 27: Html5 for mobiles

page 27

And if we still need something special

we can still go phonegap or titanium

Binding frameworks that expose native functions to javascript applications.

No loss of development time for re-implementing existing functions

Page 28: Html5 for mobiles

page 28

http://www.slideshare.net/phish108