jumpstart your web app
DESCRIPTION
Jumpstart Your Web AppPresented by Ari Rizzitano onJuly 11th, 2012Just about everyone has an idea for a web app, whether you want to implement a business tool, found a startup, or just host a fun project. Learn how to tackle design and technical challenges, take advantage of best practices, power through obstacles, and grow your idea into a successful application.TRANSCRIPT
![Page 1: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/1.jpg)
Ari Rizzitano / @arizzitanoJuly 11, 2012
Harvard Web Working Group
Jumpstart Your WebApp
![Page 2: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/2.jpg)
Overview
Preparation
Content planning
Wireframing
Design, UX, & front-end dev
Back-end dev
Release cycles
•
•
•
•
•
•
![Page 3: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/3.jpg)
glyphosaurus.com
![Page 4: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/4.jpg)
What’s a Web App?
![Page 5: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/5.jpg)
Start with a problem.
Is there a website or service you wishexisted?
Do you know of other people thatcould benefit from it?
Is it feasible for you to organize andassemble?
•
•
•
![Page 6: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/6.jpg)
Assemble a teamTry to work with at
least one other person
Share ideas
Delegate roles andresponsibilities
Argue!
•
•
•
•
![Page 7: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/7.jpg)
Content PlanningWhat data are you storing?
How is it related?
Organize this data into models andviews
Start a written content plan
•••
•
![Page 8: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/8.jpg)
Model
A structure for organizing related data
Usually corresponds to a databasetable
Can be connected to other models
Letter, Comment, User, Tag,Notification
•
•
•
•
![Page 9: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/9.jpg)
ModelLetter: represents a user-uploaded glyph.
character: character the letterrepresents
image: stores image connected withletter
parent: original file image was croppedfrom
tags: list of tags applied by user
•
•
•
•
•
![Page 10: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/10.jpg)
View
A template for organizing yourwebpages
Displays data from your models
Primarily concerned with dynamic data- static content comes afterward.
•
•
•
![Page 11: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/11.jpg)
View
Letter detail page: show letter’s image,thumbnail of parent, creator’s name andlink to profile, letter’s tags which link outto tag pages, previous comments, andfunctionality for favoriting andcommenting on the letter
•
![Page 12: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/12.jpg)
Wireframing
Extension of content plan
Visual organization of content
Specify where content goes in yourviews.
Starting point for both design and dev
•
•
•
•
![Page 13: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/13.jpg)
Wireframing
Involve everyone!
Reference your models
NO specific content, copy, buttons,shapes, sizes, images, colors, etc.
Digital tools (Balsamiq, Mockingbird,Illustrator) vs physical (whiteboards, post-it notes)
•••
•
![Page 14: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/14.jpg)
Wireframe Dos
Generic, plain, modular, easilychangeable
•
![Page 15: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/15.jpg)
Wireframe Don’ts
Developed design, pixel sizes, specificcopy & images
•
![Page 16: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/16.jpg)
Starting work
Aim for a particular goal: a minimumviable product, or alpha version.
Try to hit it by a specific date.
Set smaller personal milestones to helpbreak up the work.
•
•
•
![Page 17: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/17.jpg)
Starting work
Big stuff first, small stuff later.
Communicate and collaborate often.
MVC framework allows front-end andback-end work to commencesimultaneously
•
•
•
![Page 18: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/18.jpg)
Feature Creep
“Hey, wouldn’t it be cool if...”
“This competitor supports _____, weshould too.”
It’s not a bug, it’s a feature request!
••
•
![Page 19: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/19.jpg)
Feature Creep
Perfect is the enemy of done.
Stick to your original plan.
File requests and bugs for later.
Finish building the house beforeinstalling the fixtures.
•
•
•
•
![Page 20: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/20.jpg)
Design & UX
An application presents an unfamiliarexperience and functionality
Serve your users, not yourself
User experience should be seamlessand intuitive
•
•
•
![Page 21: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/21.jpg)
Design & UXUse familiar elements•
![Page 22: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/22.jpg)
Design & UX
Minimize excess verbiage•
![Page 23: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/23.jpg)
Design & UXHave personality, but don’t get too
gimmicky•
![Page 24: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/24.jpg)
Design & UX
Don’t forget thesauce
•
![Page 25: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/25.jpg)
Front-End Dev
Get designs into the browser ASAP
AJAX is a privilege, not a right
Keep mobile & older browsers in mind
•
•
•
![Page 26: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/26.jpg)
Back-End Dev
Frameworks: Django, Rails, CakePHP,CodeIgniter, Node.js/Backbone.js
Work locally and use version control
Finish the essentials first, worry aboutspecifics (AJAX, auth, etc) later
Build first, optimize later.
•
••
•
![Page 27: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/27.jpg)
Back-End Dev
Set up a staging or production serverearly on.
Get a decent hosting plan
Platform vs. infrastructure
•
•
•
![Page 28: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/28.jpg)
Release Cycles
Iterative (agile) development
Thoroughly test the site
Squash bugs
Consider which ideas are worthimplementing and do it
•
•
•
•
![Page 29: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/29.jpg)
Release Cycles
Build a beta user base
Release to a test group
Take feedback on functionality & UX
•
•
•
![Page 30: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/30.jpg)
Release Cycles
Address beta feedback
Build buzz: Twitter, Facebook, landingpage, email list, stickers!
Seed your app with plenty of greatcontent
•
•
•
![Page 31: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/31.jpg)
Release Cycles
It doesn’t have to be 100% perfect toship!
•
![Page 32: Jumpstart Your Web App](https://reader033.vdocument.in/reader033/viewer/2022052821/5549fb6eb4c905557a8b4b09/html5/thumbnails/32.jpg)
Post-Release
Keep improving on it
Think about future possibilities:monetizing, collaborating, or expanding
Once you make one, future apps aremuch easier!
••
•