DFT40043 : WEB DESIGN TECHNOLOGIES

INTRODUCTION
TO WEB DESIGN
TECHNOLOGIES
PN MUNIRAH BINTI ABDULLAH
WHAT WILL
YOU LEARN?
Outline of Topics
• Web Application
• Web Designer and Web Developer
• Web Standards and W3C recommendation
• Web Planning and Design
 A web application or web app is a client–server
computer program in which the client (including the
WHAT IS WEB user interface and client-side logic) runs in a web

APPLICATION? browser.
It is stored on a remote server and delivered over the
Internet through a browser interface.
FEATURES OF SCALABILITY

WEB
AVAILABILITY
MAINTAINABILITY
APPLICATION RELIABILITY
 SCALABILITY
The capacity to be changed in
size or scale. (Handling
Growth)
Scaling up involves upgrading
the hardware or optimizing
the software to ensure that a
single server machine set can
support
more users.
A successful web application needs
to seamlessly and efficiently
accommodate growth, and be
designed with scalability in mind. A
scalable web application will be able
to handle an increase in users and
load, without disrupting the end
users.
 The quality of being able to be used or
obtained.

A highly available application is the

one that's up and running most of the
time in a year, hence high availability is

AVAILABILITY
measured in terms of downtime
throughout the year.

This downtime also includes planned

downtime of the application for
maintenance and upgrading.
 An application is considered
maintainable if it can cater to the needs
of the users over its lifetime.

MAINTAINABILITY If an application can increase the number

of users as needed, upgrade the features
that users need, and add new features to
the application as needed, then the
application is maintainable.
 REALIBILITY
The quality of being It is very important for an
trustworthy or of performing application to have a
consistently well. high reliability factor to ensure
that it is also highly
available.
Availability is reduced with any kind
of downtime,
including downtime for software
bugs.
 ADVANTAGES OF WEB
APPLICATION COMPARED
TO DESKTOP
APPLICATION.
 Develop once run anywhere

Easy to upgrade
ADVANTAGES OF
WEB
Performance

APPLICATIONS Open source software

Standards and maintenance

 Internet connectivity

Cross browser compatibility

DISDVANTAGES OF Speed
WEB
APPLICATIONS External dependency

Standards and maintenance

 no installation and updating

access from anywhere with the

internet

ADVANTAGES
cross-platform compatibility

better suitable for low-end

FOR USERS computers and

require little disk space

data is stored remotely

client computer is better protected
from viruses as
the app is sandboxed inside a
browser
 easier to monitor every user
actions, get full statistics and
feedback.
easier to add collaboration

ADVANTAGES
possibilities as data is
stored on the server.

FOR
easier to make a mobile version if
you use HTML

DEVELOPERS
and JS.

easier integration with web

services.
you can choose to completely
control the serverside code
making it impossible to pirate.
SOFTWARE TO
DEVELOP WEB
APPLICATION.
 SOFTWARE
Adobe Microsoft Expression
Dreamweaver Web

FOR WEB
DEVELOPMENT
Adobe Muse Scriptcase

CoffeeCup HTML
Editor
SOFTWARE
FOR WEB Photoshop Sketch

DESIGNER
CorelDRAW Illustrator
LANGUAGE
OF THE WEB
Client side scripting
Server side scripting
SCRIPTS
A script is a set of instructions. For Web pages they are
instructions either to the Web browser (client side scripting) or
to the server (server-side scripting).
Scripts provide change to a Web page. Any page which changes
each time you visit it (or during a visit) probably uses scripting.

All log on systems, some menus, almost all photograph

slideshows and many other pages use scripts.
CLIENT-SIDE
&
SERVER-SIDE
SCRIPTING
CLIENT-SIDE & SERVER-SIDE
SCRIPTING
 EXAMPLE OF
CLIENT SIDE
SCRIPTING

JavaScript VBScript HTML (Structure) CSS (Designing) jQuery

EXAMPLE OF
SERVER SIDE
SCRIPTING

ASP JSP Perl PHP Python Ruby

FEATURES
OF
WEBSITES STATIC

DYNAMIC
STATIC
A static website consists of a series of HTML files, each one
representing a physical page of a website. So on static sites,
eachpage is a separate HTML file. When you visit the
homepage, you areviewing the actual homepage file.
Even if two pages contain a chunk of identical content (like a
footer), they both contain two versions. So, if you want to
updatethe footer, you must do so twice, once on each page.
All log on systems, some menus, almost all photograph
slideshows and many other pages use scripts.
DYNAMIC
Dynamic websites contain Web pages that are generated
in real-time. These pages include Web scripting code,
such as PHP or ASP. When a dynamic page is accessed,
the code within the page is parsed on the Web server and
the resulting HTML is sent to the client's Web browser.
 WEB STANDARDS
&
W3C
RECOMMENDATIONS
 Web standards are rules and
guidelines established by the
World Wide Web Consortium ( W3C )
developed topromote consistency in
the design code which makes up a

WEB
web page.

STANDARDS
Web Standards is defined as a formal
set of standards and technical
specifications used to define aspects of
the world wide web. These are best-
practice standards used by
organizations to build web sites and
web applications.
WORLD WIDE WEB
CONSORTIUM
(W3C)
The World Wide Web Consortium (W3C) is an international
community where Member organizations, a full-time staff, and
the public work together to develop Web standards. Led by
Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's
mission is to lead the Web to its full potential.
W3C
RECOMMENDATIONS
W3C develops technical specifications and guidelines
through a process designed to maximize consensus about
the content of a technical report, to ensure high technical
and editorial quality, and to earn endorsement by W3C
and the broader community.
TERMINOLOGIES OF
WEB SERVERS
 A web page is a document commonly
written in HTML (Hypertext Markup
Language) that is accessible through
the Internet or other networks using an
Internet browser.

WEB
PAGE
 A computer program with a graphical
user interface for displaying HTML
files, used to navigate the World Wide
Web.

BROWSER
 Is a reference to data that the reader
can directly follow either by clicking,
tapping, or hovering

HYPERLINK
 HTTP (Hypertext Transfer Protocol) is
the set of rules for transferring files
(text, graphic images, sound, video,
and other multimedia files) on the
World Wide Web
HTTP
 Is a numerical label assigned to each
device connected to a computer
network that uses the Internet Protocol
for communication

IP ADDRESS
 Internet resource name that is
universally understood by Web servers
and online organizations and provides
all pertinent destination information.
DOMAIN
NAME
 Is a reference to a web resource that
specifies its location on a computer
network and a mechanism for
retrieving it.

URL
WEB PLANNING AND
DESIGN
 Purposes

BASIC WEB Communication

DESIGN Typefaces

PRINCIPLES Colours

Images
 Navigations

BASIC WEB Grid-Based Layouts

DESIGN Pattern design

PRINCIPLES Load time

Mobile friendly
PLAN A WEBSITE
PLANNING
The first step in the creation of an effective website is the
planning phase.
Planning helps save time and money as well as helping to reduce
the stress of the project.
 STEPS FOR PLANNING
PROCESS

Choosing a focus and Allowing plenty of Visiting web sites of similar

keeping it simple. time for planning and type to see how others
development designed them.
 Who will be visiting the site and why?
OTHER
QUESTIONS THAT How they will visit (browser, PDA, cell
SHOULD BE phone).
ADDRESSED IN
THE PLANNING What are the goals and requirements
for the site, are there any legal issues
PHASE INCLUDE that need to be addressed (copyright,
etc.).

How will the site be hosted.

SUMMARY