More Related Content Similar to Html5 overview Similar to Html5 overview (20) Html5 overview1. HTML5 overview
August 2012
©2011 appbackr inc. confidential and proprietary.
2. HTML5
Presentation
Is a markup language for structuring and presenting
content for the World Wide Web.
Improves, extends and rationalizes the markup
available for documents.
Supports the latest multimedia.
Introduces markup and application programming
interfaces (APIs) for complex web applications.
Is a potential candidate for cross-platform mobile
applications.
2
©2011 appbackr inc. confidential and proprietary.
3. HTML5
HTML5 apps Vs. Native apps
HTML5 apps Native apps
Ø Rich web-based apps that Ø Written for a specific platform
run on any device (Android, iOS, Blackberry, …)
Ø Distributed through the rules Ø Distributed trough app stores
of the open web controlled by the owners of
the platforms
Ø Will get better than native Ø Are currently more powerful
apps than HTML5 apps
3
5. Operating Systems
BlackBerry OS
Is a proprietary mobile operating system developed by
Research In Motion (RIM).
Designed specifically for RIM’s Blackberry devices.
Is best known for its robust support for push Internet
email.
Uses Blackberry App World to download applications.
Works with native application. Since 2010, RIM
introduced a web development platform allowing the
creation of HTML web apps.
The new BlackBerry 10 is likely to be launched in Q1
of 2013, it’s based on QNX which was acquired by
RIM in 2010.
5
©2011 appbackr inc. confidential and proprietary.
6. Operating Systems
Chrome OS
Is a Linux-based, open-source operating system
designed by Google.
Works exclusively with web applications.
Is aimed at users who spend most of their computer
time on the Web : the only application on the device is
a browser.
Stores all the apps, documents, and settings directly
on the web.
Uses chrome web store to download web applications.
6
7. Operating Systems
Firefox OS
Is an open-source operating system in development
by Mozilla.
Aims to support HTML5 apps written using open Web
technologies rather than platform-specific native APIs.
Allows developers to easily port their HTML5 apps.
Will enable 75% of Apple and Google apps to work on
it.
The first handsets running Firefox OS are likely to
arrive on January 2013.
7
©2011 appbackr inc. confidential and proprietary.
8. Operating Systems
Tizen OS
Is an open-source mobile operating system based on
the Linux OS.
Incorporates a number of modules from the MeeGo
project, which is a combination of the Intel’s OS
(Moblin) and the Nokia’s (Maemo).
Is based on web standards such as HTML5 and WAC
web technologies.
Will be designed for use in tablets, netbooks,
smartphones, smart TVs, and in-vehicle infotainment
systems.
8
©2011 appbackr inc. confidential and proprietary.
9. Devices
BlackBerry, Chrome, and Tizen devices
BlackBerry devices Chrome devices Tizen devices
ü Push email technology ü Fast and secured interface ü Flexible and powerful interface
ü Fast typing (QWERTY ü Easy to use (intuitive) ü 3D window effects
Smartphones
keyboard) ü Only able to run web apps ü Advanced multimedia
ü Capable for compressing data ü Multi-task capability ü Location based service
to half the size frameworks
ü Native apps available on ü Multi-task and multi-touch
BlackBerry App World capabilities
ü Slow Web browser ü Support for scalable screen
resolution
PlayBook (Tablet): ChromeBook (Computer): Tizen Tabet:
ü Clean and pleasing to use ü Quick and protected ü Touch-optimized user interface
Other devices
interface ü Connect the Internet via ü Built-in applications for Web
ü Good display quality Wi-Fi, 3G or 4G network browsing, personal information
ü Multitask capability ü Automatically updated management, and media
ü Requires Internet consumption
connection
ü No internal storage, data
will be stored on Google’s
cloud
9
©2011 appbackr inc. confidential and proprietary.
10. Tizen
Tizen EFL Webkit
The Enlightenment Foundation Libraries (EFL) is a set of open source graphical
software libraries that grew out of the Enlightenment window manager project.
10
©2011 appbackr inc. confidential and proprietary.
11. Tizen
Tizen APIs
An application programming interface (API) is a specification intended to be used as an interface by
software components to communicate with each other. WAC and W3C are two API standards.
11
©2011 appbackr inc. confidential and proprietary.
12. Tizen
Tizen Device API specifications
API Description
Tizen The base object for accessing Tizen Device APIs.
Alarm This API provides functionality for setting and unsetting alarms.
Application This API provides information about running and installed applications and controls them.
Bluetooth This API enables control over Bluetooth.
Calendar This API enables the management of calendar information.
Call This API allows accessing call history for cellular and VoIP calls. Call support will be added later.
Contact This API enables the management of contact information.
Filesystem This API provides access to the file system of a device.
Geocoder This API provides "geocoding" and "reverse geocoding" functionality.
LBS The base object for accessing location based service(LBS) APIs.
Media Content This API provides functionality to discover multimedia content (such as images, videos or music).
Messaging This API allows SMS, MMS, IM and Email message sending and receiving.
NFC This API allows access to NFC device(s).
System Information This API provides information about the device's display, network, storage and other capabilities.
Time This API exposes information about date, time and time zones.
12
©2011 appbackr inc. confidential and proprietary.
13. Porting HTML5 apps to Tizen
Configuration
!"#$%&"'$() *+,$-
!"#$%&"'( )*+",
Ø Change namespace
!""#$$%&'(%) *+,#-
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2)*+,-/'#0&,3!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!2
!"#$%&'()*$3!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!2
3!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!2
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!2
5/1':*01.3!;<==.>+11-!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B
5/1':*01.3!;<==.>+11-!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222
3!;<==.>+11-
5/1':*01.3!;<==.>+11-!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222
8/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!#12,(-31.!/>*-($-,!&B22
!"##$%&'() *$+"%
!#/0,(-1/.!/?*-($-,!&C22
!12,'&,'(-31.!/-01C("#:=!&B22
!/0,'&,'(-1/.!/-013("#45!&C22
Ø Change configuration files
!,4*&56734!8,4*&5((
!,2*&34512!6,2*&3((
!47'92385((
!25'70163((
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!2
!+#1&,-&85((
!+#/&,-&63((
8/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!:&4'73&(((,4*&.!"##$%&&#/41-(*+,&9$/&>*-#9>#!2+1D</+103!#+<1!&B
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!#/0,(-1/.!/?*-($-,!&C22
!:&4'73&(,4*&.!"##$%&&#/41-(*+,&9$/&,1*>*01+!2+1D</+103!#+<1!&B
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C
!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C
!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C
!/0,'&,'(-1/.!/-013("#45!&C22
!:&4'73&(,4*&.!"##$%&&#/41-(*+,&9$/&#/41-!2+1D</+103!#+<1!&B
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!,2*&34512!6,2*&3((
!411&--(23#%#,.!"##$%&&9$/('<-01+,+*<-0(>*:&!2.<E0*:9/-.3!#+<1!&B
!2//&--(01#%#,.!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.7!#+>1!&C
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!2
!25'70163((
!'#0&,/-&''#,% 32'4'#2,;+21<.!=9-0.>9$1!2/-0/>9#*+F$+1.1->13!0/.9E=1!2E9>GE<##*-F$+1.1->13!0/.9E=1!2&B
!'#9&,:-&''#,% 10'2'#0,;+0/<.!5<-0.?<$1!2/-0/?<#*+F$+1.1-?17!0/.<E51!2E<?GE>##*-F$+1.1-?17!0/.<E51!2&C
8/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!+#/&,-&63((
!8"#$%&'5
!6"#$%&'3
!#/0,(-1/.!/?*-($-,!&C22
!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
Ø Change access URL
!/0,'&,'(-1/.!/-013("#45!&C22
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C
!,2*&34512!6,2*&3((
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!25'70163((
!2//&--(01#%#,.!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.7!#+>1!&C
!"##$%%&'()*)+,!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.7!#+>1!&C
!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.
!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.7!#+>1!&C
!+#/&,-&63((
!'#9&,:-&''#,% 10'2'#0,;+0/<.!5<-0.?<$1!2/-0/?<#*+F$+1.1-?17!0/.<E51!2E<?GE>##*-F$+1.1-?17!0/.<E51!2&C
!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!6"#$%&'3
Ø Change settings
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!2//&--(01#%#,.!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-.7!#+>1!&C
!'#9&,:-&''#,% 10'2'#0,;+0/<.!5<-0.?<$1!2/-0/?<#*+F$+1.1-?17!0/.<E51!2E<?GE>##*-F$+1.1-?17!0/.<E51!2&C
!"#$%&'(%""#&) /-0/?<#*+F$+1.1-?17!0/.<E51!2E<?GE>##*-F$+1.1-?17!0/.<E51!2&C
/-0/?<#*+F$+1.1-?17!0/.<E51!2E<?GE>##*-
E<?GE>##*-F
!"!6"#$%&'3 !"#$%&'()
!" !"#$%&'()
13
©2011 appbackr inc. confidential and proprietary.
!" !"#$%&'()
14. Porting HTML5 apps to Tizen
Screen Resolution – Device Orientation
"#$%&'(#$)#*+#
Screen Resolution %#"
Ø Full screen
!"#$
Ø Screen ratio '(!) !#&"
!%(!" )""
"#$%"&'($")*+*$,)
Ø CSS3
Device Orientation
!"#$%&'(')*+$,-&*$.#/$*00$'1$2#1'()#2$3%&$4"#$5+*6/%%781$90%&4&*'4:$;%2#
345670089:;<=>?@
A+,-.9:BC@
!"#$0"61'<*+$+%('<$%3$&%0#$;%=#;#)4$'1$';0+#;#)4#2$')$4"'1$%&'#)4*4'%)
*+,-./012
!"# "$$%&%'() *($+,#-./.01
"$$23%&%(!('+2"$$(4(#"+5,'6'$4785'9:#"!5+;231
"$$2;%&%(!('+2"$$(4(#"+5,'6'$4785'9:#"!5+;2;1
14
©2011 appbackr inc. confidential and proprietary.
15. Thank you
appbackr.com/xchange
©2011 appbackr inc. confidential and proprietary.