Technology & Strategies – Introduction
There are several back-end technologies that enable a successful web page. In this module. you will learn about programming languages, multimedia types, and databases that make up a website’s functionality. These three areas combine to directly influence the front-end experiences for website users. You will also learn about what design standards to consider as part of this strategy.
This module will cover the following topics:
- programming languages
- multimedia technology
- database technology
- site creativity
By the end of this module you should be able to answer the following questions:
- What are scripting languages?
- What is compression?
- What is a DBMS and how is it used for websites and web pages?
Programming Languages
Learning Objectives
- Identify technologies for enhancing a user’s web experience, including programming languages and multimedia technologies.
A web page contains text and media components that are organized through a markup language that determines the disposition of these elements. Even though conditional formatting HTML/CSS elements are executed according to the size of the display window, and web form elements respond to user interaction, HTML/CSS cannot be considered a programming language in the full extension of the term. This section will outline how scripting languages enhance a user’s web experience by providing the full power of programming languages to the web page developer.
Scripting Language
To provide full interactivity, meaning the dynamic generation of HTML pages, it is necessary to use a programming language that allows the process of making decisions based on inputs and variables. This is usually done using a scripting language, which is defined as a programming language that executes standard programming commands within the end user device.
JavaScript
The most popular scripting language available for web pages is JavaScript (JS) that, despite the similar name, is unrelated to the Java programming language.
JS provides the usual functions of programming languages such as:
- variable manipulation (Boolean, integers, floats, and characters);
- basic data structure (strings, arrays);
- iteration commands (for, while);
- modularity (function);
- decision commands (if, switch).
The JavaScript syntax is based on the use of curly brackets for code structure and its creation and evolution is tightly linked to web technology. JS was created in 1995 within the Netscape company as part of the innovations of the Mosaic browser, the first browser with a graphic user interface, but JavaScript’s popularization is linked to its adoption by Microsoft in 1996 under the brand name JScript.
Arrays
There may come a time when your web page needs to collect and store multiple data at once. Arrays are data structures that are available within most programming languages. Arrays serve as containers for collections of related elements and provide an efficient way to sort, search for, and access individual elements in the collection through a variety of built in methods. In JavaScript, for example:
Create an array called animals
let animals = [‘Dogs’, ‘Cats’, Fish’]
Access an item in the animals array
let firstAnimal = animals[0]
//Note that arrays are zero based, with 0 being the index of the first item in the array, in this case, 'Dogs'
Other Scripting Languages
Along with JS, other scripting languages were implemented by browsers and became alternative standards for web page programming languages, in what is called server-side languages. Among these, we often find the following:
- PHP
- Python
- Perl
- Ruby
- VBScript
- ASP.net
Read “What are Scripting Languages?” (opens new tab) from Ionos.
This article provides the distinction between programming and scripting languages as well as the features of a scripting language.
As you read, consider the following questions:
- How do script languages differ from other programming languages?
- scripting languages don’t require compiling
- What is the role of an interpreter for script languages?
- like a compiler but reads a program from top to bottom – playing the programming live
Read “A Brief History of Weird Scripting Languages on the Web” (opens new tab) from Eager.
This article provides some insights about the scripting languages VBScript, Tcl, Rexx, and Python.
As you read, consider the following questions:
- What may happen if you prevent your browser to run JavaScript?
- it may not run correctly since it is now a standard
- What is asm.js and what is its purpose?
- subset of JS syntax that can run other languages
Multimedia Technology
Learning Objectives
- Identify technologies for enhancing a user’s web experience, including programming languages and multimedia technologies.
The use of multiple kinds of media is the hallmark of interesting and engaging web pages, but the efficiency of a web page may be dramatically hindered without the proper care for media display. This appears clearly during the design phase of a website by choosing appropriately formatted image, audio, and/or video resolutions, but also by choosing the multimedia encoding technology to preserve browser compatibility and web page performance.
Images
For images, the standard formats best viewed in most browsers include:
- .jpg or jpeg: uses a standard compression format to reduce image storage size with some quality loss; it is considered a popular and compliant web-ready format but does not support transparency;
- .png: similar to .jpg, but includes the notion of transparency;
- .gif: similar to .png, but includes a sequence of images, providing some rudimentary form of animation.
A special note: the format .bmp is an uncompressed format and is considered Inefficient for web pages
Audio
For audio, the following formats are supported by the <audio> element:
- .mp3: a very efficiently compressed file format that equates to 10% of an uncompressed file;
- .wav: a file format developed by Microsoft and IBM that does not apply compression;
- .ogg: a compressed file format that uses Ogg Vorbis audio compression. It is similar to mp3and overseen by the Xiph.org Foundation.
Modern browsers, including Chrome, Firefox, Safari, Edge/Internet Explorer, and Opera, support these audio file formats with one exception. Safari does not support OGG.
Video
For videos, the following formats are supported by the <video> element:
- .mp4: an efficiently compressed file format that supports Internet streaming;
- .webm: a royalty-free file format designed to share videos on the web;
- .ogg: open-source file format for audio and video;
Modern browsers, including Chrome, Firefox, Safari, Edge/Internet Explorer, and Opera, support these video file formats with one exception. Safari does not support OGG.
A MIME (Multipurpose Internet Mail Extension) type is specified on a web server in order to identify the type of file that is being sent to a web browser. This is done based on the file’s extension. Examples of common MIME types include the following:
Text
- text/plain
- text/html
Image
- image/jpg
- image/png
Video
- video/quicktime
- video/mp4
- video/webm
- video/x-ms-wmv
Compression
Compression is a technology that is used to keep web pages to a reasonable size. Unlike text, media types such as images, audio, and video use a lot of space to store their data (MDNWebDocs, 2019). While the compression technology for images and audio is well established, video compression is not straightforward. The large number of parameters to be considered may lead to very different compression rates within the same standard format. Consequently, the choice for digital encoding for videos is frequently taken on a case-by-case basis.
Database Technology
Learning Objectives
- List languages commonly used to provide database connectivity to websites.
Web pages contain much more than simple text and media objects for passive consumption. Data elements such as frequently updated page content, usage of e-commerce transactions, end user interaction, and behavior tracking require more complex web development. While JavaScript and server-side programming languages provide computational behavior to web pages, sophisticated data manipulation operations become much easier to integrate into web pages by adding database technology to the mix.
Database Management Systems
A database management system (DBMS) is software intended to manage structured data storage, update, backup, and retrieval. A DBMS is implemented on a server and can be accessed through scripting languages like JavaScript, PHP, and others. While a DBMS can stand alone, it can also be integrated directly into the web server alongside HTML and CSS code. Operations made by an end user using web form elements may result in data storage or retrieval on the server machine.
To enable efficient retrieval of data with the DBMS, you need to use a language that enables interaction and communication. A Structured Query Language (SQL) interface is frequently used to interact with the DBMS in a web context (Metwalli, 2020).
While there are a number of options for incorporating databases into web pages, the most commonly used at the time of writing is the combination of PHP and MySQL.
MySQL is an open-source, relational DBMS that provides a Structured Query Language access to a database widely used in many applications, including website servers.
Below is a coding example of PHP that is accessing data from a MySQL database:
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
The ideal process for setting up a DBMS can be summarized by the following three steps:
- Install the MySQL DBMS on the server machine
- Code into the HTML/CSS/JS web page calls for the side-server PHP language that will dialogue with (i.e., issue commands to) the MySQL DBMS running on the server
- Code into the HTML/CSS/JS web page commands to handle the returns from the MySQL DBMS.
Other options to provide database technology to web pages may include other DBMSs like:
- Microsoft SQL Server Express
- Oracle Express
- PostgreSQL
- DB2 Express-C
It is also possible to use different server-side languages such as Python (which is open source), ASP.NET (which is open source and developed by Microsoft) , or Ruby (which is open source). Regardless of your choice of server-side language and DBMS, the process to provide database technology to web pages is the same.
Dicken (n.d.) recommends asking yourself the following questions when selecting a DBMS:
- Are you learning SQL for work?
If you are learning SQL for work, for example, you will be best served selecting the same DBMS that you use at work. By doing so, you will save yourself much pain and suffering with SQL syntax confusion when you start doing actual development. - Are you learning SQL with or for a web development technology like PHP or ASP.NET?
If you are learning SQL to use with a web development technology, then you will find that your life will be much easier if you select a DBMS that is either created by or made to work with your web technology of choice. For example, ASP.NET developers will usually select Microsoft SQL Server or Microsoft Access. PHP developers will usually choose MySQL or Oracle; and Java/WebSphere developers will usually select DB2. - Are you learning just to expand your brain?
If none of the questions above really apply to you, I would suggest you choose either MySQL or Microsoft Access as they have good user interfaces and great online content.
In addition to the various relational database options that are available, data may also be stored as a single table in a plain text file. This is referred to as a flat file database. In a flat file database, there is typically a single record per line of text in the file, with a specific character used to separate fields on that line. A common flat file format involves the use of comma separated values but there are a variety of other delimiter character options that may be used.
Watch “Dealing with Data” (opens new tab) in the course Web Technology Fundamentals from LinkedIn Learning.
This video teaches you about databases and storing data for a web page.
As you watch, consider the following questions:
- What is a database?
- Where data is stored and can be called
- What are cookies?
- small text files that enhance user experience – when they revisit a website
Read “Vital Things to Consider When Choosing a Database for Your App” (opens new tab) from Yalantis.
This article illustrates how to select the correct database management system to enable the functionality of your web development project.
As you read, consider the following questions:
- What are the advantages to using an SQL approach?
- well documented and work well with most modern frameworks
- What are the advantages to using a NoSQL approach?
- Non relational database with smaller files – realtional databases can use tuples to connect other databases but are more heavy
Site Creativity
Learning Objectives
- Identify common strategies for managing an end-user’s experience and improving site creativity.
One of the more challenging aspects of web development is not related to technology, but rather to design. Industry standards direct the correct approach for web page design from an end user perspective, rather than from an aesthetic point of view. This ensures that website creativity is properly managed within the best practices for user experience.
Common Standards of Web Development
Web development standards can become intuitive for many developers, since a common end user experience occurs with the usage of websites that have similar interaction and disposition patterns. Examples of some of those industry standards include the adoption of:
- multilevel menus
- breadcrumbs
- site maps
- footnote sections with service links (contact information, etc.).
Design Features
In addition to the usage of industry standards, it is also important to incorporate design features that engage the end user while helping to create an identity for your web page. Some graphic design techniques certainly help that creative process, but as a general rule it is advisable to be conservative in terms of the information you provide to the end user, and the level of creative expression. In other words, every standard that other websites provide, like a site map, your website must provide as well. However, you may choose to apply creativity to your site map, and similarly create a unique identity for your design.
Another important aspect to web page strategy is the thoughtful use of options within web forms. A helpful approach is to imagine yourself as the end user. Consider the usage of fields that require users to enter text-based responses, such as a numerical date. You may wish to enable specific formats in order to better facilitate the user’s text entry. For example, if you wish users to enter the text for the numerical date of January 1, 2000, you may want to program the form to accept numerical entries in a specific format (i.e. month/day/4-digit year, or 01/01/2000). Similarly, you may also want to provide point and click options in order to simplify the user’s interaction with the web page. For more information on this topic you may wish to explore some of the basic concepts of human-computer interaction (HCI).
Technology & Strategies – Summary
During this module, you were introduced to the front-end and back-end technologies that enable a web user’s experience. Initially, you explored programming languages, multimedia technology, and databases and how these three areas affect the functionality and design of a website. You read how scripting languages such as JavaScript enable a higher level of interactivity on a web page, as well as how different media object types, such as image, audio, and video, enhance website experiences. You explored how database management systems manage website data storage, updates, backups, and retrieval. Finally, you reviewed the common web page components that affect design creativity.
During this module, you learned the following:
- JavaScript is a scripting language that provides useful programming language functions
- Standard formats for images, audio, and video files
- How to manage data with a database management system (DBMS)
- How to incorporate design features into your web page to engage the site visitor