Youth Led Tech: Introduction to how the web works

Arpanet_logical_map,_march_1977

As part of our Youth Led Tech Program, we’re teaching youth digital skills. We’ve open sourced our curriculum in a series of blog posts. This particular lesson plan was adapted by Christopher Whitaker from the “Brief History of The Internet” from the Internet Society. 

Introduction to How the Web Works

This module will teach students the basics of how the web works including the concept of ‘The Cloud”, the World Wide Web, DNS/Web Addresses, and how content appears in the browser.

Part One: The History of the Internet

Let’s say you wrote a really cool song on your computer. Without the internet the song would just stay on your laptop. To share it, you’d have to have somebody come over and look at your laptop – or you’d have to download it onto a floppy disk (What they had before USBs) and physically carry it over.

This is how computers used to work. And it was a bit of a problem for scientists trying to work collaboratively. Instead of shipping documents from universities on the east coast to the west coast, it would be a lot easier if one computer could just pick up a phone and call the other.

Which is exactly what they did.

In 1965, a professor at MIT used a phone line to call up a computer at UCLA and send information back and forth. This was the first (very small) network. The government saw value with this and funded an experiment called ARPAnet. Computers from across the country were added to the network becoming a ‘web’ of computers.

But, this network had a problem. It began to grow large enough to where one computer couldn’t find another specific computer. Imagine that you’re wanting to visit a friends house for the first time, but there are no street numbers. You’d get lost pretty easily.

To solve this, Vincent Cerf and Robert Kahn created the TCP/IP protocol. TCP/IP stands for Transmission Control Protocol/Internet Protocol. It had four ground rules:

  • Each distinct network would have to stand on its own and no internal changes could be required to any such network to connect it to the Internet.
  • Communications would be on a best effort basis. If a packet (information) didn’t make it to the final destination, it would shortly be sent again from the source.
  • Black boxes would be used to connect the networks; these would later be called gateways and routers. There would be no information retained by the gateways about the individual flows of packets passing through them, thereby keeping them simple and avoiding complicated adaptation and recovery from various failure modes.
  • There would be no global control at the operations level.

The protocol also had a system for giving each device connected to the network an address called an IP Address.

Activity

Everyone take out their phones or laptop. Google “What’s my IP address”

Now, notice that if you’re not on the wifi your address is different from the one on your computer. Every internet connection has it’s own address. Every website also has an address too.

Now, go into the address bar and enter 173.252.110.27

See, it really works – that’s Facebook’s address on the Internet

DNS

The problem with the IP address is that nobody can remember all the numbers needed to get everywhere on the web.

So, they developed services called “Domain Name Servers” that give addresses like 173.252.110.27 names like “Facebook.com”

DNS servers act like Google Maps for your computer. It works like this:

  1. You tell your browser that you want to go to “mikvachallenge.org”
  2. Your computer calls up a DNS server to ask for directions to mikvachallenge.org
  3. The DNS servers looks through all the addresses in all of the internet and find: 67.202.93.0
  4. The DNS tells your browser where to find the site. Your browser then points itself to 67.202.93.0
  5. www.mikvachallenge.org pops up in your browser!

Web Hosting

The other problem with the early network is that those computers had to be on and connected all the time to work. It also became hard for a lot of people to try to access the same file on a single machine all at the same time.

Could you imagine 500 people trying to call you at once? Doesn’t work that well.

The people who were building the Internet needed a way to serve the information to a lot of people at once. The answer became dedicated computers that would ‘serve’ people information called servers.

YouTube has hundreds of server room that hold thousands of cat videos. When you point your browser to the funny video of your choice, the server ‘serves’ your video to your web browser.

Not everyone has to have a server room to host their websites. Expunge.io uses a service called “Amazon Web Services” to borrow their server. (Yes, you really can order everything from Amazon.”

Conclusion 

This should give you a basic idea of how the web works. There’s a lot more complexity to it, but for those interested in learning more should check out these resources.

 

Youth Led Tech Curriculum: Typing Club

19754771062_04ca1d5ac3_zAs part of our Youth Led Tech Program, we’re teaching various classes on digital skills. We’ve open sourced our curriculum through a series of blog posts. As we’ve progressed into the program, we received numerous requests from instructors and youth on activities to improve typing skills. To do this, we used a program called Typing Club which we’ll discuss below. We’ve featured this app before as part of our Connect Chicago work. 

As we developed the curriculum for Youth-Led Tech, we hadn’t fully considered the basics. We drove through our lessons, which are focused on how to use WordPress to make websites for yourself and others. But we found that many youth needed more work on keyboarding skills. Since we had previously learned about TypingClub from our friends at Connect Chicago, we started an account there and set up the youth there and we now include practice nearly every day.

Introduction to  TypingClub.com

TypingCub is a program that allows staff to monitor how the students are doing in real time so that staff can move over to help if they needs to.  The app also keeps track of students progress throughout the course. Here’s Rene Paccha from the Spanish Coalition for Housing explaining more.

How TypingClubs Works

TypingClub is a free online program anyone can register for regardless of if they’re in a training course or not. The course has a hundred different lessons aimed at improving the users typing skill to 90 words per minute. Users can take the lessons as many times as they like with the goal of getting three ‘stars’ per level.

For schools and digital skill trainers, Typing Club has additional features to help trainers manage their programs.  While students can use the software for free, to use the tool as a trainer you pay for the cost per students (about $2.60 annually per student license.)

When you sign up as a school, you get a custom domain address ( yourschool.typingclub.com) that you can send your students to. When your students arrive at your page they can register to take classes and access the content you’ve provided. As an administrator, TypingClub allows you to set up lessons plans,  assign additional instructors and set up typing tests. The software also allows you to view your students progress in real time so you can walk over to the student if they’re having issues.

How to get Typing Club

For individuals, they can simply start working right away on typingclub.com without registering for the site. Registration is only necessary to be part of a class or to keep track of progress.

For schools , you can register for a free trial on the TypingClub School Page.

In practice as part of Youth Led Tech

Every day the youth spend about one hour on Typing Club. We tend to do this in the middle of the day to allow staff a chance to catch up on things.  At least one staff member will monitor the youth’s progress on Typing Club to make sure that the youth are on the right site.

Digital Learning Environments: Association House in Humboldt Park

Note: this is part of a series of posts in our Connect Chicago program where we describe in detail digital skills learning environments throughout the city.

Association House of Chicago at 1116 N. Kedzie Ave. Chicago IL 60651 is a large connected complex of services in the heart of Humboldt Park.

Association House, Humboldt Park

Here’s how they describe themselves:

Association House of Chicago serves a multi-cultural community by providing comprehensive, collaborative and effective programs in English and Spanish. We promote health and wellness and create opportunities for educational and economic advancement.

Service areas include El Cuarto Año High School, a technology center (run by longitme Conenct Chicago member Stephen Pigozzi) with classes in English and Spanish, and a comprehensive Family Literacy Program.

The Smart Chicago Youth-Led Tech program is run from the large cafeteria of Association House. It’s a huge area set off from the rest of the building, which gives us lots of bust-out room for creativity and learning.

Youth-Led Tech at Association House of Chicago

There is lots of space to store food, which makes it easier to manage breakfast and lunch five times a week.

Morning Time, Youth-Led Tech, Humboldt Park

The chairs and tables are easy to move. Lots of instruction occurs in presentation and discussion format. We have our own projector. Youth-Led Tech, Humboldt Park

The Association House partners with Americorps to deliver all sorts of digital skills training.

Americorps | Association House of Chicago

They run dozens of programs throughout the year:

Association House of Chicago

The enormous park across the street provides lots of bust-out room when it’s time to turn off computers!

Portraits, Youth-Led Tech, Humboldt Park

Bonus: here’s a video I made of my visit: 

Youth Led Tech: Using video to blog

Smart Chicago YouTube Page

Smart Chicago YouTube Page

As part of our Youth Led Tech Program, we’re teaching various classes on digital skills. We’ve open sourced our curriculum through a series of blog posts. The overall goal of the program is to have youth create their own WordPress sites. In this lesson, we go over how to use YouTube and Google Hangouts to add videos to our blogs. 

Over the last few years, we’ve created a lot of blog posts covering a variety of topics – which ends up being a lot of words. While words are great for conveying ideas, when you’re trying to explain an action or demonstrate a site it’s sometimes easier to show instead of tell. It’s also useful if you’re trying to show something that’s happening live.

We use a variety of tools to help bring video to our WordPress blogs. In this lesson, we’re going to show you how to use Google Hangouts to generate video. We use Google Hangouts because it’s free and we don’t need a ton of equipment to do it. To get Google Hangouts, you’ll need to create a YouTube page like so: (Note: During the class, we’ll actually do this part live.)

Now, Google Hangouts is used to do video conferencing between other people. What they don’t really advertise is that you can also broadcast your hangout live so that anyone can watch. When you do that, it will record the video and put it on your YouTube page.

YouTube allows you to conduct live streaming from it’s Google Hangout interface without any other special equipment. Do keep in mind is that you’ll want the fastest internet connection possible. The faster the speed, the higher quality the video will produce. We also strongly recommend using a wired connection using an ethernet cable – particularly at larger events. If there are too many people on the wifi, Google won’t get a good feed and it’ll end your video.

To create an event go to your channel page. You’ll notice that there’s a section called live event with a link called “create live event.” Click that and name your event. You can set the start time, end time, description and tags for the event. Once you’re ready to start your live stream – press “go live” and it will bring up the Google Hangout screen.

Once it’s up, you can press the ‘gear’ to get to the settings. While you can use your computer’s internal webcam – having an external webcam does make a significant difference in quality. (We use a Logitech HD webcam.) If you have an external microphone, you can also select that as well.

At the bottom right corner of the page, you’ll see a chain icon that says ‘links’ when you hover over it. You can use that to share your livestream through Twitter or embed the video stream inside a web post.

Once you’re ready, hit “Go Live” and the hangouts will start to stream. When you’re done, simply click the ‘End’ button to stop the broadcast.

Here’s a video to show you the process.

Once the video is finished, you can go to your YouTube Channel and find your video. You can then use YouTube’s embed feature to put the video in your blog post. Just copy and paste the embed video code. It’ll look something like this:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/O6ROCaLvMnQ” frameborder=”0″ allowfullscreen></iframe>

When you put the code inside the text tab in WordPress, it’ll generate this:

Chicago’s Million Dollar Blocks at Chi Hack Night

ChicagoMillionDollarBlocksAt this week’s Chi Hack Night, Dr. Dan Cooper from Adler University and Cathy Deng from DataMade presented Chicago’s Million Dollar Blocks – a site that shows how much Illinois spends on incarceration at the block level.

About the project

The concept of a “million dollar block” refers to a project done by the Spatial Information Design Lab that mapped out places where the government was spending over a million dollars on incarceration in a particular neighborhood. It is an adaptation of the original Million Dollar Blocks project, pioneered by Laura Kurgan of the Spatial Information Design Lab and Eric Cadora of the Justice Mapping Center.

This project was developed by Dr. Daniel Cooper and Dr. Ryan Lugalia-Hollon, who had been working to map out the cost of incarceration by zipcode. They worked with DataMade to create a visualization to showcase the costs of incarceration in Chicago and how it impacts particular neighborhoods.

The map the team created was based on data obtained by the Chicago Justice Project from the Cook County Circuit Court (as shown in our Convicted in Cook Project). That dataset shows all convictions in Cook County from 2005-2009 and includes data for what the offense was, the length of the sentence, and the offender’s residential address. The team then based each block’s dollar amounts from sentence lengths. The cost assumption is they used is that on average the Illinois Department of Corrections spends approximately $22,000 per year for each inmate.

Design Considerations

When DataMade built the site, they had a number of design considerations which Cathy Deng explained during the presentations.

1) Value clarity and simplicity 

One of the things that the team had to consider is that while it was possible to add much more detail to the site, it would have made things overly complicated. They opted to keep the site simple and focus on the story that the team was working to tell.

2) Design for people who skim 

Deng also spoke about the issue of people not having all the time in the world to read every single word on a site. Part of the user experience design was to assume that people would skim through the site. Deng used subheadings and text callouts to make certain points stick out in order to get the most important information across.

3) Make sure it works on mobile 

Almost half of the traffic on Chicago’s Million Dollar Blocks comes in through mobile devices. A large part of Deng’s work was making the site look good on mobile devices.

4) Design in the open

DataMade had opened sourced their code on their GitHub site so that other developers can learn from their work. The data that fuels the site was first opened up by the Chicago Justice Project in the context of our the groundbreaking project they did with Smart Chicago: Convicted in Cook. CJP Executive Director Tracy Siska worked hard to obtain that data and this second project helps crystalize the issues we work on in our Justice area of work. Helping encourage more work around liberated data is one reason why we exist.

5) Call to Action

The last point that Deng made was that projects should include a call to action – particularly when the projects are hitting on important social issues.

You can learn more about Chicago’s Million Dollar Blocks here.

 

 

Join the Connect Chicago Network

connect-chicagoAcross Chicago, people are doing amazing things to boost digital skills and increase access to technology. They are teaching seniors to use a mouse for the first time. They are are teaching people how to create resumes, create LinkedIn accounts, and apply for jobs online. They are lending out laptops and WiFi hotspots. They are teaching kids to build websites. This work is important because being on the wrong side of the digital divide can impact a Chicagoan’s economic and educational opportunities.

Connect Chicago aims to insert community into the valuable, existing efforts scattered all around the city. Are you a trainer in a computer lab? A volunteer in a library? Running a Meetup group on coding? Running a tech program for entrepreneurs? If so, you’re a member of Chicago’s digital access & skills ecosystem and we want to know who you are. We want to shine light on your stories and successes. With your help, we can begin to understand this system’s collective impact. If you are a participant in Chicago’s digital inclusion ecosystem, tell us who you are and tell us about your work!

To tell us more about you, fill out the Connect Chicago Network – Individual Form. You can also join our LinkedIn Group and come to the Connect Chicago Meetup events.

To tell us about a program or project you work or volunteer for, fill out the Connect Chicago Network – Project Form.

CivicSummer_Tribeca1