the web and programming: an introduction - simple, short and friendly
DESCRIPTION
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.htmlTRANSCRIPT
![Page 1: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/1.jpg)
The web and programming:
an introductionSimple, short and friendly
![Page 2: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/2.jpg)
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?
![Page 3: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/3.jpg)
How does the web work?
• Let’s take a look at an example:- What happens when I type
railsgirls.com into my web browser?
![Page 4: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/4.jpg)
1) The web browser looks up the IP address of the web site using DNS
I want to know more about
Rails Girls
Avtor fotografije: Ed Yourdon
Wait, I need to find the address of the web
server with that info.
(109.74.202.152)
![Page 5: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/5.jpg)
2) The broswers sends a “GET” request to the server
HTTP request GETHost: railsgirls.com
Hey, I need info about Rails Girls
Just a moment ...
your computerhost server forrailsgirls.com
j j
![Page 6: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/6.jpg)
3) The servers respons with a web page, written in HTML language
response inHTML language
tvoj računalnikhost server forrailsgirls.com
j j
Aha! Found it!
Let me see what this looks like...
![Page 7: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/7.jpg)
4) The web browser makes sure the web site is displayed correctly
Ta-da! Isn’t this a nice
web site?
![Page 8: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/8.jpg)
So, what are we going to work on today?
A web app for collecting ideas
j
![Page 9: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/9.jpg)
What will the app look like in our browser?
![Page 10: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/10.jpg)
Hmm... what are web apps?
And what are web pages?
![Page 11: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/11.jpg)
Photo by: melanie_hughes
sushi.html
simplesushi.com
Octocat
jI want sushi!
web page
j
![Page 12: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/12.jpg)
sushi.html
simplesushi.com
Octocat
jBut ... I don’t
eat fish ...
staticweb page
j
sushi.html is as it is!
![Page 13: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/13.jpg)
fancysushi.com
Octocat
jWhat about
here? Can I get a sushi without fish?
![Page 14: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/14.jpg)
fancysushi.com
Octocat
j Sure, Octocat, our sushi chef
can adjust!
web app on the server
jWhat about here? Can I get a sushi
without fish?
Photo by: iwillbehomesoon
![Page 15: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/15.jpg)
fancysushi.com
Octocat
j
Here’s your personalized sushi.
Would you like a different one?
web app on the server
j
sushi.html
the result is anotherweb page
j
![Page 16: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/16.jpg)
fancysushi.com
web appon the server
j
however it is now a dynamic web page, tailored to the user
Octocat
j
sushi.html
j
![Page 17: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/17.jpg)
facebook.com
web appon the server
j
that’s why Facebook has different content for each of us
Octocat
j
jIn the real world ...
![Page 18: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/18.jpg)
If we want to build web apps ...
![Page 19: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/19.jpg)
If we want to build web apps ...
We need to be able to talk to the sushi chef on the server
j
![Page 20: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/20.jpg)
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 ...
![Page 21: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/21.jpg)
As a starting point:1) We need to have Ruby installed (Installation Party!)
2) Use Terminal or Command Prompt (Windows)
How we can use Ruby to talk to a computer?
![Page 22: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/22.jpg)
Simple exampleLet’s use irb = Interactive RuBy
“Rails Girls”
![Page 23: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/23.jpg)
"Rails Girls" 2 + 2 2 * 2"Rails " * 2"Rails " + "Girls" "Rails" * "Girls""Rails Girls".length"Rails Girls".reverse ime = "Rails Girls" ime.lengthime.reverseime.upcaseime.downcaseime + ime
irb examples# strings# integers# Ruby as a simple calculator# multiplying a string# combining two string# multiplying strings doesn’t work# but string do have their own useful methods
# to simplify work, we can store objects into variables# same method as before used on a variable, same result
# variables can also be combined, just like before
![Page 24: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/24.jpg)
Simple exampleLet’s save a program into a .rb file for easy access
Sublime Text 2 Terminal
![Page 25: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/25.jpg)
simple.rb
puts “Rails Girls”
![Page 26: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/26.jpg)
ime.rb
![Page 27: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/27.jpg)
quiz.rb
![Page 28: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/28.jpg)
Even the big, scary dragon is made out of simple Lego blocks!
Photo by: themickeyd
![Page 29: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/29.jpg)
Bonus tip: learn programming at home with:
http://www.codecademy.com
http://tryruby.org http://www.codeschool.com
![Page 30: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/30.jpg)
What about Rails?
= a framework, which makes sure we can easily use Ruby to build web apps
Rails = Ruby on Rails = RoR
= fast rails for Ruby on the web
![Page 31: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/31.jpg)
We’ll build today’s app with Rails ...
![Page 32: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/32.jpg)
... the app will be made with different text files with Ruby, HTML and other code
![Page 33: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/33.jpg)
Rails* apps have three basic building blocks
* And a lot of other web apps in different languages
MVC architecture = Model | View | Controller
Photo by: Michael Kappel
Controller = sushi chefaccepts requests, makes all parts
work as a whole
Model = ingredientsrepresents database data View = sushi
the representation of the result, seen by users
![Page 34: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/34.jpg)
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!
![Page 35: The web and programming: an introduction - Simple, short and friendly](https://reader033.vdocuments.site/reader033/viewer/2022060118/558bdfbed8b42a533b8b4681/html5/thumbnails/35.jpg)
My Bentobox
Backend.
How the application works.
Frontend.
How the application looks.
Backend.
How the application runs.
Backend.
How the application stores data.
Storage Logic
Style and structure
Infrastructure
Application: Designed by:
Let’s warm up before we make our own app:getting to know web technologies!