Name: CSSとHTML 5 - アラートのための基本的なアニメーション (CSS and HTML 5 - Basic Animation for Alerts)
Uploaded: 2021-01-14T10:12:07.000Z
Duration: 26 min 28 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

程度の副詞

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.

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.

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

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.

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.

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.

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.

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.

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?

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.

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.

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.

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

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.

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.

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.

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.