Scribd
Upload
11 views37 pages

DDW Topic 1 v2.0

The document provides an overview of a module focused on website design and development, covering essential topics such as HTML, CSS, web standards, and the challenges of web design. It outlines the learning outcomes for students, including definitions of the Internet, IoT, and the WWW, as well as the importance of accessibility and usability in web design. Additionally, it discusses the roles of clients and servers in the web ecosystem and emphasizes the need for testing across different browsers and devices.

Uploaded by

thuya42224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
11 views37 pages

DDW Topic 1 v2.0

The document provides an overview of a module focused on website design and development, covering essential topics such as HTML, CSS, web standards, and the challenges of web design. It outlines the learning outcomes for students, including definitions of the Internet, IoT, and the WWW, as well as the importance of accessibility and usability in web design. Additionally, it discusses the roles of clients and servers in the web ecosystem and emphasizes the need for testing across different browsers and devices.

Uploaded by

thuya42224
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 37

Designing and Developing a

Website

Topic 1:
Introduction to the Module
Module Aims
• To give students an understanding of website
design and development:

– How to build websites using HyperText Markup


Language (HTML) and Cascading Style Sheets (CSS)
– Factors that influence the design of websites
– How to the specify the design of websites
– Strategies for testing websites
Scope and Coverage
• The Internet, IoT, and the World Wide Web
(WWW)
• How the WWW works
• The importance of web standards
• Challenges of web design:
– Browsers
– Screen Resolution
– Accessibility
Learning Outcomes

By the end of this topic, students will be able to:


• Define the Internet, IoT, and the World Wide Web.
• Describe in broad terms what happens when a
browser views a web page.
• Explain what HTML, CSS and web standards are.
• Describe the challenges involved in designing web
pages to be understood by as many different
people as possible.
The Internet, IoT and the WWW
• Questions:
– What is the Internet?
– What is IoT?
– What is WWW?

• Write a definition of the Internet


• Write a definition of IoT (Internet of things)
• Write a definition of the WWW
• Describe the differences between the three
The Internet

• The world-wide network of computer networks sharing


information
• Information shared over the Internet (not exhaustive)
– Email
– FTP
– Instant Messaging
– WWW
– Chat
– VOIP e.g. Skype
– P2P (Peer-to-peer) networks
Internet of Things (IoT)
• A network of internet-connected objects that are
able to collect and exchange data using embedded
sensors.
• IoT device:
• Any stand-alone internet-connected device that can be
monitored and/or controlled from a remote location.
• IoT applications:
• Smart Home
• Wearables
The World Wide Web (WWW)

• The worldwide collection of millions of inter-linked


documents (web pages) on the Internet
• Two main technologies define the WWW
– HTML (HyperText Markup Language)
• The language used to write web pages
– HTTP HyperText Transfer Protocol
• The communication rules that specify how web pages
are transmitted over the Internet
How the WWW works - 1

Internet

Client Web Server

• On the Internet, there are two types of machine: clients and


servers.
• Servers provide services to users of the Internet.
• Clients use services on the Internet.
• When we ‘surf the web’, we are clients
How the WWW Works - 2
Browser sends out a request for a web page

HTTP
HTTP
Internet

Client Web Server


• The user selects the address of a web page they want to view,
e.g. http://tinyurl.com/6ynbvx
• Web addresses are known as URLs (Universal Resource
Locators)
• The request is made using HTTP
How the WWW Works - 3
Server receives the request and sends back the page

HTTP HTTP
Internet

Client
• The server receives the request
Web Server
• If the client is allowed the requested page:
– The server finds the web page (a HTML document)
– Sends a copy back over the Internet to the client
• Again HTTP is used for communication between the client and server
How the WWW Works - 4

The web browser receives the web page

Internet

Client Web Server


• The web browser understands HTML and displays the web page
for the user.
• The user views the page, clicks on a hyperlink and the whole
process starts over again.
HTML (HyperText Markup Language)

<!DOCTYPE html>
<html>
<head>
<title>A simple HTML Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

• This is an example of a HTML document.


• HTML describes the structure of a web page, i.e. which part
of the page is a heading, a paragraph, a list, a table etc.
CSS (Cascading Style Sheets)
body{
font-family:arial;
font-size:0.8em;
background-color:blue;
color:red;
}
h1{
font-family:Georgia,"Times New Roman",Times,serif;
}
p{
line-spacing:0.5em;
}

• CSS specifies the design of a web page:


– E.g. the fonts, colours, positions of different parts of the page
The World Wide Web Consortium
(W3C) - 1

• The WWW was invented in 1989 by Tim Berners-


Lee
– He then founded the World Wide Web Consortium
(W3C) in 1994.
– As of March 2011, there are 323 members from
organisations such as Apple, Google and Microsoft.
The World Wide Web Consortium
(W3C) - 2

• The W3C oversee the continued development of


the WWW
– The W3C is an international community that
develops open standards to ensure the long-term
growth of the Web.
– Members reach an agreement over the
development/ future of new web technologies.
Web Standards

• The specifications and guidelines the W3C produce are known as


web standards:
- Examples of web standards are the HTML and CSS
specifications.

• The standards aim to provide web technologies that support the


greatest number of web users.

• When we create websites, it is important to follow web standards:


– Following web standards ensures that we can be confident
our websites will be accessible to as many users as possible.
The Challenges of Web Design
• When we design a website, it should be
understood by as many people as possible.
– This can be difficult
• Challenges of web design:
– Different web browsers
– Different devices and screen resolution
– Accessibility
– Usability
Different Web Browsers - 1
• Users surf the web using many different web
browsers.
• Task:
– Name as many different web browsers as you can.
Different Web Browsers - 2

• Popular web browsers:


– Google Chrome
– Safari (Mac OS)
– Mozilla Firefox
– Internet Explorer (often abbreviated to IE)
– Opera
– Lynx (text only)
– Konqueror
• Popular mobile web browsers:
– Opera Mini
– Mobile Safari
– Skyfire
Different Web Browsers - 3
• Several websites provide analysis of global
browser usage, e.g. StatCounter. (
http://gs.statcounter.com/)
• Getting reliable accurate data can be difficult.
– Statistics are often based on limited number of sites
• Browser usage often varies between different
countries.
Different Web Browsers - 4

• How can we design a web page that works across a range


of different web browsers?
– Different web browsers support different features of HTML
– Different browsers interpret CSS rules in different ways

• Use W3C web standards


– Most recent browsers support web standards

• Test
– View the site in as many different browsers as possible
before making a site ‘live’.
Different Devices and Screen
Resolution - 1

• Users surf the web using many different devices,


not just a desktop PC.

• Task:
– Name as many different web enabled devices as
you can.
Different Devices and Screen
Resolution - 2
• Some web-enabled devices include:
– Desktop computers
– Netbooks
– Mobile phones
– Smart phones
– Tablets
– Handheld games consoles
– MP3 Players
– E-readers
Different Devices and Screen
Resolution - 3
• Different devices have different-sized displays:
– A mobile device may have a screen resolution as small
as 128 x 128 pixels.
– Most desktop computers have a screen resolution that
is at least 1024 x 768.

• Screen resolution is an important factor in web


design:
– Users should not have to scroll horizontally.
– Important information (such as main navigation options)
should be instantly visible to the user.
Different Devices and Screen
Resolution - 4
• How can we design a web page that works across a range of
different display resolutions?

• Fixed web page design:


– Design the page width for the lowest popular resolution e.g.
1024x768.
– On large displays, large amounts of empty space.

• Fluid web page design:


– The page width re-sizes to fit the size of the browser window.
– On large displays, the line length can affect the readability of
text.
Designing for Mobile Devices - 1

• The number of users who access the web from


mobile devices is growing.

• Question :
– What makes surfing the web on a mobile device
(e.g. a mobile phone) difficult?
Designing for Mobile Devices - 2

• How can we design a web page that works for


mobile users?

• Create a separate site just for mobile users.

• Even ‘mainstream’ sites should be designed to


make them usable by mobile users.
Accessibility

• Accessibility is about designing websites that


people with disabilities can use.

• Task:
– Name different disabilities that would affect
someone’s ability to use websites.
Accessibility – Disabilities - 1

• Visual
– People that are blind or have limited vision.
– They may not be able to see web pages clearly.
• Motor
– People that have limited or no use of hands.
– They could struggle to use conventional input
devices that require fine motor control.
Accessibility – Disabilities - 2
• Auditory
– People that are deaf or hard of hearing.
– They could struggle to understand audio and video
content on the web.
• Cognitive
– People with cognitive disabilities may struggle to
use websites with complex language, navigation, or
interaction processes.
Accessibility - Assistive Technologies

Technologies that assist a disabled person:

• Visually impaired
– Blind users will often use a ‘screen reader’ to surf
the web
– A screen reader reads out the contents of a page
• Motor impaired users
– May use specially designed keyboards, mouth
wands, eye tracking, voice recognition
Accessibility - Why Accessibility is
Important

• Designing websites that are accessible is


important.
• Disabled users make up a significant proportion of
web users.
• Accessible sites assist older web users.
• Many countries have legal requirements to support
disabled users.
• Accessible sites also assist mobile users.
Accessibility - Designing for
Accessibility

• Use web standards:


– Web standards are designed so that the web will be
accessible.

• As we go through the module, we will consider


other strategies for making our web pages
accessible.
Usability

• Designing effective websites involves much more


than deciding the look and feel of a site.
• Usability is about designing a site where users can
accomplish tasks quickly and easily.
• Usability includes factors such as:
– Site structure
– Navigation
– Interface design
– How long the pages take to download
References
• About W3C
– Available at: http://www.w3.org/Consortium/
• Niederst, J. (2006). Web Design in a Nutshell: A
Desktop Quick Reference. O'Reilly Media.
• W3C WAI Resources on Introducing Web
Accessibility
– Available at:
http://www.w3.org/WAI/gettingstarted/Overview.html
Introduction to the Module Lecture 1 - 1.
37

Topic 1 – Introduction to the Module

Any Questions?

V2.0

You might also like