LECTURER (1):

Web Design and

development

Eng.Ebtisam Alselwi
 Course Schedule

No Content More details

Lecture 1 Review

Lecture 2,3,4,5 Php part 1 Php,mysql

Lecture 6 Mid term exam
7-8 Php part 2 Session and cookies, security,
validation
Content management system

9-12 Laravel
2

2
 Web Design and development

3
 What is web design and
development?
 Web design is the aesthetic process of designing
the overall layout, structure, and look of a website.

 Focused on creating an aesthetically appealing user

interface (UI) and includes tasks such as:

 Selecting appropriate colors, fonts, and images

 Arranging website elements using layout and grid systems

4

4
 Web development

Web development is the technical process of

creating a website's structure and functionality.

 This process is typically done by a developer who uses

various programming languages and technologies to create
a functional and interactive website.

5
 Web development includes tasks
such as:
 Creating a database for storing and retrieving website data
 Developing server-side code to process data and manage
server requests
 Developing client-side code to control the presentation
and interactivity of the website
 Ensuring website accessibility and proper functioning
across different devices and browsers
 Implementing security measures to protect the website
and its data from potential threats
6

6
Web Design and Web Development

7
 Web designer and web developer

 Web Designer:

 Focus on the visual aspect of a website.

 knowledge of HTML, CSS, and Javascript to make designs

functional.

8
 Web designer and web
developer(cont’d.)
 Web Developer:

 Focus on the technical aspect of website creation.

 Written and test the HTML, CSS, and Javascript code that
powers the website.

 Responsible for integrating different types of software,

platforms, and servers to ensure a seamless experience for the
user. 9

9
 World Wide Web

 The Web: is the collection of machines (Web servers)

on the Internet that provide information, particularly HTML
documents, via HTTP.

 A Web browser: is software used by an end user to access

the Web.

10

10
 Hypertext Transfer Protocol

 HTTP (Hypertext Transfer Protocol): is the fundamental

protocol used for communication between clients and
servers over the internet.
 It defines the structure and format of messages exchanged
between a client (typically a web browser) and a server hosting a
web page or application.
 HTTP is based on the request-response communication
model: Client sends a request & Server sends a response
11

11
 Hypertext Transfer Protocol

 Normally implemented over a TCP connection (80 is standard port

number for HTTP)
 Typical browser-server interaction:
 User enters Web address in browser
 Browser uses DNS)domain name system( to locate IP address
 Browser opens TCP connection to server
 Browser sends HTTP request over connection
 Server sends HTTP response to browser over connection
 Browser displays body of response in the client area of the browser
window 12

12
 Hypertext Transfer Protocol

The client (browser) sends a request to the server, the server processes the request
and returns the appropriate response. All HTTP communications are organized as a set13
of requests and responses.
13
 Transmission Control Protocol (TCP)

 Adds multiplexing, guaranteed message delivery on top

of IP
 Multiplexing: multiple programs using the same IP
address
 Port: a number given to each program or service
 port 80: web browser (port 443 for secure browsing)
 port 25: email
14
 Web Page
 Web document that is suitable for web browsers
 Can be accessed through every device
 Only Internet and Web browser is required
 Web pages are usually written in HTML or XHTML
 May contain text, graphics, hyperlinks,references to
other resources
 Stylesheets, scripts, images
15

15
Static And Dynamic Web Pages

16
 Static And Dynamic Web Pages

 In web development, web pages can be categorized into two

types: static and dynamic.

 Static Web Pages:

Static web pages are pages that do not change .
They consist of HTML, CSS, and sometimes images.
Since the content of these pages is fixed, the pages can be
stored on the client-side (browser) for faster loading.
This type of web page is suitable for sites with a lot of static
content, like informational websites or blogs. 17

17
 Static And Dynamic Web Pages

 Dynamic Web Pages:

 Dynamic web pages are web pages that can change dynamically.
 This type of page uses a server-side programming language, such
as PHP, ASP.NET, or Python with Django or Flask frameworks, to
create a web page.
 html/css/ javascript, is generated at the server-side
These pages can include content that is updated frequently, like
news articles, product information, or social media updates..

18

18
 Static And Dynamic Web Pages

The choice between static and dynamic web pages depends on

the requirements of the website.
 Static web pages are easier to set up and maintain, less suitable for
sites with a lot of changing content.
 Dynamic web pages provide more flexibility and allow for a higher
level of interactivity, but require more advanced server-side
programming and configuration.

19

19
 Static And Dynamic Web Pages

 Many people prefer dynamic sites

 practical and flexible to use,
 completely safe, compared to sites with fixed content.

20

20
 Web Site

 Set of related web pages served from a single web

domain
 Hosted on one or more web servers (accessible via
network)
 Web sites consist of set of resources
 Web pages, CSS styles, JS scripts, images, videos, …
 World Wide Web (WWW)
 All publicly accessible websites in Internet 21

21
 Web Application

 Software application that runs in a Web browser

 Or is created in a browser-supported language (HTML + CSS
+ JS)
 High interactivity and accessibility
 Allows personalized dynamic content to be pulled down by
users
cording to individual settings
22

22
 Web Browser

 Web browsers visualize Web content

 Render HTML, images, CSS, videos, JavaScript, etc.
 Software application for retrieving, presenting and traversing
information resources on the World Wide Web
 An information resource is identified by a URI / URL( (uniform
resource locator, uniform resource identifier)
and may be a web page, image,
video or other piece of content
 Can used to access information provided by web
servers in private networks or files in file systems 23

23
 Web Browsers

 Google Chrome
 Mozilla Firefox
 Microsoft Edge
 Apple Safari
 Opera
 Netscape, SeaMonkey, …
 Maxthon
24

24
WEB EVOLUTION

25

http://www.evolutionoftheweb.com/
 WEB 1.0

 Experts call the Internet before 1999 “Read-Only” web

 Sites are static. They might contain useful information, but

there's no reason for a visitor to return to the site later.
 Low variety of content

 Sites aren’t interactive

 Applications are proprietary

 10 000 editors server 500 millions internet users 26

 WEB 2.0

 The writing and participating web (User-generated content)

 New applications may allow every users to interact and
collaborate with each other in a social media dialogue as
creators of content
 What is Web 2.0?
 Rich Internet Applications (RIA)
 Social Web

 Web-Oriented Architecture (WOA) 27

 RSS, Web services, feeds, etc.

 WEB 3.0

 "Semantic Web" is sometimes used as a synonym for

"Web 3.0“
 The Web 3.0 browser will analyze your response, search the
Internet for all possible answers, and then organize the
results for you
 Artificial intelligence
 Personalization
 Mobility
28

 Semantic Web
WEB 4.0

 “The next Web” – the ultra-intelligent electronic agent

 Recognize you when you get in front of it because all of
your devices are getting a little camera
 And with facial recognition, they’ll know it’s you
 Web 4.0 is often characterized as the Web OS
 The entire web being a single operating system where
information flows from any one point to any other
29
Hardware Server

 Physical computer (a hardware system) dedicated to running

one or more such services
 Usually servers are placed in data centers
 Typical computing servers are:
 Database server
 File server
 Mail server
 Web server 30
 Web Server

 The primary function of a web server is to store, process and

deliver web pages to clients
 Handle web requests
 Serve web content
 The communication between client and server takes place
using the HTTP
 These requests are redirected to other software products
(ASP.NET, PHP, etc.), depending on the web server settings 31
Web Servers Market Share – June 2015

 Apache
 ~ 50.00 %

 IIS (by Microsoft)

 ~ 10.00%

 nginx (by Igor Sysoev)

 ~ 17.00%

 Others
 ~ 19.00%
32
Application Server

 Software framework that provides an environment where

applications can run
 Apache
 Glassfish
 WebSphere
 WebLogic

34
 Web Languages
 Hypertext Markup Language (HTML): used for writing web pages
 Cascading Style Sheets (CSS): stylistic info for web pages
 PHP Hypertext Processor (PHP): dynamically create pages on a
web server
 JavaScript: interactive and programmable web pages
 Asynchronous JavaScript and XML (Ajax): accessing data for web
applications
 eXtensible Markup Language (XML): meta language for organizing
data 36
 Client-server Architecture

 Networks in which certain computers have special dedicated tasks.

 The client-server model consists of:
 Server – a single machine or cluster of machines that provides
web applications (or services) to multiple clients
Examples: IIS web server, cloud services, …..
 Client – software applications that provide UI (User Interface)
(front-end) to access the services at the server
Examples: Web browser, HTML5 application, Mobile application, Silverlight
37

application…
 Client-server Architecture
Client

Client

Server
Client
Client

network
connection

Client
Client
Client-server Model – Examples

 Web server (Apache, IIS) – Web browser

 FTP server (ftpd) – FTP client (FileZilla)
 Email server (qmail) – email client (Outlook)
 SQL Server – SQL Server Management Studio
 BitTorrent Tracker – Torrent client (μTorrent)
 DNS server (bind) – DNS client (resolver)
 DHCP server (wireless router firmware) –
DHCP client (mobile phone /Android DHCP client/)
 SMB server (Windows) – SMB client (Windows)
 3-tier / Multi-tier Architectures

 Three-tier architecture consists of the following layers:

 Presentation layer (front-end)
 Responsible for visualizing information
 Provides the UI of the application
 Application layer (business tier)
 Responsible for application functionality
 Provides the system logic
 Data layer (back end)
40
 Manages the data of the system
Front- End And Back – End
FRONT-END IN WEB APPLICATIONS

 Web apps like other types of applications need

front-end, Graphical User Interface plus the logic

related to it, to be available for the users to

communicate with.
43
FRONT-END IN WEB APPLICATIONS

 Web apps like other types of applications need

front-end, Graphical User Interface plus the logic

related to it, to be available for the users to

communicate with.
44
Software Tools

Notepad++
(Text editor)

WAMP Server Or XAMPP server

45
WAMP SERVER
http://www.wampserver.com/en/

46
 Key Web Technologies

 HTML describes the structure content of a web

page and the logical
 CSS (cascading style sheets describes the style
and appearance of a web page (Presentation).
 Javascript is an interpreted language that runs
on the client device. (Behavior)

47
 References:

 PHP & MYSQL NOVICE TO NINJA

 Fundamentals of Web Development

 Learning PHP, MySQL & JavaScript

 https://www.w3schools.com/cpp/

48
End…….
49