html5 for mobiles - connecting repositories · come with a html5 capable web-browser reason 4 ....

28
page 1 HTML5 for Mobile Applications for Learning Christian Glahn

Upload: others

Post on 05-Jun-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 1

HTML5 for Mobile Applications

for Learning Christian Glahn

Page 2: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 2

Page 3: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 3

Why  are  smart  phones  interes/ng  for  learning?  

Page 4: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 4

personal    ubiquitous    compu&ng    device  

Page 5: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 5

personal    ubiquitous    compu&ng    device  

Learner knows the system

Personal information management

lose to the learner

Page 6: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 6

personal    

ubiquitous    compu&ng    

device  

Environmental sensors

Network connectivity

Supports multi-sensorial interaction

Persistent information “on your fingertips”

Page 7: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 7

personal    ubiquitous    compu&ng    device  

Help to personalize and contextualize learning experiences in new ways.

Page 8: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 8

What is inside?

Page 9: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 10

Why should we go web-based on

mobile devices?

Page 11: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 11

Target audience has a great variance of devices

and this will not change

Reason 1

Page 12: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 12

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

Page 13: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 13

Native applications are very expensive

Reason 2

Page 14: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 15

Most applications don’t really need system functions

most of the time

Reason 3

Page 16: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 16

Serious Smart Phones come with a HTML5

capable web-browser

Reason 4

Page 17: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 17

Avoid the App-store Mania

Reason 5

Page 18: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 18

How does HTML5 support the development of

mobile applications?

Page 19: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 19

HTML5 helps to reduce costs

1 application for several devices

Page 20: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 22

A few examples

Page 23: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 23

Social Networking

•  Offline Cache for static content

•  Offline Storage for user data

Page 24: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 24

Widget-based Personal Learning Environments

•  Offline Cache for static content

•  Offline Storage for user data

•  Geo-location API

Page 25: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 25

Knowledge Exchange

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

Page 26: HTML5 for Mobiles - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

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 - COnnecting REpositories · come with a HTML5 capable web-browser Reason 4 . page 17 Avoid the App-store Mania Reason 5 . page 18 How does HTML5 support the development

page 28

http://www.slideshare.net/phish108