• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Putting together a web app

Putting together a web app



This presentation helps non-coders understand the mechanics behind a web application. ...

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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Putting together a web app Putting together a web app Presentation Transcript

    • Putting together the pieces of a web app (http://bit.ly/shouldicode)
    • It’s easy to get confused about howto build a web app
    • It’s easy to get confused about howto build a web appBut itshouldn’t be
    • There’s so much to learn? PHP .net Codeignitor Java Javascript Ruby CakePHP Node.js Sinatra Rails Python Django See: www.bestwebframeworks.com
    • Your choice of programming language could affect your circle of friends
    • Layout the site User User User pins registration profiles Main feed Commenting Categories ‘Repin’ ‘Follow’ ‘Like’Voices.com pinterest.com
    • Wireframing • Draw out 4 pages (make copies) • Each ‘activity’ on the site should be completed in no more than 4 steps
    • 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)
    • 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
    • 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
    • Wireframing (.PSD) Think about how you present data • Masonry style • Unlimited scrolling / pagination • Customized content • Jquery/HTML5
    • Wireframing (.PSD) Think about how you present data • Think about actions • Same page/ New page • What data to show • Fixed columns • Scrolling
    • Test Test Test
    • Get out of the buildingCold calling Meet people Find collaborators
    • 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 )
    • Planning your database schema
    • 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
    • What is an app? (May be Django Specific) • Avoid monolithic design • A simple app has 12 installed apps
    • 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.
    • 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)
    • View fields• Templates (nesting)• Multiple views (blocks of content)• Not just Http (json, pdf, xml, csv…)• Forms
    • Focus on• Flexibility not Scalability• User experience not flashy elements• Reusability not specificity• Functionality not perfect code• MVP not full feature sets
    • Read about• Responsive design• Lean UX• Agile development
    • 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