Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy and in today's clients and going to be showing you how to create a basic alert animation using CSS.

So whenever I'm teaching you folks many times, I am taking you from the I o T.

Perspective again, the Internet of things perspective.

The idea being is that you're going to be building and creating numerous different devices in your environment and those devices they're going to be sending information back to a main server.

That main server will then parse the information that is sent back to it.

It may put that information into a database and may use that information to send out an SMS message for an alert something like that, or it may use the information that's been presented to it in order to dynamically create an HTML Web page.

And then your users may have that HTML Web page open as some type of monitoring system to tell them if there is a problem in their environment.

One of the issues you get into when you start dealing with the user experience design is that you can create things that again they give all the information that they're supposed to give.

But if they don't attract the attention of the end user or they don't present the information in a way that the end user understands, it can be both technically correct and absolutely worthless.

Oh, the exact same time, right?

So imagine if you have a lot of temperature sensors in your environment.

And so you want to make sure that if the server room goes above a surge in Tampa cure, you want to make sure your users are alerted s so that they will take some action.

They may turn on the air conditioner.

They may open the door.

They may simply call the V a C technician to try to solve the problem.

Well, let's imagine that you have a monitor, and in that man monitor you have a Web browser that's open and in that Web browser, basically have a dynamically writing HTML document that shows you information from the different temperature sensors within your environment.

Now again, it's dynamic.

So is dynamically wrote in.

So as the temperature king is in your environment, the numbers will change.

So you know, Sensor one says 80 cents or two says 90 cents or three says, you know, 75 someone and so forth.

Well, one way that you could create this particular monitoring screen is simply for the text itself to update.

And that's it, right?

So Sensor one is 90 degrees so you can tell your people you can say to your people if the temperature is above 90 degrees, call the H B A C technicians.

But think about this.

If you just have a white background and you just have black text, even large Black Tex and just a Sensor one and then it goes.

It says 89 degrees and then you know, automatically updates.

And then it says 91 degrees.

It was just black text on a white background.

How many people do you think are going to notice that that is change, especially if 99.999% of the time the information being presented is normal.

Right?

Every time they look at the screen, all the temperature sent, the sensor values are normal, you know, at a certain point, people just start assuming that all the temperatures are fine.

I look at the screen, and when I look at the screen, the temperatures are fine.

Therefore, I no longer look at the story.

So one of the things that you could dio is simply do some basic formatting tweaks of doing something, such as changing the color of the text.

So let's say when the temperature is below 80 degrees, the temperature text can be green.

When the temperature is between, let's say, 81 degrees to 90 degrees.

You can have a temperature change to yellow, and when it's 91 above, you can have it turned to red, right?

So that is a way to visually a represent you know what is what those temperatures actually mean.

But again, I think about it a little bit from the user experience.

The user perspective, if you just simply have a static screen on this monitor.

Even when you change the color, when somebody gets around to looking at that screen, it will be easier for for them to determine that there's a problem.

So it is a better way of doing it than simply black text on a white screen.

But it's not necessarily going to get anybody's attention, right?

If I'm sitting here and I'm in a Cabinet conversation and a cup of coffee with one of my co workers and that the color over here changes, probably just not gonna notice that there's a good chance people are gonna notice that.

So one of the things that you could do is you can create a basic animation.

So instead of just simply having the color change, what if you have the background behind the color?

Basically, we do a def yet the background behind the color and it starts doing an animation.

Basically, it starts flashing red, right?

So I'm sitting here and I'm having a conversation.

My co worker and out of the corner of my eye, I start seeing this flash over here.

Well, then I can look a crack, the server rooms overheating again, right?

This is one of the things that you need to be thinking about when you're thinking about the whole user experience.

You Why you ex design is again not simply presenting information that is technically accurate.

The temperature is there.

White background, black text.

Technically, technically, you're doing your job is gonna be a horrible user experience, right?

One things you know you're thinking about is he ain't going these extra steps to say OK, when the temperature goes above a certain level or when the sensor hits a surgeon level, I'm going to do something that then try to attract the end users by doing something visual.

So what I'm going to be showing you how to do today is you can use just CSS no JavaScript.

So we're gonna be using today is a came out, and CSS we're going to create some very, very basic animations that can really make your i o T applications really become a hell of a lot more useful with literally just a few lines of code.

So the warning warning Will Robinson for today is if you're a human with eyeballs, you are not going to look what?

Look at this demonstration.

Here's a trigger warning.

If you have eyeballs, this demonstration might send you into seizures.

So I feel I feel I'm doing my my legal obligation by giving that you this morning again.

It is very important.

Understand that when I do these demonstrations and I do these classes many times, I give you very ugly demonstrations because I'm trying to get the point across, please, to not simply copy and paste what I'm showing.

You do a little bit of modification so that you're in users Don't hate you with that.

Let's go with a computer and again put your eyeballs.

Just take your eyeballs out, put them in a closet for the demonstration and let me show you how all this works.

So here we are, back in my demonstration machine again, I'm using a Mac book pro.

And so, in order to write this code, I used text at it for this type of scripting.

Oh, you need is a basic ask a text editor.

So if you're in the Windows world, you can use note pad again.

The macro Deacon use text at it.

If you're in the Lenox world, you can use G edit nano of him whatever you want.

Important thing is we're gonna have to documents here.

We're opening up in the Web.

Browser has to end with dot HTM, or Daddy came out for the web browser.

Open up.

So I've called this alert dot html on then that's gonna be pointing to a style she called alert style dot CSS.

Now, this is the point in the demonstration where you should pluck your eyeballs out of your head and put them under your desk for about the next two minutes.

And if you don't do that, it is not my fault if you have an epileptic seizure after this again, my job here is to teach you what can be done.

Not necessarily what you should.

D'oh.

So anyways, Jessie, you get an idea of what we're gonna be coding for.

Let me open up the demonstration and here's here's the demonstration.

Ah, So basically, with this demonstration, I'm giving you four examples.

Uh, what we have of the top is just a basic def.

So this is just a basic div.

It is 40 pixels high.

It's 100% across.

And what it's doing is it's going from red to white every two seconds, right?

So for this, let's say you could put this at the top of the scream as an animation, and then underneath you could print out the information.

That's important.

So let's say you have a lot of technical information.

You don't necessarily animation directly behind technical information so you can have this at the top.

And then the technical information can simply be a black on a white background.

And that would be easier for your end users to read again.

That's the important thing here.

There is what is technically possible, and then what is easy for the end users to consume.

And so you're going to need to be thinking about that when you create your user experience.

Ah, the second example here is let's say we just have basic sensor s o.

The sensor is pulling an information.

The temperature goes above let's say, 91 degrees.

And so what I'm having here is I have that whole bar across again.

But in the middle of it, I'm printing out in pee at a 35 pixel size.

Just say 95 degrees.

So again, this is a way that if you have like simple information.

You can have the animation of behind the text, and then the context can tell you exactly what's going on.

Having a long bar like this, you could put a lot of different information in that bar.

So again, let's say you had a lot of different sensors.

Let's say I had, like, 10 sensors Eat one of these bars could be one sensor and then basically you can have the animation behind whatever sensor is being triggered and then it can tell you.

So this is the temperature.

This is the humidity.

This is the water level.

This is a motion to the right.

You can actually have a lot of information in this bar is showing you that.

Let's say you're dealing with a small screen or you don't need that much information.

Basically the same thing with the Div.

Only I've made it a lot smaller than something like 40 pixels by 40 pixels.

And then inside, I just simply put the basic number 95.

So again, dynamic it written.

Okay, it's flashing wise, that flashing.

Oh, because it's 95 degrees.

Let me figure out what's going on.

The final example here is what will really give you an epileptic fit is showing you that you can animate the size of text.

So I have.

I have my little computer screaming.

My little computer is screaming on Basically, it's a help.

And so what I'm doing here again that that it's being animated.

The text size is going from a small text size to a large deck size, and it's just completely.

Lupin!

Lupin, Lupin!

Looping again?

Here's a quote.

Here is a great philosophical question.

If a computer screams, does anybody care?

That's a question for you.

Anyways, let me minimize that, because it really does make me nauseous.

That's not even a joke.

And again, that's one thing you have to think about.

Like where the school user experience like that.

What I just showed you literally makes me nauseous.

So making your users nauseous is not good.

So when you design whatever you're designing, don't make your users wanna vomit.

They're not gonna want to use your system.

So what was?

The first thing that I want to do here is I want to show you the actual HTML just to show you how these these dibs and these lord boxes work and then we'll go over to the C s s s.

We're gonna open up with a cure.

We're gonna open up with a head and we're going to link to the silent sheep again.

Alert style dot C s s.

So this is if this ill she is in the same directory as your HTML document.

You simply put the name there.

If not, you put the full file path, we're gonna close the head and we're going to open up the body from there.

We're going to create our different examples Here s o the first example.

So this is the div.

So this is that bar going across the top Where was just read Nothing else in it, just flashing.

So all I did here is I simply created a div.

The class is alert box and then a closeted.

And there's nothing else in the middle.

So that gives us that 40 pixel by 100% across red flashing.

I did a break to separate.

The next thing that I did is I created a dip again using the exact same alert box.

So I'm reusing the alert box.

But inside the alert box.

I did a P tag with a class of alert text.

So that's that's going to be taking a CSS formatting from the class alert text.

And then I put the 95 degrees so and then I closed the dip.

So with that, basically, it's that same the same Devdas I had before.

But inside I put some alert tax.

Then we're going to go down here.

We're gonna break again.

We're gonna go Def, We're going to a class.

So I created class for the DIV called Alert Square.

So I simply modified what that dip should look like again.

I think it's 40 pixels by 40 pixels to make that square.

I then centered in the screen.