A talk given at the NYC Python Meetup Event on July 9, 2013. This talk covers the importance of a web framework in communicating between web developers and clients.

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