{

Web  Development  Basics  for  Non  Technical  Founders

Don’t  let  you  lack  of  understanding  stop  you  from  pursuing  your  start  up  dreams

Ñ  You  already  have  an  idea  and  know  that  the  internet  is  the  perfect  medium  for  it

Ñ  Your  product  is  website  based Ñ  You  are  thinking  about  /  are  in  the  process  of  developing  your  web  product

Ñ  You  have  done  enough  research  to  know  what  your  users/customers  want

Ñ  You  do  not  have  a  techy  who  is  a  core  member  of  your  team

Ñ  You  already  have/will  find  a  way  to  create  your  graphic  identity  (logos,  colors,  etc.)

Ñ  You  will  be  outsourcing  a  majority  of  your  development

Assumptions

Ñ  The  role  of  a  product  planner  (this  is  you) Ñ  The  difference  between  development  and  design Ñ  The  fundamental  structure  of  any  web  based  product Ñ  Things  to  look  for  when  choosing  a  developer Ñ  How  pricing  works  for  web  development Ñ  How  to  deal  with  changes  in  your  product Ñ  How  to  be  prepared  for  switching  between  developers Ñ  Key  quality  parameters  you  should  be  measuring

What  you  will  learn

Ñ  How  to  code Ñ  How  to  code  your  own  product Ñ  How  to  choose  the  right  technologies Ñ  How  to  plan  your  product

What  you  will  not  learn

Ñ  Create  a  reference  library Ñ  Define  your  business  objective  (why  are  you  building  this  product?)

What  to  do  before  gePing  a  web  developer

Ñ  Ability  to  understand  your  business  and  “the  bigger  picture” Ñ  Technical  knowledge  and  start  up  mentality  (there  are  tons  out  there)

Ñ  Clear  line  of  communication  (time  &  place) Ñ  A  good  sense  of  design  (taste) Ñ  Have  experience  with  any  combination  of  the  following  technologies: Ó  Front  end:  HTML,  CSS,  JavaScript,  AJAX,   Ó  Back  end:  MySql,  Codeigniter,  CakePHP,  Ruby,  Python,  PHP

Ñ  Familiarity  with  the  following  tools:  Illustrator/Photoshop,  Microsoft  Office,  Google  Docs,  Dropbox

What  to  look  for  in  a  developer

You  want  a  dynamic  website. Change  .  Manage  .  Execute

How  dynamic  websites  work

Content  Management  Systems

Open  source  does  not  mean  free.  It  means  that  nobody  can  charge  you  for  it  if  they  provide  it  as  is.    You  pay  for  customization  to  your  needs.

Open source software is clay, your developer is the sculptor.

Your  Web  App

Front  End  

Back  End Database

Components  of  a  website

Product  Planner    (this  is  you)

Product  Definition

Business  Objectives

Features

User  Workflows

Design  Vs.  Development

GRAPHICS DESIGN LAYOUT WIREFRAMES USER INTERFACE STRUCTURE

HTML CSS JS AJAX

MYSQL PHP

NODE.JS RUBY

PYTHON

DESIGN DEVELOPMENT

Ñ Client  Side  Languages Ó This  is  what  is  responsible  what  you  see  in  your  browser.  

Ó They  either  define  look  and  feel  or  interaction. Ó HTML,  CSS,  JavaScript,  AJAX

Ñ Server  Side  Languages Ó This  is  what  is  responsible  for  processing  and  making  decisions

Ó They  define  how  data  is  to  be  processed  and  what  answers  are  to  be  ‘served’

Ó PHP,  Ruby,  Node.js,  Python,  ASP.net

Vocabulary

Ñ  HTML  is  a  mark  up  language Ó  It  cannot  do  math  or  compute  anything Ó  It  is  simply  used  to  ‘mark  up’  or  describe  content Ó  E.g.

Ô  <h1>This  is  a  heading</h1> Ô  The  tag’s  <h1></h1>  define  the  content  within  as  a  heading

Ñ  You  do  the  above  because Ó  In  order  to  apply  formaPing  and  style  you  need  to  identify  what  you  want  to  apply  it  to

Ó  In  our  case  we  want  to  apply  it  to  all  headings Ó  E.g.    h1  {color:  red;}

HTML  &  CSS

Ñ  JavaScript Ó  This  is  a  computing  language  it  has  the  ability  to  calculate  and  manipulate  the  website

Ñ  AJAX Ó  Simply  put,  AJAX  is  used  to  update  information  on  a  website  without  having  to  reload  a  page

Javascript  &  Ajax

Advantages Disadvantages 1.  Fixed  price 2.  Fixed  timeline

1.  No  flexibility 2.  Paperwork  (defining  the  scope)  

takes  much  longer 3.  Changes  will  be  met  with  friction

How  developers  charge

Project Price: A  fixed  quoted  based  on  estimated  number  of  hours  required  to  complete  the   project

Retainer: A  fixed  number  of  hours  per  month  at  a  pre  defined  rate.

Advantages Disadvantages 1.  Highly  flexible  –  most  

accommodating  to  changes 2.  Quick  start  –  no  scope  definition  

required 3.  Faster

1.  Difficult  to  estimate  overall  timeline

2.  Varying  price