building websites with building blocks
DESCRIPTION
Øredev 2010. About Surdegskartan.se (personal project) and TV4 (professional work) and how to build websites on API, SaaS, PaaS.TRANSCRIPT
![Page 1: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/1.jpg)
BUILDING WEBSITES WITH BUILDING BLOCKS Per Åström, Øredev 2010
![Page 2: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/2.jpg)
!"#$%&'(#)*+%),"#-.(.#!"
![Page 3: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/3.jpg)
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
![Page 4: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/4.jpg)
VOCABULARY surdeg = sourdough
surdegskartan = sourdough map
http://www.flickr.com/photos/liorshapira/2350847573/
![Page 5: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/5.jpg)
RIDE A BIKE!
![Page 6: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/6.jpg)
![Page 7: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/7.jpg)
![Page 8: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/8.jpg)
![Page 9: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/9.jpg)
WifiSushi
Vandrarhem
Jobb
Annons
Camping
Café
Vintage
Kyrko
Pizza
Bad
Hotell
Restaurang
Surdeg?
![Page 10: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/10.jpg)
•No coding
•Useful
•Learn
![Page 11: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/11.jpg)
![Page 12: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/12.jpg)
![Page 13: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/13.jpg)
![Page 14: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/14.jpg)
![Page 15: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/15.jpg)
![Page 16: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/16.jpg)
![Page 17: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/17.jpg)
DOMAIN NAME ! ! ! ! ! ! ! 99 KR
APPLICATION, CMS, TOOLS !! 0 KR
HOSTING ! ! ! ! ! ! ! ! ! 0 KR
WEBSITE !DEVELOPMENT!! ! <10 HOURS
BUDGET SURDEGSKARTAN.SE
![Page 18: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/18.jpg)
![Page 19: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/19.jpg)
![Page 20: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/20.jpg)
![Page 21: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/21.jpg)
![Page 22: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/22.jpg)
![Page 23: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/23.jpg)
![Page 24: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/24.jpg)
![Page 25: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/25.jpg)
![Page 26: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/26.jpg)
![Page 27: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/27.jpg)
![Page 28: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/28.jpg)
![Page 29: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/29.jpg)
GEOLOCATION + #SURDEG
![Page 30: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/30.jpg)
Lat Long
![Page 31: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/31.jpg)
![Page 32: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/32.jpg)
![Page 33: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/33.jpg)
![Page 34: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/34.jpg)
AND TRY #SYSTEMBOLAGET + GEO
![Page 35: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/35.jpg)
![Page 36: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/36.jpg)
![Page 37: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/37.jpg)
![Page 38: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/38.jpg)
DOMAIN NAME ! ! ! ! ! ! ! 99 KR
APPLICATION, CMS, TOOLS !! 0 KR
HOSTING ! ! ! ! ! ! ! ! ! 0 KR
STICKERS + STAMPS !! ! ! ! 2000 KR
BUDGET SURDEGSKARTAN.SE
![Page 39: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/39.jpg)
MARKETING
![Page 40: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/40.jpg)
IT SCALES!
![Page 41: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/41.jpg)
+Lattjolajban.se, Soko.se, Hockeykanalen.se, >150 blogs and more.
41
![Page 42: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/42.jpg)
THE TEAM
PM ruby
/java
pare
ntal le
ave
CTO
css/js
/html
PM
ruby
/java
text-t
v
text-t
v
![Page 43: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/43.jpg)
Features
Maintenance
![Page 44: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/44.jpg)
Features
Maintenance
![Page 45: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/45.jpg)
Time
Cost
Quality
![Page 46: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/46.jpg)
”STANDING ON THE SHOULDERS OF GIANTS”
![Page 47: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/47.jpg)
SaaS = Software as a Service(Disqus, Polldaddy, Lightspun)
PaaS = Platform as a Service(Heroku, Akamai, Google AppEngine)
IaaS = Infrastructure as a Service(Amazon AWS, Citycloud)
![Page 48: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/48.jpg)
EVOLUTION OF PUBLISHING PLATFORMSGENERATION #1 - STATIC FILES
• Static html - Editors needed to know html
• No database
• No reuse of content
• No channel publishing
• Typical Feature: Server Side Include, ftp
• Cause Of Death: Too static and too limited publishing
![Page 49: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/49.jpg)
EVOLUTION OF PUBLISHING PLATFORMSGENERATION #2 - HOME GROWN WITH DB
• Database!
• DIY - typically home made/home grown
• Depended on a few developers
• In the long run: expensive and complicated to develop
• Typical Feature: Tailor made for the own needs
• Cause Of Death: To complicated to continue develop (EOL)
![Page 50: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/50.jpg)
EVOLUTION OF PUBLISHING PLATFORMSGENERATION #3 - A CMS PRODUCT
• A CMS - one product
• Multi channel publishing
• Typically offsprings of internal products
• Closed source
• Expensive (?)
• Typical Feature: A swiss army knife: customize for own needs
• Cause Of Death: Slow development pace, limited upgrade path
![Page 51: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/51.jpg)
EVOLUTION OF PUBLISHING PLATFORMSGENERATION #4 - OPEN PLATFORMS
• Many different products and tools
• Open API:s
• Built to integrate or to be integrated
• Ready for cloud computing
• ”Small pieces connected”
• Open source?
• Typical Feature: Open for integration and agile development
• Cause Of Death: ?
![Page 52: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/52.jpg)
Old platform New platform
![Page 53: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/53.jpg)
Old platformPolopolyXcap
Basefarmsvn
New PlatformPolopolyWordpressDisqusAddthisPolldaddyGoogle APICover it Live
BasefarmAkamaiHerokuAmazon AWSGithub m.fl.
![Page 54: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/54.jpg)
EXAMPLE - CHOOSINGTHE RIGHT PRODUCT
![Page 55: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/55.jpg)
EXAMPLE SAAS - DISQUS
![Page 56: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/56.jpg)
THERE’S AN APP FOR THAT
![Page 57: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/57.jpg)
DISQUS IMPROVEMENTS• Mobile version of Disqus• iPhone-app• More Community functions• Like, Dislike and ”who does
what”• Security improvements with
Trusted Domains• Remake of the Commenting
experience• Updated Wordpress plugins
• Early Adopter Features and Settings
• Rewritten implementation for faster download and rendering
• Better Spam reporting and close commenting features
• Inline Moderating• Yahoo and Facebook login
![Page 58: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/58.jpg)
EXAMPLE SAAS/API - ADDTHIS
![Page 59: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/59.jpg)
EXAMPLE SAAS/API - ADDTHIS
![Page 60: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/60.jpg)
EXAMPLE SAAS/API - CALENDAR
![Page 61: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/61.jpg)
EXAMPLE SAAS/API - CALENDAR
![Page 62: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/62.jpg)
EXAMPLE SAAS/API - CALENDAR
![Page 63: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/63.jpg)
EXAMPLE API - LIGHTSPUN
flipresizerotateformatbackgroundquality}
http://img.lightspun.com/?flip=h&rotate=-45&background=ff00ff&format=png&resize=200x200&key=7d0dc9
5a-dcb6-4bfa-b9d3-c3e3c429080b&source=http://www.tv4.se/polopoly_fs/1.1899558.1289397260!image/2116905483.jpg_gen/derivatives/w450/2116905483.jpg
![Page 64: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/64.jpg)
ADVANTAGES WITH SAAS
• Easy installation
• Easy configuration
• No maintenance
• It scales
• It improves all the time
![Page 65: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/65.jpg)
EXAMPLE PAAS - HEROKU
![Page 66: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/66.jpg)
![Page 67: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/67.jpg)
![Page 68: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/68.jpg)
• $ git push heroku master
-----> Heroku recieving push-----> Rails app detected-----> Launching..... done http://tv4play-production.heroku.com deployed
![Page 69: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/69.jpg)
![Page 70: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/70.jpg)
![Page 71: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/71.jpg)
![Page 72: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/72.jpg)
![Page 73: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/73.jpg)
TRAFFIC
Peak
Average?
zzzzzzz........
![Page 74: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/74.jpg)
![Page 75: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/75.jpg)
![Page 76: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/76.jpg)
$ heroku dynos 1
tv4play-production now running on 1 dyno
![Page 77: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/77.jpg)
$ heroku dynos 24
tv4play-production now running on 24 dyno
![Page 78: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/78.jpg)
$ heroku dynos ??
tv4play-production now running on ?? dyno
![Page 79: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/79.jpg)
DOES IT SCALE?
”For dynos - there is no real limit. !You can already set your app to 100 dynos through the command line "heroku dynos 100". !If you need more, we can up that limit to just about any number you need. !Let us know a week in advance at least, and we'll get your limit increased. !If you're going to need a few thousand, it's best if we can work with
you to understand your demand.”
![Page 80: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/80.jpg)
THERE’S AN APP FOR THAT
(ACTUALLY, THERE ARE AT LEAST TWO APPS)
![Page 81: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/81.jpg)
EXAMPLE PAAS - AKAMAI
![Page 82: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/82.jpg)
WAIT - ITS JUSTLIKE ELECTRICITY?
The definition of cloud computing according to Wikipedia is:
Cloud computing!is!Internet-based!computing, whereby shared resources, software, and information are provided to
computers!and other devices on demand, like the electricity grid.
![Page 83: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/83.jpg)
PICK ONE
![Page 84: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/84.jpg)
FOCUS
hardware OS patches network infrastructure scaling failover redundancy antivirus upgrades capacity
backup installation planning firewall specification design integrate
operations gui SLA maintenancenew features
![Page 85: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/85.jpg)
FOCUS
hardware OS patches network infrastructure scaling failover redundancy antivirus upgrades capacity
backup installation planning firewall specification design integrate
operations gui SLA maintenancenew features
![Page 86: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/86.jpg)
IF YOU USE API’S - BUILD API’S TOO
86
API
![Page 87: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/87.jpg)
PRICELIST
![Page 88: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/88.jpg)
WHATS RUNNING?
88
![Page 89: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/89.jpg)
WHY DO THIS?
Time
Cost
Quality
![Page 90: Building websites with building blocks](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b54b684a795979748b4619/html5/thumbnails/90.jpg)
THANKS FOR LISTENING
[email protected]" " " " " " " " <= Contact
http://twitter.com/perkovich/tv4-http" " <= Twitter
http://github.com/TV4" " " " " " " <= Code
Thanks for help with Surdegskartan: @tedvalentin, @fdqps, @ankerstal, @mptre, @plindberg, @jocap, @lemonadImages: http://www.clker.com/, http://www.flickr.com/photos/liorshapira/2350847573/