Search this co
Web Development Foundations C779: Unit 1: Web Development Fundamentals
A Basic GUI Web Page
Learning Objectives
W Create basic web pages using the most current version of Hypertext Markup Language (HTML).
W Apply third-party applications to a web page.
1/14
, .
The universal availability of web browsers, and the web design capabilities offered by
HTML/CSS/JS/DOM/DHTML, provide great opportunities for you to grow as a web designer. It is possible
to produce elegant and powerful GUIs for programs that are available as web services via the internet, or
on a local machine, but without graphical capabilities, like command line programs. Whether used online
or locally, the development of HTML-based GUI provides several advantages, including:
rapid prototyping: the development of powerful inputs and controls is
easily implemented using HTML forms
platform independence: the HTML-coded interface will be equally
available to any operating system (Windows, MacOS, mobile, etc.) since the
system adaptation is provided by the browser
easy display configuration: the interface aspect is easy to change by
modifying the CSS definitions that do not affect the
HTML/JS/DOM/DHTML encoding
A GUI provides tailored access to third-party applications, and all its interface complexity will be
encapsulated by the GUI design. This allows the end user to interact with the third-party application
without encountering any of the internal complexity of the GUI.
Most third-party applications are made available through an application programming interface (API).
An API is a software artifact that serves as an intermediary between two
programs that need to pass information between each other, in which the parameter passage format is
predefined. An HTML-based GUI defines a standard method to feed the API with the collected parameters
received by the end user and passes it along to the web service API. This is usually done by a post method
that is available in HTML forms.
Examples of GUIs applied to third-party servers are often found integrated with database management
systems (DBMS) that provide storage and retrieval of data. Third-party applications are often integrated
into websites using server-side PHP code and DBMS systems such as MySQL.
Essential Reading
, "Graphical User Interface"
Read "Graphical User Interface (https://lrps.wgu.edu/provision/239544326)" from omni sci to learn
about the differences between character and graphical user interfaces.
As you read, consider the following questions:
What are the advantages and disadvantages of a GUI?
Are there any disadvantages to having a GUI?
What strategies should a web designer consider to ensure that interactions are
not overwhelming for the user?
I read it.
Essential Video
"APIs in plain English" (2:25)
Watch "APIs in plain English (https://lrps.wgu.edu/provision/240243334)" from LinkedIn Learning to
learn more about application programming interfaces (APIs) and they can be used to access data.
As you watch consider the following questions:
How do APIs simplify the interface between company data servers and the
customers who need access to that data?
I watched it.
Learning Exploration
3/14
, "Coding Connection" by LBrown, is licensed by WGU under CC BY-NC-SA 4.0
(https://creativecommons.org/licenses/by-sa/4.0/) / A derivative from PxHere
(https://pxhere.com/en/photo/670370)
In this learning exploration exercise you will create a GUI for a calculator using HTML forms. This code
has some basic JavaScript (JS) code included in it just for demonstration. (JavaScript is not covered in
depth during this course.) Instructions:
1. For this code connection, you have to save the following codes into two different
files:
a. one named calc.html with the HTML code, inserted with the JS
code
Web Development Foundations C779: Unit 1: Web Development Fundamentals
A Basic GUI Web Page
Learning Objectives
W Create basic web pages using the most current version of Hypertext Markup Language (HTML).
W Apply third-party applications to a web page.
1/14
, .
The universal availability of web browsers, and the web design capabilities offered by
HTML/CSS/JS/DOM/DHTML, provide great opportunities for you to grow as a web designer. It is possible
to produce elegant and powerful GUIs for programs that are available as web services via the internet, or
on a local machine, but without graphical capabilities, like command line programs. Whether used online
or locally, the development of HTML-based GUI provides several advantages, including:
rapid prototyping: the development of powerful inputs and controls is
easily implemented using HTML forms
platform independence: the HTML-coded interface will be equally
available to any operating system (Windows, MacOS, mobile, etc.) since the
system adaptation is provided by the browser
easy display configuration: the interface aspect is easy to change by
modifying the CSS definitions that do not affect the
HTML/JS/DOM/DHTML encoding
A GUI provides tailored access to third-party applications, and all its interface complexity will be
encapsulated by the GUI design. This allows the end user to interact with the third-party application
without encountering any of the internal complexity of the GUI.
Most third-party applications are made available through an application programming interface (API).
An API is a software artifact that serves as an intermediary between two
programs that need to pass information between each other, in which the parameter passage format is
predefined. An HTML-based GUI defines a standard method to feed the API with the collected parameters
received by the end user and passes it along to the web service API. This is usually done by a post method
that is available in HTML forms.
Examples of GUIs applied to third-party servers are often found integrated with database management
systems (DBMS) that provide storage and retrieval of data. Third-party applications are often integrated
into websites using server-side PHP code and DBMS systems such as MySQL.
Essential Reading
, "Graphical User Interface"
Read "Graphical User Interface (https://lrps.wgu.edu/provision/239544326)" from omni sci to learn
about the differences between character and graphical user interfaces.
As you read, consider the following questions:
What are the advantages and disadvantages of a GUI?
Are there any disadvantages to having a GUI?
What strategies should a web designer consider to ensure that interactions are
not overwhelming for the user?
I read it.
Essential Video
"APIs in plain English" (2:25)
Watch "APIs in plain English (https://lrps.wgu.edu/provision/240243334)" from LinkedIn Learning to
learn more about application programming interfaces (APIs) and they can be used to access data.
As you watch consider the following questions:
How do APIs simplify the interface between company data servers and the
customers who need access to that data?
I watched it.
Learning Exploration
3/14
, "Coding Connection" by LBrown, is licensed by WGU under CC BY-NC-SA 4.0
(https://creativecommons.org/licenses/by-sa/4.0/) / A derivative from PxHere
(https://pxhere.com/en/photo/670370)
In this learning exploration exercise you will create a GUI for a calculator using HTML forms. This code
has some basic JavaScript (JS) code included in it just for demonstration. (JavaScript is not covered in
depth during this course.) Instructions:
1. For this code connection, you have to save the following codes into two different
files:
a. one named calc.html with the HTML code, inserted with the JS
code
