Web Development

Agenda Web History Network Architecture Types of Server The languages of the web Protocols API 2

Agenda  Web History  Network Architecture  Types of Server  The languages of the web  Protocols  API 3

Web history 1989: Tim Berners-Lee creates the World Wide Web at CERN HTML, HTTP, URI, Hypertext 4

Web history 1989: Tim Berners-Lee creates the World Wide Web at CERN HTML, HTTP, URI, Hypertext 1991: Tim Berners-Lee publishes the first website 5

Web history 1989: Tim Berners-Lee creates the World Wide Web at CERN HTML, HTTP, URI, Hypertext 1991: Tim Berners-Lee publishes the first website 1993: Mosaic is released Internet made easy 6

Web history 1989: Tim Berners-Lee creates the World Wide Web at CERN HTML, HTTP, URI, Hypertext 1991: Tim Berners-Lee publishes the first website 1993: Mosaic is released Internet made easy 1994: Netscape Navigator is released 1994: W3C is created 7

Source: Web History 8

Agenda  Web History  Network Architecture  Types of Server  The lanaguages of the web  Protocols  API 9

Network Architecture Logical and structural way to connect computers and equipment together 10

Network Architecture Peer-to-peer 11

Network Architecture Client-server 12

Agenda  Web History  Network Architecture  Types of Server  The languages of the web  Protocols  API 13

Types of Server © 2014 BigDataUniversity.com 14 Browser Web Server App. Server DB Server

Types of Server Web Server Receive and respond requests from/to browser Serve static content No business logic Examples: Apache, Nginx Application Server Receive and respond request from/to web server Run business logic code May connect to the database Example: Tomcat, WEBrick 15 Web Server File System App. Server Web App.

Types of Server Database Server Store data Easier and faster to access data Example: MySQL, DB2, CouchDB, MongoDB 16 DB Server File System DBMS

Agenda  Web History  Network Architecture  Types of Server  The languages of the web  Protocols  API 17

The languages of the web polyglot Client side vs. Server side 18 Browser Web App. Client side code Server side code

19 The languages of the web Client side HTML, CSS and JavaScript HTML makes the structure CSS makes it pretty JavaScript brings it to life Source:

The languages of the web Client side HTML HyperText Markup Language Declarative language Defines structure by using tags 20

The languages of the web Client side HTML HyperText Markup Language Declarative language Defines structure by using tags Examples of tags: : defines a paragraph of text : defines a virtual block : defines an anchor to a hyperlink : defines an image : defines a table … (full list: 21

The languages of the web Client side CSS Cascading Style Sheets Specify visual attributes for the HTML elements Identify elements by tags, classes or ids 22

The languages of the web Client side JavaScript Allow code to be run on the user’s browser Dynamically interacts with the webpage elements 23

The languages of the web Client side JavaScript Allow code to be run on the user’s browser Dynamically interacts with the webpage elements Nothing to do with Java... jQuery Popular library to facilitate common JavaScript operations 24

The languages of the web Server side Even more options PHP, Ruby, Python, Java, C#, JavaScript... Code doesn’t interact with browser 25

Agenda  Web History  Network Architecture  Types of Server  The languages of the web  Protocols  API 26

Protocols Define the rules of communication between two parts Popular protocols of the web: HTTP HTTPS FTP BitTorrent 27

Protocols HTTP HyperText Transfer Protocol Used to exchange hypermedia documents between two machines Requests for data are based on methods GET POST PUT DELETE 28

Agenda  Web History  Network Architecture  Types of Server  The languages of the web  Protocols  API 29

API Remote services are connected using protocols Web applications normally use HTTP The API also specifies the input/output format JSON, XML... Examples: Facebook: Twitter: Youtube: Instagram: 30

References of-web-design of-web-design