Course Name: Web Fundamentals

1
GETTING STARTED IN
WEB DESIGN

Dr. Ahmed Abdullah Al-Shalabi

 OVERVIEW

• Website creation roles

• Equipment

• Software
Website Creation Roles

Content
Design
Coding: Frontend
Coding: Backend
 Content

Information architecture
Organizes content logically for ease of findability

Content strategy
Ensures that text supports the brand/marketing goals;
may include data modeling and updating schedules as well as
extending brand voice to social media
 Design

User Experience (UX)

Makes sure whole experience with the site and the product is
favorable based on user testing

Interaction Design (IxD)

Focuses on how to use the site, including its User Interface (UI)

Visual Design
Creates the “look and feel” of the site
Coding: Frontend Development

Authoring/Markup (HTML)

Styling (CSS)

JavaScript and DOM Scripting

Frameworks
 Coding: Backend Development

Server software (ex: Apache, MS IIS)

Web application languages (ex: PHP, Ruby, .NET)

Database software (ex: MySQL, Oracle)

Software Typically Used

Coding tools
User Interface/layout tools
Web graphic creation tools
Variety of browsers
File management/transfer tools
Course Name: Web Fundamentals

2
HOW THE WEB WORKS

Dr. Ahmed Abdullah Al-Shalabi

 Internet vs. Web

internet
International network of connected computers

protocol
A standardized method for transferring data or documents over a
network (for example, FTP, STMP, HTTP)

web
Information shared over the internet using the Hypertext Transfer
Protocol (HTTP), which is one of many ways to share information
over the internet
 The Web Server

server
A program that delivers documents and data on
request

web server
Any computer running web server software
 .
The Web Server (cont’d)

IP address
A unique number assigned to a device connected to the internet (IP =
Internet Protocol). Example: 199.27.145.64

Domain Name System (DNS)

A system that allows internet users to refer to servers by name rather
than number

Domain name
A name assigned to a web server (easier to use than IP numbers).
Example: oreilly.com

DNS server
A server that matches domain names to their respective IP addresses
 The Browser

The software that requests data or documents from the web •

server

Also referred to as the client or user agent •

Could be on a desktop machine, smartphone, other •

connected device, or an assistive device such as a screen
reader

The program in the browser that interprets •

HTML/CSS/JavaScript is called the rendering engine
 Server-side vs. Client-side

Indicates which machine is doing the processing:

Client-side applications run on the user’s machine •

Server-side applications use the processing power •

of the server
Web Page Addresses (URLs)

URL = Uniform Resource Locator

Every page and resource on the web
has its own URL
 Parts of a URL

Identifies the protocol as “web” (HTTP) .1

Identifies the site by its domain name .2
Path through directories on the server to the target file .3
What’s Going On with Simple URLs

http://example.com/index.html

The protocol is implied and will be added by browser .1

Domain name is identified .2

If there is no path or filename, it means the URL is .3
pointing to a default file (usually index.html)
 Anatomy of a Web Page

The page you see in the browser window is nearly always made up
of multiple files, including:

An HTML document (gives the content structure) •

Style sheets (describes how it should look) •

Images and other media (embedded on the page on the fly) •

Scripts (add behaviors and functionality) •

A Web Page and Its Components
 What Style Sheets Do

Browser’s default rendering Simple style sheet applied

 Web Page Assembly Process

Request a page using its URL .1

Browser sends HTTP request to server .2

Server returns the file (or a “404 Not Found” message) .3

Browser looks at the HTML document. If there are external .4

files (like images or style sheets), it contacts the server again
for each resource

The server returns the additional files, and the browser .5

assembles the final page
 Course Name: Web Fundamentals

3
SOME BIG CONCEPTS YOU NEED
TO KNOW

Dr. Ahmed Abdullah Al-Shalabi

 A Multitude of Devices
Your web pages will be viewed on all manner of devices, large •
and small, fast and slow, visual and non-visual.

One of the challenges of being a web designer is creating a •

good experience regardless of the browsing device.

Brad Frost’s depiction of the web viewing environment.

 Web Standards
The World Wide Web Consortium (W3C) writes the specifications for web •
technologies:
w3.org/standards

Sticking with web standards ensures consistency across browsers and •

forward-compatability.

Markup Validation Service: https://validator.w3.org/

CSS Validation Service: http://jigsaw.w3.org/css-validator/

https://validator.w3.org/services

http://validator.w3.org/unicorn/
 Progressive Enhancement

Progressive enhancement is a strategy for coping with unknown

browser capabilities.

Start with baseline experience that provides content and basic •

functionality even on minimal browsers and assistive devices

Layer on styles, scripts, and advanced features for browsers that •

can handle them

Finish with “nice to have” effects (like animation) that aren’t critical •
to the brand or functionality
 Progressive Enhancement (cont’d)

HTML strategy
Write in a logical order, with elements marked up in a meaningful way

Style strategy
Use universally supported properties as the baseline and add cutting-
edge styles as embellishment

Scripting strategy
Make sure basic functionality (like content display, linking, and forms) are
possible when JavaScript is turned off. Enhance the experience when
JavaScript is available
 Responsive Web Design

Responsive web design is a strategy for dealing with unknown

screen size:

The heart of the method is using one HTML source for all •
devices and swapping out the styles based on the size of the
browser window (viewport)

It is preferred to building separate sites just for mobile devices •

(“m.dot” sites)

It may not be the solution for all sites, but making sites that adapt •
to screen size is now common practice
 Responsive Web Design (cont’d)

Page layout changes

based on the
width of the screen.
 Accessibility

Users access web content in many ways: Keyboard, mouse, •

voice commands, screen readers, Braille output, magnifiers,
joysticks, foot pedals, and so on

Four broad categories of disabilities affect how people interact •

with computers:
Vision impairment •

Mobility impairment •

Auditory impairment •

Cognitive impairment •
 Accessibility (cont’d)

There are measures you can take to improve the accessibility of •

your web pages.

The Web Accessibility Initiative (WAI) is the group responsible for •

making web technologies accessible:
www.w3.org/WAI.

The WAI-ARIA (Accessible Rich Internet Applications) •

specification documents accessibility features.
 Site Performance

It is critical that web pages display as quickly as possible. •

Users on mobile devices generally leave a page if it does not •

display in 3 seconds.

Even milliseconds can affect the bottom line on retail sites. •

 Site Performance Tips

Make image files as small as possible. •

Streamline HTML markup. •

Keep JavaScript to a minimum. •

Add scripts in a way that they don’t block page rendering. •

Don’t load unnecessary assets. •

Reduce the number of times the browser makes requests of the •

server.
 Site Performance Tools

Use a waterfall chart •

to see what assets are
downloading for your
page and how many
milliseconds they take.

This tool is built into the •

Chrome browser
(Developer >
Developer Tools).