1

Python Web Frameworks

Kat Chuang@katychuang

Talk given at NYC Python Meetup - 7/9/2013

Talk Given at NYC Python Meetup 7/9/2013 2

About me

• Recent PhD Graduate• Experience with python:– Mainly for research– Web development the

last year in Python

• Freelanced quite a bit with web development.– I often worked with non

technical people.

Talk Given at NYC Python Meetup 7/9/2013 3

http://meetup.com/NYC-Pyladies

Btw, there’s a group for lady pythonistas…

Talk Given at NYC Python Meetup 7/9/2013 4

Outline

• Why I’m giving this talk• Server-Client Architecture• The User Interface (UI)• The Wireframe as a boundary object– Boundary objects are used for communicating

between two distinct groups. • DRY Principle: “Don’t repeat yourself”

Talk Given at NYC Python Meetup 7/9/2013 5

Why I’m giving this talk

• There’s a lot of people who want a website– A lot of these people don’t know how to build

websitesA. Some of these people want to learnB. Some of these people don’t

• This talk is for developers who work for those without technical knowledge.

Talk Given at NYC Python Meetup 7/9/2013 6

Types of People in Web Development

A. Wants to learn

B. Do not want to

learn

Web developers

Different ways of communicating

Talk Given at NYC Python Meetup 7/9/2013 7

Server-Client Architecture

<Web framework goes here: python>

<User Interface: html/css/javascript>

<Database Queries>

Talk Given at NYC Python Meetup 7/9/2013 8

Navigation Paths

This could be a lot of html pages.

a.htmlb.htmlc.htmld.htmle.htmlf.htmlg.htmlh.html….

Talk Given at NYC Python Meetup 7/9/2013 9

Wireframes

Talk Given at NYC Python Meetup 7/9/2013 10

Spatial Representation

Talk Given at NYC Python Meetup 7/9/2013 11

Document Object Model

This is what the computer

understands.

Talk Given at NYC Python Meetup 7/9/2013 12

Example: Pydata.OrgInteraction with client: I was given this one image file. My task was to convert it to templates, and give the final website at pydata.org.

Interaction with python: I specified styling and template tags for each page.

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

Talk Given at NYC Python Meetup 7/9/2013 13

I’ll show you how I created this partIt is a list of news items that come from the database.

http://pydata.org

Talk Given at NYC Python Meetup 7/9/2013 14

{% for item in news %}<div class="news_item">

<b><a href="/{{ item.conference

}}/news#{{ item.id }}">[{{ item.conference }}] {{ item.title }}</a></b><div class="pub_date”>

{{ item.date|date:'M d, Y' }}</div>

{{ item.content|striptags|truncatechars:180 }} </div>

{% endfor %}

Template Tags

Talk Given at NYC Python Meetup 7/9/2013 15

Template system is a nested hierarchy

Page

HeadStylesheets

FontsHeader

ContainerBanners

News Section

News Item

News Item

…Footer

Javascripts Analytics

Talk Given at NYC Python Meetup 7/9/2013 16

Demo

Django note: you can run a local development version:$ python manage.py runserver

Then view the site in your browser at http://localhost:8000

Talk Given at NYC Python Meetup 7/9/2013 17

THANK YOU.

Kat Chuang, Ph.D. Contact: @katychuang on twitter | katychuang@gmail.com