Kat Chuang, a recent PhD graduate, gave a talk at the NYC Python Meetup about web development using Python, focusing on serving non-technical clients. She discussed server-client architecture, the importance of wireframes as boundary objects, and her experiences converting designs into templates for pydata.org. The presentation aimed to guide developers in effective communication and collaboration with those who have limited technical knowledge.

1. Python Web Frameworks
Kat Chuang
@katychuang
Talk given at NYC Python Meetup - 7/9/2013 1

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 2

3. http://meetup.com/NYC-Pyladies
Btw, there’s a group for lady pythonistas…
Talk Given at NYC Python Meetup 7/9/2013 3

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 4

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
websites
A. Some of these people want to learn
B. 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 5

6. Types of People in Web Development
A. Wants
to learn
B. Do not
want to
learn
Web
developers
Different ways of communicatingTalk Given at NYC Python Meetup 7/9/2013 6

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 7

8. Navigation Paths
This could be a lot of
html pages.
a.html
b.html
c.html
d.html
e.html
f.html
g.html
h.html
….
Talk Given at NYC Python Meetup 7/9/2013 8

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

10. Spatial Representation
Talk Given at NYC Python Meetup 7/9/2013 10

11. Document Object Model
This is what the
computer
understands.
Talk Given at NYC Python Meetup 7/9/2013 11

12. Example: Pydata.Org
Interaction 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 12

13. I’ll show you how I
created this part
It is a list of news items that
come from the database.
http://pydata.org
Talk Given at NYC Python Meetup 7/9/2013 13

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 14

15. Template system is a nested hierarchy
Page
Head
Stylesheets
Fonts
Header
Container
Banners
News Section
News Item
News Item
…
Footer
Javascripts Analytics
Talk Given at NYC Python Meetup 7/9/2013 15

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 16

17. THANK YOU.
Kat Chuang, Ph.D.
Contact: @katychuang on twitter | katychuang@gmail.com
Talk Given at NYC Python Meetup 7/9/2013 17