Post on 14-Jul-2015
transcript
2612015 httpblogkerulnet 1
Android Apps Development
(Hybrid approach using HTML5 jQuery
Apache Cordova and Android SDK)
Khirulnizam Abd Rahman
blogkerulnet
About Khirulnizam Lecturer of Computer Science Faculty of
Information Science and Technology Selangor International Islamic University College (KUIS) ndashsince 2000
Certified HRDF Trainer
Codes in blogkerulnet
Avid Android developer since 2010 ndash MDeCICONApp 2010
Grants MDeC ICON 20102011 MDeCICONdap 2013
Apps in Google Play M-Mathurat ndash 200K ( bitlym-mathurat )
Peribahasa Dictionary ndash 20K ( bitlypbahasa)
mDictionary ndash open-sourced ( bitlym-dictionary )
2612015 httpblogkerulnet 2
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 3
Agenda Day 2
2612015 httpblogkerulnet 4
Android Devices
2612015 httpblogkerulnet 5
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
About Khirulnizam Lecturer of Computer Science Faculty of
Information Science and Technology Selangor International Islamic University College (KUIS) ndashsince 2000
Certified HRDF Trainer
Codes in blogkerulnet
Avid Android developer since 2010 ndash MDeCICONApp 2010
Grants MDeC ICON 20102011 MDeCICONdap 2013
Apps in Google Play M-Mathurat ndash 200K ( bitlym-mathurat )
Peribahasa Dictionary ndash 20K ( bitlypbahasa)
mDictionary ndash open-sourced ( bitlym-dictionary )
2612015 httpblogkerulnet 2
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 3
Agenda Day 2
2612015 httpblogkerulnet 4
Android Devices
2612015 httpblogkerulnet 5
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 3
Agenda Day 2
2612015 httpblogkerulnet 4
Android Devices
2612015 httpblogkerulnet 5
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Agenda Day 2
2612015 httpblogkerulnet 4
Android Devices
2612015 httpblogkerulnet 5
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Android Devices
2612015 httpblogkerulnet 5
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Android Story
httpwwwtechsavysinfo201107the-
android-story-an-android-infographic-
discussing-about-its-beginning-on-
going-changes-and-worldwide-market-
shareshtml
2612015 httpblogkerulnet 6
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq1 What is Android Android is a software stack for mobile devices
that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language
The kernel of most Android version is based on Linux 26 (30 for ICS)
Android architecture
2612015 httpblogkerulnet 7
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Android Architecture
2612015 httpblogkerulnet 8
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq2 Who develop
Android Initially developed by Andrew
(Andy) Rubin and his team in
Android Inc
Google acquired Android Inc
in 2005
Till Mac 2013 developed by
Google under Andy Rubin
(Senior Vice President of
Mobile)
2612015 httpblogkerulnet 9
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Android
Global
Market
share
Source Strategy Analytics -
httpblogsstrategyanalyticsc
omWSSpost20131031And
roid-Captures-Record-81-
Percent-Share-of-Global-
Smartphone-Shipments-in-Q3-
2013aspx
2612015 httpblogkerulnet 10
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq3 How many versions
(distributions) Android has
2612015 httpblogkerulnet 11
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml
2612015 httpblogkerulnet 12
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq4 What is API Level
API Level is an integer value that uniquely
identifies the framework API revision offered
by a version of the Android platform
The Android platform provides a framework
API that applications can use to interact with
the underlying Android system
2612015 httpblogkerulnet 13
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq5 What is Android
app Developer can develop application that runs
on top of Android
App is actually a simpler version of
application
Uses apk for the installer file extension
2612015 httpblogkerulnet 14
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Apps samples
2612015 httpblogkerulnet 15
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Apps
2612015 httpblogkerulnet 16
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq6 What is Dalvik Virtual
Machine is it similar as JVM Author - Dan Bornstein
Dalvik VM implementing slightly different
architecture to JVM
Dalvik VM is a register-based
architecture
Being optimized for low memory and
slower processing speed
The VM was slimmed down to use less
space
2612015 httpblogkerulnet 17
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
DVM (for below Android 5)
2612015 httpblogkerulnet 18
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
ART
Android Runtime
2612015 httpblogkerulnet 19
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq7 What is the language
used to develop Android app
Hybrid Approach HTML
CSS
JavaScript
Java
XML
SQL
2612015 httpblogkerulnet 20
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Hybrid Approach
2612015 httpblogkerulnet 21
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Hybrid Approach ndash consists
of HTML + jQuery (JavaScript CSS)
Apache Cordova (HTML to Android
Project)
Eclipse ADT ndash to generate APK
2612015 httpblogkerulnet 22
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq8 What are tools needed
to develop Android App
Hybrid HTML knowledge
jQuery (JavaScript + CSS framework)
NodeJS
Apache Ant
Apache Cordova
Latest JDK
Eclipse ADT Bundle
Android SDK
2612015 httpblogkerulnet 23
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Apache ANT
Apache Ant is a Java library and
command-line tool
to drive processes described in build
files as targets and extension points
dependent upon each other
The main known usage of Ant is the
build of Java applications
2612015 httpblogkerulnet 24
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
NodeJS
2612015 httpblogkerulnet 25
Nodejs contains a built-in library to
allow applications to act as a Web
server without software such as Apache
HTTP
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Apache Cordova
Previously known as PhoneGap
use HTML5 and CSS3 for their rendering and JavaScript for logic
HTML5 provides better support for GPS camera video etc
includes basic plugins that allow access to the devices hardwarersquos
embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device
2612015 httpblogkerulnet 26
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
IDE - Eclipse
2612015 httpblogkerulnet 27
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Emulator
2612015 httpblogkerulnet 28
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Dalvik Debugger
2612015 httpblogkerulnet 29
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Faq8 Where to distribute my
App Playgooglecom
Sampung App Store
Amazon AppStore
Appzillnet
GetJarcom
Your own distribution channel
2612015 httpblogkerulnet 30
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Android Project Structure
Inside Android Project there should be
src ndash the Java codes are here
gen ndash generated automatically
assets ndash put your fonts videos sounds here
res ndash images layout and global variables
drawable-hdpi ndashfor high spec phones
drawable-ldpi ndashfor low spec phones
drawable-mdpi ndashfor medium spec phones
layout ndash all XML file for the screen(s) layout
values ndash global constant variables
2612015 httpblogkerulnet 31
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
2612015 httpblogkerulnet 32
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
AndroidManifest
AndroidManifestxml ndash apprsquos
permissions need to be registered here
ndash (eg app can access Internet phone
contacts camera etc must be
mentioned here)
2612015 httpblogkerulnet 33
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
ltxml version=10 encoding=utf-8gt
ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid
androidversionCode=7
androidversionName=17
package=netkerulmMathuratgt
ltapplication androidicon=drawableicon androidlabel=stringapp_name
androidtaskAffinity=mMathuratActivitygt
ltactivity androidname=mMathuratActivity
androidlabel=stringapp_name
androidscreenOrientation=portraitgt
ltintent-filtergt
ltaction androidname=androidintentactionMAIN gt
ltcategory androidname=androidintentcategoryLAUNCHER gt
ltintent-filtergt
ltactivitygt
ltactivity androidname=Aboutus class=Aboutus
androidlabel=Mengenai kami androidscreenOrientation=portraitgt
ltactivitygt
ltactivity androidname=Berterusan class=Berterusan
androidlabel=Mod pemanduan androidscreenOrientation=portraitgt
ltactivitygt
ltapplicationgt
ltuses-sdk androidminSdkVersion=7 gt
ltreceiver androidname=DetectIncomingCallgt
ltintent-filtergt
ltaction androidname=androidintentactionPHONE_STATE gt
ltintent-filtergt
ltreceivergt
ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt
ltuses-permission androidname=androidpermissionINTERNET gt
ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt
ltmanifestgt
2612015 httpblogkerulnet 34
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
DEMOs
2612015 httpblogkerulnet 35
LESS plan MORE do
- Mark Zuckerberg
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Agenda Day 1
2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Installing Web Editor
Use NotePad++
Or any HTML editor (such as
DreamWeaver)
2612015 httpblogkerulnet 37
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Web Client
Any web browser could be the web
client
2612015 httpblogkerulnet 38
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Install the Web Server
Apache HTTPd ndash also available in
XAMPP
Download at
httpswwwapachefriendsorg
localhost
2612015 httpblogkerulnet 39
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Web root
2612015 httpblogkerulnet 40
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
What is HTML
HyperText Mark-up Language
Marking up areas with angle brackets or
TAGs
2612015 httpblogkerulnet 41
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
HTML Basics Structure
ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt
ltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
ltbodygt
lthtmlgt
Save as indexhtml
2612015 httpblogkerulnet 42
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Hyperlinks
ltDOCTYPE htmlgtlthtmlgtltheadgt
lttitlegtPage Titlelttitlegtltheadgt
ltbodygt
lth1gtThis is a Headinglth1gt
ltpgtThis is a paragraphltpgt
lta href=httpkerulnetgtThis is a linkltagt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 43
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Images
ltimg src=w3schoolsjpg alt=W3Schoo
lscom width=104 height=142gt
2612015 httpblogkerulnet 44
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Layout using DIV
ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt
ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt
ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt
ltdiv id=footergtCopyright copy W3Schoolscomltdivgt
2612015 httpblogkerulnet 45
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
CSS
Cascading Style Sheet
Added to HTML4 to provide styles in
HTML elements
2612015 httpblogkerulnet 46
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
CSS syntax
p
color red
text-align center
2612015 httpblogkerulnet 47
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Simple CSS example - internal
ltheadgtltstylegtbody
background-color linenh1
color maroonmargin-left 40px
ltstylegtltheadgt
2612015 httpblogkerulnet 48
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
CSS inline
lth1 style=colorbluemargin-left30pxgt
This is a headinglth1gt
2612015 httpblogkerulnet 49
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
CSS example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltstylegt
body
ltstylegt
ltheadgt
ltbody style=ldquobackground-color b0c4derdquogt
lth1gtMy CSS web pagelth1gt
ltpgtHello world This is a W3Schoolscom exampleltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 50
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
JavaScript
Script to add live interaction to HTML
ltDOCTYPE htmlgt
lthtmlgt
ltbodygt
lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 51
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
JavaScript Example
ltDOCTYPE htmlgt
lthtmlgt
ltheadgt
ltscriptgt
function myFunction()
var x = documentgetElementById(fname)
xvalue = xvaluetoUpperCase()
ltscriptgt
ltheadgt
ltbodygt
Enter your name ltinput type=text id=fname onblur=myFunction()gt
ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 52
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Mobile Web Page
Create folders in web root as below
2612015 httpblogkerulnet 53
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Copy the template
cssjquerymobilemincss
jsjqueryminjs
jsjquerymobileminjs
indexhtml
The css and js files are available in the
jQuerymobile
2612015 httpblogkerulnet 54
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Mobile Web page structureltDOCTYPE htmlgt
lthtmlgt
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
ltbodygt
ltdiv data-role=pagegt
ltdiv data-role=headergt
lth1gtPage Titlelth1gt
ltdivgtlt-- header --gt
ltdiv role=main class=ui-contentgt
ltpgtPage content goes hereltpgt
ltdivgtlt-- content --gt
ltdiv data-role=footergt
lth4gtPage Footerlth4gt
ltdivgtlt-- footer --gt
ltdivgtlt-- page --gt
ltbodygt
lthtmlgt
2612015 httpblogkerulnet 55
httpdemosjquerymobilecom145pages
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56
Head segment
ltheadgt
lttitlegtPage Titlelttitlegt
ltmeta charset=utf-8gt
ltmeta name=viewport content=width=device-width initial-scale=1gt
ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt
ltscript src=jsjquery-1111minjsgtltscriptgt
ltscript src=jsjquerymobile-145minjsgtltscriptgt
ltheadgt
2612015 httpblogkerulnet 56