Web Technologies 101

Developer: Edd Parris | edd@nixonmcinnes.co.uk | 01273 764016 | @empika

HighlightsOverview

Part 1: How does the Internet work?A basic overview of what happens when you look at a page on the Internet.

Part 2: Let's set up a web server.

Part 3: The anatomy of a web page.

Part 4: Some other cool things.

Part 1: How does the Internet work?Let's walk through the steps of what happens when we look at a website in a browser.

I like to think that the whole thing is a bit like ordering food in a restaurant.

Part 1: How does the Internet work?A fancy restaurant The Internets

You choose a restaurant to eat at. A website to look at.

You look at a menu and choose a dish. Choose which webpage you want to see.

You then ask the waiter for it for that item. Click a link or enter an address in your browser.

The waiter then goes to the kitchen and asks the chef to cook it for you.

Your browser contacts the server and asks for the page.

The chef cooks your food. The server fetches or creates the page.

Once ready, the waiter returns to your table and delivers your chosen food.

The server returns your page and your browser displays it.

Part 1: How does the Internet work?When you enter the address of a website to look at, firstly a DNS look up is made.

DNS stands for 'Domain Name System' and is like a giant telephone directory for the internet.

Much like peoples names, we can easily remember Google.co.uk or Channel4.com, but it is a lot harder to remember a telephone number or the Internet equivalent, an Internet Protocol address (IP address).For example, 74.125.230.114

Find out more: http://j.mp/wt-101-dns

Part 1: How does the Internet work?Once your computer has the IP address, it can then go out into the Internet and contact the server, requesting the page that you are asking for.

Part 1: How does the Internet work?So we ask the server for a specific page.

The server then responds with our page, or if the page we asked for doesn't exist we will be told that so.

Either way, our browser will then display the results.

Part 1: How does the Internet work?

You choose a restaurant to eat at. A website to look at.

You look at a menu and choose an item. Choose which webpage you want to see.

You then ask the waiter for it for that item. Click a link or enter an address in your browser.

The waiter then goes to the kitchen and asks the chef to cook it for you.

Your browser contacts the server and asks for the page.

The chef cooks your food. The server fetches or creates the page.

Once ready, the waiter returns to your table and delivers your chosen food.

The server returns your page and your browser displays it.

Let's recap...

Part 2: Let's set up a web server

Part 2: Let's set up a web server

Imagine a kitchen in a restaurant. It's full of fridges, ovens, hobs, chefs and ingredients. All the different elements are used to cook tasty food, which is then sent on its way to the customer.

A server is a bit like a kitchen, there are various components used to construct a webpage and deliver it to the user.

Part 2: Let's set up a web serverFirst we need a server. (Find out more: http://j.mp/wt-101-server) Next we need a domain name and IP address.

And then we need some files to put on our server for people to look at.

Part 3: The anatomy of a web page

No we have a server set up, let's see what an actual web page is made of and how to make one.

Webpages are constructed from 3 basic building blocks, these are:

HTML CSS(Cascading Style Sheets) Javascript

Part 3: The anatomy of a web pageSo what do these things do?

HTML:Creates page structureDisplays ImagesDisplays text and linksLoads the CSS and Javascript files

CSS:Controls the layout of the page along with the HTMLControls the look and feelColorsFontsDecoration (borders, underline, etc)

Javascript:Added interactivitySend and receive extra data without reloading the page

Part 3: The anatomy of a web page

Part 3: The anatomy of a web page

Lets have a look at all of this in practice.Get the files here: https://github.com/empika/Web-tech-101-files

Part 4: Some other cool things

Here is a list of a million other interesting things we could talk about or you could investigate yourselves:

History of the Internet/webTim Berners-LeeSecurity and PrivacyScalabilityInternationalizationAPI'sAJAXHTML 5CSS 3Server side technologiesData push and realtime dataBrowser advancement

MobileCloud computingNetbooks and thin clientsSemantic webThe web of thingsMessage queuesIPv6

Thank you for your time!

Thank you very much.

I have been Edward Parris.

This has been the Internet.

I hope you enjoyed the presentation.