Fundamentals of Web for Non-Developers
-
Upload
lemi-orhan-ergin -
Category
Education
-
view
115.703 -
download
0
Transcript of Fundamentals of Web for Non-Developers
![Page 1: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/1.jpg)
Fundamentals of WebHigh level overview of web concepts
Lemİ Orhan ErgİnPrincipal software Engineer @ Sony
guide for non-developers
![Page 2: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/2.jpg)
The aim of this training is to let you•know concepts of web and web applications•understand how web based software works•understand the technical discussions better•and answer your questions:)
![Page 3: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/3.jpg)
agenda
•Web ConceptsHttp/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/Response, Responsive Web Design
•InfrastructureServers, Databases, Load Balancers
![Page 4: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/4.jpg)
web concepts
![Page 5: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/5.jpg)
The Internet is a global system of interconnected computer networks
www, email, social networking, file transfer, online chat, commerce, game playing, teleconferencing,
VoIP, video on demand etc.
Internet is tangible network of computers sharing/exchanging information with the help of
PROTOCOLS.
Internet
![Page 6: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/6.jpg)
ProtocolProtocol is a form of etiquette.
Internet Protocols are the standards, designed to specify how computers interact and exchange
messages over internet.
Protocols usually specifies: The format of the messages &
how to handle errors
![Page 7: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/7.jpg)
Open systems ınter-connection (OSI) modelis a conceptual model that describes the internal
architecture of a communications system by splitting its components into abstraction layers.
![Page 8: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/8.jpg)
tcp modelThis model is a condensed version of the OSI model and only has four layers. It is considered as standard
around internet.
![Page 9: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/9.jpg)
http modelIt stands for Hypertext Transfer Protocol.
HTTP provides a set of rules and standards that govern how information is transmitted on the World
Wide Web.
http://www.sony.co.uk
![Page 10: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/10.jpg)
http modelHTTP is a client-server protocol by which two
machines communicate using a reliable, connection-oriented transport service such as the TCP.
Opens a tcp/ip connection via socketsTransmits the request for a document
Waits for a reply from the serverOnce the response is arrived, the socket is closed
Request
Response
![Page 11: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/11.jpg)
http model
There is no memory between client connections. Pure HTTP server treats every request as if it was
brand-new (i.e. Stateless)
To load faster, Http pages are stored in your computer and internet caches. You don’t have control
over some caches like the ones in proxies.
![Page 12: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/12.jpg)
PORT NUMBERSA port is an endpoint to a logical connection and the
way a client program specifies a specific server program on a computer in a network
Port numbers range from 0 to 65536, but the first 1024 are reserved for privileged services.The other ports could be used by any application.
HTTP: 80
SSH: 22
TELNET: 23
![Page 13: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/13.jpg)
Privacy: Anyone can see the contentIntegrity: Anyone can alter the contentAuthentication: Authentication is sent in clear formStateless: Need to maintain information across multiple request-responses
http Limitations
![Page 14: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/14.jpg)
HTTPS stands for Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL.
SSL acts like a sub layer under regular HTTP application layering.
HTTPS encrypts an HTTP message prior to transmission and decrypts a message upon arrival.
httPS
![Page 15: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/15.jpg)
HTTPS by default uses port 443 as opposed to the standard HTTP port of 80.
URL's beginning with HTTPS indicate that the connection between client and browser is encrypted using SSL
SSL transactions are negotiated by means of a key based encryption algorithm between the client and the server, this key is usually either 40 or 128 bits in strength (the higher the number of bits the more secure the transaction).
httPS
https://login.yahoo.com/config/login_verify?src=ym
![Page 16: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/16.jpg)
SSL HANDSHAKE
![Page 17: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/17.jpg)
HTTP server is implemented by servers
Each client-server transaction consists of 3 main parts:1) Request/Response line 2) Header information 3) The body
http model
![Page 18: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/18.jpg)
there are several ways to send a request
GET POST
PUTDELETE
HEAD
OPTIONS
TRACE
CONNECT
![Page 19: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/19.jpg)
HTTP METHOD: GET•Retrieval of information•Server sends a representation of a resource to client
![Page 20: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/20.jpg)
HTTP METHOD: POST•The body of the request is accepted as a resource•Mainly the data of forms are submitted by post
![Page 21: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/21.jpg)
Web Content
Scripts (javascript)
Styles (css)
Pages (html)
Images (jpg, png, gif)
Web content is sent from server and browsers renders and displays that is programmed.
Data* (xml, json)
![Page 22: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/22.jpg)
Web Content: HTMLHyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.
![Page 23: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/23.jpg)
Web Content: JavascriptsJavaScript (JS) is an interpreted computer programming language. It was
originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
![Page 24: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/24.jpg)
Web Content: CSSCascading Style Sheets (CSS) is a style sheet language used for
describing the presentation semantics (the look and formatting) of a document written in a markup language.
![Page 25: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/25.jpg)
Web Content: IMAGESAny image could be displayed in an html page. It is important to keep
the size of images small for the sake of performance.
![Page 26: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/26.jpg)
Web Content: XMLExtensible Markup Language (XML) is a markup language that defines a set of
rules for encoding documents in a format that is both human-readable and
machine-readable.
![Page 27: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/27.jpg)
Web Content: JSONJavaScript Object Notation (JSON), is a text-based open standard designed for
human-readable data interchange
![Page 28: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/28.jpg)
Server
Browser
InfrastructureServer infrastructure could be that simple!
![Page 29: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/29.jpg)
Load Balancer
Web Servers
Load Balancer
Application Servers
Database Servers
Proxy
Browser
Servers in the same zone do not
interact over proxy
ZoneThe content can be cached in any
of the levels
Central Cache Servers
The infrastructure could be simpler
than here
Server infrastructure could be much more
complex too
![Page 30: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/30.jpg)
Client
request - response
You request a web page and get data
Server
Client
Browser caches the content
ServerCache
200
Client
You request the same web page with last modified date of the cached content
Server
304
Client
Since server says “content has not changed”, the data in cache is loaded
ServerCache
1
2
3
4
Server does not return content. It just returns status code 304
Server returns content with code 200
![Page 31: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/31.jpg)
CachingAny content can be cached in any infrastructural node
•Scripts (javascript)•Styles (css)•Pages (http pages)•Images •Animations (flash)
![Page 32: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/32.jpg)
Load Balancer
Web Servers
Load Balancer
Application Servers
Database Servers
Proxy
Browser
Zone
Central Cache Servers
Returns cached scripts, styles and content from browser cacheRefresh By f5
Cache-‐Control: no-‐cache // HTTP 1.1Pragma: no-‐cache // HTTP 1.0Expires: Sat, 26 Jul 1988 05:00:00 GMT // in past
Asks for content if cache is not set
![Page 33: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/33.jpg)
Load Balancer
Web Servers
Load Balancer
Application Servers
Database Servers
Proxy
Browser
Zone
Central Cache Servers
Refresh By CTRL+f5
Asks for content. Browser cache is not used.
![Page 34: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/34.jpg)
Load Balancer
Web Servers
Load Balancer
Application Servers
Database Servers
Proxy
Browser
Zone
Central Cache Servers
cache on server side
Cache could be on server side and needs to be cleaned either
automatic or manually
![Page 35: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/35.jpg)
ajax
Acronym for Asynchronous JavaScript and XML
It is a web development technique used on the client side to create asynchronous web applications.
![Page 36: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/36.jpg)
ajaxLet’s see how ajax works. Fill the
following text area.
![Page 37: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/37.jpg)
ajaxWrite a text and press the button
![Page 38: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/38.jpg)
ajaxPage is not refreshed. A new text
appears below the entry area.
Let’s look at how it works
![Page 39: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/39.jpg)
ajaxPage is initially loaded to
your machine
Source code of the page can be displayed within
browser
![Page 40: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/40.jpg)
HTML Code
Document Object model
ajax
![Page 41: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/41.jpg)
ajax
When you click on the button, web page calls the
server from client site (i.e. from your browser)Server
Browser
![Page 42: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/42.jpg)
ajaxServer sends new data as response. The data is put to object graph of the page at runtime.
![Page 43: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/43.jpg)
ajaxObject graph is changed. The new data is
displayed on browser. But you cannot see the new data in the source code of the page.
You can trace the response of server via plugins like FireBug
![Page 44: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/44.jpg)
CookiesA cookie, also known as an HTTP cookie, web cookie, or browser cookie, is a small piece of data sent from a
website and stored in a user's web browser while a user is browsing a website.
![Page 45: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/45.jpg)
Usage of Cookies
•Session Management•Shopping Cart, Authentication
•Personalization•Remember me, Preferences
•Tracking & Analytics•Ads, Browsing History, Analytics, Tracking
![Page 46: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/46.jpg)
Cookie ContentA web browser is expected to be able to store at least 300 cookies of 4 kb each, and at least 20 cookies per
server or domain.
•Cookie domain•Path•Expiration time or maximum age•Secure flag•HttpOnly flag.
•Name–value pair Data to send to server
Data to be used by browsers to determine when to delete a cookie, block a cookie or accept a cookie
![Page 47: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/47.jpg)
Setting CookiesCookies can not only be set by server. These can be set by Javascript in client’s browsers (if cookie is not marked as HTTPOnly).
![Page 48: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/48.jpg)
FormsAn HTML form on a web page allows a user to enter data that is sent to a server for processing.
![Page 49: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/49.jpg)
Forms
Forms can be generated in several ways
Server
Browser
Client Side
Server
Browser
Server Side
by programming languagesby javascript editing DOM
![Page 50: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/50.jpg)
Form ValidationForms can be validated in client side via javascript
and in server side by application.
Server Browser
Please note that validation on client side could be bypassed easily
![Page 51: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/51.jpg)
Responsive web design
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and
scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
http://discover.store.sony.com/sportswalkman/http://www.slideshare.net/bytte/responsive-web-design-10389263
![Page 52: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/52.jpg)
HTML5 vs FLASHWeb browsers cannot render Flash media
themselves, instead it is rendered primarily using the proprietary but freely available Adobe Flash Player
http://sixrevisions.com/html/html5-infographics/http://venturebeat.com/2012/01/31/html5-versus-flash-infographic/
All web browsers support HTML and other Web standards to various degrees.
![Page 53: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/53.jpg)
HTML5 vs FLASHIt’s time for reading some code
http://charag.com/client/eagleriverdaycamp/v2/eagle.html
http://citwings.com/phillips_locked_room_game.html
HTML5 Animation
Flash Animation
![Page 54: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/54.jpg)
References
http://www.slideshare.net/simplyharshad/http-vs-httpsHTTP vs HTTPS
![Page 55: Fundamentals of Web for Non-Developers](https://reader034.fdocuments.in/reader034/viewer/2022051520/58f9acc5760da3da068b9194/html5/thumbnails/55.jpg)
Lemİ orhan ergİ[email protected]
@lemiorhan
@lemiorhan
agilistanbul.com
@lemiorhan
LINKE
DIN
TWITT
ERSL
IDES
HARE
BLOG
GER
Principal Software Engineer @ SonyFounder & Author @ agilistanbul.com