Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias...
Transcript of Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias...
![Page 1: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/1.jpg)
Introduction to Web Applications
Tobias Pfeiffer@PragTob
pragtob.wordpress.com
![Page 2: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/2.jpg)
Today
![Page 3: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/3.jpg)
![Page 4: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/4.jpg)
What is a web application?
![Page 5: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/5.jpg)
Not rocket science
![Page 7: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/7.jpg)
Programming is fun!
![Page 8: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/8.jpg)
What you are goingto build today
![Page 9: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/9.jpg)
So what is a web application?
![Page 10: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/10.jpg)
Presented in aweb browser
![Page 11: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/11.jpg)
Runs on a server...
![Page 12: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/12.jpg)
...or the cloud
![Page 13: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/13.jpg)
is dynamic
![Page 14: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/14.jpg)
A high level overview
![Page 15: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/15.jpg)
High level overview
![Page 16: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/16.jpg)
High level overview
![Page 17: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/17.jpg)
High level overview
Request
![Page 18: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/18.jpg)
High level overview
![Page 19: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/19.jpg)
High level overview
Answer
![Page 20: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/20.jpg)
High level overview
Answer
![Page 21: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/21.jpg)
High level overview
![Page 22: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/22.jpg)
What parts does a web application consist of?
![Page 23: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/23.jpg)
Web Application
![Page 24: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/24.jpg)
Front End
Back End
![Page 25: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/25.jpg)
Front End
Back End
![Page 26: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/26.jpg)
CSS
HTML
JavaScript
![Page 27: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/27.jpg)
CSS
HTML
JavaScript
![Page 28: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/28.jpg)
Structure and content
![Page 29: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/29.jpg)
CSS
HTML
JavaScript
![Page 30: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/30.jpg)
Styling to transform...
![Page 31: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/31.jpg)
...this...
![Page 32: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/32.jpg)
...into this.
![Page 34: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/34.jpg)
CSS
HTML
JavaScript
![Page 35: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/35.jpg)
Back End
CSS
HTML
JavaScript
![Page 36: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/36.jpg)
Back End
CSS
HTML
JavaScript
![Page 37: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/37.jpg)
Logic
Infrastructure
![Page 38: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/38.jpg)
Logic
Infrastructure
![Page 39: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/39.jpg)
Logic
● Behaviour● Implements the business logic● Ties all the parts together● Generates content
![Page 40: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/40.jpg)
Ruby on Rails
![Page 41: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/41.jpg)
But what is Ruby on Rails?
![Page 42: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/42.jpg)
A web application framework written in Ruby
![Page 43: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/43.jpg)
● A general purpose programming language
● Principle of least surprise● Invented by Yukihiro Matsumoto
![Page 44: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/44.jpg)
"I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language."Yukihiro Matsumoto
![Page 45: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/45.jpg)
Ruby on Rails
● Framework written in Ruby● set of functionality to help write web
applications– Connecting to the database (ActiveRecord)– Generating HTML (ERB)– Pays attention to security– … and so much more!
● Model View Controller● You write in Ruby
![Page 46: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/46.jpg)
Logic
Infrastructure
![Page 47: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/47.jpg)
Web Server
![Page 48: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/48.jpg)
Logic
Infrastructure
![Page 49: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/49.jpg)
Storing all yourdata...
![Page 50: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/50.jpg)
...in giant tables
![Page 51: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/51.jpg)
Recap
![Page 52: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/52.jpg)
Logic
Storage
Infrastructure
CSS
HTML
JavaScript
Web Application Landscape
![Page 53: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/53.jpg)
Logic
Storage
Infrastructure
CSS
HTML
JavaScript
Web Application Landscape
Bootstrap
DOM
Ruby on Rails
Sqlite
WEBrick
Ruby
![Page 54: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/54.jpg)
Bento Box Exercise
● Sort technologies and associated words into the landscape
● 5 minutes time
![Page 55: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/55.jpg)
Logic
Storage
Infrastructure
CSS
HTML
JavaScript
Web Application Landscape
Bootstrap
DOM
Ruby on Rails
Sqlite
WEBrick
Ruby
![Page 56: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/56.jpg)
Bento Box Exercise
● jQuery● Django● Unicorn● PHP
● Python● XML● Java● MongoDB
![Page 57: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/57.jpg)
Logic
Storage
Infrastructure
CSS
HTML
JavaScript
Web Application Landscape
Bootstrap
XML
DOM
jQuery
Ruby on Rails
Sqlite
Unicorn
WEBrick
MongoDB
Ruby
PHP Python
Django
Java
![Page 58: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/58.jpg)
Question time
?
![Page 59: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/59.jpg)
Where to go from here?
● I gather resources here, such as:– http://pragtob.github.io/rails-beginner-cheatsheet/
– http://ruby.railstutorial.org/
– http://rubymonk.com/
– http://www.codeschool.com/courses/rails-for-zombies
– http://rubykoans.com/
– http://railscasts.com/
● Rails Girls Berlin project groups
![Page 60: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/60.jpg)
Thank you and enjoy coding!
Tobias Pfeiffer@PragTob
pragtob.wordpress.comlisten to me talking about learning Ruby (German)
![Page 61: Introduction to Web Applications - WordPress.com · Introduction to Web Applications Tobias Pfeiffer @PragTob pragtob.wordpress.com. Today. What is a web application? Not rocket science.](https://reader034.fdocuments.in/reader034/viewer/2022042622/5f92dff95c9edd03fb1cbb6d/html5/thumbnails/61.jpg)
Photo credit● http://www.flickr.com/photos/captainkimo/5918836159/
● http://www.flickr.com/photos/weppos/7486411688/
● http://www.flickr.com/photos/railsgirlsberlin/7882839698/in/photostream
● http://www.flickr.com/photos/nirak/644336486/