Unit 6 Application Development and Emerging Technologies Updated

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 31

UNIT 6: Application Development

What is Mobile Computing?


UNIT 1: Multimedia Concepts

Computing that is not obstructed although the location of it deviations


Mobile computing enticements from
• Wireless communications and networking
• Ability to communicate via wireless links
• Ubiquitous and pervasive computing

A bility to typical effortlessly, theoretically


not considered (pervasive) to offer
computing anywhere and at any time
(ubiquitous),
Mobile computing is a type of interaction
between human and machine through which
during regular use a machine is supposed to
be transported. Mobile computing has three
aspects:
1. Mobile communication
2. Mobile hardware
3. Mobile software

Mobile communication
The first feature addresses communication matters in ad-hoc and infrastructure
networks as well as communication properties, protocols etc.
Mobile hardware
The second element is that of hardware, such as mobile devices or parts of devices.
Mobile software
The third factor deals with the functionality and demands of mobile apps.

In a physical configuration for home network systems with limited frequency spread
and narrower ranges of data transmission, the connectivity of multiple devices in the
military sector has the same definition. Using a medium such as routers, computers
can be connected through a small home network, while the military uses satellite
data transmission in the scenario for data delivery and data collection.
6.1

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development
Mobile Computing Characteristics
UNIT 1: Multimedia Concepts

1. Fixed and wired: Typical LAN


2. Mobile and wired: Wi-Fi
3. Fixed and wireless: This mode is used for installing networks, e.g., in
historic buildings to avoid damage by installing wires, or at trade shows to
ensure fast network setup.
4. Mobile and wireless: GSM and Wi-Max

Application of Mobile Computing


UNIT 1: Multimedia Concepts

Vehicles:

M usic, news, road conditions,


weather reports, and other
broadcast information are
received via digital audio
broadcasting (DAB) with 1.5
Mbit/s.

A universal mobile
telecommunications system
(UMTS) phone could be available for personal communication, providing 384 kbit / s
of voice and data connectivity.

Via the Global Positioning System ( GPS), the current location of the car is
determined.
For the rapid exchange of information in emergencies or to help each other maintain
a secure distance, cars traveling in the same area create a local ad hoc network.

Not only will the airbag be activated in the event of an accident, but the police and
ambulance service will be alerted by an emergency call to the service provider.
Emergencies:

A n ambulance with a high-quality wireless


connection to a hospital can carry vital information
about injured persons to the hospital from the
scene of the accident.(Hernandez, 2019)

In the case of natural disasters, such as


hurricanes or earthquakes, cellular networks are
the only means of contact.

6.2

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Only
UNIT decentralized, wireless ad-hoc networks thrive in the worst cases.
6: Application Development
Verification of Credit Card:

When consumers use credit cards for purchases at point of sale ( POS) terminals in
shops and supermarkets, the intercommunication needed between the central bank
computer and the POS terminal will take place quickly and securely over cellular
networks using a mobile computer device to verify the use of the card.

This will accelerate the process of transactions and alleviate congestion at the POS
terminals.

Agriculture:

W ithout IoT-driven solutions, precise


farming would not be possible because
they speed up the understanding of
farmers of the key causes of changes in
crop yields and factors that affect
calculated yields and cost drivers of
production, computing the various
elements in the soil such as NPK is a
very useful data, including soil moisture
and soil PH level also has factors in the soil.
1. Fertilizers and their application
scheduling and methods.
2. Irrigation and rainfall patterns.
3. Air temperature and moisture levels.
4. Soil composition and handling.
5. Crop care processes.
6. Types of seeds used.
(Alon, Venal, Militante, Hernandez, & Acla,
2020)

Replacement of Wired Networks:

It is also possible to use wireless networks to replace wired networks, such as


remote sensors, for trade shows, or in historic buildings.

It is also difficult to wire remote sensors for weather forecasting, earthquake


detection, or to provide environmental information for economic reasons.
Infotainment:

Wireless networks can provide up-to-date information at any appropriate


location.

Another growing field of wireless network applications lies in entertainment


and games to enable, e.g., ad-hoc gaming networks as soon as people meet to play
together.

6.3

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Limitations of Mobile Computing


UNIT 1: Multimedia Concepts

Limitations of Mobile Computing

Resource constraints: Battery

Interference: Shielding does not shield radio transmission against interference and
results in higher loss rates for transmitted data or higher bit error rates, respectively.

Bandwidth: While they are constantly growing, transmission rates for wireless
devices relative to desktop systems are still very low. With low overhead,
researchers are searching for more powerful communications protocols.

Dynamic changes in communication environment: Signal power variations within


an area, thus connecting delays and link losses

Security constraints: Portable electronics can not only be more easily hacked, but
the radio interface is often vulnerable to the dangers of eavesdropping. Encryption,
authentication, and other protection protocols that must be reliable and easy to use
must always be included in wireless access.

Network Issues: discovery of the connection-service to end and connection


constancy

Interoperability issues: the changing protocol standards

Wireless Standards

D ifferent wireless communication


techniques and standards have
evolved around the world, based on
various commercially oriented criteria.

Presentation tier. This is the application's


highest level. Information related to such services as browsing merchandise, ordering, and shopping
cart content is shown in the presentation tier. By transmitting results to the browser / client tier and
all other levels on the network, it interacts with other levels.

Application tier (business logic, logic tier, data access tier, or middle tier). By conducting thorough
processing, the logic tier governs the functionality of an application.

6.4

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Data tier. This tier consists of servers for the database. Data is stored and recovered here. This tier
holds
UNITdata independentDevelopment
6: Application of application servers or business logic and impartial. Scalability and
efficiency are also enhanced by giving data on its own tier.

1.2 Advantage of Mobile Computing

Now these days, Mobile Computing has supplementary need because there
are numerous paybacks such as:

1. increasing productivity – Mobile devices can be used in the field of different


instruments, thereby decreasing time and costs for clients and themselves.

2. Entertainment – Mobile devices may be used for personal and even displays for
entertainment purposes, both for individuals and consumers.

3. Portability – The key benefits of this are that you are not limited to one region. It
helps to access any wireless devices without restrictions on venue.

4. Cloud Computing – This service is available for storing documents on online


servers and can be accessed at any time and wherever if you connect to the
Internet, and can be used for several handheld devices or even that can also be
accessed on a PC.

Machine to Machine

Machine to Machine, also known as M2 M, refers to communication through wireless


or wired networks between multiple devices. In various fields, such as wellness,
defense, logistics and smart cities, M2 M has a large range of applications. For
monitoring and control, M2 M is often used.

The key components of M2M systems include:


6.5

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


•UNIT 6:Radio-frequency Identification or RFID
Application Development
• Sensors
• Cellular or Wi-Fi networks
• Computing software to analyze data and make decisions.

One of the key factors of M2 M is reduced costs for cell production and mobile data
technologies. The improved productivity of the semiconductor industry to achieve an
enhanced yield decreases power consumption and the cost of producing chipsets.

Wireless and wired networks are now sufficiently advanced to offer data services at a
lower price. These factors have played an important role in expanding the use of M2
M technologies in various sectors.

Let us look at some examples in the following sections.

M2M in Healthcare

The goal of Mobile Health or MHealth is to reduce the cost of healthcare and patient
care quality. Telemedicine, which remotely monitors the patient and provides the
necessary treatment, is one of the most common MHealth services in healthcare.

To record different factors such as blood pressure, heart rate, and so on, the patient
is fitted with multiple sensors. The data is collected on an M2 M computer, most
often on the mobile phone of the patient.

The data is uploaded to an M2M server which alerts the patient’s doctor to
provide necessary medical aid.

In emergency situations, all the necessary data about the patient’s condition is
delivered on the way to the hospital allowing the doctor to be prepared to treat the
patient. Let us look at M2M usage in the automobile sector in the next section.

M2M in Automobiles
In the automotive sector, M2M has multiple applications such as
entertainment, safety and security, navigation, and diagnostics. Safety and security
are one of the most beneficial applications in the automotive industry.

One example is Automatic Crash Notification application. This service utilizes


various sensors on the vehicle to report the location of the crash site along with the
extent of damage to the vehicle.

It also initiates and facilitates accident reporting to emergency services in the


region. M2M presents both opportunities and challenges to the industry.

Although there is huge potential in the utilization of M2M in various sectors,


the fragmented market remains a hurdle, which is a risk for forecasting the growth of
M2M.
(Hernandez, Fajardo, Medina, Hernandez, & Dellosa, 2019)

6.6

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Mobile in Development
UNIT 6: Application social, Mobile, Analytics and
Cloud(SMAC)

Mobility has been driving the development of cloud services meant specifically
for mobile devices. Social media communication on mobile is also enabled through
the cloud.

Therefore, the sum of Social-Mobile-Cloud is greater than the individual


components. This has led businesses to develop strategies that take into account
the cascading effect of mobile technologies.

The interrelation between Mobile and the other components is as shown in


the below image below:

Adapting to the mobile is becoming necessary not only for growth but also for
survival. Also, the percentage of web traffic contributed by mobile devices is
increasing year-on-year.

Analytics helps in handling and understanding a large amount of data


generated from mobile devices.

6.7

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Most of the mobile application has different functions and uses. Waze is the
most popular path finder application created by Ehud Shabtai, Amir Shinar and Uri
Levine from Israel. The estimation from the source to destination as the basic point
to point computation now has the cloud database for all the reported data from the
user to re calculate the fastest route for the user.

Education and personal accounts in mobile application has never been


upgraded through Google’s G Suit

The most popular mobile application that offers a powerful tool to manage
business and education. It builds on consumer experience with Google's products
and services to provide more effective workplace solutions for companies. The G
Suite applications your company uses directly from mobile devices, such as your
phone or laptop, can be accessed.

6.8

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


G Suite provides a common collection of features like Gmail, Docs, Drive and
Calendar. You can get
UNIT 6: Application all these applications free of charge, but with the paid plan
Development
you get more features. Its efficacy has also been accepted by over 3 million
businesses. G Suite can't beat for robust organizational management for companies
on a budget. Moreover, switching from an office server to a G Suite reduces
unnecessary work orders and interruptions. And you won't need a tech team or a
contractor to repair problems, either.

G Suite’s collection of smart apps allows you and your team members to
seamlessly work together on documents. You can see the changes you’re making in
real time and G Suite stores them automatically in the cloud.

You may offer all team members the editing capability, or only a chosen few. You can
use the built-in chat feature to brainstorm ideas while your employees work on the
documents.

This smart feature helps your team members to complete tasks more easily
and with greater precision. It also removes the need to use the newest versions of
documents to submit multiple emails.

You and your employees can easily store data and access it from any device
using Google Drive, a cloud storage platform. Unlike a traditional office server, in
Google data centers, G Suite stores information which is distributed around the
world. This means that your information will not be lost if one or more servers crash,
and that you can easily access it whenever you need to.

GSuite removes the need to copy documents to smartphones and home


computers, where they can be lost, stolen or destroyed, because information stays in
the cloud. You remain in charge of what G Suite enables the employees to access on
their individual devices.

Your workers can access on-the-go information, when they are traveling or
when they are working remotely. Only remember to inform members of your team
about cyber security. Never can you and your staff access confidential information
via public Wi-Fi. These wireless networks are unsecured and hackers can intercept
any data which you receive or send, including usernames and passwords.

So while G Suite offers high-security rates for your info, simple cybersecurity
precautions still need to be exercised.

The food industry has also evolved into mobile applications. The most
common food delivery app are Grab Food, Food Panda, Lala Food and Angkas
Food. In the times of pandemic specifically in Enhance Community Quarantine
(ECQ), only food delivery apps are allowed to deliver with special permit from the
government.

6.9

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Grab is a well-known ride-hailing app and undoubtedly there is no Filipino who


hasn't heard of it. Having a strong following as a transportation service app, picking
up and gaining popularity wasn't difficult for its expanded service – the GrabFood
food service delivery.

GrabFood was first introduced in 2016, in Jakarta , Indonesia. It came to the


Philippines in 2018, and former country manager Grab Philippines, now president
Brian Cu said the local expansion was part of the regional agenda for the company.

Similar to how their rivals operate,


GrabFood links customers to nearby restaurants
so they can order food, and facilitates real-time
delivery monitoring, similar to how you track the
vehicle's arrival and movements in the ride-hailing
app.

GrabFood services had expanded to


several cities in Metro Manila within five months of
its establishment in the Philippines including
business areas such as Makati, Ortigas, Bonifacio
Global City and Quezon City. It was started in
Cebu City, too. Its subscribers have risen 10 times
in a period of 3 months.

6.10

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Creating a simple Application from
UNIT 6: Application Development
https://developer.android.com

This tutorial will teach you how to build a new Android project with Android Studio,
and will explain some of the project's files. (Developers, 2020)

Follow these steps to build your latest Android Project:

1. Install the latest version of Android Studio.


2. In the Welcome to Android Studio window, click Start a new Android Studio
project.

Figure 1. Android Studio welcome screen

If you have a project already opened, select File > New > New Project.

3. In the Select a Project Template window, select Empty Activity and click Next.
4. In the Configure your project window, complete the following:

 Enter "My First App" in the Name field.


 Enter "com.example.myfirstapp" in the Package name field.
 If you'd like to place the project in a different folder, change its Save
location.
 Select either Java or Kotlin from the Language drop-down menu.
 Select the lowest version of Android your app will support in the Minimum
SDK field.
 If your app will require legacy library support, mark the Use legacy
android.support libraries checkbox.
 Leave the other options as they are.

5. Click Finish.
6.11

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


After some processing time, the Android Studio main window appears.
UNIT 6: Application Development

Figure 2. Android Studio main window

Now take a moment to review the most important files.

First, be sure the Project window is open (select View > Tool Windows > Project) and
the Android view is selected from the drop-down list at the top of that window. You
can then see the following files:

app > java > com.example.myfirstapp > MainActivity

This is the main activity. It's the entry point for your app. When you build and run
your app, the system launches an instance of this Activity and loads its layout.

app > res > layout > activity_main.xml

This XML file defines the layout for the activity's user interface (UI). It contains a
TextView element with the text "Hello, World!"

app > manifests > AndroidManifest.xml

The manifest file describes the fundamental characteristics of the app and defines
each of its components.

Gradle Scripts > build.gradle

There are two files with this name: one for the developer, "Developer: My First
App," and one for the framework module, "Module: App." Each module has its own
build.gradle file, but there is only one module in this project. Using build.file of each
module to monitor how your app is being built by the Gradle plugin.

6.12

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Run
UNIT 6: on a real
Application device
Development

Set up your device as follows:

1. Connect your device to your development machine with a USB cable. If you
developed on Windows, you might need to install the appropriate USB driver
for your device.

2. Perform the following steps to enable USB debugging in the Developer


options window:

a) Open the Settings app.

b) If your device uses Android v8.0 or higher, select System. Otherwise,


proceed to the next step.

c) Scroll to the bottom and select About phone.

d) Scroll to the bottom and tap Build number seven times.

e) Return to the previous screen, scroll to the bottom, and tap Developer
options.

f) In the Developer options window, scroll down to find and enable USB
debugging.

Run the app on your device as follows:

1. In Android Studio, select your app from the run/debug configurations drop-
down menu in the toolbar.

2. In the toolbar, select the device that you want to run your app on from the
target device drop-down menu.

6.13

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Figure
UNIT 6:3.Application
Target device drop-down menu
Development

1. Click Run .

Android Studio installs your app on your connected device and starts it. You now see
"Hello, World!" displayed in the app on your device.

Run on an emulator
Run the app on an emulator as follows:

1. In Android Studio, create an Android Virtual Device (AVD) that the emulator
can use to install and run your app.

2. In the toolbar, select your app from the run/debug configurations drop-down
menu.

3. From the target device drop-down menu, select the AVD that you want to run
your app on.

Target device drop-down menu.

Figure 4. Target device drop-down menu

Click Run .

Android Studio installs the app on the AVD and starts the emulator. You now see
"Hello, World!" displayed in the app.

Build a simple user interface

In this tutorial, you'll learn how to create a layout that includes a text box and a
button using the Android Studio Layout Editor. This sets up the next lesson, in which
you learn how to transfer the content of the text box to another task when you click
the button.

6.14

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Figure 5. Screenshot of the final layout

For an Android device, the user interface ( UI) is constructed as a layout and
widget hierarchy. The layouts are objects of the ViewGroup, containers which control
the positioning of their child views on the screen. Widgets are object view, UI
elements like arrows, and text boxes.

Figure 6. Illustration of how ViewGroup objects form branches in the layout and
contain View objects.

Android provides the ViewGroup and View classes with an XML vocabulary,
so most of your UI is represented in XML files. However, this tutorial teaches you
how to create a layout using the Layout Editor for Android Studio, rather than
teaching you to write XML. The Layout Editor writes the XML for you while dragging
and falling views to build your layout.

This lesson assumes you are using Android Studio v3.0 or higher and you've
completed the lesson of building your Android Project.

Open the Layout Editor

6.15

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


To get6:started,
UNIT set up
Application your workspace as follows:
Development

1. In the Project window, open app > res > layout > activity_main.xml.

2. To make room for the Layout Editor, hide the Project window. To do so, select
View > Tool Windows > Project, or just click Project on the left side of the
Android Studio screen.

3. If your editor shows the XML source, click the Design tab at the bottom of the
window.

4. Click Select Design Surface and select Blueprint.

5. Click Show in the Layout Editor toolbar and make sure that Show All
Constraints is checked.

6. Make sure Autoconnect is off. A tooltip in the toolbar displays Enable


Autoconnection to Parent when Autoconnect is off.

7. Click Default Margins in the toolbar and select 16. If needed, you can adjust
the margins for each view later.

8. Click Device for Preview in the toolbar and select 5.5, 1440 × 2560, 560 dpi
(Pixel XL).

Your Layout Editor now looks as shown in figure 7.

Figure 7. The Layout Editor showing activity_main.xml

For additional information, see Introduction to the Layout Editor.

The Component Tree panel on the bottom left shows the layout's hierarchy of
views. In this case, the root view is a ConstraintLayout, which contains just one
TextView object.

ConstraintLayout is a layout that determines the location for each view based
on the sibling views and the parent layout constraints. Thus you can build simple and
complex layouts with a hierarchy of flat views. This kind of layout removes the need

6.16

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


for nested templates. A nested layout, as seen in Figure 2, which is a layout within a
layout,
UNIT 6:will increase Development
Application the time taken to draw the UI.

For example, you can declare the following layout, which is shown in figure 4:

View A appears 16 dp from the top of


the parent layout.
View A appears 16 dp from the left of
the parent layout.
View B appears 16 dp to the right of
view A.
View B is aligned to the top of view A.
In the following sections, you'll build a layout similar to the layout in figure 4.

Add a text box

Follow these steps to add a text box:

1. First, you need to remove


what's already in the
layout. Click TextView in
the Component Tree panel
and then press the Delete
key.

2. In the Palette panel, click Text to show the available text controls.

3. Drag the Plain Text into the design editor and drop it near the top of the
layout. This is an EditText widget that accepts plain text input.

4. Click the view in the design editor. You can now see the square handles to
resize the view on each corner, and the circular constraint anchors on each
side. For better control, you might want to zoom in on the editor. To do so, use
the Zoom buttons in the Layout Editor toolbar.

5. Click and hold the anchor on the top side, drag it up until it snaps to the top of
the layout, and then release it. That's a constraint: it constrains the view within
the default margin that was set. In this case, you set it to 16 dp from the top of
the layout.

6. Use the same process to create a constraint from the left side of the view to
the left side of the layout.

Add a button

6.17

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Figure 10. The button is constrained to the right side of the text box and its baseline
UNIT 6: Application Development
1. In the Palette panel, click Buttons.

2. Drag the Button widget into the design editor and drop it near the right side.

3. Create a constraint from the left side of the button to the right side of the text
box.

4. To constrain the views in a horizontal alignment, create a constraint between


the text baselines. To do so, right-click the button and then select Show
Baseline Show Baseline action in Layout Editor. The baseline anchor
appears inside the button. Click and hold this anchor, and then drag it to the
baseline anchor that appears in the adjacent text box.

The result should look as shown in figure 10.

Note: You can also use the top or bottom edges to create a horizontal alignment.
However, the button image includes padding around it, so the visual alignment is
wrong if created that way.

Change the UI strings

To preview the UI, click Select Design Surface in the toolbar and select Design.
Notice that the text input and button label are set to default values.

Follow these steps to change the UI strings:

1. Open the Project window and then open app > res > values > strings.xml.
This is a string resources file, where you can specify all of your UI strings. It
allows you to manage all of your UI strings in a single location, which makes
them easier to find, update, and localize.

2. Click Open editor at the top of the window. This opens the Translations Editor,
which provides a simple interface to add and edit your default strings. It also
helps you keep all of your translated strings organized.

3. Click Add Key to create a new string as the "hint text" for the text box. At
this point, the window shown in figure 7 opens.

In the Add Key dialog box, complete the following steps:

a) Enter "edit_message" in the Key field.

b) Enter "Enter a message" in the Default Value field.

c) Click OK.

4. Add another key named "button_send" with a value of "Send".

6.18

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Now you can set these strings for each view. To return to the layout file, click
activity_main.xml in Development
UNIT 6: Application the tab bar. Then, add the strings as follows:

1. Click the text box in the layout. If the Attributes window isn't already visible on
the right, click Attributes on the right sidebar.

2. Locate the text property, which is currently set to "Name," and delete the
value.

3. Locate the hint property and then click Pick a Resource , which is to the
right of the text box. In the dialog that appears, double-click edit_message
from the list.

4. Click the button in the layout and locate its text property, which is currently set
to "Button." Then, click Pick a Resource and select button_send.

Make the text box size flexible

To create a layout that's responsive to different screen sizes, you need to make the
text box stretch to fill all the horizontal space that remains after the button and
margins are accounted for.

Before you continue, click Select Design Surface in the toolbar and select Blueprint.

To make the text box flexible, follow these steps:

Figure 8. The result of choosing Create Horizontal Chain

6.19

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Figure 9. Click to change the width to Match Constraints

Figure 10. The text box now stretches to fill the remaining space

1. Select both views. To do so, click one, hold Shift, then click the other, and
then right-click either one and select Chains > Create Horizontal Chain. The
layout then appears as shown in figure 8.

A chain is a bidirectional constraint between two or more views that allows


you to lay out the chained views in unison.

2. Select the button and open the Attributes window. Then, use the view
inspector at the top of the Attributes window to set the right margin to 16 dp.
3. Click the text box to view its attributes. Then, click the width indicator twice so
it's set to Match Constraints, as indicated by callout 1 in figure 9.

6.20

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Match constraints means that the width expands to meet the definition of the
horizontal constraints
UNIT 6: Application and margins. Therefore, the text box stretches to fill the
Development
horizontal space that remains after the button and all the margins are accounted for.

Now the layout is done, as shown in figure 10.

If your layout didn't turn out as expected, click See the final layout XML below
to see what your XML should look like. Compare it to what you see in the Text tab. If
your attributes appear in a different order, that's okay.

For more information about chains and all the other things you can do with
ConstraintLayout, read Build a Responsive UI with ConstraintLayout.

Run the app


If your app is already installed on the device from the previous lesson, simply
click Apply Changes in the toolbar to update the app with the new layout. Or, click
Run to install and run the app.

The button still does nothing. To build another activity that starts when the
button is tapped, continue to the next lesson.

Introduction to Web Development

The Internet Protocol ( IP) is the groundwork for the Internet. Anyone involved
in web development will benefit from knowing a few main details about it, and
learning more as needed by specific projects.

The basic problem for a networking protocol is transferring data over some
sort of link from one device to another. However, the Internet Protocol is
connectionless, meaning it does not manage the specifics of the device link.

The communications are done by the Transmission Control Protocol ( TCP),


and the TCP / IP and IP acronyms are used somewhat interchangeably. When using
TCP, that specifically refers to the connections part of the protocol pair.

Before the Internet was launched, many networking technologies were tried and
many more have been debated or put into use ever since. There have been conflicts,
often also called "wars," within these various norms. IP is the current leader, and is
expected to be a long-term champion.

There are a few keys to understanding how IP works:

6.21

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Each Internet computer is designed to have its own distinctive IP address. (This
purpose is often simulated
UNIT 6: Application rather than fulfilled, with certain devices sharing an IP
Development
address or even momentarily having their own IP address, but the basic concept
holds)

A data file or data stream is divided up into pieces, called packets.

Each packet has information that describes it, the source IP address it began at, and
the destination IP address it’s meant to go to.

Each packet is launched from the source address onto the Internet separately, and
each finds its own route to the destination.

Packets arrive in any order they might, and it’s up to the destination computer to re-
assemble them into a file or data stream.

Unsynchronized packet transmission and processing leads to delays — the receiving


computer must get all the packets it needs to complete a file or a streaming burst,
and the receiving computer must also take the time it takes to put the packets in
order and save or stream them.

If you want to be taken seriously in conversations with technically literate people,


don't refer to the "IP protocol" or the "TCP protocol," since the "P" in both acronyms
already stands for "protocol." If you add the word "protocol" afterwards, you 're
simply saying "Internet Protocol" or "Transmission Control Protocol."

A network architecture in which each computer or process on the network is either


client of server
Components
• Client
• Server
• Communication Networks

Client
 Applications that run on computers
 Rely on servers for
 Files
 Devices
 Processing power
 Example: E-mail client

6.22

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


 An Application that enables you to send and receive E-mails
Servers
UNIT 6: Application Development
 Computer or process that manage network resources
 Disk drives (file servers)
 Printers (print Servers)
 Network traffic (Network servers)

Client-Server Computing

Process takes place on the server and on the client


Servers stores and protect data and process requests from clients
Clients make request and format data on the desktop

Application Components

3 Data Managemen1 2 Client Type


2 Application Logic
1 Presentation
} Thin
Client
} Fat Client

3 Logical Tier

Note: Database Applications: Most common use of client-server architectures


Middleware
Software that connects two otherwise separate applications
Example: Middle product linking a database system to a Web server

6.23

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

Types of Servers

Application Servers List Servers


Audio/Video Servers Mail Servers
Chat Server News Servers
Fax Servers Proxy Servers
FTP Servers Telnet Servers
Groupware Servers Web Servers
IRC Service Z39.50 Servers
(Advice, 2020)

Advantages

Improved Data Sharing


Integration of Services
Shared Resources amongst Different
Platforms
Inter-Operation of Data
Data Processing capability despite the
location
Easy maintenance
Security

Disadvantages

Overloaded servers
Impact of centralized architecture
(Electronics, 2020)

6.24

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


What is Web design?
UNIT 6: Application Development

WEB DESIGN

Follows the same process in design

Present the design through web pages

Create an effective web design by applying key 5


visual elements
1. Layout – Maintain balance, consistency and the integrity of the design.
2. Color - the color should represent your personality or the brand of your
organization
3. Graphics – Make sure to place them strategically. Logos, images and graphics
that can help enhance your design.
4. Fonts – typography can enhance your design, when used wisely
5. Content – Should be useful and relevant. Optimize for search engines

User friendly design elements


1. Navigation – Don’t make them think. Consider how users will navigate through
your website. Use simple HTML or JavaScript menus.
2. Compatibility – Design your websites that perform well in different browsers
3. Easy Accessibility – your website should be accessible to everyone be including
blind, disabled or the elderly. Use real fonts, not images.
4. Well-formatted content – organize the flow of information. Plan your website’s
sections and categories carefully. Use headings, sub-headings, paragraphs, bullets
or lists correctly.

6.25

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Keep yourself updated by knowing the different
UNIT 6: Application Development
web design trends
1. Responsive Web
The idea is to create web layouts that are compatible with any forms of devices:
Desktop, Laptop, Smart Phone, Tablets.
2. Fixed Header Bars
Works best with one-page layouts and layouts with long pages. This trends has been
around for a while but now, we are seeing this in full force.
3. Large Photo Backgrounds
Use your best photos or graphic designs as the main background photo of your
website.
4. Typography
Most websites now use multiple fonts, making the page easier to read and more
attractive. Mix and match fonts wisely.
5. Flat Design
It’s about keeping it simple, clean, and modern, key words that most clients say.
6. Infographics
Infographics present a lot of information in such a small space. Eye-catching,
entertaining, not boring and not text heavy.
7. Single Page Website
This has been a trend for a long time. Over the years, developers have created
different techniques for single page concept. You can create an entire website using
just one page with the use of internal hyperlinks.
8. Parallax
This is a special scrolling effect using JavaScript wherein the background images
move slowly than foreground images creating an animation or 3D feel.
(Juane, 2020)

Applying Colors in HTML using RGB Format

To give your website a nice look and feel, colors are very important. You can define
page level colors using the < body > tag or you can use the bgcolor attribute to set
colors for individual tags.

The < body > tag has the following characteristics that can be used to describe
various colors.

Bgcolor − sets a color for the page background.

Text − sets the body text tone.

Alink − sets the color for the selected links or active links.

Link − sets a related text color.

Vlink – this color is intended for the visited link

Methods for HTML Color Coding


6.26

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Three
UNIT 6:different approaches
Application are used to configure the colors on your web page.
Development

Color names − Color names such as green, blue or red may be specified explicitly.

Hex codes - A six-digit code reflecting the sum of color that makes up the red, green,
and blue.

Decimal or percentage color values − This value is defined by using the property
rgb().

We'll be seeing these coloring schemes one by one now.

Standard W3C 16 Colors

Here is the list of names for the W3C Standard 16 Colors and it is recommended that
they be used.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Example

Here are the examples for setting the HTML tag context by color name,

<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "blue" bgcolor = "green">


<p>Use different color names for for body and table and see the result.</p>

<table bgcolor = "black">


<tr>
<td>

6.27

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


<font color = "white">This text will appear white on black
background.</font>
UNIT 6: Application Development
</td>
</tr>
</table>
</body>

</html>

A hexadecimal is a representation of a color in 6 digits. The first two digits(RR)


represent the red value, the green value(GG) is the next two, and the blue value(BB)
is the last.

Any graphics program such as Adobe Photoshop, Paintshop Pro or MS Paint can be
derived from a hexadecimal value.

There will be a pound or hash sign # accompanying each hexadecimal code. A list of
a few colors using hexadecimal notation is provided below.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example

6.28

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


Here are the examples for setting the color code history of an HTML tag in
hexadecimal-
UNIT 6: Application Development

<html>

<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">


<p>Use different color hexa for for body and table and see the result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>

RGB Values-HTML Colors


This color value is defined using a property called rgb(). There are three values for
this house, one for red, green, and blue each. An integer between 0 and 255 or a
percentage may be the value.

Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

6.29

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


rgb(0,255,255)
UNIT 6: Application Development

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Example

Here are the examples of setting the color code context of an HTML tag using rgb()
values(Tutorialspoint, 2020) −
<html>

<head>
<title>HTML Colors by RGB code</title>
</head>

<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">


<p>Use different color code for for body and table and see the result.</p>

<table bgcolor = "rgb(0,0,0)">


<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>

6.30

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES


UNIT 6: Application Development

6.31

IT 301: APPLICATION DEVELOPMENT AND EMERGING TECHNOLOGIES

You might also like