CSC028: WEB

TECHNOLOGY AND DESIGN

Session 03
Multimedia Features to WWW
Server Side Programming
Client Programming and Database programming for the Web

Multimedia Features to WWW

Multimedia is gaining popularity on the Web with several technologies to support use of
animation, video, and audio to supplement the traditional media of text and images. These new
media provide more design options but also require design discipline. Unconstrained use of
multimedia results in user interfaces that confuse users and make it harder for them to
understand the information. Not every webpage needs to bombard the user with the equivalent of
Times Square in impressions and movement.

Animation
Moving images have an overpowering effect on the human peripheral vision. This is a survival
instinct from the time when it was of supreme importance to be aware of any saber-toothed tigers
before they could sneak up on you. These days, tiger-avoidance is less of an issue, but anything
that moves in your peripheral vision still dominates your awareness: it is very hard to, say,
concentrate on reading text in the middle of the a page if there is a spinning logo up in the
corner. Never include a permanently moving animation on a web page since it will make it very
hard for your users to concentrate on reading the text.

Animation is good for:

 Showing continuity in transitions. When something has two or more states, then
changes between states will be much easier for users to understand if the transitions are
animated instead of being instantaneous. An animated transition allows the user to track
the mapping between different subparts through the perceptual system instead of having
to involve the cognitive system to deduce the mappings. A great example is the winner of
the first Java programming contest: proving the Pythagorean theorem by animating the
movement of various squares and triangles as they move around to demonstrate that two
areas are the same size (unfortunately, this otherwise good page uses animated text
inappropriately: the text moves constantly and is hard to relate to the events in the main
animation).
 Indicating dimensionality in transitions. Sometimes opposite animated transitions can
be used to indicate movement back and forth along some navigational dimension. For
example, paging through a series of objects can be shown by an animated sweep from the
right to the left for turning the page forward (if using a language where readers start on
the left). Turning back to a previous page can then be shown by the opposite animation
(sweeping from the left to the right). If users move orthogonally to the sequence of pages
then other animated effects can be used to visualize the transition. For example following
a hypertext link to a footnote might be shown by a "down" animation and tunneling
through hyperspace to a different set of objects might be shown by an "iris open"
Page 1 of 9
animation. One example used in several user interfaces is the use of zooming to indicate
that a new

Page 2 of 9
 object is "grown" from a previous one (e.g., a detailed view or property list opened by
clicking on an icon) or that an object is closed or minimized to a smaller representation.
Zooming out from the small object to the enlargement is a navigational dimension and
zooming in again as the enlargement is closed down is the opposite direction along that
dimension.
 Illustrating change over time. Since an animation is a time-varying display, it provides
a one-to-one mapping to phenomena that change over time. For example, deforestation of
the rain forest can be illustrated by showing a map with an animation of the covered area
changing over time.
 Multiplexing the display. Animation can be used to show multiple information objects
in the same space. A typical example is client-side image maps with explanations that
pop up as the user moves the cursor over the various hypertext anchors. It is also possible
to indicating the active areas by having them shimmer or by surrounding them with a
marquee of "marching ants". As always, objects should only move when appropriate
(e.g., when the cursor is over the image).
 Enriching graphical representations. Some types of information are easier to visualize
with movement than with still pictures. Consider, for example, how to visualize the tool
used to remove pixels in a graphics application. The canonical icon is an eraser as shown
on the left in the following figure, but in user testing I have sometimes found that people
think that the icon is a tool for drawing three-dimensional boxes. Instead, one can use an
animated icon as shown on the right in the figure: when the icon animates, the eraser is
moved over the background and pixels are removed, clearly showing the functionality of
the tool.
 Visualizing three-dimensional structures. Since the computer screen is two-
dimensional, users can never get a full understanding of a three-dimensional structure by
a single illustration, no matter how well designed. Animation can be used to emphasize
the three- dimensional nature of objects and make it easier for users to visualize their
spatial structure. The animation need not necessarily spin the object in a full circle: just
slowly turning it back and forth a little will often be sufficient. The movement should be
slow to allow the user to focus on the structure of the object. Three-dimensional objects
may be moved under user control, but often it is better if the designer determines in
advance how to best animate a movement that provides optimal understanding of the
object: this pre-determined animation can then be activated by the user by simply placing
the cursor over the object, whereas user-controlled movements require the user to
understand how to manipulate the object (which is inherently difficult with a two-
dimensional control device like the mouse used with most computers - to be honest, 3D is
never going to make it big time in user interfaces until we get a true 3D control device).
 Attracting attention. Finally, there are a few cases where the ability of animation to
dominate the user's visual awareness can be turned to an advantage in the interface. If the
goal is to draw the user's attention to a single element out of several or to alert the user to
updated information, then an animated headline will do the trick. Animated text should
be drawn by a one-time animation (e.g., text sliding in from the right, growing from the
first character, or smoothly becoming larger) and never by a continuous animation since
moving text is much harder to read than static text. The user should be drawn to the new
text by the initial animation and then left in peace to read the text without further
distraction.

Page 3 of 9
Video

Due to bandwidth constraints, use of video should currently be minimized on the web.
Eventually, video will be used more widely, but for the next few years most videos will be short
and will use very small viewing areas. Under these constraints, video has to serve as a
supplement to text and images more often than it will provide the main content of a website.

Currently, video is good for:

 Promoting television shows, films, or other non-computer media that traditionally have
used trailers in their advertising.
 Giving users an impression of a speaker's personality. Unfortunately, most corporate
executives project a lot less personality than, say, Captain Janeway from Star Trek, so it
is not necessarily a good idea to show a talking head unless the video clip truly adds to
the user's experience.
 Showing things that move. For example, a clip from a ballet. Product demos of physical
products (e.g., a coin counter) are also well suited for video, whereas software demos are
often better presented as a series of full-sized screen dumps where the potential customer
can study the features at length.

A major problem with most videos on the web right now is that their production values are much
too low. User studies of CD-ROM productions have found that users expect broadcast-quality
production values and that users get very impatient with low-quality video.

A special consideration for video (and spoken audio) is that any narration may lead to difficulty
for international users as well as for users with a hearing disability. People may be able to
understand written text in a foreign language because they have time to read it at their own speed
and because they can look up any unknown words in a dictionary. Spoken words are sometimes
harder to understand, especially if the speaker is sloppy, has a dialect, speaks over a distracting
soundtrack, or simply speaks very fast. Poor audio quality may contribute to the difficulty of
understanding spoken text: it is recommended to use professional quality audio equipment and/or
lavaliere microphones when recording a narrator. The classic solution to these problems is to use
subtitles but as shown in the following figure, subtitles require special attention on the web.

The figure shows a subtitled frame from Sun's Starfire video. The small subtitles (left image)
look good on the original video tape (JPEG, 197 K) but are virtually unreadable on the smaller
image size currently used for computerized videos. Using bigger subtitles that have been anti-
aliased for computer viewing (middle image) improves readability significantly, but the best
results are achieved by the letterbox format (right image). In this example, the subtitles in the
letterbox are constructed by enlarging the video area for the movie file with a 24-pixels high
black area. Doing so does not increase the file size proportionally since the black area
compresses very nicely. Even so, it would be better to transmit the subtitles as ASCII (or
Unicode) and have them rendered in the letterbox on the client machine: a perfect job for an
applet. It would even be possible to have the user select the language for the subtitles through a
preference setting or a pop-up menu (JPEG, 206 K).

Page 4 of 9
Audio
The main benefit of audio is that it provides a channel that is separate from that of the display.
Speech can be used to offer commentary or help without obscuring information on the screen.
Audio can also be used to provide a sense of place or mood as done to perfection in the game
Mood-setting audio should employ very quiet background sounds in order not to compete with
the main information for the user's attention.

Music is probably the most obvious use of sound. Whenever you need to inform the user about a
certain work of music, it makes much more sense to simply play it than to show the notes or to
try to describe it in words. For example, if you are out to sell seats to the La Scala opera in
Milan, Italy, it is an obvious ploy to allow users to hear a snippet of the opera: yes, Verdi really
could write a good tune (AU file, 1.4 MB), so maybe I will go and hear the opera next time I am
over there. In fact, the audio clip is superior to the video clip from the same opera which is too
fidget to impress the user and yet takes much too long to download (QuickTime, 3.6 MB).

Voice recordings can be used instead of video to provide a sense of the speaker's personality: the
benefits are smaller files, easier production, and the fact that people often sound good even if
they would look dull on television. Speech is also perfect for teaching users the pronunciation of
words as done by the French wine site: it used to be the case that you could buy good wine
cheaply by going for chateaus that were hard to pronounce (because nobody dared ask for them
in shops or restaurants) -- no more in the webbed world.

Non-speech sound effects can be used as an extra dimension in the user interface to inform users
about background events: for example, the arrival of new information could be signaled by the
sound of a newspaper dropping on the floor and the progress of a file download could be
indicated by the sound of water pouring into a glass that gradually fills up. These kinds of
background sounds have to be very quiet and nonintrusive. Also, there always needs to be a user
preference setting to turn them off.

Good quality sound is known to enhance the user experience substantially so it is well worth
investing in professional quality sound production. The classic example is the video game study
where users claimed that the graphics were better when the sound was improved, even though
the exact same graphics were used for the poor-quality sound and the good-quality sound
experiments. Simple examples from web user interfaces are the use of a low-key clicking sound
to emphasize when users click a button and the use of opposing sounds (cheeeek chooook) when
moving in different directions through a navigation space.

Types of multimedia features in the World Wide Web include:

1. Text: written content that provides information, such as articles, blogs, and web pages.

2. Images: photographs, illustrations, and graphics that enhance visual appeal and convey
messages quickly.

3. Audio: sound elements like music, voiceovers, and sound effects that can enhance user
experience or provide additional information.

4. Video: moving images that can tell stories, provide tutorials, or entertain, commonly found
Page 5 of 9
 on platforms like YouTube.

5. Animations: dynamic visuals that can illustrate concepts, engage users, and provide
interactive experiences.

6. Interactive content: features that allow user interaction, such as quizzes, games, and
surveys, making the web experience more engaging.

Response Time
Many multimedia elements are big and take a long time to download with the horribly low
bandwidth available to most users. It is recommended that the file format and size are indicated
in parentheses after the link whenever you point to a file that would take more than 15 seconds to
download with the bandwidth available to most of your users. If you don't know what bandwidth
your users are using you should do a survey to find out since this information is important for
many other page design issues. At this time, most home users have at most 28.8 Kb, meaning
that files longer than 50 KB need a size warning. Business users often have higher bandwidth,
but you should probably still mark files larger than about 200 KB.

Page 6 of 9
The 15-second guideline in the previous paragraph was derived from the basic set of response
time values that have been known since around 1968. System response needs to happen within
about 10 seconds to keep the user's attention, so users should be warned before slower
operations. On the web, current users have been trained to endure so much suffering that it may
be acceptable to increase the limit value to 15 seconds. If we ever want the general population to
start treating the web as more than a novelty, we will have to provide response times within the
acceptable ranges, though.

Design of client-side multimedia effects has to consider the other two response time limits also:

 The feeling of directly manipulating objects on the screen requires 0.1 second response
times. Thus, the time from the user types a key on the keyboard or moves the mouse until
the desired effect happens has to be faster than 0.1 seconds if the goal is to let the user
control a screen object (e.g., rotate a 3D figure or get pop-ups while moving over an
image map).
 If users do not need to feel a direct physical connection between their actions and the
changes on the screen, then response times of about 1.0 second become acceptable. Any
slower response and the user will start feeling that he or she is waiting for the computer
instead of operating freely on the data. So, for example, jumping to a new page or
recalculating a spreadsheet should happen within a second. When response times surpass
a second, users start changing their behavior to a more restricted use of the system (for
example, they won't try out as many options or go to as many pages).

Response time: refers to the time it takes for a user to receive response after making a
request, which can vary based on several factors. These factors include type of media
being used (like text, images, video, or audio), the quality and speed of the internet
connection, the serve’s processing time, and the overall design and optimization of the
website or application.
When multimedia types are involved, such as a webpage that combines text, images,
and videos, the response time can be affected by the size of the files being loaded. Larger
files take longer to download, which can lead to increased loading times and a slower
overall user experience. Additionally, if a site is not optimized for performance, it can
facilitate these delays.
In today’s digital landscape, it is essential to minimize response times to keep users
engaged and satisfied, as they often expect quick access to content across various
platforms.

Server Side Programming

Server-side programming allows us to instead store the information in a database and
dynamically construct and return HTML and other types of files (e.g. PDFs, images, etc.). It is
also possible to return data (JSON, XML, etc.). The HyperText Transfer Protocol is used by web
browsers to connect with web servers (HTTP). An HTTP request is sent from your browser to
the destination server when you click a link on a web page, submit a form, or conduct a search.
The request includes a URL that identifies the affected resource, a method that defines the
required action (for example, getting, deleting, or posting the resource), and additional
information encoded in URL parameters (field-value pairs sent via a query string), POST data
(data sent via the HTTP POST method), or associated cookies.
Page 7 of 9
Web servers listen for client request messages, process them when they come, and provide an
HTTP response message to the web browser. A status line in the response indicates whether or
not the request was successful (e.g., "HTTP/1.1 200 OK" for success). The requested resource
(e.g., a new HTML page, an image, etc.) would be contained in the body of a successful response
to a request, which could subsequently be displayed by the web browser.

Static sites
A simple web server architecture for a static site is depicted in the diagram below (a static site is
one that returns the same hard-coded content from the server whenever a particular resource is
requested). When a user requests a page, the browser makes an HTTP "GET" request with the
page's URL. The server obtains the requested document from its file system and sends the

Page 8 of 9
document together with a success status in an HTTP response (usually 200 OK). An error status
is issued if the file cannot be retrieved for whatever reason.

Dynamic sites
A dynamic website is one in which some of the response material is created dynamically and
only when it is required. HTML pages are generally built on a dynamic website by putting data
from a database into placeholders in HTML templates (this is a much more efficient way of
storing large amounts of content than using static websites). A dynamic site can provide varied
data for a URL depending on the user's input or saved preferences, as well as execute additional
activities as part of the answer (e.g. sending notifications). The server must run the majority of
the code required to operate a dynamic website. "Server side programming" is the term used to
describe the process of writing this code (or sometimes "back-end scripting").

The graphic below depicts a basic dynamic website architecture. Browsers make HTTP requests
to the server, which the server processes and delivers suitable HTTP replies to, as shown in the
preceding diagram. Requests for static resources (any files that don't change —typically: CSS,
JavaScript, Images, pre-created PDF files, etc.) are handled in the same way as requests for static
sites. Instead, requests for dynamic resources are sent (2) to server side code (shown in the
diagram as a Web Application). The server understands the request, pulls the relevant
information from the database (3), mixes the retrieved data with HTML templates (4), and sends
back a response with the created HTML for "dynamic requests" (5,6).

Advantages of server side programming language

 Server side scripting runs scripts on the server, reducing the burden on the user's machine.
 Database web applications may be created using server side scripting.
 Even if users access the source code, server side scripting is used to hide scripts from
them; only client side scripts are shown.
 Server side scripting is used to quickly create dynamic websites with content that can be
changed at any moment by the site administrator.
 Because server side scripts are not browser-dependent, we don't have to worry about
browser versions.
 Complex activities may be completed in a few stages thanks to server side scripting.
 It's simple to understand and utilize.

Disadvantages of server side programming language

1. Debugging web server scripts is tricky.

2. Web server scripting is a hacking vulnerability.
3. Hosting a web server can be taxing on a computer since it necessitates a big amount of
RAM, lowering the system's speed.

Top programming languages to learn in server side

Below are the best server side programming languages.

Page 9 of 9
1. Node.js (JavaScript)

Node.js is the newest on the list (it was launched in 2009) and is currently the fastest growing. It
allows you to run JavaScript code on the server. The best part is that back-end development does
not necessitate learning a new language. One of the main advantages of developing JavaScript is
that you can use it for front-end rendering and then reuse it in the back-end. In comparison to
most other languages, Node.js excels in real-time applications because it was designed with that
in mind. As a result, if you're working on something that requires real-time interaction, such as
conversations or games, this is a great place to start. Because it is younger than the other
languages, it has certain useful and contemporary features that are missing from earlier
programming languages and make development easier, such as the built-in package management
NPM.

2. PHP

By far the most popular server side programming language is PHP. PHP is used by a little more
than 80% of websites. It was the first programming language created expressly for the web, and
its prominence throughout the Web 2.0 (blogging, content production) period of the 2000s was
due to this. Furthermore, Wordpress is based on it, and it currently powers 25% of all websites,
including the most popular blogs and news sites. As a result, there is no more reliable approach
for creating content-based web pages. If you're acquainted with HTML, you'll see that PHP code
is embedded in your code, as shown above, where you may write the logic within the HTML
code. The logic that you program determines how your server creates HTML. That's a cool
feature that makes writing a breeze for you.

3. Java

Another prominent language used by many big websites is Java. However, it is overkill for many
minor applications where a simpler solution might achieve the same effect. It is used to interface
with other systems such as mainframes by many major corporate applications, such as those in
banking and insurance. In terms of scalability, it is really effective. However, that is something to
be concerned about in the future. Spring is one of the most popular frameworks for Java online
applications, and it is widely regarded a must-have in the toolkit of every Java web developer.
It's a great place to start once you've gotten a handle on Java and its ideas. Java development, on
the other hand, can be over engineered, and development time might be significantly longer than
with other languages. It's worth mentioning since it's widely used for large-scale projects, but for
smaller applications, you should investigate alternative programming languages.

4. Ruby

Ruby is most commonly used for tiny apps since it is well-suited to web development. The most
popular Ruby framework is Ruby on Rails. It is a latecomer compared to some of the other
languages, having just recently gained popularity in the 2010s. It's being used by a lot of
businesses nowadays that want to create quickly and go to market quickly. For beginners,
though, I recommend beginning with a smaller framework to gain a better sense of what goes
into an application stack overflow.

Page 10 of
9
5. Python

Python is a great programming language for beginners, not just for web development but also for
learning how to programme. It's a language with simple, easy-to-understand syntax that allows
you to focus less on syntax and more on learning how to programme. It's also one of the most
often used statistical programming languages. Flask is a popular Python micro-framework for
building web applications. It's a tiny framework that includes all of the capabilities you'll need to
get started building your web application. Django is another popular framework.

6. GO

Despite Python and Bash's fame as scripting languages, Go may also be used to run the same
commands. Go is a relatively new language that may be used to run scripts and was designed and
developed by Google. It shortens and strengthens the script because its libraries cover a wide
range of topics and are well-tested. Unlike Bash and Python, which interpret and run the script as
soon as it is read, Go compiles the script first and then runs it.

7.BASH

Bash is an example of a server side scripting language that tells a programme how to execute. It
is a plain text file that contains a sequence of commands. That programme, in this case, would be
a web page, which would require instructions on how to execute on a client's side in order to
produce a dynamic page's display. You now know that server side code runs on a web server and
that its primary function is to manage what data is given to the user (while client-side code
mainly handles the structure and presentation of that data to the user). You should also realize
that it is beneficial since it enables us to develop websites that effectively offer content
personalized to individual users, and you should have a clear sense of what you might be able to
do as a server side programmer.

Client-side Programming

In web development, 'client side' refers to everything in a web application that is displayed or
takes place on the client (end user device). This includes what the user sees, such as text, images,
and the rest of the UI, along with any actions that an application performs within the user's
browser. Markup languages like HTML and CSS are interpreted by the browser on the client
side. In addition, many contemporary developers are including client-side processes in their
application architecture and moving away from doing everything on the server side; business
logic for dynamic webpages*, for instance, usually runs client side in a modern web application.
Client- side processes are almost always written in JavaScript. In the netflix.com example above,
the HTML, CSS, and JavaScript that dictate how the Netflix main page appears to the user are
interpreted by the browser on the client side. The page can also respond to 'events': For instance,
if the user's mouse hovers over one of the movie thumbnail images, the image expands and
adjacent thumbnails move slightly to one side to make room for the larger image. This is an
example of a client-side process; the code within the webpage itself responds to the user's mouse
and initiates this action without communicating with the server.

Page 11 of
9
The client side is also known as the frontend, although these two terms do not mean precisely the
same thing. Client-side refers solely to the location where processes run, while frontend refers to
the kinds of processes that run client-side.

*A dynamic webpage is a webpage that does not display the same content for all users and
changes based on user input. The Facebook homepage is a dynamic page; the Facebook login
page is for the most part static.

Difference Between Server-side and Client-side

Client-side code these are code that runs in the browser and is focused on enhancing the
appearance and functionality of a displayed web page. This comprises UI component selection
and style, layout creation, navigation, form validation, and so forth.

Server side website development, on the other hand, typically entails deciding which content is
delivered to the browser in response to requests. Validating provided data and requests, using
databases to store and retrieve data, and transmitting the right data to the client are all duties
handled by the server side code.

Client-side code is written in HTML, CSS, and JavaScript and runs within a web browser, with
little or no access to the operating system (including limited access to the file system).

Server side code can be developed in a variety of computer languages, including PHP, Python,
Ruby, C#, and JavaScript (NodeJS). The server side code has complete access to the operating
system, and the developer can use whichever programming language (and version) they choose.

Web frameworks are commonly used by developers while writing code. Web frameworks are
sets of functions, objects, rules, and other code structures that are meant to address common
issues, accelerate development, and simplify the various sorts of activities that are encountered in
a certain area.

While frameworks are used in both client and server side programmes, the domains are highly
diverse, and therefore the frameworks are as well.

Client-side web frameworks make layout and presentation duties easier, whereas server side web
frameworks include a lot of "standard" web server functionality that you would have to develop
yourself otherwise (e.g. support for sessions, support for users and authentication, easy database
access, templating libraries, etc.).

Page 12 of
9