Placeholder Image

字幕表 動画を再生する

  • creating these classes requires equipment and service.

  • 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.

  • That table would be static information.

  • It would be getting pulled from anywhere but can just show you.

  • Okay, this is this is what basically of the table will look like.

  • This is where the menu bar will be.

  • These are some of the colors and things that we're thinking about that type of deal, so really something to think about.

  • If you're gonna be doing wire framing, you want to get past past the basic pen and paper again.

  • Think about using the equivalent of photo shop.

  • If you have it, think about using the equivalent of Google docks.

  • Possibly keynote a power point, that type of thing.

  • Ah, word.

  • All of those.

  • Those types of things that could be very useful for Caesar.

  • Easier wire framing mock up back in the old days.

  • That's one of reasons why people really liked things like Dream Weaver or the visual studio out of Microsoft's, a visual basic used to be huge eso visual basic was a software creation package from Microsoft.

  • And the cool part Woz is is you.

  • You could just you know, it was gooey interface for doing things like creating forms, creating forms, creating all the interfaces for your application.

  • So one of the nice parts with visual basic you can actually design all the forms.

  • You could design all the reports, you could design everything and then make sure that your user like whatever it was you created, and then once they gave you the okay.

  • Then you would create all the code, actually connect everything together appropriately s So that was one of reasons people like visual studio back in the day.

  • If you're looking for other wire frame software again, if you're if you're thinking about using wire for himself or you may be on a team where you need to be able to share the wire frames, maybe pop the possibly multiple people are adding the wire frame again.

  • Especially it's a large project.

  • If you're looking for other options out there, there are a lot of other options.

  • So let's go over to the computer for just a second, so I can kind of show you, I guess.

  • How many wire for himself, for options there are for you.

  • So here we are, my computer.

  • I did just want to show you this this particular example from a medium post.

  • But this is where this one person, basically, as you can see, they used a computer on, mocked up the Will iPhones themselves.

  • And then once that was mocked up, they went in and hand sketched out how everything should look.

  • So this this is what a wire frame could look like two.

  • But if you're thinking about wire frame tools, basically what you do is you just go to a Google, you type and wire frame tools, and then you can see an absolute crap ton of wire frame tools out there s So this is kind of gonna be one of those things where depending on what you are looking for, what your price point is, what the company that you're dealing with once you may maybe out of frying free solutions out there or you might be able to find solutions that are relatively expensive.

  • You know, they got adobe products the whole nine yards you go over ice, pulled up this particular wire frame tool called mock flow on.

  • So it kind of shows you with this allows you basically easily be able to create these wire frames, designed things out and again.

  • You're just sketching all of this stuff out.

  • So you have an idea of how it should look.

  • You go down, you can see it.

  • It allows you to create site maps, allows you to collaborate with a team.

  • It has a lot of options out there that may be valuable for you.

  • so again, you know, when you're looking at any kind of programming tools, just like any other kind of application that you'll be purchasing, you need to think about what your requirements are, how much money you're willing to spend.

  • So for this, you know, they've got a free basic version that is $14 a month.

  • The team pack is $30 a month.

  • So whether whether or not you would use a pen and paper or whether you would use mock flow, it really just simply depends on what your particular situation is.

  • So that was just the basic introduction to wire framing again.

  • If you have not played around with doing wire friend before, you want to start coding applications again, whether they're coyote applications, whether they're gonna be websites, anything like that, you really need to get used to doing wire framing.

  • Basically, just being able to sit down, take a pen and paper or take a basic piece of software sketch out what an application should look like, and more or less how it will work.

  • And what the information flows will be is very valuable for yourself.

  • Just like if you were a carpenter, building your own bookshelf.

  • It could be very useful.

  • And just to make sure you're on the right track, right?

  • You know, you don't start doing something that you didn't mean to d'oh.

  • But also again when you start working in a team environment.

  • When he started in with customers when he started in with clients, making sure everybody is on the same page is incredibly important.

  • It's one, though.

  • The worst things when you're dealing with real customers, real clients, real bosses is you can sit down.

  • You can have a big old business meeting.

  • You can take two hours at the end of it.