2342015 httpblogkerulnet 1

Mobile Web Apps Development

(Multiplatform using HTML5

jQuery PhoneGapApache

Cordova)

Khirulnizam Abd Rahman

kerulnet

About Khirulnizam Codes in blogkerulnet

Certified HRDF Trainer

Full time Lecturer of Computer Science Faculty of Information Science and Technology Selangor International Islamic University College (KUIS) ndash since 2000

Avid Android developer since 2010 ndash MDeC ICONApp 2010

Grants MDeC ICON 20102011 MDeC ICONdap 2013

Apps in Google Play SmartSolat using Adobe Air ndash bitlysmartsolat

Al-Mathurat bersama Ustaz Don ndash Android bitlynew-mathurat

Al-Mathurat bersama Ustaz Don ndash iPhone bitlym-mathurat-ios

Peribahasa Dictionary ndash 20K ( bitlypbahasa )

mDictionary ndash open-sourced ( bitlym-dictionary )

2342015 httpblogkerulnet 2

Day 1

FRONTE

ND

2342015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 3

The Mobile Apps Development Basics with

HTML5

Introduction to Web-based Mobile Apps

Development tools installation

Web server setup (Apache HTTPd)

HTML and jQuery for the Interface

Basic HTML file

Text Fontface Hyperlinks

Image Paragraph Division Header

Division Header

CSS

JavaScript amp JQuery mobile framework basics

Mobile Page Structure

Header

Main Content

Footer

Single-page template structure

Multi-page template structure

Buttons

Transition

Listview

Panel

Hybrid Approach

2342015 httpblogkerulnet 4

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

Xcode ndash to generate iOS app

2342015 httpblogkerulnet 5

What are tools needed to

develop Android App Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

Apache Cordova

NodeJS

Apache Ant

Latest JDK

Eclipse ADT Bundle

Android SDK (for Android app)

Xcode (for iOS app)

2342015 httpblogkerulnet 6

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for interface 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

2342015 httpblogkerulnet 7

Hybrid Approach

2342015 httpblogkerulnet 4

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

Xcode ndash to generate iOS app

2342015 httpblogkerulnet 5

What are tools needed to

develop Android App Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

Apache Cordova

NodeJS

Apache Ant

Latest JDK

Eclipse ADT Bundle

Android SDK (for Android app)

Xcode (for iOS app)

2342015 httpblogkerulnet 6

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for interface 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

2342015 httpblogkerulnet 7

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

Xcode ndash to generate iOS app

2342015 httpblogkerulnet 5

What are tools needed to

develop Android App Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

Apache Cordova

NodeJS

Apache Ant

Latest JDK

Eclipse ADT Bundle

Android SDK (for Android app)

Xcode (for iOS app)

2342015 httpblogkerulnet 6

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for interface 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

2342015 httpblogkerulnet 7

What are tools needed to

develop Android App Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

Apache Cordova

NodeJS

Apache Ant

Latest JDK

Eclipse ADT Bundle

Android SDK (for Android app)

Xcode (for iOS app)

2342015 httpblogkerulnet 6

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for interface 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

2342015 httpblogkerulnet 7

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for interface 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

2342015 httpblogkerulnet 7

2342015 httpblogkerulnet 8

CSS | HTML

JavaScript

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

2342015 httpblogkerulnet 9

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

2342015 httpblogkerulnet 9

NodeJS

2342015 httpblogkerulnet 10

Nodejs contains a built-in library to

allow applications to act as a Web

server without software such as Apache

HTTP

Where to distribute my

App Playgooglecom

Apple App Store

2342015 httpblogkerulnet 11

DEMOs

2342015 httpblogkerulnet 12

LESS plan MORE do

- Mark Zuckerberg

Next Agenda Day 1

2342015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 13

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2342015 httpblogkerulnet 14

Web Client

Any web browser could be the web

client

2342015 httpblogkerulnet 15

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2342015 httpblogkerulnet 16

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Next Agenda Day 1

2342015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 13

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2342015 httpblogkerulnet 14

Web Client

Any web browser could be the web

client

2342015 httpblogkerulnet 15

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2342015 httpblogkerulnet 16

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2342015 httpblogkerulnet 14

Web Client

Any web browser could be the web

client

2342015 httpblogkerulnet 15

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2342015 httpblogkerulnet 16

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Web Client

Any web browser could be the web

client

2342015 httpblogkerulnet 15

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2342015 httpblogkerulnet 16

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2342015 httpblogkerulnet 16

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2342015 httpblogkerulnet 17

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 18

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2342015 httpblogkerulnet 19

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

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

2342015 httpblogkerulnet 20

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2342015 httpblogkerulnet 21

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

CSS syntax

p

color red

text-align center

2342015 httpblogkerulnet 22

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2342015 httpblogkerulnet 23

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2342015 httpblogkerulnet 24

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

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

2342015 httpblogkerulnet 25

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2342015 httpblogkerulnet 26

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

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

2342015 httpblogkerulnet 27

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Mobile Web Page

Create folders in web root as below

2342015 httpblogkerulnet 28

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2342015 httpblogkerulnet 29

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

2342015 httpblogkerulnet 30

httpdemosjquerymobilecom145pages

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

2342015 httpblogkerulnet 30

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

2342015 httpblogkerulnet 31

2342015 httpblogkerulnet 32

Multipage

2342015 httpblogkerulnet 33

2342015 httpblogkerulnet 32

Multipage

2342015 httpblogkerulnet 33

Multipage

2342015 httpblogkerulnet 33

Changing the Theme httpthemerollerjquerymobilecom

2342015 httpblogkerulnet 34

Exercise

Developing departmentrsquos 3-page app

2342015 httpblogkerulnet 35

Buildphonegapcom

Fast apps generation

2342015 httpblogkerulnet 36

Exercise

Developing departmentrsquos 3-page app

2342015 httpblogkerulnet 35

Buildphonegapcom

Fast apps generation

2342015 httpblogkerulnet 36

Buildphonegapcom

Fast apps generation

2342015 httpblogkerulnet 36

2342015 httpblogkerulnet 37

2342015 httpblogkerulnet 38

httpblogkerulnet201503buildphone

gapcom-to-generate-signed-apkhtml

2342015 httpblogkerulnet 39

2342015 httpblogkerulnet 38

httpblogkerulnet201503buildphone

gapcom-to-generate-signed-apkhtml

2342015 httpblogkerulnet 39

httpblogkerulnet201503buildphone

gapcom-to-generate-signed-apkhtml

2342015 httpblogkerulnet 39

Day 2 - BACKEND

Connecting to Online Database

Server configuration

PHP and MySql connectivity

Gui tool to manage data

MySql query for selecting data

Using PHP to display data

Search facilities

Filterable in jQueryMobile

Inserting a new record

Search result listing using AJAX approach

2342015 httpblogkerulnet 40

Install the Web Server

For the back-end

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2342015 httpblogkerulnet 41

Install the Web Server

For the back-end

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2342015 httpblogkerulnet 41

Web root

2342015 httpblogkerulnet 42

To be continuedhellip

2342015 httpblogkerulnet 43

To be continuedhellip

2342015 httpblogkerulnet 43