The document provides an overview of web design and development. It begins with defining key concepts like the world wide web, web browsers, HTTP, URLs, and the W3C. It then discusses where to start with web design and the main things someone needs to learn, including HTML, CSS, JavaScript, responsive design, and server-side programming languages like PHP. The document serves as a high-level introduction to the main components of web design.

1. Web Design
and
Development
By: Shahrzad Peyman
Session 1
October-2017
shahrzad.peymaan@gmail.com
1

2. 2
Today’s Presentation
What is the web?
Web browsers
HTTP
Request/Response
W3C
Where Do I Start?
What Do I Need To Learn?

3. What is the Web?
Internet = Web ???
3
World Wide Web (abbreviated WWW or the
Web) is certainly what most people think of
when they see the word “internet”.
BUT the WWW is only a subset of Internet.
Internet is a network of connected computers.

4. What is the Web?
The World Wide Web (abbreviated WWW or the
Web) is an information space where documents
and other web resources are identified
by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be
accessed via the Internet.
4

5. What is the Web?
English scientist Tim Berners-Lee invented the
World Wide Web in 1989.
He wrote the first web browser computer
program in 1990 while employed at CERN in
Switzerland.
So,Web Design started in early 1993, pretty
close to the start of the Web itself.
5

6. Serving Up Your Information
Let’s talk more about the computers that make up the
Internet. Because they “serve up” documents upon
request, these computers are known as servers.
More accurately, the server is the software (not the
computer itself) that allows the computer to communicate
with other computers.
The role of server software is to wait for a request for
information, then retrieve and send that information back
as quickly as possible.
6

7. Web Browsers
We now know that the server does the servin’, but what
about the other half of the equation?
The software that does the requesting is called the client.
On the Web, the browser is the client software that
makes requests for documents.
The server returns the documents for the browser to
display.
7

8. Web Browsers
8

9. HTTP
HTTP (Hypertext Transfer Protocol) is a
communication standard governing the requests
and responses that take place between the
browser running on the end user’s computer and
the web server.
9

10. URLs
With all those web pages on all those servers,
how would you ever find the one you’re looking
for?
Fortunately, each document has its own special
address called a URL (Uniform Resource Locator).
10

11. The Request/Response
Procedure
11

12. W3C
12
The World Wide Web Consortium (called the W3C for short)
is the organization that oversees the development of web
technologies.
The group was founded in 1994 by Tim Berners-Lee, the
inventor of the Web, at the Massachusetts Institute of
Technology (MIT).
In the beginning, the W3C concerned itself mainly with the
HTTP protocol and the development of the HTML. Now, the
W3C is laying a foundation for the future of the Web by
developing dozens of technologies and protocols that must
work together in a solid infrastructure.

13. Where Do I Start?
One thing is certain: the Web as a communication
and commercial medium is here to stay.
Though my experience teaching web design
courses and workshops, I've had the opportunity
to meet people of all backgrounds who are
interested to learning how to build web pages.
13

14. Where Do I Start?
Whatever the motivation, the first question is
always the same:" Where do I Start?"
It may seem like there is an overwhelming
amount of stuff to learn and it's not easy to know
where to jump in.
14

15. Where Do I Start?
The Web has become an essential part of standard
business practice.
We’re at the point where we just assume that a
business, regardless of its size, will have a useful
web site. It also remains a uniquely powerful tool
for self-publishing, whether to a small circle of
friends or to a worldwide audience.
We can be certain that there will be a steady need
for web designers and developers.
15

16. Where Do I Start?
Your particular starting point will no doubt depend
on your background and goals.
However, a good first step for everyone is to get a
basic understanding of how the Web and web
pages work.
Once you learn the fundamentals, there are plenty
of resources on the Web and in bookstores for
you to further your learning in specific areas.
16

17. Where Do I Start?
The first step is understanding the
fundamental of how the Web works.
17

18. What Do I Need to Learn?
This one’s a big question. The short answer is
“not everything.”
You’ll learn that the term “web design” has come
to encompass many skills, and you don’t
necessarily need to learn all of them (most people
don’t).
18

19. What Do I Need to Learn?
“Web design” actually combines a number of disciplines,
including:
A. Graphic design
B. Information design
C. Interface design
D. HTML, style sheet, and graphic production
E. Scripting and programming
F. Multimedia
19

20. Graphic Design
Because the Web is a visual medium, web pages
require attention to presentation and design.
The graphic designer makes decisions regarding
everything you see on a web page: graphics,
type, colors, layout, etc.
20

21. Graphic Design
Because the Web is a visual medium, web pages
require attention to presentation and design.
The graphic designer makes decisions regarding
everything you see on a web page: graphics,
type, colors, layout, etc.
If you work as a graphic designer in the web
design process, you may never need to learn any
backend programming languages.
21

22. Information Design
One easily overlooked aspect of web design is
information design, the organization of content
and how you get to it.
Information designers also called “information
architects”.
22

23. Interface Design
If graphic design is concerned with how the page
looks, interface design focuses on how the page
works.
The concept of usability, how easily visitors can
accomplish their goals on the site, as well as the
general experience of using the site, is a function of
the interface design.
In most cases, the interface, information architecture,
and visual design of a site are tightly entwined.
23

24. Document Production
A fair amount of the web design process involves the
creation and troubleshooting of the documents, style
sheets, scripting, and images that make up a site.
The people who handle production need to have an
intricate knowledge of HTML (the markup language
used to make web documents) and style sheets, and
often additional scripting or programming skills.
In some cases, the tasks may be separated out into
specialized positions for CSS designer, HTML author/
coder, and client-side programmer.
24

25. Scripting and Programming
Advanced web functionality (such as forms, dynamic
content, and interactivity) requires web scripts and
sometimes special programs and applications running
behind the scenes.
Scripting and programming is handled by web
programmers (also called developers).
Developers who specialize in the programming end of
things may never touch a graphic file or have input on how
the pages look, although they need to communicate well
with the information and interface designers to make sure
their scripts meet intended goals and user expectations.
25

26. Multimedia
One of the cool things about the Web is that you
can add multimedia elements to a site, including
sound, video, animation, and Flash movies for
interactivity.
26

27. Frontend Versus Backend
Frontend design “Frontend” refers to any aspect of the design
process that appears in or relates directly to the browser.
The following tasks are commonly considered to be frontend
disciplines:
A. Graphic design
B. Interface design
C. Information design as it pertains to the user’s experience of
the site
D. Site production, including HTML documents, style sheets
and JavaScrip
27

28. Frontend Versus Backend
“Backend”refers to the programs and scripts that work on the server behind the
scenes to make web pages dynamic and interactive.
In general, backend web development falls in the hands of experienced program-
mers, but it is good for all web designers to be familiar with backend functionality.
The following tasks take place on the backend:
A. Information design as it pertains to how the information is organized on the
server
B. Forms processing
C. Database programming
D. Content management systems
E. Other server-side web applications using Perl/CGI, PHP, ASP, JSP, Ruby on
Rails, Java and other programming languages
28

29. What Do I Need to Learn?
• HTML
• CSS
• JavaScript
• Responsive Design
• Server-Side Programming (PHP)
29

30. HTML
HTML (HyperText Markup Language) is the language
used to create web page documents.
HTML is not a programming language; it is a markup
language, which means it is a system for identifying
and describing the various components of a
document such as headings, paragraphs, and lists.
Everyone involved with the Web needs a basic
understanding of how HTML works. The best way to
learn is to write out some pages by hand.
30

31. HTML5
Why HTML4 is boring?
A. Text is just text
B. No video or audio
C. Dynamic capabilities are limited to javascript
D. Need Flash or Silverlight to RIA(Rich Internet
Application)
E. Works only when you are connected to web
31

32. HTML5
New in HTML 5:
• GeoLocation
• Semantic Elements
• Video/Audio
• Offline Application
• Local Storage
• File Access
• WebSockets
• Server Push
32

33. CSS
33
While HTML is used to describe the content in a
web page, it is Cascading Style Sheets (CSS) that
describe how you want that content to look.
In the web design biz, the way the page looks is
known as its presentation.
CSS is now the official and standard mechanism
for formatting text and page layouts.

34. JavaScript
34
Despite its name, JavaScript is not at all related to Java. JavaScript is a
scripting language that is used to add interactivity and behaviors to web
pages, including these (just to name a few):
• 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
JavaScript is a language that is commonly used to manipulate the
elements on the web page or certain browser window functions.
There are other web scripting languages, but JavaScript (also called
ECMAScript) is the standard and most ubiquitous.

35. Responsive Design
35
We need to sketch, visualize, test, prototype and
understand the dynamic behavior on the different
devices with different resolutions.Our job now is
future friendly design ecosystems.

36. Responsive Design
36
It means that, Web page works well in your
browser size, or whatever device you are using to
view it.
Responsive Web Design: Designing your website
so that is responds to your user environment
based on screen size, platform and orientation.

37. Responsive Design
37
Bootstrap is a free and open-source front-end web
framework for designing websites and web
applications.
It contains HTML- and CSS-based design templates
for typography, forms, buttons, navigation and
other interface components, as well as
optional JavaScript extensions.
Unlike many web frameworks, it concerns itself
with front-end development only.

38. Responsive Design
38

39. Server-side Programming
39
Some web sites are collections of static HTML documents and image
files, but most commercial sites have more advanced functionality
such as forms handling, dynamically generated pages, shopping
carts, content management systems, databases, and so on. These
functions are handled by special web applications running on the
server. There are a number of scripting and programming languages
that are used to create web applications, including:
• CGI Scripts (written in C+, Perl, Python, or others)
• Java Server Pages (JSPs)
• PHP
• ASP.NET
• Ruby on Rails

40. PHP
40
• PHP is a popular, general-purpose and server-
side scripting language that is especially suited
to web development.
• Commonly used to build web applications.
• PHP: Personal Home Page --- Php Hypertext
Preprocessor
• PHP (Hypertext Preprocessor) was created by
Rasmus Lerdorf in 1994. It is now developed and
improved by a large team of people.
• http://www.php.net

41. PHP
41
PHP2 1995 Added database support, file uploads, variables,
arrays, recursive functions, conditionals,
iterations, regular expression and etc.
PHP3 1998 Added support of ODBC data sources, multiple
platform support, email protocol, and new
parser written by Zeev Suraski and Andi
Gutmans.
PHP4 2000 The parser was renamed the Zend Engine. Many
security features were added.
PHP5 2004 Adds Zend Engine 2 with object oriented
programming, robust XML support, SOAP
extension for interoperability with Web Services,
SQLLite has been bundled with PHP.
PHP7 2015 Revolution in PHP

42. Who Uses PHP?
42
• Yahoo!
• Facebook (HACK)
• Wikipedia
• 20+ million other domain names

43. Which Tools based on PHP?
43
• Wordpress (Blog engine)
• Drupal (CMS)
• Slack (Chat Service)
• Joomla (CMS)
As of January 2013, PHP was used in more than 240
million websites (39% of those sampled) and was
installed on 2.1 million web servers.

44. Why I Choose PHP?
44
• Cost nothing, it is free to download and use.
• Open source
• Runs on different platforms
• Codes and solutions are easily available
• Lots and lots of knowledge and documentation
• Speed of development

45. Working of PHP
45