Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Civic Innovation Summer Documakers Curriculum


Published on

This is curriculum created by Jacqui Cheng and Daniel X. O'Neil for the Smart Chicago Collaborative under their #civicsummer program in July and August 2013.

Go here for more information about this program:

This is one of six custom sessions that cover the concepts of open and specific content that relates to the theme that the youth are working on in their summer program.

The Free Spirit Media DocuMakers are working on media throughout the summer. Smart Chicago will be working with this group on EveryBlock and the significance of citizen journalism, tutorials on using open-source data tools, and a review of Creative Commons and other useful tools you in youth reporting.

Published in: Technology
  • Be the first to comment

Civic Innovation Summer Documakers Curriculum

  1. 1. Civic Innovation Summer Documakers @ejacqui @danxoneil
  2. 2. Welcome students! • Introductions • Dan X. O’Neil: director of Smart Chicago Collaborative, cool tech guy • Jacqui Cheng: tech writer, editor at large at Ars Technica • Why are we here? @ejacqui @danxoneil #civicsummer
  3. 3. Who are you? • Student introduction • What’s your history with tech? • What devices do you use? • Which services do you rely on? • What technology gets you the most excited? @ejacqui @danxoneil #civicsummer
  4. 4. Which social networks do you use? @ejacqui @danxoneil #civicsummer
  5. 5. Why you’re here • What is this class for? Five topics: • History of the web and principles of “open” • Field trip to 1871 and a look into startups • Open data and privacy • Getting into programming • How to be a civic “hacker”/tech person @ejacqui @danxoneil #civicsummer
  6. 6. History of the Web
  7. 7. What constitutes the Web? • What do you think of when you think of the Internet? • Web pages are not the Internet, but they have become synonymous with the Internet @ejacqui @danxoneil #civicsummer
  8. 8. Pre-Internet (days of the cave man, a.k.a. pre-1968) • A phone call works by connecting one end of the line to another end • This is called circuit switching • Neither side of the conversation can communicate with anyone else during the time they are connected @ejacqui @danxoneil #civicsummer
  9. 9. Building blocks of today’s Web • Neither side can communicate with anyone else during the time they are connected @ejacqui @danxoneil #civicsummer
  10. 10. @ejacqui @danxoneil #civicsummer
  11. 11. Building blocks of today’s Web • Unlike circuit switching, packet switching allows computers to group “packets” of data and deliver them to the receiving ends from multiple sources at once • Packets of text, video, images, audio, other data could be grouped together • Efficiency is the name of the game @ejacqui @danxoneil #civicsummer
  12. 12. Building blocks of today’s Web • Packet switching is like having a mailbox that receives things instantly. Can receive from many sources at once. @ejacqui @danxoneil #civicsummer
  13. 13. Building blocks of today’s Web • Packet switching was developed into TCP/IP by the Department of Defense as ARPANET, or Advanced Research Projects Agency Network • TCP/IP sets the standard for how certain kinds of data is delivered, like addressing an envelope • Packet switching + TCP/IP together formed the base for the Internet @ejacqui @danxoneil #civicsummer
  14. 14. Building blocks of today’s Web • ARPANET researchers Robert Kahn and Vint Cerf were responsible for TCP/IP @ejacqui @danxoneil #civicsummer
  15. 15. Building blocks of today’s Web • One of the key elements to TCP/IP is the IP address, or Internet Protocol address • IP address is a series of numbers assigned to every device on the Internet that tell other devices how to get there @ejacqui @danxoneil #civicsummer
  16. 16. Building blocks of today’s Web • Devices can figure out the “route” to get to another device (or a Web page, or a service) based on the IP address • If a building’s address is 1500 W. Roosevelt, and the apartment is 310, we can figure out how to get there @ejacqui @danxoneil #civicsummer
  17. 17. @ejacqui @danxoneil #civicsummer
  18. 18. Building blocks of today’s Web • A website is a collection of “pages” on the Internet • Each website has its own IP address, but you don’t see it. You see, or • For your browser to find the IP for Google, it must look up Google’s IP on a Domain Name Server, or DNS @ejacqui @danxoneil #civicsummer
  19. 19. @ejacqui @danxoneil #civicsummer
  20. 20. Building blocks of today’s Web • Look up a name and find the corresponding number. Same with a domain name ( and IP address ( • When you get there, a page is displayed that you can read and interact with @ejacqui @danxoneil #civicsummer
  21. 21. @ejacqui @danxoneil #civicsummer
  22. 22. What constitutes the Web? • Previously, there was no way to just “bring up” information online • Instead, you had to dial into specific networks, and you were limited to the documents they had stored there • Like going to a library that only had a handful of books @ejacqui @danxoneil #civicsummer
  23. 23. What constitutes the Web? • The code behind a Web page tells a browser how to present it to the user and how it’s supposed to behave • Not like a magazine, where I decide how it looks and send it to you • I provide the instructions for how it’s supposed to look, and your browser “translates” it to you • This makes the information travel faster @ejacqui @danxoneil #civicsummer
  24. 24. The code behind the Web • HTML is HyperText Markup Language • It’s a series of programming “tags” that tell a browser how to format something • <blink>Back in the day, this text would blink because of the surrounding tags</blink> • First tag is an opening tag, and the second tag is a closing tag @ejacqui @danxoneil #civicsummer
  25. 25. The code behind the Web • HTML is even in some mobile (phone) apps that you might not think of as the “web” @ejacqui @danxoneil #civicsummer
  26. 26. The code behind the Web • CSS, JavaScript, Ruby, and other languages help dictate the behavior of these pages • JavaScript and Ruby help the page decide how to act when you interact with it using your mouse or finger • Other languages generate, or sometimes interact with, the HTML on a Web page @ejacqui @danxoneil #civicsummer
  27. 27. Creative Commons • Creative Commons is a nonprofit organization • Creative Commons is also a type of copyright license available as part of US Copyright Law • But what is copyright? @ejacqui @danxoneil #civicsummer
  28. 28. Creative Commons • Things that are copyrightable: • Artwork • Music • Poetry • Writing • Crafts • Photography • Code @ejacqui @danxoneil #civicsummer
  29. 29. Creative Commons • A Creative Commons (or CC) license is for photographers, artists, writers, musicians to make their works available to others in the public interest • Normal copyright reserves “all rights” for you to determine on a line-item basis • Making your work CC gives all rights to the public except for the ones you choose to take back @ejacqui @danxoneil #civicsummer
  30. 30. Creative Commons • What does CC mean to you as a consumer of content? • Basic idea: you can search for CC works and use them in your own work without worrying about breaking someone else’s copyright • There are some restrictions, like crediting the original creator, but no payment or licenses @ejacqui @danxoneil #civicsummer
  31. 31. Creative Commons • What does CC mean to you as a poster of content? • Works don’t become CC by default, but you own the copyright to something you created by default • You get to decide whether you want your work to be CC licensed and what restrictions to use • CC helps the public by making work available to others @ejacqui @danxoneil #civicsummer
  32. 32. Creative Commons • Where is Creative Commons in everyday life? • Wikipedia: all images are available for you to use anywhere (not just school) via CC license • YouTube videos and elsewhere on the Web often use CC licensed music • Flickr Creative Commons search • Google Images Creative Commons search @ejacqui @danxoneil #civicsummer
  33. 33. “Open Source” • “Open source” is to code and software as Creative Commons is to photos/art/music/writing • Software that is released as open source means it’s a “free” license to use AND modify without having to pay • Benefits the public good, encourages innovation @ejacqui @danxoneil #civicsummer
  34. 34. “Open Source” • As a computer user, it means you can use open source software without paying because the software creators want you to benefit • As a programmer, it means you can download someone else’s code and modify it freely • Under normal copyright, you cannot just take someone else’s code for use in your own work @ejacqui @danxoneil #civicsummer
  35. 35. “Open Source” • As a programmer yourself, releasing something as open source means you’re making it available to others • Others can use it or modify it to make it better/different • People like open source because multiple brains are better than one @ejacqui @danxoneil #civicsummer
  36. 36. “Open Source” • Even though there are no paid licenses, people build careers on open source software • Examples of companies who have built empires using open source? • What do we know about Twitter? • What about Reddit? • Facebook, Google, Microsoft, Apple • Public Library of Science, @ejacqui @danxoneil #civicsummer
  37. 37. “Open Source” • It’s nearly impossible to build a modern company without open source • Open source software makes things more efficient, more cost-effective • Lends goodwill to the community • Our modern tech landscape would not exist as it does today without open source @ejacqui @danxoneil #civicsummer
  38. 38. What is EveryBlock? @ejacqui @danxoneil #civicsummer
  39. 39. EveryBlock’s history • EveryBlock originated as, a project by programmer Adrian Holovaty • Adrian mashed up Google Maps with Chicago’s publicly available crime data • This is before the days of our modern crime tracker tools, and before Google Maps even had an API (to allow third parties to work with it) @ejacqui @danxoneil #civicsummer
  40. 40. EveryBlock’s history • In 2005, Adrian Holovaty won a Batten Award for Innovations in Journalism, and was recognized by the New York Times • EveryBlock became big and covered 16 cities • Gave community members a way to discuss and report things to each other online without having to know each other in real life @ejacqui @danxoneil #civicsummer
  41. 41. EveryBlock’s history • In addition to crime data, EveryBlock evolved to include local news postings that affected each neighborhood • Enabled neighborly discussions about new businesses • Public safety issues • Upcoming events @ejacqui @danxoneil #civicsummer
  42. 42. EveryBlock’s history • One of EveryBlock’s cofounders is in this room • Dan O’Neil worked to uncover new data sets • He worked with the city to identify new ways to research/present data @ejacqui @danxoneil #civicsummer
  43. 43. EveryBlock’s history @ejacqui @danxoneil #civicsummer
  44. 44. Chicago Crime Map • EveryBlock was eventually bought and shut down my MSNBC • The Internet community mourned • Still, EveryBlock opened up so many doors to where we are today @ejacqui @danxoneil #civicsummer
  45. 45. Chicago Crime Map • EveryBlock made serious inroads when it came to open city data • Opened the door for: city crime tracking tools (not just big files full of data) • Apps that make use of Google Maps • More cities publishing more data • More developers & tech jobs @ejacqui @danxoneil #civicsummer
  46. 46. Chicago Crime Map • Crime data near where we are @ejacqui @danxoneil #civicsummer
  47. 47. Chicago Crime Map • Why is this important from a journalistic standpoint? • You can compare types of crimes between neighborhoods • Compare the number of crimes • Compare trends over time (are robberies going up but shootings going down?) • There are stories buried everywhere just waiting to be told @ejacqui @danxoneil #civicsummer
  48. 48. School Cuts • What is School Cuts? • Presents data about schools facing closings, like demographic info, school quality, stability, capacity • Allows you to sort the data depending on what you’re looking for @ejacqui @danxoneil #civicsummer
  49. 49. School Cuts @ejacqui @danxoneil #civicsummer
  50. 50. School Cuts • The data comes from: Chicago Public Schools • Illinois State Board of Education • University of Chicago Urban Education Institute • What kind of stories might come out of this website? @ejacqui @danxoneil #civicsummer
  51. 51. School cuts: one more thing… • There’s another site: Apples2Apples • • It’s not interactive like • Started by a concerned mother who doubles as a data scientist • Uses some of the same data as School Cuts, but adds more data that was not made open • Great place to find more school closing info @ejacqui @danxoneil #civicsummer