# 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

## Readings

* Wikipedia: Web application development

## Multimedia

* YouTube: HTML Basics
* YouTube: HTML Styles
* YouTube: Flask for Beginners Tutorial
* YouTube: Python Flask Tutorial: Full-Featured Web App Part 1 - Getting Started
* YouTube: Simple Python Web Server

## Examples

* Python3/Flask
* Python3/http_server

## Activities

* 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.
* As with most other programming languages, Web Application Development can be done with something as simple as a text editor.
* Many web application tools support the Java programming language.
* 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:
** Security
** Performance, Load, and Stress
** HTML/CSS validation
** Accessibility
** Usability
** Cross-browser
** Many types of tests are automatable, additionally, an organization can create its own unit testing framework.
* 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.

## Key Terms
### API

    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.

### CLI

    Command-line interface, the program is composed purely of textual content.

### Client

    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.

### GUI

    Graphical user interface, the program is composed of interactive widgets.

### 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.

### integration testing

    A phase in software testing in which individual software modules are combined and tested as a group.

### 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.

### skin

    Refers to the appearance of a program's interface.

### system testing

    Testing conducted on a complete, integrated system to evaluate the system's compliance with its specified requirements.

### unit testing

    A phase of software testing where individual units of a software are tested to determine whether they are fit for use.

### widget

    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.

### WIMP

    Stands for "Windows, Icons, Menus, Pointer." which describes the graphical user interface (GUI) of personal computers.

### window

    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.

### Workbench

    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.

### web framework

    A structure support of web applications, libraries, APIs, and compilers to streamline the creation of new software.

### web application

    A client-server program that runs in a web browser.

### web application development

    The process and practice of developing web applications.

## See Also

* Internet Fundamentals
* HTML
* CSS
* Web Designer Depot - Operating System Interface Design Between 1981-2009
* HubSpot - A Look Back at 20+ Years of Website Design
* Wayback Machine