This presentation helps non-coders understand the mechanics behind a web application. Use it to shorten the time to build your first web app or better communicate your development needs to a progammer.

1. Putting together the pieces of a web app
(http://bit.ly/shouldicode)

2. It’s easy to get confused about how
to build a web app

3. It’s easy to get confused about how
to build a web app
But it
shouldn’t be

4. There’s so much to learn?
PHP .net
Codeignitor
Java Javascript
Ruby
CakePHP Node.js
Sinatra
Rails
Python Django
See: www.bestwebframeworks.com

5. Your choice of programming language could
affect your circle of friends

6. Layout the site
User User User pins
registration profiles
Main feed Commenting Categories
‘Repin’ ‘Follow’
‘Like’
Voices.com pinterest.com

7. Wireframing
• Draw out 4 pages (make copies)
• Each ‘activity’ on the site should be
completed in no more than 4 steps

8. Wireframing
E.g. Layout the profile page
• Where everything should be
• How to share files
• What options users should have
(Download audio files, create / edit /
delete jobs)

9. Wireframing
E.g. Searching for voice talent
• Where everything should be
• What fields? – Affects models
• How to display data
• What user should do with the data
See:
http://blogs.voices.com/thebiz/2006/09/
web20_sketch_to_screenshot.html
Or http://bit.ly/wireframevoices

10. Wireframing (.PSD)
Design the first user experience
(or blank state)
• What can the user do before
they sign up?
• What to show with no user
data?
Read:
http://37signals.com/svn/archive
s/000578.php
Or http://bit.ly/37signalsblank

11. Wireframing (.PSD)
Think about how you present data
• Masonry style
• Unlimited scrolling / pagination
• Customized content
• Jquery/HTML5

12. Wireframing (.PSD)
Think about how you present data
• Think about actions
• Same page/ New page
• What data to show
• Fixed columns
• Scrolling

13. Test Test Test

14. Get out of the building
Cold calling Meet people Find collaborators

15. What is Model View Controller (MVC)
From: http://www.moock.org/lectures/mvc/
For Rails: http://betterexplained.com/articles/intermediate-rails-understanding-
models-views-and-controllers/ (or http://bit.ly/railsmvc )

16. Planning your database schema

17. Planning your database schema
• Tables should represent real world things / events
(user, invoice, books, follow, friend, message, comment)
• Primary key (a column that contains unique values in a table – no dupes)
(UserId, CommentId, UniqueURL) – can’t change (usually whole number)
• Foreign keys (denote relationships)
(one-to-one, one-to-many, many-to-many)
Overview of designing your schema
http://www.deeptraining.com/litwin/dbdesign/FundamentalsOfRelationalDatabas
eDesign.aspx or http://bit.ly/dbschema

18. What is an app?
(May be Django Specific)
• Avoid monolithic design
• A simple app has 12
installed apps

19. Use admin systems to CRUD data
The beauty of Django is that
early in the process, you can
easily set up an admin
system to start adding data.
Helps you show your app is
live and growing, albeit
manually.

20. Defining Model Methods
• Is associated with behaviors
– Is Chilean?
(Address is in Chile, IP is in Chile, Geographic
coordinates in Chile)
– Is Mike_Arrington?
(FirstName + LastName = Mike Arrington)
– AllUserPins
(Find all pins by UserId)
– Is Paid User?
(last successful invoicing date = this.month)

21. View fields
• Templates (nesting)
• Multiple views (blocks of content)
• Not just Http (json, pdf, xml, csv…)
• Forms

22. Focus on
• Flexibility not Scalability
• User experience not flashy elements
• Reusability not specificity
• Functionality not perfect code
• MVP not full feature sets

23. Read about
• Responsive design
• Lean UX
• Agile development

24. This presentation was given to a group of participants from
Startup Chile.
Ryan Lou
Ryan@krawst.com
To apply: Go to http://bit.ly/applysup
Read: www.Validating.it