Is that cost money?

If you appreciate this education, please think about going to Eli the computer guy dot com and offering a one time or monthly recurring donation.

Welcome back.

As you know I am, Eli, the computer guy in today's clients are going to be doing an introduction to wire framing.

That's right, boys and girls, grab your pen, grab your paper and show the class what an artist you are.

So what we're talking about when we're talking about wire framing is we're simply talking about drawing out how your application should function so that you can use this as a schematic when you sit down to actually code and develop whatever project that you're trying to develop.

Think about wire framing as a schematic that, let's say a carpenter or a woodworker would use in order to to build a bookshelf, right?

So if a carpenter is going to sit down, they're gonna build a bookshelf.

They will draw out, you know, a design for how that bookshelf is supposed to look, and then, as they're building that bookshelf, they will then reference that design that they've created the same is through, basically, with wire framing.

What you dio is you sit there and you have an idea.

You have an idea for an application?

Maybe it's a mobile app.

What I wire frame here is an I o T s o Actually, Bernard, we know that communicates with PHP.

Script goes my sequel Nine yards.

So it might be I ot and might be mobile.

It might be a Web might be something very, very, very sophisticated.

Basically, when you're a wire frame in, what you're doing is you're simply drawing out and trying to figure out everything that your application or that your software will need trying to figure out what the information flows, what it needs to connect to and all that kind of thing, so that when you sit down to actually code and design everything out, you have something to reference the other thing that's very valuable when you do, Why are framing is that frankly, it's a hell of a lot of easier to do editing and proof for eating and suck when you simply are using a pen and paper in order to do it right when you sit down and you actually code out a piece of software, especially when you're dealing with user interfaces.

There are a lot of things that interact with each other.

So if you simply want to center something or change of font for something or change color or something like that, you can have a lot of problems once you've actually coded the application.

Because when you start moving things around, it's going to affect other things, right?

So wouldn't it be better is during the design phase during the wire frame phase?

That's when you figure out okay, this is more or less what everything should look like.

And then if somebody else has No, no, no.

You know, this shouldn't be that way.

It should be over here.

This should be here, right?

It's a lot easier when you're simply dealing with with pen and paper to be able to argue and change things.

So we're gonna be talking about today is we're going to be talking about how to do a wire framing, and this is something.

This is one of those things.

A lot of new ah, lot of new people they want to skip over this particular process.

But honestly, this right here.

This is probably one of the most important things were gonna be doing when you're gonna be developing your application.

So now they have a basic idea of what wire framing is.

Let's go over the table.

And I'll actually try to explain to you what's going on with this particular wire frame that I sketched out.

So here's a little wire frame that I sketched out now, to be clear when I'm gonna be doing a lot of the coding projects in the future, I am very interested in I ot some interested in our genome interested in raspberry pi interested in having these things communicate up with cloud functions and that type of thing.

So do realize when I'm teaching you folks how to code.

This is from a very classic I NT centric ideology.

Basically, being is, I want my devices to be about, communicate back with servers and then have those servers be able to present me with information that I care about.

So if you're trying to create video games, if you're trying to do other kinds of coding projects, just to be clear, you know I'm probably not going to be teaching you things that are the most relevant for what you're going to be doing.

I'm interested in the I t administration world, the coyote world, that type of thing.

So basically, what I have here is a basic project design for having Arduino with a temperature and humidity sensor.

So my idea is, I'm going to create a little Aren't we know device?

This will actually most likely be an Arduino, you know, with WiFi.

So the artery no, you know, with WiFi has a full WiFi stack on it.

So it is able to collect censor information, and then with that wife, I stack, it's able to post that sensor information to something such as a P A P script.

So what I'm showing here is I have my arm, you know, you know, on iron.

We know, you know, I'm going to have a temperature sensor connected, and I'm going to have a humidity sensor connected.

And so, again, this is a way before I start trying to plug things into the yard, we know I need to simply draw this out.

You know, say what sensors.

I want to be connected to it.

Other people can have arguments about it and we can try toe hash that out before we get to the place where I'm actually having to mess around with connecting everything to the Arduino itself.

So here I just sketch out the yard.

We know.

So I'm gonna have the yard.

We know it's got a temperature sensor is going to have a humidity sensor.

Then we have a little arrow here to show that is going to be sending data.

So it's going to be sending data.

I'm gonna be sending it to a PHP script so that PHP script isn't going to receive the temperature data.

And it's going to receive the humidity data then because I'm going to doing things such as charts and so for charts.

I need things like Time stamps and then going with PHP.

I'm going to add the time stamp here.

And so this is an important thing to be thinking about.

And this is one of the values of wire framing, right?

So with an art, we know where they are.

Do we know you can actually add what is called a real time clock to the art we know.

So the yard wayto could send send the temperature of the humidity a end of the time to the p A p script.

But that means I'd have to add the actual physical, real time clock to there.

We know it's an extra module that gets added on, and then I have other things that I have to worry about.

So this again, this is where it's useful for wire framing where we can have an argument about Does Yard, we know send the time values or is the PHP script going to add the time value?

Right.

We could just argue that out here on a piece of paper.

So what I'm going to have is I don't wanna have to deal with an extra module.

I don't wanna have to deal with voting for it.

I don't want to deal with fail yours or you're dead on arrival or any of that kind of crap.

So I'm not gonna put the real time clock on the Arduino itself.

I'm simply going to add a time stamp from the PHP scrip PHP script.

It's gonna receive the temperature from the Arduino is gonna receive the humidity from the Arduino, and that's going to add a time stamp.

It's then going to send its data.

We're going to have my sequel database.

There's going to be called a reading table.

That reading table isn't going to get the temperature of the humidity and the time stamp that has been added from a P A P script.

So basically, this is how the information will go.

The values will go from the Artemis.

No, my secret database table from there.

I don't want to want an administrator dashboard, so this will be an HTML dashboard html CSS, possibly job script, something like that.

And so I'm showing here is this data we got.

The arrow will then be able to be used for the administrative dashboard.

I'm simply going to have something that says Current and Tim Mature humidity.

Do a little box here for temperature.

It'll say 97 for humidity will say 50 under that I want a little car that'll say what the temperature and humidity has been like for the past 24 hours.

That's why the time stamp is required on down here for the last week.

Gonna have another chart, so basically it'll show us what the current has will show us what the trends for the past 24 hours are, and it'll show us where the trends are for the last week.

And so with this, this gives me a basic design.

I can start writing out something called pseudo code.

We'll talk about in a later class and start trying to build out this particular project.

But look at this right here, right?

Isn't it better to be editing to be modifying to be changing toe, have arguments over a piece of paper and something that I scribbled out versus Imagine if I tried to do to actually design code all of this out?

And then once it's completed, we then started having stupid arguments about how all of this stuff to work through other valuable thing again with wire framing is again, especially if you're new to coding.

When you start doing things like the last 24 hour charts and last week yards, it gets you to start thinking, What do I need?

Thio.

What what values do I need in order to do things like create time charts?

Right.

So if I have a temperature and humidity sensor, if that's all I passed from the P A P script to my sequel.

I didn't do a time stamp then when I would go to do a chart again.

How would you do that, Karen, if you don't have any times If you have time stamps, you can't do a chart.

So by drawing this type of thing, out you go Oh, yeah, I want a chart here.

So what's required nor do with Sha're what's required in order to a chart is a time stamp.

OK, well, probably not gonna get a time stamp with my sequel.

It's not.

It's not gonna be inserted by my sequel.

So then I can either insert the time stamp in the PhD script itself or possibly from the Arduino.

Then again, there you can have your own arguments about why you do that type of thing.

And so this is just a very basic wire frame again kind of from the coyote world.

Using are we know device passing the information to a PHP script, passing that my sequel database table and then having administrator dashboard eso with this type of thing.

Now it could be much more complicated.

You can have 10.

You could have 10-4 pages.

You could have 20.

You could have.

You have 500 right?

The idea here is that you're drawing all of this out, pointing what the flow should be and then trying to figure this this type of thing before you actually sit down a code.

So now that you have an idea, will wire frame it as you may be sitting there going.

But Eli, come on.

Real technology professionals, riel technology of professionals aren't going to use a pen and paper.

There's gonna be some sophisticated, you know, application out there for doing wire framing.

And the fact that matter is is that there are a lot of sophisticated tools out there that allow you to do wire framing.

But But if you have a rather simple project, let me tell you a good old pen and paper really does the trick again when you're gonna be developing sent relatively simple projects again, we're talking about ah websites with maybe five or six pages again, little io ti projects like this, that type of thing, honestly, they're really does have to be a question of Do you want to have to dig into you know a piece of additional software to actually be able to design everything.

If you just have a pen and paper, please grab a pen, you grab the paper, he said.

They're scribble of things out across some things out and put some new stuff in, and it can actually be a hell of a lot simpler and a hell of a lot quicker just to do it the old fashioned wet.

But if you are interested on using more sophisticated software, there are a lot of products out there that allow you to do wire frame relatively easily.

One of things that I will tell you is something that you might want to take a look at is basic graphic software in order to do why are framing s.

So this is something I used to do back in the old days.

Photoshopped basically used photo shop, and especially when we were designing things like Web pages, basically just create the home the about all of those pages, and we would actually wire frame simply and photo shop.

One of the nice things with doing the wire framing the mock up and photo shop is you could you could change things like fonts.

You could change things like colors you could You could move pictures around relatively easily.

And essentially, it's basically a dragon.

Drop things.

So if I have a customer and we do the about Paige and I'm like, Okay, the about Paige is gonna be here, and then you're you're bi or whatever is gonna be here and your picture is gonna be here One of nice things they do is they can say, Well, I don't really want the bio to be on the right of the picture to be on the left Can we put the picture on the right in the bio on the left And the nice part isn't using like, something a photo shop Just drag.

You dragged the picture to one side during the bio to the other side.

You're like, OK, does that look right?

And I'm like, Oh, yeah.

So again, using something like Photoshopped could be very useful.

If you want your wire frame your ma ca to beam or interactive, you can also do things such as use something like Google docks or again.

I also used back in the old days word, right, So with word you can actually create hyperlinks and you can export as a Web page.

So again, this is not something that is going to go into production environment.

You're not gonna upload this to a Web server, anything like that.

But if you're doing dealing with a rather simple application, being able to draw everything out, mock everything up and then have hyper links so people can click through.

So, like if you're going to like a report section, obviously, if you're using word or Google docks, that's not actually going to connect into a database back in.

But you could simply just mock up a little table.

So, like if you're if you have an administrative dashboard and you click on a button that says reports, you could click on that button and that button would just go to some some report page that would simply have a table on it.