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

 * 1)  Web application development

Multimedia

 * 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

Examples

 * /Python3/Flask/
 * /Python3/http_server/

Activities

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