Web Design Concepts

курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн
уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET
програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезания
курсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране
free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране
безплатен курс "Качествен програмен код"
безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно

Web Design Concepts
Web Design 101

Nikolay Kostov
Technical Trainer
http://www.Nikolay.IT
Telerik Web Design Course
html5course.telerik.com

курсове и уроци по програмиране, уеб дизайн – безплатно
курсове и уроци по програмиране – Телерик академия
уроци по програмиране и уеб дизайн за ученици
програмиране за деца – безплатни курсове и уроци
безплатен SEO курс - оптимизация за търсачки
курсове и уроци по програмиране, книги – безплатно от Наков
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
free C# book, безплатна книга C#, книга Java, книга C#
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
форум програмиране, форум уеб дизайн
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET
ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
алго академия – състезателно програмиране, състезания
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиране
C# курс, програмиране, безплатно
Table of Contents
 Web Design

 Web Sites and Web Applications

 Web 1.0, 2.0, 3.0

 Web Browsers and Layout Engines
 Hardware Servers

 Web Servers

 Client-Server Architecture

 3-Tier / Multi-Tier Architectures

2


Web Design
What is Web Design?

Web Design
 Set of the processes for creating of a Web Site

 Planning – management of the requirements
 Done by managers
 Design – designing a UI that matches the
requirements
 Done by graphical designers
 Implementation – implementing the design and
writing the HTML/CSS/JavaScript code
 Done by Web Front-end developers


Web Sites and
Web Applications

5

Web Site
 Collection of related web pages containing
web resources (web pages, images, videos,
CSS files, JS files or other digital assets)
 Common navigation between web pages
 A website is hosted on at least one web server

 Accessible via a network (such as the Internet)

 All publicly accessible websites collectively
constitute the World Wide Web

6

Web Page
 Document or information resource that is
suitable for the World Wide Web
 Can be accessed through a web browser and
displayed on a monitor or mobile device
 This information is usually in HTML or XHTML
format, and may provide navigation to other
web pages via hypertext links
 Web pages frequently refer to other resources
such as style sheets (CSS), scripts (JavaScript)
and images into their final presentation
7

Web Application
 Next level web sites

 High interactivity

 High accessibility (Cloud)
 AJAX, Silverlight, Flash, Flex, etc.
 Applications are usually broken into logical
chunks called "tiers", where every tier is
assigned a role
 Desktop-like application in the web browser
 Web applications on desktop (Windows 8)
8


Web 1.0, 2.0, 3.0

9

Web 1.0
 Old media model

 It all started with a simple idea

 Just put content in the web
 Low content variety

 Limited content
 Limited creativity
 Limited business
 10 000 editors serve 500 000 000 internet users

Web 1.0

11

Web 2.0

12

Web 2.0
 User generated content

 New platforms allow users to generate content
themselves (YouTube, Wiki, Facebook, Blogs)
 Everyone can publish!

 Web 2.0 can be described in 3 parts:

 Rich Internet application (RIA)
 Web-oriented architecture (WOA)
 Feeds, RSS, Web Services, etc.
 Social Web
13

Web 2.0

14


Web 3.0

15

Web 3.0
 Web 3.0 is where the computer is generating
new information, rather than humans.
 All the new web 3.0 concepts can be divided
into 4 parts:
 Semantic web
 Artificial intelligence
 Personalization
 Mobility

Web 3.0
 Semantic web

 Changing the web into a language that can be
read and categorized by the computers rather
than humans
 Makes search engines smarter
 Enables digital collection of all
your images, blog post,
videos, etc.
 Disadvantage:
it is hard to be implemented
17

Web 3.0
 Artificial intelligence
 Extracting meaning from the way people
interact with the web
 Examples: Google suggest, Google translate
 Personalization

 Contextualizing the web based on the people
using it
 Different content for different users

18

Web 3.0
 Mobility

 Everything
 Web sites
 Information
 Services
 Everywhere
 You only need your
phone or tablet
 All the time
19


Web Browsers and
Layout Engines

20

Web Browsers
 Program designed to enable users to access,
retrieve and view documents and other
resources on the Internet
 Main responsibilities:

 Bring information resources to the user (issuing
requests to the web server and handling any
results generated by the request)
 Presenting web content (render HTML, CSS, JS)
 Capable of executing applications within the
same context as the document on view (Flash)
21

Layout Engines
 Software component that displays the
formatted content on the screen combining:
 Marked up content (such as HTML, XML, image
files, etc.)
 Formatting information (such as CSS, XSL, etc.)
 It "paints" on the content area of a window,
which is displayed on a monitor or a printer
 Typically embedded in web browsers, e-mail
clients, on-line help systems or other
applications that require the displaying (and
editing) of web content 22

Layout Engines
and Web Browsers
 Trident-based

 Internet Explorer, Netscape, Maxthon, etc.
 Gecko-based

 Firefox, Netscape, SeaMonkey, etc.
 WebKit-based

 Chrome, Safari, Maxthon, etc.
 Presto-based

 Opera
23

User Agent Strings

 Identify web browsers and their version
 Can have some additional information like layout
engine, user's operating system, etc.
 Example:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1)
Gecko/20100101 Firefox/7.0.1

 Web browser: Firefox 7.0.1
 Rendering (layout) engine: Gecko/20100101
 Operating system: 64-bit Windows 7
 WOW64 = Windows-On-Windows 64-bit
 Windows NT 6.1 = Windows 7
24


Hardware Servers

25

Hardware Servers
 Physical computer (a hardware system)
dedicated to running one or more such services
 Servers are placed in collocation centers
 The server may be:

 Database server
 File server
 Mail server
 Print server
 VPS servers


Web Servers
Apache, IIS, nginx, lighttpd, etc.

27

What Do the Web Servers Do?
 All physical servers have hardware
 The hardware is controlled by the operating
system
 Web servers are software products that use
the operating system to handle web requests
 These requests are redirected to other
software products (ASP.NET, PHP, etc.),
depending on the web server settings

28

Web Servers Market Share 2011
 Apache

 60.31%
 IIS (by Microsoft)

 19.34%
 nginx (by Igor Sysoev)

 7.65%
 GWS (by Google)

 5.09%
 lighttpd

 0.60%
29


Client-Server Architecture
The Classical Client-Server Model

30

 The client-server model consists of:

 Server – a single machine or cluster of machines
that provides web applications (or services) to
multiple clients
 Examples:
 Web server running PHP scripts or ASP.NET pages
 IIS based Web server
 WCF based service
 Services in the cloud

31

 The client-server model consists of:

 Clients –software applications that provide UI
(front-end) to access the services at the server
 Examples:
 Web browsers
 WPF applications
 HTML5 applications
 Silverlight applications
 ASP.NET consuming services

32

The Client-Server Model

Client
Machine

Mobile
Client

Server

Desktop
Client

33

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) 34


3-Tier / Multi-Tier
Architectures
Classical Layered Structure of Software Systems

The 3-Tier Architecture
 The 3-tier architecture consists of the
following tiers (layers):
 Front-end (client layer)
 Client software – provides the UI of the system
 Middle tier (business layer)
 Server software – provides the core system logic
 Implements the business processes / services
 Back-end (data layer)
 Manages the data of the system (database /
cloud)
36

The 3-Tier Architecture Model
Data Tier Middle Tier Client Tier (Front-End)
(Back-End) (Business Tier)
Client
Machine

Mobile
Client
Database
Business
Logic
Desktop
Client

37

Typical Layers of the Middle Tier

 The middle tier usually has parts related to the
front-end, business logic and back-end:

Presentation Logic
Implements the UI of the application (HTML5, Silverlight, WPF, …)

Business Logic
Implements the core processes / services of the application

Data Access Logic
Implements the data access functionality (usually ORM framework)

38

Multi-Tier Architecture
HTML

ASP.NET
PHP

WCF

ORM

Database
39

Web Design Concepts

http://html5course.telerik.com

Web Design Concepts

More Related Content

Viewers also liked

Similar to Web Design Concepts

More from Doncho Minkov

Web Design Concepts