A Simple Introduction to Web Applications Robert May 

What Happens When You Visit A Website 

Request and Response Request http://twitter.com/robotmay Response HTML, CSS, JavaScript, Images User Web Browser Server Ruby Database 

The Web Browser 

What's a Web Browser? ● A web browser performs your requests for web pages ● It then turns the data returned into what you see ● The main browsers are: ○ Apple Safari ○ Google Chrome ○ Microsoft Internet Explorer ○ Mozilla Firefox ○ Opera 

How Your Web Browser Knows What To Do HTML, CSS, JavaScript 

What is HTML? ● HyperText Markup Language ● Not a programming language ● A structure for data which web browsers understand ● The browser turns HTML into what you see on the page ● Tells the browser how the page is structured 

HTML Tags A HTML tag usually has a start and an end, and has a name relevant to its content: Rails Girls Bristol is Super Awesome This tells the web browser that the text between those two tags is the title for the current page. 

Attributes Tags can also have attributes inside the tag, which have some special abilities. Here's how you embed an image in the page: The 'src' attribute tells the browser where to find the image to embed in the page. Some tags, like , don't need a closing tag. 

A Simple HTML Document Rails Girls Bristol is Super Awesome 

A Simple HTML Document 

What is CSS? ● Cascading Style Sheets ● Also not a programming language ● Tells the web browser how the page looks ● Targets the tags in your HTML ● Allows you to define shapes, positions, colours, fonts etc 

CSS Selectors Your CSS needs to target the relevant elements. If you wanted to target every image on the page, you could do: img { border: 10px solid blue; } You can also target based on classes or IDs. If you had a tag with an ID like:

Wibble

You could then target just that element by using its ID with a hash symbol: #super-awesome-quote { font-weight: bold; } 

CSS Selectors An ID should be unique on a page, but if you need to specially target multiple items you can use classes. A class is defined in the HTML like this:

Da ba dee da ba di

Then if we want to affect every "p" tag with the "blue" class, we can do this: p.blue { color: blue; } 

Styling Our Simple HTML Document Rails Girls Bristol is Super Awesome img { border: 10px solid blue; } #super-awesome-quote { font-weight: bold; }

Wibble



Styling Our Simple HTML Document 

What is JavaScript? ● JavaScript is a programming language, which runs in your browser ● Lets you add interactivity, among other things, to your site ● Used for anything from dropdown menus to automatically updating content to full-fledged games or applications 

The Server 

What's a Server? ● A server is just a computer which provides a service ● It might host a website, or emails, or chat networks ● The internet is a large network of servers ● Networks allow servers to communicate with each other ● Rails apps are served via a Web Server 

What The Web Server Does 

What is a Static Site? 

A Static Site displays the same content for every request The server does nothing clever, it just returns .html files 

What is a Dynamic Site? 

A Dynamic Site generates the HTML based on the request Visitors to the site can be given different content, e.g. "Hello Rob". This is how most websites work these days 

How the server responds to a request Static 1. Receives the request for a page, e.g. /about.html 2. Looks for a file called about.html in the site folder 3. Returns the contents of that file as the response Dynamic 1. Receives the request for a page, e.g. /about 2. Passes the request to the application, in our case the Ruby on Rails app 3. Rails figures out what you were looking for and generates the relevant HTML 4. The server returns the HTML as the response 

What can we do with a dynamic site? ● Let users sign up/in ● Customise the website for each user ● Automatically update with new content ● Process forms ● Send emails ● Upload files ● Other clever things 

Ruby & Ruby on Rails And how they fit into all of this 

What is a programming language? ● A programming language is a way of instructing a machine on what to do ● It allows us to manipulate data and control behaviour ● There are hundreds, if not thousands, of different programming languages ● (Nearly) every language is good for something ● Many of them are similar, and learning one will make it easier to learn more However, we're concentrating on one particular language today... 

Ruby! ● Ruby is a programming language ● It's designed to make programming fun and enjoyable ● It's generally easy to read and understand what's going, for example: 3.times do puts "Rails Girls is rad" end 

Ruby Gems ● Gems are Ruby code you can include into your own code ● Save time by using the code others have already written ● Want to upload images? Don't build your own image upload system; install 'carrierwave', 'dragonfly', or 'paperclip' 

Ruby on Rails ● Ruby on Rails is an application framework ● It's a Ruby Gem ● It helps you build complicated web apps ● It does a lot of the boring stuff you don't want to have to build every time ● It has a set structure to encourage everybody to work in a similar way 

Now it's your turn! After tea 

Any Questions?