Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Simple Introduction to Web Applications

Simple Introduction to Web Applications

A simple introduction to web apps for Rails Girls Bristol, 2013.

If you want to use these slides for anything else then let me know; the original is a Google Presentation and I'm happy to provide you with a copy to adapt as you choose.

Robert May

June 15, 2013
Tweet

More Decks by Robert May

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. HTML Tags A HTML tag usually has a start and

    an end, and has a name relevant to its content: <title>Rails Girls Bristol is Super Awesome</title> This tells the web browser that the text between those two tags is the title for the current page.
  4. Attributes Tags can also have attributes inside the tag, which

    have some special abilities. Here's how you embed an image in the page: <img src="http://i.imgur.com/rWVl4dc.gif"> The 'src' attribute tells the browser where to find the image to embed in the page. Some tags, like <img>, don't need a closing tag.
  5. A Simple HTML Document <html> <head> <title>Rails Girls Bristol is

    Super Awesome</title> </head> <body> <img src="http://i.imgur.com/rWVl4dc.gif"> </body> </html>
  6. 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
  7. 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: <p id="super-awesome-quote">Wibble</p> You could then target just that element by using its ID with a hash symbol: #super-awesome-quote { font-weight: bold; }
  8. 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: <p class="blue">Da ba dee da ba di</p> Then if we want to affect every "p" tag with the "blue" class, we can do this: p.blue { color: blue; }
  9. Styling Our Simple HTML Document <html> <head> <title>Rails Girls Bristol

    is Super Awesome</title> <style type="text/css"> img { border: 10px solid blue; } #super-awesome-quote { font-weight: bold; } </style> </head> <body> <img src="http://i.imgur.com/rWVl4dc.gif"> <p id="super-awesome-quote">Wibble</p> </body> </html>
  10. 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
  11. 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
  12. A Static Site displays the same content for every request

    The server does nothing clever, it just returns .html files
  13. 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
  14. 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
  15. 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
  16. 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...
  17. 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
  18. 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'
  19. 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