1 / 17

How websites work

How websites work. A brief introduction Andrew Locatelli Woodcock. About this session. My name is Andrew Woodcock and I am a Lead Software Design Engineer for Big Fish Games based in Cork

keran
Download Presentation

How websites work

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How websites work A brief introduction Andrew Locatelli Woodcock

  2. About this session • My name is Andrew Woodcock and I am a Lead Software Design Engineer for Big Fish Games based in Cork • Have worked as a software engineer for over 15 years in manufacturing, insurance and finance industries • This is the first of a planned series of introductory tech sessions

  3. In the beginning …

  4. Present day

  5. So how does it work? • Modern browsers understand HTML, CSS and JavaScript and the three combined produce modern, interactive websites • The browser asks the webserver that hosts the website for resources: often but not always a webpage • The webserver returns the requested resource and the browser displays it • The resource may already exist or it may be created on request by the webserver • The browser will then take care of acting on the resource, often by displaying it • Resources consist of, amongst other things: HTML, CSS, JavaScript, images and data. • But a website is more than this: it is a client-server application

  6. What is a client-server application? • Client-server refers to any software design or implementation where one or more clients consume services from one or more servers • Clear as mud, eh?! • In web terms: • the browser is the client because it consumes web pages generated by the webserver: it asks the webserver to serve it with web pages to display • And the webserver is the server because it serves requests from one or more clients: typically it reacts to requests rather than initiating them • But there are many other client-server designs, not just web: ATMs and Bank Networks, email clients and servers, etc.

  7. Client-server: the obligatory pretty picture …

  8. … and in words • When the client requires a resource such as a webpage, a request is sent to the webserver • This request travels all the way from the client to wherever the webserver is situated, possibly on another continent or the other side of the Atlantic • The webserver receives the request and either retrieves the resource if it already exists or creates it on the fly using a technology such as PHP. This may also involve fetching and persisting data from a database, calculating prices, checking user authorization, etc. • Once the webserver has the complete resource, it returns it all the way back to client, once again possibly over the Atlantic • Once the client receives the resource, it attempts to display it in a process called rendering: it combines the HTML, CSS, images, sound, etc. into a webpage displayed to the user. • If there is JavaScript, this will be interpreted (run) by the client as and when required within the page: when the user clicks on a button or submits a form for example • The voyage from client request all the way to the server and back to the client is known as a “round trip” and can be very expensive in terms of time

  9. Client-server: the web server in summary • At the most basic level, the webserver provides services to clients • It serves clients with resources including HTML, CSS and JavaScript • It fetches data from and persists data to a database or databases • It authenticates users and provides security features • It may also be responsible for creating resources as they are requested: generating a webpage that includes the current user’s name for example

  10. Client-server: the client in summary • A client is not just a browser: it could also be an Android or iPhone app for instance • All modern browsers understand HTML, CSS and JavaScript • HTML is a markup language. It tells the browser what to do but not how to do it • CSS is a technology that tells the browser how the page should look • JavaScript is a programming language that tells the browser how the page should behave.

  11. HTML • The name isn’t very important but stands for: Hypertext MarkupLanguage • HTML is the series of angle brackets you see when you right-click on a web page and select “View Source” • Based on <tags> and tells the browser what to do but does not dictate how to do it: this is both its strength and its weakness! • With a few exceptions, tags come in pairs: <tag></tag> with < … > signifying the start of the markup section and </ … > signifying the end • Text and HTML within a tag pair belong to that tag pair: <tag>All this belongs to tag<innerTag>and this belongs to tag and innerTag</innerTag></tag> • Valid HTML belongs to an HTML document: markup that must contain certain HTML tags in a specific order • The simplest valid HTML document is something like: <html> <head> <title>How websites work</title> </head> <body> <p>How websites work</p> </body> </html>

  12. CSS • Again the name is unimportant but stands for Cascading Style Sheets • It is (hopefully) responsible for making the webpage “pretty” • It describes how to arrange the page, what colours to use, background images, layers, etc. • It looks like: .theme_parts_list span { display: inline-block;} .theme_parts_list_hidden { visibility: hidden;} .theme_parts_list_background { width: 90px;} • It’s important because using CSS we can change the look and feel of a website independently from its content and its behaviour • Combined with JavaScript we can achieve some very impressive visual effects such as floating dialog boxes • Separating content from behaviour and look and feel also means we can better support accessibility features such as screen readers

  13. JavaScript • Has nothing to do with the Java programming language except looking vaguely similar and Java being the “in” technology when JavaScript was created in the mid 90s. They might as well have called it “ImHipTooScript” … • Allows the webpage to become “interactive” and react to events such as page load, button click, etc. • Is the driving force behind modern, responsive, interactive websites • It is run within the browser: it preserves bandwidth and uses the processing power of the client rather than the server and increases site responsiveness • Unfortunately, it is also interpreted differently by each browser: Internet Explorer especially is notoriously fickle and behaves differently from version to version • A website that works brilliantly with Safari, Chrome and Firefox may come crashing down when it encounters IE. IE6 is especially bad … a Ukrainian friend of mine used to refer to it as “IE Sick” which was a pretty accurate description • Simple example: <script type="text/javascript"> alert("Hello world!"); </script>

  14. So where does PHP come into it? • PHP is a server-side scripting language • This basically means that it is a programming language that is executed by the webserver before the webpage is returned • PHP code is placed within resources ending in the extension .php but it is never returned to the client: the webserver executes the PHP code in order to fetch or generate the resource that is returned to the browser. Resources as displayed by the browser in fact often don’t exist and are created each time the browser looks for it. • PHP code is between special tags: <?php … ?> • PHP code can be used to create webpages dynamically by generating HTML and JavaScript, fetching or persisting data and many other tasks • Example: <?php site_page::setPageLocationInfo(array('section'=>'checkout', 'subsection'=>'sub_cart', 'page'=>'empty_cart')); core_page::set_template("page.1col.html"); if($_SESSION['errors']) { $page->p->errors = $_SESSION['errors']; $_SESSION['errors'] = array(); } /* show page contents */ echo $page->templateInclude("empty.html.php"); ?>

  15. So what ..? • PHP code can be mixed in with HTML: <p>Hello <?php do some processing to get user name … ?></p>returns <p>Hello Andrew</p> to the client • PHP code can be used to generate HTML: <?php $user = SomeMethodToGetUserName(); echo “<p>Hello $user</p>”; ?>also returns <p>Hello Andrew</p> to the client • PHP code is never returned to the client, only the results of that code: it is invisible to the browser • That means that we can use PHP to perform tasks that are unsafe, difficult or impossible to do in the browser • It also means that we can dynamically tailor each webpage as it is requested: we can respond to the user, their purchasing history, their previous page views … in fact, pretty much anything

  16. So why JavaScript and PHP? • JavaScript runs in the browser and the browser is outside of our control: it has to be assumed to be a hostile, unsafe environment • PHP runs on the server which is most definitely inside our control and can be assumed to be a protected environment • But using JavaScript consumes client resources rather than server ones: our customers are performing the computing for us reducing our computing needs somewhat • JavaScript can also reduce round-trips to the server, again increasing website scalability and responsiveness and potentially reducing costs • But JavaScript can be subverted and modified so we can’t perform any security-sensitive work in JavaScript • PHP gives us the same flexibility but within a safe environment • So: use JavaScript to add cool functionality to the webpage and PHP to check the bank balance!

  17. So to sum up … • Clients ask for stuff • Servers supply it • Users pay for it • And the world goes round …

More Related