Android Based Student Handbook Tutorials PDF

Android Based Student Handbook Tutorials PDF
eHandbook App
Software Requirements:
Phonegap Build is a mobile development framework created by Nitobi. Adobe Systems purchased
Nitobi in 2011. It enables software programmers to build applications for mobile devices using
JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in iOS, Windows
Phone, or Android. It enables wrapping up of HTML, CSS and Javascript code depending upon the
platform of the device.
Jquery Mobile - is a touch-optimized web framework (also known as a mobile framework), more
specifically a JavaScript library, currently being developed by the jQuery project team. The development
focuses on creating a framework compatible with a wide variety of smartphones and tablet computers,
made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile
framework is compatible with other mobile app frameworks and platforms such as PhoneGap.
http://demos.jquerymobile.com/1.2.1/
Dreamweaver - Adobe Dreamweaver is a web design and development application that provides a
visual WYSIWYG editor (colloquially referred to as the Design view) and a code editor with standard
features such as syntax highlighting, code completion, and code collapsing as well as more sophisticated
features such as real-time syntax checking and code introspection for generating code hints to assist the
user in writing code.
Alternative: Notepad++, Brackets
Resources:
http://www.w3schools.com/jquerymobile/
we will start with the files needed
css folder – css stands for Cascading Style Sheets (CSS) is a style sheet language used for describing the
look and formatting of a document written in a markup language. Although most often used to change
the style of web pages and user interfaces written in HTML.
 This folder includes css files used to design and layout of the app.
img folder – this folder is where you place the images or pictures of the app.
js folder – JavaScript files, it is the library of jquery mobile, JavaScript is the programming language of
HTML and the Web.
music folder - directory for audio files if there is.
config.xml – the configuration of the app such as name of the app, icon, etc. (optional).
index.html – this is the homepage of the app.

author.html – about the author page.
about.html - about the app info.
mission.html – this is the vmgo based on your handbook and this will be the guide or template for
developing the app.
Coding Phase
1. Open first the index.html
The <link> tag is used to link to external style sheets and js files.
2. We are going to create the page or layout of the app. Paste the code after the <body> tag
3. We are now going to create the header of the app. Paste the code after the
4. Next is the body or the content container of the app. Place the code after the header of the app
5. Next is the codes for the table of contents. Place the codes between the content or the body of
the app.
6. Finally the code for the footer of the app. This code must be place after the content or container
section right after the 4th step of this tutorial. This is for the link to the author and app info page.


<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="author.html" data-theme="a">Authors Info</a></li>
<li><a href="about.html" data-theme="a">App Info</a></li>
</ul>
</div>
</div>

7. Open the index.html in firefox or google chrome. Below is the sample screen layout.
Part II
This is on the content of the topic (vmgo, history, etc.)
Note: this tutorial is applicable to all the contents, please follow and replicate the steps to the other
contents.
1. Creating the Vision, Mission and Goal page. Open the mission.html in dreamweaver.
The <link> tag is used to link to external style sheets and js files.
2. We are going to create the page or layout of the app. Paste the code after the <body> tag
3. We are now going to create the header of the app. Paste the code after the
4. Next is the body or the content container of the app. Place the code after the header of the app
5. The article or the contents of the topic. This must be place between the content of the app
section. you can edit the style of the paragraph in code view or design view of dreamweaver.
6. Finally the code for the footer of the app. This code must be place before the end of content or
container section. This is for the link to the home and make the font bigger or smaller.


<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="arrow-l" data-theme="c">Back</a></li>
<li><a href="javascript:decreaseFontSize();" data-icon="minus" data-theme="c">Font
Minimize</a></li>
<li><a href="javascript:increaseFontSize();" data-icon="plus" data-theme="c">Font
Maximize</a></li>
</ul>
</div>
</div>

7. Open the index.html in firefox or google chrome and click the link for vision, mission, goal.

Android Based Student Handbook Tutorials PDF

Uploaded by

Copyright:

Available Formats

You might also like

Android Based Student Handbook Tutorials PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Android Based Student Handbook Tutorials PDF

Uploaded by

Copyright:

Available Formats

Android Based Student Handbook Tutorials PDF

Alternative: Notepad++, Brackets

we will start with the files needed

music folder - directory for audio files if there is.

index.html – this is the homepage of the app.

about.html - about the app info.

1. Open first the index.html

This is on the content of the topic (vmgo, history, etc.)

You might also like