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

1. The web and
programming:
an introduction
Simple, short and friendly

2. 3 basic question
What 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. 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. (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. 2) The broswers sends a “GET” request
to the server
Hey, I need info Just a moment
about Rails Girls ...
HTTP request GET
Host: railsgirls.com
j
your computer
j
host server for
railsgirls.com

6. 3) The servers respons with a web page,
written in HTML language
Aha! Found it!
response in
HTML language
j
Let me see what
tvoj računalnik
j
this looks like... host server for
railsgirls.com

7. 4) The web browser makes sure the web site
is displayed correctly
Ta-da!
Isn’t this a nice
web site?

8. So, what are we
going to work on today?
j
A web app for
collecting ideas

9. What will the app look like
in our browser?

10. Hmm... what are
web apps?
And what are
web pages?

11. simplesushi.com
I want sushi!
j
j
web page
Octocat sushi.html
Photo by: melanie_hughes

12. sushi.html
is as it is!
simplesushi.com
But ... I don’t
eat fish ...
j
j
static
sushi.html web page
Octocat

13. What about fancysushi.com
here? Can I get a sushi
without fish?
j
Octocat

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. web app
on the server
j
fancysushi.com
j
Here’s your
Octocat j personalized sushi.
sushi.html Would you like a
different one?
the result is another
web page

16. web app
on the server
j
fancysushi.com
j
Octocat j
sushi.html
however it is now a
dynamic web page,
tailored to the user

17. web app
In the real world ... on the server
j
facebook.com
j
Octocat
j
that’s why Facebook has
different content for each of us

18. If we want to
build web apps ...

19. If we want to
build web apps ...
j
We need to be able to talk to
the sushi chef on the server

20. Ruby is one of the programming
languages 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. 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. Simple example
Let’s use irb = Interactive RuBy
“Rails Girls”

23. irb examples
"Rails Girls" # strings
2+2 # integers
2*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".reverse
ime = "Rails Girls" # to simplify work, we can store objects into variables
ime.length # same method as before used on a variable, same result
ime.reverse
ime.upcase
ime.downcase
ime + ime # variables can also be combined, just like before

24. Simple example
Let’s save a program into a .rb file for easy access
Sublime Text 2 Terminal

25. simple.rb
puts “Rails Girls”

26. ime.rb

27. quiz.rb

28. Even the big, scary dragon
is made out of simple Lego blocks!
Photo by: themickeyd

29. Bonus tip: learn programming
at home with:
http://tryruby.org
http://www.codeschool.com
http://www.codecademy.com

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. We’ll build today’s app
with Rails ...

32. ... the app will be made with different text
files with Ruby, HTML and other code

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 users
Photo by: Michael Kappel

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. 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.