DjangoCon 2013 - Rapid prototyping and communicating with clients

RAPID PROTOTYPING AND COMMUNICATING WITH CLIENTS KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL KATYCHUANG@GMAIL.COM

Talk given at DjangoCon2013 – 9/4/2013

1

ABOUT ME

Talk given at DjangoCon2013 – 9/4/2013 2

Once upon a time…

http://pyladies.com

Talk given at DjangoCon2013 – 9/4/2013 3

NYC PYLADIES

http://pydata.org

Talk given at DjangoCon2013 – 9/4/2013 4

PYDATA

OUTLINE 1.  Communication problems

2.  Interaction Design

3.  Django Templates

4.  Abstracting the problem

5.  Demo

6.  Recap

Talk given at DjangoCon2013 – 9/4/2013 5

Talk given at DjangoCon2013 – 9/4/2013 6

10 KINDS OF PEOPLE

COMMUNICATION PROBLEMS Designs are difficult to describe

•  “I want big, colorful fonts.” •  Single color or multi colors?

• 32pt or 40pt?

• Sans serif or Serif?

•  “When you click here, this should appear.”

The client may want to see something in production before making a final decision.

Talk given at DjangoCon2013 – 9/4/2013 7

A DESIGN AID

Talk given at DjangoCon2013 – 9/4/2013 8

IMPLEMENTATION

Talk given at DjangoCon2013 – 9/4/2013 9

INTERACTION DESIGN 1.  Wireframing (blueprints)

2.  Design pattern libraries

3.  Screen sizes and responsive design

Talk given at DjangoCon2013 – 9/4/2013 10

WIREFRAMES = BLUEPRINTS

Talk given at DjangoCon2013 – 9/4/2013 11

EXPLAINING FUNCTIONS

Talk given at DjangoCon2013 – 9/4/2013 12

ADVANTAGE: STRUCTURED CONVERSATION

Talk given at DjangoCon2013 – 9/4/2013 13

Patterns are optimal solutions to common problems.

Libraries:

http://ui-patterns.com/patterns

http://developer.yahoo.com/ypatterns/

http://www.welie.com/patterns/

Talk given at DjangoCon2013 – 9/4/2013 14

DESIGN PATTERNS

RESPONSIVE DESIGN •  “The practice of using fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts.” - http://mediaqueri.es/about/

Talk given at DjangoCon2013 – 9/4/2013 15

Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px

Talk given at DjangoCon2013 – 9/4/2013 16

SCREEN SIZES

Talk given at DjangoCon2013 – 9/4/2013 17

DATA INPUT

DJANGO TEMPLATES Common template elements

Tips on structuring templates

DRY Principle: “Don’t repeat yourself”

Talk given at DjangoCon2013 – 9/4/2013 18

SPATIAL REPRESENTATION

Talk given at DjangoCon2013 – 9/4/2013 19

CONSISTENCY à USE INCLUDE CODE

<div  class=”logo">  <a  href="/”><img  src="{{STATIC_URL}}/pydatalogo.png”  ></a></div>  {%  if  user.is_authenticated  %}  

<a  class="btn"  href="/logout”>Log  Out</a>        You  are  logged  in  as  <em><a  href="/profile">{{  user.username  }}</a></em>  

{%  else  %}  <a  class="btn"  href="/login”>Log  In</a>  New  to  PyData?  <a  href="/register">Register</a>  

{%  endif  %}  

<div  class="menu">  

       {%  include  navmenu  %}  

</div>  

EVERY PAGE

Talk given at DjangoCon2013 – 9/4/2013 20

{%  include  header  %}  

TILING à USE LOOPS CODE

{%  for  i  in  news  %}  <div  class="news_item”>          <a  href="/{{  i.conf  }}/{{  i.id  }}">  

       [{{  i.conf  }}]  {{  i.title  }}          </a>  <div  class="pub_date”>          {{  i.date|date:'M  d,  Y'  }}  </div>  

{{  i.content|striptags|truncatechars:180  }}  </div>  {%  endfor  %}  

LIST OF ARTICLES

Talk given at DjangoCon2013 – 9/4/2013 21

ABSTRACT VIEW Data Flow Diagrams (DFD)

Server-Client Architecture

The User Interface (UI)

Organizing templates

Talk given at DjangoCon2013 – 9/4/2013 22

DATA FLOW DIAGRAM

Talk given at DjangoCon2013 – 9/4/2013 23

SERVER-CLIENT ARCHITECTURE

Talk given at DjangoCon2013 – 9/4/2013 24

<Web framework goes here: python>

<User Interface: html/css/javascript>

<Database Queries>

PATHS

Talk given at DjangoCon2013 – 9/4/2013 25

ORGANIZING

Project (settings and urls)

Apps (individual apps)

Models / Admin / Urls / Utils

Templates Structure Pages

Includes snippets

Static JS, CSS, Image files

Talk given at DjangoCon2013 – 9/4/2013 26

TEMPLATE SYSTEM IS A NESTED HIERARCHY (DOM)

Page

Head Stylesheets

Fonts Header

Container Banners

News Section

News Item

News Item

… Footer

Javascripts Analytics

Talk given at DjangoCon2013 – 9/4/2013 27

DOCUMENT OBJECT MODEL

Talk given at DjangoCon2013 – 9/4/2013 28

This is what the computer understands.

PICTURE DICTIONARY

Talk given at DjangoCon2013 – 9/4/2013 29

No database; 1 html file with if/else logic

D3 MAP

Talk given at DjangoCon2013 – 9/4/2013 30

No database; 1 html file with if/else logic

MULTI PAGES

Talk given at DjangoCon2013 – 9/4/2013 31

Multiple pages (url based):

Home page | Multiple columns | Large Map

•  PyData.org Community Site

•  Convert image file to templates

About PyData:

PyData is a community for developers and users of Python data tools. You can join at pydata.org

Talk given at DjangoCon2013 – 9/4/2013

32

EXAMPLE

Talk given at DjangoCon2013 – 9/4/2013 33

PYDATA

PREVIEW, PREVIEW, PREVIEW Run a local version:

$  python  manage.py  runserver  

View the site at:

http://localhost:8000  

Talk given at DjangoCon2013 – 9/4/2013 34

RECAP Idea != Execution

Blue print your ideas

Design pattern libraries

Spatial representations of code

Don’t repeat yourself

Talk given at DjangoCon2013 – 9/4/2013 35

THANK YOU.

KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL KATYCHUANG@GMAIL.COM

36

Talk given at DjangoCon2013 – 9/4/2013