‫الجامعة السعودية االلكترونية‬

‫الجامعة السعودية االلكترونية‬

‫‪26/12/2021‬‬
College of Computing and Informatics
Web Design
 Chapter 1: Where do I start?
Chapter 2: How the Web Works?
 1. What Does a Web Designer Do?
2. What Languages Do I need to Learn?
3. What Do I Need Buy?
4. The Internet Versus the Web
5. Serving Up Your Information
Contents 6. Web Page Addresses (URLs)
7. The Anatomy of a Web Page
8. Putting It All Together

Robbins, J. N. (2012). Learning web design (Fourth). Oreilly & Associates

.Inc
 1. Explain what a web designer does.
2. List what languages a student needs to learn.
3. Acquire software and equipment a web
Weekly designer needs.
4. Explain the web as it relates to the internet.
Learning 5. Define the role of the server and the
Outcomes browser.
6. Explain URLs and their components.
7. Describe the anatomy of a webpage.

.Robbins, J. N. (2012). Learning web design (Fourth). Oreilly & Associates Inc
Learning Web Design
Chapter 1:
Where do I start?
 What Does a Web Designer Do?

• Web design includes many different skills and disciplines

in the production and maintenance of websites.

• Over the years, the term “web design” has become a

catch-all for a process that encompasses a number of
different disciplines, from user experience design, to
document markup, to serious programming.

• Web design can separate into four broad categories:

1. Design
2. Development
3. Content strategy
4. Multimedia
 What Does a Web Designer Do?
A. Design
• Identify the site’s goals, how it will be used, and how visitors
move throughout the site.
• These tasks fall under the disciplines of:
 Interaction design (IxD)
 Make the site easy, efficient, and delightful to use.
 User interface design (UI)
 Focused on the functional organization of the page and tools
(buttons, links, menus…etc)
 User experience design (UX)
 Ensures that the site is favorable.
 Based on understanding users and user needs through
observations and interviews.
 What Does a Web Designer Do?
• Designers produce documents that include:
1. User research and testing reports
 Called User-Centered Design (UCD)
 Start with user research (interviews and observation)
 User testing at each phase of the design process to ensure the
usability of their designs.
2. Wireframe diagrams
 Shows the structure of a web
page using outlines for each
content type and widget.
 Indicates how the screen real
estate is divided and where
functionality and content
(such as navigation, search
boxes, form elements) are
placed
 What Does a Web Designer Do?
• Designers produce documents that include:
3. Site diagram
 Indicates the structure of the site as a whole and how
individual pages relate to one another.
4. Storyboards and user flowcharts
 Traces the path through a site or application from the point of
view of a typical user.
 It usually includes a script and “scenes” consisting of screen
views or the user interacting with the screen.

Website storyboarding
 What Does a Web Designer Do?
• Visual (graphic) Design
 Creates the “look and feel” of the site
 Logos, graphics, type, colors, layout, etc.
 Ensures that the site makes a good impression and is
consistent with the brand and message of the
organization.
 Generates sketches of the way the site might look.
 May also be responsible for producing graphic files that
are optimized for web delivery.
 What Does a Web Designer Do?
1. Front-end design
 Any aspect of the design process that appears in or relates
directly to the browser.
 Graphic design and image production.
 Interface design.
 Information design – user’s experience on the site.
 HTML document and style sheet development.
 JavaScript.
2. Back-end design
 Programs and scripts that work on the server behind the scenes
to make web pages dynamic and interactive.
 Forms processing.
 Database programming.
 Content management systems.
 Other server-side web applications using programming
languages.
 What Does a Web Designer Do?
B. Development
• Part of the web design process that involves the creation and
troubleshooting of the documents, style sheets, scripts and images that
make up a site.
• Development includes:
1. Authoring/Markup
 Authoring is the process of preparing content for delivery on the Web.
 Markup is marking up (marking) the content with HTML tags:
 <body>: this tag defines the document's body.

Authoring/markup
 What Does a Web Designer Do?
2. Styling
 Appearance of the page in the browser, which is controlled by style
rules written in CSS (Cascading Style Sheets).
 CSS is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
 Appearance of a page is handled separately from the HTML markup
of the page.
 What Does a Web Designer Do?
3. Scripting and Programming
 JavaScript is the language that makes elements on web pages
work.
 Other programming languages that run on the server and process
data include: PHP, Ruby, Python, ASP.NET
 Requires traditional computer programming experience

Summary of Web page

JavaScript Development
 What Does a Web Designer Do?
C. Content Strategy and Creation
• Everything you do supports the process of getting the content,
message, or functionality to our users.
• Two content-related specialists on the modern web development team :
• Content Strategist
 Ensures that every piece of text on a site, from long explanatory
text down to the labels on buttons, supports the brand identity and
marketing goals of the company.
• Information Architect (Information Designer)
 Organizes the content logically and for ease of findability.
 May be responsible for search functionality, site diagrams, and
how the data and content is organized on the server.
D. Multimedia
• Multimedia elements include:
 Sound
 Video
 Animation
 Interactive games
 What Languages Do I need to Learn?
• Which technologies you learn will depend on the role that you have in
the web design process.
• The list of technologies associated with web development include:
1. Hypertext Markup Language (HTML)
 Used to create web page documents.
 HTML 4.01 is the most established
 HTML5
 Not a programming language; it is a markup language
2. Cascading Style Sheets (CSS)
 Describes how the content should look.
 Known as the presentation.
 Includes:
 Fonts
 Colors
 Background images
 Line spacing
 What Languages Do I need to Learn?
3. JavaScript/ Document Object Model (DOM) Scripting
 Used to add interactivity and behaviors to web pages
 Checking form entries for valid entries.
 Swapping out styles for an element or an entire site.
 Making the browser remember information about the user for the
next time they visit
 Building interface widgets
4. Server-side Programming
 Commercial sites have more advanced functionality than simple
HTML sites.
 Functions are handled by web applications running on the server.
 Programming languages used to create web applications include:
 PHP
 Python
 Ruby
 JavaScript
 Java
 ASP.NET
 What Do I Need Buy?
• Equipment
 The author recommends the following equipment:
 Up-to-date computer.
 Extra memory.
 Large monitor.
 Scanner and/or digital camera.
 Second computer.
 Mobile devices.
 What Do I Need Buy?
• Software
 Tools provide a WYSIWYG view interface.
 WYSIWYG: What You See Is What You Get, pronounced “whizzy-wig”
1. HTML tools/editors
 Designed to speed up the process of writing HTML by hand.
 Do not allow you to edit the page visually – must check work in a browser.
 These tools include:
 TextPad
 NotePad++ (we will use this tool. https://notepad-plus-plus.org/)
 Sublime Text
 Coda by Panic
 TextMate
 BBEdit
 Nvu (N-view)
2. Image-editing and drawing software
 Popular programs include:
 Adobe Photoshop
 Adobe Photoshop Elements
 Adobe Illustrator
 Adobe Fireworks
 Corel Paint Shop
 GIMP
 What Do I Need Buy?
3. Internet tools
 Specific for viewing and moving files over the network
 Tools include:
 Browsers:
o Internet Explorer, Chrome, Firefox, Safari
 File-transfer protocol (FTP) program
o WS_FTP, CuteFTP, AceFTP, Filezilla
4. Terminal application
 Unix operating system
 Command-line application
 Type Unix commands on the server
 Useful for:
 Setting up file permissions
 Moving or copying files and directories
 Managing the server software
 Windows users can install a Linux emulator – Cygwin
 PuTTY – free Telnet/SSH client
 Mac OS X includes an application called Terminal
Learning Web Design
Chapter 2:
How the Web Works
 The Internet Versus the Web
• Internet
 Network of connected computers.
 No company owns the Internet.
 *Cooperative effort governed by a system of standards and rules
 *Information can be passed between computers by:
 Email
 File transfer (FTP)
• Web
 The Web is a subset of the Internet.
 Originally called the World Wide Web (www addresses)
 It's just one of the way information can be shared over the Internet
 Allows documents to be linked to one another using hypertext
links.
 Web uses a protocol HTTP (HyperText Transfer Protocol)
 Serving Up Your Information
• Servers
 Computers that serve up documents upon request.
 More accurately, server is a software that allows the computer to
communicate with other computers.
 Role of server software is to wait for a request for information, then
retrieve and send that information back as quickly as possible
 Two most popular servers are:
 Apache
 Microsoft Internet Information Services (ITS)
 Every computer and device connected to the Internet is assigned an IP
address. (IP: Internet Protocol)
 google.com has the IP address: 172.217.21.78
 Domain Name System (DNS) was developed to allow us to refer to a
server by its domain name.
• Browsers
 Software that does the requesting is called the client
 People use desktop browsers, mobile browsers, and other assistive
technologies as clients to access documents on the Web
 The server returns the documents for the browser (Also referred as
user agent) to display.
 Web Page Addresses (URLs)
• Every page and resource on the Web has its own special address
which is called a URL
• URL is made up of three parts:
1. The protocol (http://)
2. The site/server name (www.example.com)
3. The absolute path to the filename (document or resource)
(/2011/samples/first.html)

• To sum it up, the URL in Figure 2-1 says it would like to use the HTTP
protocol to connect to a web server on the Internet called
www.example.com and request the document/file name first.html
(located in the samples directory, which is in the 2011 directory).
 Web Page Addresses (URLs)
• Default files
 Not all URLs are lengthy, Many addresses do not include a filename

 When a server receives a request for a site name OR directory name

rather than a specific filename, it looks in that directory for a default
document, typically named index.html

 If your site uses server-side

programming to generate pages,
the index file might be named
default.htm, main.html,
index.php or index.asp.
 The Anatomy of a Web Page
• HTML documents
 The graphically rich and interactive pages we see on the Web are
generated by simple, text-only documents.
 This text file is referred to as the source document.
 Adding descriptive tags to a text document is known as “marking up”
the document.
 Web pages use a markup language called HyperText Markup
Language, or HTML for short
 HTML defines dozens of tag elements that make up documents such
as headings, paragraphs, emphasized text, links, title, images, videos,
and widgets for form inputs
 Several versions of HTML in use today. These include:
 HTML version 4.01
 XHTML 1.0
 HTML5
 The Anatomy of a Web Page
• Introduction to HTML Markup
 The web page shown on the following slide consists of 4 separate
files:
 An HTML text document (index.html)
 A CSS (kitchen.css)
 Two images (foods.gif, spoon.gif)
index.html
 The Anatomy of a Web Page
 Tags in the HTML source document give the browser instructions
for how the text is structured and where the images should be
placed.
 The Anatomy of a Web Page
 Text within the brackets (for example, <body>) does not display in the
final page.
 The browser displays only what’s between the tags (the content of the
element)
 Most of the HTML tags appear in pairs surrounding the content of the
element
 <h1> indicates the following text should be a level-1 heading.
 </h1> indicates the end of the level-1 heading
 Some elements called Empty elements (Do not have content)
 The <hr> tag indicates an empty element that tells the browser to “insert a
thematic divider here” (a horizontal line)
• Where are the pictures?
 No pictures in the HTML file.
 Each image is a separate file.
 Images are placed in the flow of the text with the HTML image element (img)
 This tag tells the browser where to find the graphic (its URL).
 When the browser sees the img element, it makes another request to the
server for the image file, and then places it in the content flow.
 The browser software brings the separate pieces together into the final page.
 The Anatomy of a Web Page
• Adding Style
 Near the top of the HTML document there is a link element that points
to the style sheet document (kitchen.css)
 That style sheet includes a few lines of instructions for how the page
should look/present in the browser.

 These are style instructions written according to the rules of

Cascading Style Sheets (CSS).
 CSS allows designers to add visual style instructions (known as the
document’s presentation) to the marked-up text (the document’s
structure, in web design terminology).
 Putting It All Together
• To wrap up our introduction to how the web works, let’s trace a typical stream of
events that occurs with every web page that appears on your screen:
 Putting It All Together
• To wrap up our introduction to how the web works, let’s trace a typical
stream of events that occurs with every web page that appears on your
screen:
1. Web pages can be requested by typing the URL directly into a browser or
by clicking on a link to the web page
2. Your browser sends an HTTP request to the server named in the URL and
asks for the specific file
3. The server looks for the requested file and issues an HTTP response
 If the page cannot be found, the server returns an error message. The
message typically says “404 Not Found,” although more hospitable error
messages may be provided.
 If the document is found, the server retrieves the requested file and returns
it to the browser.
4. The browser parses the HTML document. If the page contains images
(indicated by the HTML img element) or other external resources like
scripts, the browser contacts the server again to request each resource
specified in the markup.
5. The browser inserts each image in the document flow where indicated by
the img element and the assembled web page is displayed for your
viewing pleasure.
Thank You