Your SlideShare is downloading. ×
6. Web Technologies Basics Part 1 - PHP & MySQL Web Development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

6. Web Technologies Basics Part 1 - PHP & MySQL Web Development


Published on

Basic concepts about Web Design, Web Sites and Web Applications …

Basic concepts about Web Design, Web Sites and Web Applications
Telerik Software Academy:
The website and all video materials are in Bulgarian.

This lecture discusses the following topics:

Web Sites and Web Applications
Web 1.0, 2.0, 3.0
Web Browsers
Hardware Servers
Web Servers
Client-Server Architecture
3-Tier / Multi-Tier Architectures
MVC (Model-View-Controller)
Service-Oriented Architecture (SOA)

Published in: Education, Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Technologies Basics Part 1 - ConceptsNikolay KostovTechnical Trainerhttp://nikolay.itTelerik Software
  • 2. Table of Contents Web Sites and Web Applications Web 1.0, 2.0, 3.0 Web Browsers Hardware Servers Web Servers Client-Server Architecture 3-Tier / Multi-Tier Architectures MVC (Model-View-Controller) Service-Oriented Architecture (SOA) 2
  • 3. Web Sites andWeb Applications
  • 4. 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 4
  • 5. 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 5
  • 6. Web Application Next level web sites High interactivity High accessibility (Cloud) AJAX, Silverlight, Flash, Flex, etc. Applicationsare 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) 6
  • 7. Web 1.0, 2.0, 3.0
  • 8. 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 8
  • 9. Web 1.0 9
  • 10. Web 2.0 10
  • 11. Web 2.0 User generated content New platformsallow 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 11
  • 12. Web 2.0 12
  • 13. Web 3.0
  • 14. 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 14
  • 15. 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 15
  • 16. 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 16
  • 17. Web 3.0 Mobility  Everything  Web sites  Information  Services  Everywhere  You only need your phone or tablet  All the time 17
  • 18. Web Browsers and Layout Engines 18
  • 19. 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) 19
  • 20. 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 Typicallyembedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content 20
  • 21. 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 21
  • 22. User Agent Strings Identify web browsers and their version Can have some additional information like layout engine, users 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
  • 23. Hardware Servers
  • 24. 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 24
  • 25. Web ServersApache, IIS, nginx, lighttpd, etc.
  • 26. What Do the Web Servers Do? All physical servers have hardware The hardware is controlled by the operating system Web serversare 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 26
  • 27. 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% 27
  • 28. Client-Server Architecture The Classical Client-Server Model 28
  • 29. Client-Server Architecture 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 29
  • 30. Client-Server Architecture 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 30
  • 31. The Client-Server Model Client Machine Mobile ClientServer Desktop Client 31
  • 32. 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) 32
  • 33. 3-Tier / Multi-Tier ArchitecturesClassical Layered Structure of Software Systems
  • 34. 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) 34
  • 35. The 3-Tier Architecture ModelData Tier Middle Tier Client Tier (Front-End)(Back-End) (Business Tier) Client Machine Mobile Client Database Business Logic Desktop Client 35
  • 36. 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) 36
  • 37. Multi-Tier Architecture HTML ASP.NET PHP WCF ORM Database 37
  • 38. MVC (Model- View-Controller)What is MVC and How It Works?
  • 39. Model-View-Controller (MVC) Model-View-Controller (MVC) architecture  Separates the business logic from application data and presentation Model  Keeps the application state (data) View  Displays the data to the user (shows UI) Controller  Handles the interaction with the user 39
  • 40. MVC Architecture Blueprint 40
  • 41. MVC-Based Frameworks .NET  ASP.NET MVC, MonoRail Java  JavaServer Faces (JSF), Struts, Spring Web MVC, Tapestry, JBoss Seam, Swing PHP  CakePHP, Symfony, Zend, Joomla, Yii, Mojavi Python  Django, Zope Application Server, TurboGears Ruby on Rails 41
  • 42. MVC and Multi-Tier Architecture MVC does not replace the multi- Controllers Views tier architecture (Business Logic) (Presentation)  Both are usually used together Model (Data) Typical multi- tier architecture Data Access Logic can use MVC  To separate logic, data and presentation 42
  • 43. Service-OrientedArchitecture (SOA)
  • 44. What is a Service? In the real world a "service" is:  A piece of work performed by a service provider  Provides a client (consumer) some desired result by some input parameters  The requirements and the result are known  Easy to use  Always available  Has quality characteristics (price, execution time, constraints, etc.) 44
  • 45. Service-Oriented Applications Service-oriented applications resemble the service-consumer model in the real world  Consist of service provider (server side) and service consumer (client part)  Typical examples are the RIA  Service providers provide some service  Service consumers access the services  Standard protocols are used like XML, JSON, SOAP, WSDL, RSS, HTTP, … 45
  • 46. What is SOA? SOA (Service-Oriented Architecture) is a concept for development of software systems  Using reusable building blocks (components) called "services" Services in SOA are:  Autonomous  Stateless business functions  Accept requests and return responses  Use well-defined, standard interface 46
  • 47. SOA Services Autonomous  Each service operates autonomously  Without any awareness that other services exist Stateless  Have no memory, do not remember state  Easy to scale Request-response model  Client asks, server returns an answer 47
  • 48. SOA Services (2) Communication through standard protocols  XML, SOAP, JSON, RSS, ...  HTTP, FTP, SMTP, RPC, MSMQ, ... Not dependent on OS, platforms, programming languages Discoverable  Service registries 48
  • 49. Web Technologies Basics курсове и уроци по програмиране, уеб дизайн – безплатно 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# курс, програмиране, безплатно
  • 50. Free Trainings @ Telerik Academy “PHP & MySQL Web Design" course academy-meeting Telerik Software Academy  Telerik Academy @ Facebook  Telerik Software Academy Forums 