The web and programming: an introduction - Simple, short and friendly

8,926 views

Published on

An introduction to web and web programming for the Rails Girls Ljubljana workshop.

More about the presentation: http://ialja.blogspot.com/2012/12/explaining-web-and-web-programming-with.html

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,926
On SlideShare
0
From Embeds
0
Number of Embeds
1,045
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The web and programming: an introduction - Simple, short and friendly

  1. 1. The web and programming:an introduction Simple, short and friendly
  2. 2. 3 basic questionWhat are web apps and how do they work?What is Ruby, how is it connected to Rails?What is Rails and what can we use it for?
  3. 3. How does the web work?• Let’s take a look at an example: - What happens when I type railsgirls.com into my web browser?
  4. 4. (109.74.202.152) 1) The web browser looks up the IP address of the web site using DNS I want to know more about Wait, I need to find Rails Girls the address of the web server with that info.Avtor fotografije: Ed Yourdon
  5. 5. 2) The broswers sends a “GET” request to the serverHey, I need info Just a momentabout Rails Girls ... HTTP request GET Host: railsgirls.com j your computerj host server for railsgirls.com
  6. 6. 3) The servers respons with a web page, written in HTML language Aha! Found it! response in HTML language jLet me see what tvoj računalnikjthis looks like... host server for railsgirls.com
  7. 7. 4) The web browser makes sure the web site is displayed correctly Ta-da! Isn’t this a nice web site?
  8. 8. So, what are wegoing to work on today? j A web app for collecting ideas
  9. 9. What will the app look like in our browser?
  10. 10. Hmm... what are web apps? And what are web pages?
  11. 11. simplesushi.com I want sushi! j j web page Octocat sushi.htmlPhoto by: melanie_hughes
  12. 12. sushi.html is as it is! simplesushi.com But ... I don’t eat fish ... jj static sushi.html web pageOctocat
  13. 13. What about fancysushi.com here? Can I get a sushi without fish?jOctocat
  14. 14. web app on the server What about j fancysushi.com here? Can I get a sushi without fish? j Sure, Octocat, our sushi chef Octocat can adjust!Photo by: iwillbehomesoon
  15. 15. web app on the server j fancysushi.comj Here’s yourOctocat j personalized sushi. sushi.html Would you like a different one? the result is another web page
  16. 16. web app on the server j fancysushi.comjOctocat j sushi.html however it is now a dynamic web page, tailored to the user
  17. 17. web app In the real world ... on the server j facebook.com j Octocat j that’s why Facebook hasdifferent content for each of us
  18. 18. If we want tobuild web apps ...
  19. 19. If we want tobuild web apps ... j We need to be able to talk to the sushi chef on the server
  20. 20. Ruby is one of the programminglanguages that we can use in web apps If you want me to do something, you’ve got to speak Ruby! Other popular languages: PHP, Python, Java, ASP.NET, Perl ...
  21. 21. How we can use Ruby to talk to a computer?As a starting point:1) We need to have Ruby installed (Installation Party!)2) Use Terminal or Command Prompt (Windows)
  22. 22. Simple exampleLet’s use irb = Interactive RuBy “Rails Girls”
  23. 23. irb examples"Rails Girls" # strings2+2 # integers2*2 # Ruby as a simple calculator"Rails " * 2 # multiplying a string"Rails " + "Girls" # combining two string"Rails" * "Girls" # multiplying strings doesn’t work"Rails Girls".length # but string do have their own useful methods"Rails Girls".reverseime = "Rails Girls" # to simplify work, we can store objects into variablesime.length # same method as before used on a variable, same resultime.reverseime.upcaseime.downcaseime + ime # variables can also be combined, just like before
  24. 24. Simple exampleLet’s save a program into a .rb file for easy access Sublime Text 2 Terminal
  25. 25. simple.rbputs “Rails Girls”
  26. 26. ime.rb
  27. 27. quiz.rb
  28. 28. Even the big, scary dragon is made out of simple Lego blocks!Photo by: themickeyd
  29. 29. Bonus tip: learn programming at home with: http://tryruby.orghttp://www.codeschool.com http://www.codecademy.com
  30. 30. What about Rails? Rails = Ruby on Rails = RoR= a framework, which makes sure we can easily use Ruby to build web apps = fast rails for Ruby on the web
  31. 31. We’ll build today’s app with Rails ...
  32. 32. ... the app will be made with different text files with Ruby, HTML and other code
  33. 33. Rails* apps have three basic building blocks MVC architecture = Model | View | Controller Controller = sushi chef accepts requests, makes all parts work as a whole Model = ingredients represents database data View = sushi the representation of the result,* And a lot of other web apps in different languages seen by usersPhoto by: Michael Kappel
  34. 34. Confused? No worries :) When programming: • Googling is a must; • copy-paste a valid method; • getting a working result is what really matters. P.S.: Practice makes perfect!
  35. 35. Let’s warm up before we make our own app: getting to know web technologies! My Bentobox Application: Designed by: Storage Logic Backend. Backend. How the application stores data. How the application works. Style and structure Frontend. How the application looks. Infrastructure Backend. How the application runs.

×