Sunday, April 2, 2017

Discover and uncover

I've been moving on with CS Discoveries. In between Units 1 and 2, I had my students explore a variety of centers including Raspberry Pi, Finch robots and Hummingbird robotics. After Unit 1 where they defined what a computer was and really dove into input, storage, processing and output, I wanted them to have a hands-on experience of seeing input and output in action. In particular, I love this diagram of Raspberry Pi to really drive this point home of what computers are and the video available here.

Input devices (e.g. keyboard, mouse) send data to a computer.
Output devices (e.g. monitor, speakers) send data to the user.
Storage in the Raspberry Pi is in the form of a microSD card.



Raspberry Pi with pins highlighted

Now moving on to Unit  of CS Discoveries. I thought that the sequence of lessons that led up to this lesson were critical in several ways - Lesson 1 to really have students notice and observe the structure and formatting that appears on websites - differences, similarities and why such structures exist. I was not planning on modifying this lesson, but I ended up making some last minute changes mainly because I did not have my class set up for Unit 2 in the online portion.The modifications mainly involved the websites that I had my students visit. I kept the first set of websites to the restaurant theme: 
http://www.pizzeriabiancorosso.com
https://www.pizzahut.com/#/home
https://www.peterpiperpizza.com
It ended up being a great discussion because they are all pizza restaurants, but the websites each have a very different look. Initially, the students did not like the one for pizzeriabianco because of the lack of color, but after we discussed the possible reasons for why, they had a richer understanding for the 'why' of the design. Comparing it to Peter Piper that definitely included the 'family' and 'game' aspect of pizza and Pizza Hut that focused more on take-out and counter service, they came to see that Pizzeria Bianco was about the 'experience' of eating pizza from a famous chef. I thought that this was an important discussion to have because even though they may have initially rated a particular website 'low,' there may have been reasons that the web designer chose to do things a certain way. The way the lesson unfolded in my classroom (unintentionally) was that we exercised to abstain from making a value judgment about the website, but kept it more objective, making observations about it (organization, color, layout, purpose and how these aligned) rather than 'scoring' them. 
I then had the students go to theme parks/aquarium/science center sites to compare them for ease of use, attractiveness, etc. They enjoyed visiting the websites of places that they have been to and analyzing them in a different way.
Disneyland
Seaworld
Arizona Science Center
Odessa Aquarium

Connecting the structures and formatting they saw on websites to design their own website in Lesson 2 was logical as well. I found it was important to emphasize the words 'content' and 'structure.' How will you incorporate structure into your website layout? How do other websites handle content and structure effectively?

The emphasis on content and structure led really nicely into Lesson 3 when students had to create their own language to address structure and content. I was truthfully a little apprehensive about Lesson 3 because I found it confusing when I read through it for the first time. Seeing this lesson, however, in the sequence of the others within this unit and how it is placed strategically before Lesson 4 and after students have evaluated websites helped me to stress with my students how languages convey structure. The neat thing was there was actually one group of students who came up with a language with a very similar concept to html with opening and closing tags of their own. With Lesson 4, I had students work in pairs and let them go at their own pace which worked well. I had them check in with me at various points. Having them pay attention to elements, structure and formatting all along was critical because in Lesson 4, this all came together when they had to apply it to creating their own sites, following specific guidelines. 

Having my students reflect on the questions in puzzle 5 on CodeStudio was an important way for them to bridge Lesson 3 with Lesson 4 (sample response below):
In what ways is this language similar to or different from the languages your groups invented in the last lesson?  The language is similar because there are a few commands used that we used last lessons. It is also different because they were able to change the font and color and we couldn't, they were able to make it look like a comic strip.
What are the rules of this language? The rules of this language are there is a opening tag and an closing tag to see where the language starts or ends. There are also spaces in between each picture and text to make the whole thing look organized.
How does this language add structure to the website? It makes the websites organized, it adds ways to make the website look good, it will allow us to add pictures, bullet points, etc., and it will help us be able to add sites and tabs.

Here is an example from Unit 2 - see how content and structure are addressed as students learn and use html?  Font size, paragraphing, headers - all evident here.

No comments:

Post a Comment