html5 overview
TRANSCRIPT
©2011 appbackr inc. confidential and proprietary. ©2011 appbackr inc. confidential and proprietary.
HTML5 overview
August 2012
©2011 appbackr inc. confidential and proprietary. ©2011 appbackr inc. confidential and proprietary.
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
HTML5
Presentation
HTML5
3
HTML5 apps
Native apps
Ø Written for a specific platform (Android, iOS, Blackberry, …)
Ø Distributed trough app stores controlled by the owners of the platforms
Ø Are currently more powerful than HTML5 apps
Ø Rich web-based apps that run on any device
Ø Distributed through the rules of the open web
Ø Will get better than native apps
HTML5 apps Vs. Native apps
©2011 appbackr inc. confidential and proprietary. ©2011 appbackr inc. confidential and proprietary.
HTML5
4
Types of HTML5 apps
©2011 appbackr inc. confidential and proprietary.
Operating Systems
5
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.
BlackBerry OS
Operating Systems
6
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.
Chrome OS
©2011 appbackr inc. confidential and proprietary.
Operating Systems
7
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.
Firefox OS
©2011 appbackr inc. confidential and proprietary.
Operating Systems
8
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.
Tizen OS
©2011 appbackr inc. confidential and proprietary.
Devices
9
BlackBerry, Chrome, and Tizen devices
BlackBerry devices Chrome devices Tizen devices ü Push email technology ü Fast typing (QWERTY
keyboard) ü Capable for compressing data
to half the size ü Native apps available on
BlackBerry App World ü Slow Web browser
ü Fast and secured interface ü Easy to use (intuitive) ü Only able to run web apps ü Multi-task capability
ü Flexible and powerful interface ü 3D window effects ü Advanced multimedia ü Location based service
frameworks ü Multi-task and multi-touch
capabilities ü Support for scalable screen
resolution
PlayBook (Tablet): ü Clean and pleasing to use
interface ü Good display quality ü Multitask capability
ChromeBook (Computer): ü Quick and protected ü Connect the Internet via
Wi-Fi, 3G or 4G network ü Automatically updated ü Requires Internet
connection ü No internal storage, data
will be stored on Google’s cloud
Tizen Tabet: ü Touch-optimized user interface ü Built-in applications for Web
browsing, personal information management, and media consumption
Smar
tpho
nes
Oth
er d
evic
es
©2011 appbackr inc. confidential and proprietary.
Tizen
10
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.
©2011 appbackr inc. confidential and proprietary.
Tizen
11
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.
©2011 appbackr inc. confidential and proprietary.
Tizen
12
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.
©2011 appbackr inc. confidential and proprietary.
Porting HTML5 apps to Tizen
13
Configuration
Ø Change namespace
Ø Change configuration files
Ø Change access URL
Ø Change settings
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!28/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!#/0,(-1/.!/?*-($-,!&C22!/0,'&,'(-1/.!/-013("#45!&C22!,2*&34512!6,2*&3((!25'70163((!+#/&,-&63((!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!"##$%&'() *$+"%
!" !"#$%&'()
!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!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
!6"#$%&'3
!"
!"#$%&'(%""#&) /-0/?<#*+/-0/?<#*+/-0/?<#*+/-0/?<#*+FFFF$+1.1-?17!0/.<E51!2$+1.1-?17!0/.<E51!2$+1.1-?17!0/.<E51!2$+1.1-?17!0/.<E51!2E<?GE>##*-E<?GE>##*-E<?GE>##*-E<?GE>##*-FFFF$+1.1-?17!0/.<E51!2&C$+1.1-?17!0/.<E51!2&C$+1.1-?17!0/.<E51!2&C$+1.1-?17!0/.<E51!2&C
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2)*+,-/'#0&,3!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!25/1':*01.3!;<==.>+11-!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B
!#12,(-31.!/>*-($-,!&B22!12,'&,'(-31.!/-01C("#:=!&B22!,4*&56734!8,4*&5((!47'92385((!+#1&,-&85((!:&4'73&(((,4*&.!"##$%&&#/41-(*+,&9$/&>*-#9>#!2+1D</+103!#+<1!&B
!"#$%&"'$() *+,$-
!"#$%&'()*$3!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!23!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!23!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!23!"##$%&&#/41-(*+,&-.&'/0,1#.!251+./*-3!6(7281#9!25/1':*01.5/1':*01.5/1':*01.5/1':*01.3!3!3!3!;<==.>+11-;<==.>+11-;<==.>+11-;<==.>+11-!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222!2/03!"##$%&&?*<+@*:9/-(>*:&A<+9!B222
!" !"#$%&'()
!:&4'73&(((,4*&.!"##$%&&#/41-(*+,&9$/&>*-#9>#!2+1D</+103!#+<1!&B!:&4'73&(,4*&.!"##$%&&#/41-(*+,&9$/&,1*>*01+!2+1D</+103!#+<1!&B!:&4'73&(,4*&.!"##$%&&#/41-(*+,&9$/&#/41-!2+1D</+103!#+<1!&B!411&--(23#%#,.!"##$%&&9$/('<-01+,+*<-0(>*:&!2.<E0*:9/-.3!#+<1!&B!'#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
!8"#$%&'5
!"
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!28/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!#/0,(-1/.!/?*-($-,!&C22!/0,'&,'(-1/.!/-013("#45!&C22!,2*&34512!6,2*&3((!25'70163((!+#/&,-&63((!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!"#$%&"'( )*+",
!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!" !"#$%&'()
!8&2'51&(,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!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
!6"#$%&'3
!"
!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&,1*?*01+!2+1D>/+107!#+>1!&C!"#$%&'#()$*#+!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C!"##$%&&#/61-(*+,&<$/&#/61-!2+1D>/+107!#+>1!&C
!"#$%&'()*+,-.!"##$%&&'''(')(*+,&-.&'/0,1#.!2345-.%#/61-7!"##$%&&#/61-(*+,&-.&'/0,1#.!281+./*-7!9(:2;1#<!28/1'4*01.7!=>55.?+11-!2/07!"##$%&&@*>+A*4</-(?*4&B>+<!C22
!#/0,(-1/.!/?*-($-,!&C22!/0,'&,'(-1/.!/-013("#45!&C22!,2*&34512!6,2*&3((!25'70163((!+#/&,-&63((!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C
!""#$$%&'(%) *+,#-
!" !"#$%&'()
!8&2'51&(((,2*&.!"##$%&&#/61-(*+,&<$/&?*-#<?#!2+1D>/+107!#+>1!&C!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
!6"#$%&'3
!"
!"##$%%&'()*)+,!"##$%&&<$/('>-01+,+*>-0(?*4&!2!"##$%&&<$/('>-01+,+*>-0(?*4&!2!"##$%&&<$/('>-01+,+*>-0(?*4&!2!"##$%&&<$/('>-01+,+*>-0(?*4&!2.>E0*4</-..>E0*4</-..>E0*4</-..>E0*4</-.7!#+>1!&C7!#+>1!&C7!#+>1!&C7!#+>1!&C
©2011 appbackr inc. confidential and proprietary.
Porting HTML5 apps to Tizen
14
Screen Resolution – Device Orientation
Screen Resolution
Ø Full screen Ø Screen ratio Ø CSS3
Device Orientation
!"#$
%#"
!#&"'(!)
!%(!"
!"#$%&'(#$)#*+#
!" *+,-./012
)""!%(!"
345670089:;<=>?@A+,-.9:BC@
!"
! !"#$%&'(')*+$,-&*$.#/$*00$'1$2#1'()#2$3%&$4"#$5+*6/%%781$90%&4&*'4:$;%2#! !"#$0"61'<*+$+%('<$%3$&%0#$;%=#;#)4$'1$';0+#;#)4#2$')$4"'1$%&'#)4*4'%)
!"#$%"&'($")*+*$,)
!" "#$%&'()*
!"# "$$%&%'() *($+,#-./.01"$$23%&%(!('+2"$$(4(#"+5,'6'$4785'9:#"!5+;231"$$2;%&%(!('+2"$$(4(#"+5,'6'$4785'9:#"!5+;2;1
!"
©2011 appbackr inc. confidential and proprietary. ©2011 appbackr inc. confidential and proprietary.
Thank you appbackr.com/xchange