Putting together a web app


Published on

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.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Putting together a web app

  1. 1. Putting together the pieces of a web app (http://bit.ly/shouldicode)
  2. 2. It’s easy to get confused about howto build a web app
  3. 3. It’s easy to get confused about howto build a web appBut itshouldn’t be
  4. 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. 5. Your choice of programming language could affect your circle of friends
  6. 6. Layout the site User User User pins registration profiles Main feed Commenting Categories ‘Repin’ ‘Follow’ ‘Like’Voices.com pinterest.com
  7. 7. Wireframing • Draw out 4 pages (make copies) • Each ‘activity’ on the site should be completed in no more than 4 steps
  8. 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. 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. 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. 11. Wireframing (.PSD) Think about how you present data • Masonry style • Unlimited scrolling / pagination • Customized content • Jquery/HTML5
  12. 12. Wireframing (.PSD) Think about how you present data • Think about actions • Same page/ New page • What data to show • Fixed columns • Scrolling
  13. 13. Test Test Test
  14. 14. Get out of the buildingCold calling Meet people Find collaborators
  15. 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. 16. Planning your database schema
  17. 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. 18. What is an app? (May be Django Specific) • Avoid monolithic design • A simple app has 12 installed apps
  19. 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. 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. 21. View fields• Templates (nesting)• Multiple views (blocks of content)• Not just Http (json, pdf, xml, csv…)• Forms
  22. 22. Focus on• Flexibility not Scalability• User experience not flashy elements• Reusability not specificity• Functionality not perfect code• MVP not full feature sets
  23. 23. Read about• Responsive design• Lean UX• Agile development
  24. 24. This presentation was given to a group of participants fromStartup Chile. Ryan Lou Ryan@krawst.comTo apply: Go to http://bit.ly/applysup Read: www.Validating.it