Applied Programming/Web Design

This lesson provides a brief introduction to the website design side of GUI.

Objectives and Skills


Objectives and skills for this lesson include:

  • Generate a web page
  • Manage widgets for the web page
  • Run a web page with a local host


  1. Wikipedia: Web application development


  1. YouTube: HTML Basics
  2. YouTube: HTML Styles
  3. YouTube: Flask for Beginners Tutorial
  4. YouTube: Python Flask Tutorial: Full-Featured Web App Part 1 - Getting Started
  5. YouTube: Simple Python Web Server




  1. Extend one of the programs developed in this course by generating the output as a web page rather than a console application. Use command-line parameters for any required input.

Lesson Summary

  • Web application development is the process of developing web applications that run in a web browser. Applications like Gmail, Outlook, WhatsApp, and even E-Commerce websites are good examples.[1]
  • As with most other programming languages, Web Application Development can be done with something as simple as a text editor.[1]
  • Many web application tools support the Java programming language.[1]
  • Web applications undergo the same unit, integration and system testing as traditional desktop applications. But because web application clients vary so greatly, teams might perform some additional testing, such as:[1]
    • Security[1]
    • Performance, Load, and Stress[1]
    • HTML/CSS validation[1]
    • Accessibility[1]
    • Usability[1]
    • Cross-browser[1]
    • Many types of tests are automatable, additionally, an organization can create its own unit testing framework.[1]
  • Practicing code reuse and using web application frameworks can greatly improve both productivity and time to market (McConnell 1996:537). Reusing externally developed components can allow an organization to reap the above benefits, while potentially saving money.[1]

Key Terms

An API is a means to communicate between two or more components of software. API interfaces make it easier for developers to use certain technologies in building applications.[2]
Command-line interface, the program is composed purely of textual content.[3]
A piece of computer hardware or software that accesses a service made available by a server. Web application clients vary greatly and this warrants extended forms of testing.[4]
Graphical user interface, the program is composed of interactive widgets.[5]
GUI wrapper
Graphical user interface wrappers circumvent the command-line interface versions of (typically) Linux and Unix-like software applications. Applications may also provide both interfaces, and when they do the GUI is usually a WIMP wrapper around the command-line version.[5]
integration testing
A phase in software testing in which individual software modules are combined and tested as a group.[6]
post-WIMP interface
As of 2011, some touchscreen-based operating systems such as Apple's iOS and Android use the class of GUIs named post-WIMP. These support styles of interaction using more than one finger in contact with a display, which allows actions such as pinching and rotating, which are unsupported by one pointer and mouse.[5]
Refers to the appearance of a program's interface.[5]
system testing
Testing conducted on a complete, integrated system to evaluate the system's compliance with its specified requirements.[7]
unit testing
A phase of software testing where individual units of a software are tested to determine whether they are fit for use.[8]
A vessel for human-computer interaction that is characteristic of a GUI;a widget could be a button, a check box, a text box, etc.[9]
Stands for "Windows, Icons, Menus, Pointer." which describes the graphical user interface (GUI) of personal computers.[5]
A graphical control element which consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by window decoration.[10]
provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor (in place of the more common desktop metaphor) for representing file system organisation.[11]
web framework
A structure support of web applications, libraries, APIs, and compilers to streamline the creation of new software.[12]
web application
A client-server program that runs in a web browser.[13]
web application development
The process and practice of developing web applications.[1]

See Also