Web
Architecture

CGS 2835 Interdisciplinary Web Development
Web Design

Visual Design
Graphic Design
Page Layout
Theme
HTML, CSS, JS

Web Development

Coding, Software
Client-Side In...
Protocols
• Protocols are methods computers use to talk
with each other
• HTTP: HyperText Transfer Protocol
• HTTPS: HTTP ...
Web sites are developed with files stored in one common folder (or directory).
index.html
<html>
<head>
<title>My Page</ti...
Web site files are transferred to a
Web server maintaining the relative
locations of connected files.
SFTP:// Secure File ...
In the browser, you request resources with HTTP GET using a URL:
http://ispace-2013.cci.fsu.edu/~username/mysite/index.htm...
HTTP RESPONSE
HTTP RESPONSE

WEB SERVER
iSpace-2013.cci.fsu.edu

seal.gif
style.css

username

index.html

html
An HTML pa...
WEB SERVER

WEB CLIENT

Client/Server
Client/Server
Communication
Communication

HTTP GET: Get a resource from a
server (H...
WEB SERVER

WEB CLIENT

HTTP REQUEST w/DATA
HTTP REQUEST w/DATA

http://iSpace-2013.cci.fsu.edu/username/mysite/index.html...
WEB SERVER

WEB CLIENT

Client/Server
Client/Server
Communication
Communication

index.html
<html>
<head><title></title></...
WEB SERVER

WEB CLIENT

Client/Server
Client/Server
Communication
Communication
index.html

JS

<html>
<head><title></titl...
WEB SERVER

WEB CLIENT

HTTP REQUEST w/DATA
HTTP REQUEST w/DATA

PHP

PHP code (or other programming
language) runs on ser...
WEB SERVER

WEB CLIENT

HTTP REQUEST w/DATA
HTTP REQUEST w/DATA

PHP

PHP code is embedded in html code
and stored in a .p...
WEB SERVER

WEB CLIENT

HTTP REQUEST w/DATA
HTTP REQUEST w/DATA

Other
Programming
Languages
Other programming languages l...
WEB SERVER

WEB CLIENT

HTTP REQUEST w/DATA
HTTP REQUEST w/DATA

DB
DB
PHP +
MySQL
Programs may access data in a database
...
WEB SERVER

WEB CLIENT

HTTP Response
HTTP Response

DB
DB
HTML
CSS
Javascript
Images

PHP +
MySQL
A Web page is created “...
REVIEW
WEB SERVER

WEB CLIENT

In the web browser:
HTML
HTML FORMS
IMG: JPG/GIF/PNG
CSS
JAVASCRIPT

Client/Server
Client/S...
Upcoming SlideShare
Loading in...5
×

Web architecture v3

1,619

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://upload.wikimedia.org/wikipedia/commons/7/7f/Responsive_Web_Design_Logo.svg
    http://openclipart.org/tags/server%20rack
  • Web architecture v3

    1. 1. Web Architecture CGS 2835 Interdisciplinary Web Development
    2. 2. Web Design Visual Design Graphic Design Page Layout Theme HTML, CSS, JS Web Development Coding, Software Client-Side Interactivity Server-Side Information Page Generation Handling Requests Manipulating Data Multiple markup and programming languages Server Administration Scaling requests Networking servers Ensuring reliablity Securing data Backing up data Handling attacks Hardware CGS 2835 Interdisciplinary Web Development
    3. 3. Protocols • Protocols are methods computers use to talk with each other • HTTP: HyperText Transfer Protocol • HTTPS: HTTP Secure • SSH: Secure Shell Protocol • SFTP: Secure File Transfer Protocol CGS 2835 Interdisciplinary Web Development
    4. 4. Web sites are developed with files stored in one common folder (or directory). index.html <html> <head> <title>My Page</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> style.css profile.html me.jpg <img src=“seal.gif” /> index.html seal.gif mysite <a href=“profile.html”>My Profile</a> </body> </html>
    5. 5. Web site files are transferred to a Web server maintaining the relative locations of connected files. SFTP:// Secure File Transfer Protocol When using a web host, you will need to ask where your files need to be uploaded on the web server to be hosted to the web. WEB SERVER iSpace-2013.cci.fsu.edu username html mysite SFTP personal
    6. 6. In the browser, you request resources with HTTP GET using a URL: http://ispace-2013.cci.fsu.edu/~username/mysite/index.html Domain/Server Web Client WEB SERVER Resource on a server iSpace-2013.cci.fsu.edu HTTP REQUEST HTTP REQUEST username html HTTP:// Hyper Text Transfer Protocol URL Uniform Resource Locator mysite personal
    7. 7. HTTP RESPONSE HTTP RESPONSE WEB SERVER iSpace-2013.cci.fsu.edu seal.gif style.css username index.html html An HTML page and referenced files are delivered to client PC where they are cached and rendered in a web browser. These resources are requested with HTTP GET personal
    8. 8. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication HTTP GET: Get a resource from a server (HTML, Images, Data) HTTP POST: Post data to a server (logging in to a website, sending information, uploading files) HTTP Responses 200 OK: When the request could be satisfied 403 Forbidden: When the resource is valid, but the user does not have access 404 Not Found: When the resource could not be found 500 Internal Server Error: When there is either a programming error or server problem in fufilling the request
    9. 9. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA http://iSpace-2013.cci.fsu.edu/username/mysite/index.html? name=geo Including data (after the ? in a URL) is an HTTP GET request with extra data to specify what to get from the server Data sent in an HTTP POST is hidden from the URL
    10. 10. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication index.html <html> <head><title></title></head> <body> <form name="rez" method="post" action=”process.php"> <input type="submit" name="Submit" value="Continue"> </form) </body> </html> HTML Forms may be used to collect user data and send it to the server for processing. Forms are most commonly sent to a server with HTTP POST
    11. 11. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication index.html JS <html> <head><title></title> <script type="text/javascript"> <!--var value1 = 45; var value2 = 60; var sum = value1 + value2; var str = value1; document.write(str); //--> </script></head> <body> </body> </html> JavaScript code is also delivered from a server to a client to provide interactivity on a website
    12. 12. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA PHP PHP code (or other programming language) runs on server, manipulating input and creating HTML output.
    13. 13. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA PHP PHP code is embedded in html code and stored in a .php file. PHP code cannot run on the client browser, PHP is processed server-side
    14. 14. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA Other Programming Languages Other programming languages like Perl, Java, C++, Python, Ruby can also be used to process HTTP requests.
    15. 15. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA DB DB PHP + MySQL Programs may access data in a database using a database manipulation language (DBML) like MySQL.
    16. 16. WEB SERVER WEB CLIENT HTTP Response HTTP Response DB DB HTML CSS Javascript Images PHP + MySQL A Web page is created “on the fly” as output from server side software.
    17. 17. REVIEW WEB SERVER WEB CLIENT In the web browser: HTML HTML FORMS IMG: JPG/GIF/PNG CSS JAVASCRIPT Client/Server Client/Server Communication Communication HTTP HTTP DB DB On the web server: Stores files PHP & OTHER PL’S MYSQL & OTHER DBML’S
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×