Tech Edge, Mobile Learning In The Classroom - Episode 25, Vidcode
Trainin
Author
08/15/2016
Added
60
Plays
Description
Technology Information: Vidcode
www.vidcode.io
Searchable Transcript
Toggle between list and paragraph view.
- [00:00:00.516]Coming up on Mobile Learning in the classroom, vidcode.
- [00:00:03.488](techno musIC)
- [00:00:16.990]I'm Zoe Falls, and welcome to
- [00:00:18.318]Mobile Learning in the Classroom.
- [00:00:20.094]Today, we're gonna look at not an app,
- [00:00:23.078]we're gonna look at a website.
- [00:00:24.597]It's vidcode.io, and I actually found this website
- [00:00:29.039]through a newsletter that I got,
- [00:00:31.261]and it talks about ways to get teenagers
- [00:00:35.130]into coding, which is a big push in a lot
- [00:00:38.394]of after school programs, and they're trying to find
- [00:00:41.550]ways to get different audiences interesting in coding.
- [00:00:45.542]This one specifically is targeted towards girls,
- [00:00:49.393]but there are plenty of features in it
- [00:00:51.102]that will appeal to everyone.
- [00:00:53.306]So you go ahead, and you can sign up for free,
- [00:00:56.173]and I already set up my account,
- [00:01:00.444]and one of the things that I liked when I was going through
- [00:01:03.873]is you can code Pokemon Go, and if you watch some
- [00:01:07.280]of our previous episodes, you'll see
- [00:01:08.728]that we did one on Pokemon Go.
- [00:01:11.003]So this actually teaches JavaScript,
- [00:01:14.222]and it walks you through step-by-step what's going on.
- [00:01:17.842]So, on the left-hand side you see
- [00:01:20.597]the directions, and it gives you this preview picture
- [00:01:22.858]of what's actually going to be created.
- [00:01:25.661]In the middle, you see the actual code,
- [00:01:27.891]so you get to see what it looks like,
- [00:01:29.880]and then, over on the right-hand side,
- [00:01:32.145]they give you some pre-loaded graphics,
- [00:01:34.886]audios, and videos.
- [00:01:36.139]But if you notice, you also have this option
- [00:01:37.763]to upload your own file.
- [00:01:39.640]So if you're doing this in a classroom,
- [00:01:41.670]or you're doing this with some friends,
- [00:01:43.134]you can go out and make your own videos, create your own
- [00:01:45.514]content to then go through and do the coding.
- [00:01:48.700]So for students, they really get to take ownership
- [00:01:51.023]of what's going on, and they really get to be
- [00:01:53.478]a part of this process and they get to be creative
- [00:01:56.513]and go through the coding process.
- [00:01:59.223]So we're gonna go ahead and start, and we're going to
- [00:02:02.069]do the Augmented Reality Pokemon Project.
- [00:02:05.870]So again, augmented reality is also a really
- [00:02:09.533]innovative thing you're starting to see in schools,
- [00:02:11.844]and they get to see the world, and then there's
- [00:02:15.383]an overlay of some sort of graphic on top of it.
- [00:02:19.251]Alright so, it starts with videos,
- [00:02:22.330]and I'm gonna go ahead and use one of their sample videos
- [00:02:25.940]and go to the beach.
- [00:02:28.390]So it tells you on your first step to choose a video.
- [00:02:32.422]I'm gonna select my video, and as you see
- [00:02:34.740]over in that right-hand corner, it shows me
- [00:02:36.797]what my code is doing,
- [00:02:38.859]and then, I get to see the written code
- [00:02:40.531]where it says movie.play.
- [00:02:42.864]So it's telling me that movie is the object,
- [00:02:46.092]and .play is the action.
- [00:02:48.670]So I'm gonna say next and then add Pokemon.
- [00:02:52.030]I'm gonna go over to my graphics,
- [00:02:53.827]and again, you can upload a file.
- [00:02:55.336]So if you have students that have pictures of Pokemon
- [00:02:58.222]from wherever, or you know, they don't wanna catch Pokemon,
- [00:03:01.747]they can catch something else like they can catch
- [00:03:03.270]their friends, catch their pet, they can upload a picture
- [00:03:06.974]of that, but I'm gonna go ahead and choose Pikachu
- [00:03:10.527]and as you see, Pikachu shows up on top of
- [00:03:14.396]my water video, so I tell it next.
- [00:03:18.505]Now it's gonna show me how to edit,
- [00:03:19.786]and this is where they actually get to start
- [00:03:21.308]typing in their code, and in the red text,
- [00:03:25.113]it tells them exactly what it is.
- [00:03:27.247]So if I say Pokemon, which again is the object,
- [00:03:32.109]and then I say .rotation, so I'm telling it
- [00:03:35.997]I want it to rotate, and then I wanna rotate it 30 degrees.
- [00:03:41.145]And If you notice, it will highlight the line of code
- [00:03:43.940]if I'm not doing it correctly,
- [00:03:45.690]so it walks me through step-by-step
- [00:03:47.146]what I need to do.
- [00:03:50.567]So I can also scale it, so I can make him smaller,
- [00:03:56.978]and let's make him half the size.
- [00:04:00.506]As you see, it shrunk him; I can also make him bigger.
- [00:04:05.503]Look, giant Pikachu!
- [00:04:07.530]Alright, so let's go back and make him small,
- [00:04:10.429]and I can change his opacity, so I can make him
- [00:04:13.302]fade into the background a little bit more,
- [00:04:15.428]so Pokemon .opacity,
- [00:04:20.551]and we'll do eight.
- [00:04:22.448]So, he's still pretty visible,
- [00:04:24.541]but kind of fades in the background a bit.
- [00:04:27.612]And again, it tells you, once you've made the changees
- [00:04:29.435]you want, and I would encourage you to have,
- [00:04:31.680]have your students try different things.
- [00:04:33.809]Give them tasks: can you make Pikachu stand on his head?
- [00:04:39.832]Tell them to go through the code, and just try
- [00:04:41.517]things until it works 'cause it shows you live
- [00:04:43.661]what's actually happening.
- [00:04:45.645]So if we say next, jump around.
- [00:04:48.230]Okay, for those of you who have done other
- [00:04:50.080]coding things in classrooms, I know I've seen it
- [00:04:52.109]in elementary schools, where there are different types
- [00:04:55.031]of codes where you just drag in
- [00:04:58.004]the super-complicated coding that
- [00:04:59.732]they might not be ready for yet.
- [00:05:02.058]They have that option too, so it's telling me
- [00:05:03.550]to drag the jump around code in.
- [00:05:06.317]So, I just click and drag and drop,
- [00:05:09.220]and Pikachu is now dancing across the screen,
- [00:05:12.622]but again, I can read the code.
- [00:05:14.392]So if you're teaching this live with your students,
- [00:05:16.068]you can go through the code and talk about,
- [00:05:18.380]"Okay, based on what we learned with situating Pikachu,
- [00:05:21.453]what can you tell me about this piece of code?
- [00:05:24.085]Why is it functioning the way it is?"
- [00:05:27.671]And then, we'll go ahead and say next.
- [00:05:30.364]You know, again it encourages them.
- [00:05:32.560]So the students can do this independently
- [00:05:33.951]because the software walks them through.
- [00:05:36.607]So, let's look at the Poke Ball.
- [00:05:39.675]So I'm gonna add in my Poke Ball.
- [00:05:41.466]There it is.
- [00:05:43.292]And now it's gonna give me options again
- [00:05:45.406]to rotate my Poke Ball.
- [00:05:47.391]So again, I'm typing in the object: Poke Ball.
- [00:05:51.040]I want it to
- [00:05:55.322]scale,
- [00:05:57.253]and I want it to scale to
- [00:06:01.590]ah, let's make it a little smaller,
- [00:06:03.233]here we go.
- [00:06:05.101]And I want to keep the opacity,
- [00:06:08.603]that's good.
- [00:06:11.711]And so now, mouse tracking.
- [00:06:13.473]So I'm dragging my mouse tracking,
- [00:06:15.597]and as you see, I have my mouse over on the Poke Ball,
- [00:06:18.534]and that's what's moving the ball around.
- [00:06:22.548]So again, you can go down and talk to your students,
- [00:06:24.622]walk them through the code, and try to see
- [00:06:27.839]if they can problem-solve through and think critically
- [00:06:29.982]about what that code is doing, and how it's functioning
- [00:06:32.391]in this video that they're creating.
- [00:06:35.689]So, go ahead and say next.
- [00:06:37.560]So now, we can score the game,
- [00:06:40.063]and again, for kids and students that are familiar
- [00:06:42.316]with Pokemon Go, the logic of walking them through
- [00:06:45.471]this process is gonna be easier
- [00:06:47.161]because they've played the game.
- [00:06:48.672]They've experienced it, so now they're sort of
- [00:06:50.334]seeing the back end of how Pokemon Go works.
- [00:06:55.525]So we'll go ahead and drop in score,
- [00:06:59.116]and again, if you scroll down, it tells you
- [00:07:01.435]the score and you can see that
- [00:07:02.961]in the upper right-hand corner.
- [00:07:06.045]And now, we're gonna customize score again.
- [00:07:08.744]So in this one, they can
- [00:07:13.385]change the color,
- [00:07:15.043]so we're gonna make it green,
- [00:07:23.780]and
- [00:07:26.776]we're going to,
- [00:07:29.400]oh,
- [00:07:30.312]okay so if you notice, my score didn't change color.
- [00:07:33.147]It's because my code isn't right.
- [00:07:34.841]I selected my object, but I didn't tell it
- [00:07:36.851]what I want it to do.
- [00:07:38.118]I want it to color.
- [00:07:39.927]See, so now it turned green.
- [00:07:41.953]So again, have your students be aware:
- [00:07:44.327]Is it changing?
- [00:07:45.160]Is it doing what you thought it was going to do?
- [00:07:47.089]And if it's not, have them problem-solve through
- [00:07:49.282]how to fix it.
- [00:07:51.248]And let's go ahead and make the score a little smaller.
- [00:07:53.815]Score text
- [00:07:56.575]and let's do size,
- [00:07:59.188]and let's make it,
- [00:08:04.039]what's 35?
- [00:08:06.275]There we go.
- [00:08:07.359]Okay, so you can change fonts and other things,
- [00:08:09.647]but I'm good with the font that it shows,
- [00:08:12.271]so I'm gonna go ahead and say next.
- [00:08:15.290]So game logic, so mouse collision.
- [00:08:18.327]Again, even before you transfer the code in,
- [00:08:20.351]you can have them think through
- [00:08:23.442]what the code is going to do.
- [00:08:24.857]So based on mouse collision, and the Pokemon Go game,
- [00:08:28.868]have the students think through what is this piece
- [00:08:30.707]of code going to do?
- [00:08:32.356]How is it going to function in the game?
- [00:08:34.714]And then, have them actually drag it in,
- [00:08:39.675]and then you can see the code,
- [00:08:42.013]and it's actually
- [00:08:44.762]the part that makes when you get the Poke Ball
- [00:08:47.177]on Pikachu, which I'm not doing very well,
- [00:08:49.968]it shows that collision, so that's what it's doing.
- [00:08:52.422]It's saying when your object clicks on the moving object,
- [00:08:56.860]it counts the score.
- [00:08:59.893]So then, we'll say next.
- [00:09:03.435]So now it's actually telling them go ahead
- [00:09:04.836]and play around with it.
- [00:09:06.092]See if you can catch Pikachu.
- [00:09:08.842]Here we go; I got him once.
- [00:09:11.266]And then, say next.
- [00:09:13.796]Okay, so now caught text.
- [00:09:15.383]We're gonna throw in
- [00:09:17.332]another piece of code
- [00:09:19.052]and
- [00:09:20.820]again, we can change
- [00:09:25.036]the font color,
- [00:09:27.216]so caught
- [00:09:30.044]text .color
- [00:09:33.189]and yellow
- [00:09:39.739]and let's do
- [00:09:42.144]caught text
- [00:09:44.518]font,
- [00:09:45.523]let's change that
- [00:09:53.313]and let's change the size,
- [00:10:00.086]and as you can see, they have multiple ways
- [00:10:01.597]of engaging with this code.
- [00:10:02.976]They're learning the pre-given code,
- [00:10:05.042]and then, they're able to type in their own code
- [00:10:07.235]and see it happen live.
- [00:10:10.792]And our size is gonna be 35,
- [00:10:14.284]alright.
- [00:10:16.243]So, then we'll say
- [00:10:20.478]next.
- [00:10:26.052]And then, win game, we'll drag that in
- [00:10:34.234]and that'll show you when you win the game.
- [00:10:40.909]Alright, so now we have our Pokemon game,
- [00:10:47.528]and I actually have one that I
- [00:10:51.570]already pre-made,
- [00:10:53.308]so go to my profile because you can save the ones
- [00:10:54.955]you make, so if you have content you put in yourself,
- [00:10:59.951]you can save it.
- [00:11:01.096]This is one I made, and
- [00:11:04.931]my text of "caught 'em" shows up.
- [00:11:08.130]Pokemon
- [00:11:09.955]catching him.
- [00:11:11.074]If I get to five, it'll show me my win screen.
- [00:11:14.652]Come here, Pikachu.
- [00:11:17.104]There we go!
- [00:11:18.685]And so, you're students have just gone through
- [00:11:20.861]and they've completed coding.
- [00:11:23.478]So there are different projects you can do within this.
- [00:11:27.998]There are different creating ones that will
- [00:11:29.522]walk you through what it is.
- [00:11:30.355]You can do stop motion, you can make your own filter,
- [00:11:32.967]make a meme, doodle augmented reality,
- [00:11:36.791]and then there are obviously ones to pay for,
- [00:11:39.929]there are ways to get a school account,
- [00:11:44.048]and it will show you what they're thinking about
- [00:11:45.849]bringing in next, so some Python,
- [00:11:48.338]virtual reality, 3D graphics.
- [00:11:51.615]So again, it's a really nice, fun way to get kids
- [00:11:54.782]interested in coding.
- [00:11:55.868]They get to see the power of what that coding does,
- [00:11:58.449]in an environment that's similar to something
- [00:12:00.620]they already know.
- [00:12:02.845]So this has been Videocode,
- [00:12:05.638]and it's videocode.io
- [00:12:08.468]and thank you for your time.
- [00:12:09.797](techno music)
The screen size you are trying to search captions on is too small!
You can always jump over to MediaHub and check it out there.
Log in to post comments
Embed
Copy the following code into your page
HTML
<div style="padding-top: 56.25%; overflow: hidden; position:relative; -webkit-box-flex: 1; flex-grow: 1;"> <iframe style="bottom: 0; left: 0; position: absolute; right: 0; top: 0; border: 0; height: 100%; width: 100%;" src="https://mediahub.unl.edu/media/6087?format=iframe&autoplay=0" title="Video Player: Tech Edge, Mobile Learning In The Classroom - Episode 25, Vidcode" allowfullscreen ></iframe> </div>
Comments
0 Comments