A Functionality Example
We talked about the two types of elements introduced into HTML5. This exampl will be an example to the functional elements. (in this video you see me say the way word thematic to many times ;). But if you cna ignore that the goal of this video is to show you the idea of elements that represent something that might become interactive such as the video, sound and so forth although this sample isn't as interactive - we are saving the interactive ones for a later date ;).
Video Transcript
00:00All right, let's move on to the next thematic grouping and actually this next thematic grouping is actually going to be the group that
00:05We're going to be talking about for now until the end of the course
00:08So we're going to start with a very very simple thematic grouping. I'm just going to go back into our basic element right here
00:15Oh, just one second. I want to make sure that I'm working on the right file
00:20So I'm going to go on to four because now we're in the fourth
00:24Area, and I'm going to just go right here, and I want to show just a thematic. It's more
00:30It's a thematic slash functionality. It's kind of a merge of the two
00:33So I'm going to look at one of the most simple ones, and this is going to be our introduction to this idea
00:40So the next day we're looking at the next thematic grouping, and I want to focus on an attribute. That's called time
00:46Which is actually a really cool one. I originally thought when I saw it that as soon as you put time
00:50It's just going to put the time in but actually doesn't the time idea itself is obviously
00:55When a search engine comes onto your site or our assess node or there's a lot of different ways for
01:00For content to come onto your page sometimes users really want to know when that article was created or the browser wants to know when that
01:07Article was created exactly when it was created or what is it referencing about so if you're writing an article telling a story about
01:14Saying that happened 20 years years ago
01:16you want to have a way to maybe enable the browser to know you're talking about something that happened 20 years ago and
01:23That's where the thematic idea of time comes in and time really is easy to work with
01:28Same idea if you want to do anything visual anything fancy you do that in CSS time
01:33Just becomes like one another time element inside of the time itself you can write here
01:38Sunday
01:40Jan 14
01:42All right, so Sunday January 14th now
01:45This is not enough information for our search engine to know exactly when it was for our users
01:50It might be enough
01:51But we might be able to we want we might want to add just letting our browser know exactly what date or time it happened
01:57So I can just put here a date time and just type inside that it happened actually in
02:022007 on the test on October 2007 and actually oh actually let's follow through with the January 14
02:09So here we go, so it was on actually January 14th of 2007 now the users are not going to see anything
02:15all they're going to see is Sunday January 14th, so if I
02:20Open this up and it up again, so if I open it up
02:29So if I open it up
02:31We'll see that January 14 the user doesn't really see anything
02:35But now we have the superpower in the back because now when a search engine looks into our site
02:40They could actually have a timeline and be able to decrypt actually a story
02:45Based on the specific date or time that it actually happens, and it's actually really interesting to see where this develops into
02:51That's about all I have about that one. Oh actually there's one more thing now
02:56This can become really useful in a scenario where time has a very important meaning so for example
03:03You might just have your the it's 4 p.m.
03:07But it's not really 4 p.m.. In another state or another country
03:11So basically the time block will enable then hopefully in future versions
03:15Maybe of browsers to be able to automatically show the time in the user's time zone for example
03:21I don't know if that's actually going to happen, but even if it doesn't happen automatically
03:25It's going to be easier than to have these different
03:27JavaScript plugins that will know how to automatically change the actual time to be the time in your specific time zone so for example for us
03:35We have a lot of events which kind of leans on to our event type of website that we're trying to build
03:40So we might have have an event and it's a specific data in specific time
03:44And we want to make sure that different users see it in their actual time zone in actual time
03:48So we'll probably use the time element because then it's going to standardize it
03:51It's going to make it easier to actual actually use the same tools that create these time
03:56Functionality over and over and over without needing to recreate anything Carol. Do you have any questions about this one?
04:10Simplify
04:12Code not make it more complicated
04:15absolutely offering all of these
04:18English words rather than all of this cryptic code
04:22Absolutely
04:23Absolutely
04:23a lot of is also a lot of stuff that we always do and kind of like a lot of website use anyways the whole idea behind
04:31HTML 5 is why reinvent the wheel each time you build a website if this is something that people use a lot if they
04:37Need dates and times. Why don't we support something that it makes it easier to do it?
04:42Same thing for video and so on and so forth
04:44So a lot of the changes in HTML 5 are less to try to drive you crazy and more to try to add functionality
04:50That's more supported and easily integrated
04:55Exactly, that's the word
04:57What we've done and and we're going and and make it easier for us rather than make it more complicated
05:04Exactly because as we make it as we make it easier for us also to we make it easier also for our back-end code
05:09Which then basically means that we'll be able to create an even more sophisticated applications because we're working with them
05:16Where our starting point is more advanced than it was in HTML 4 and if our starting point is like tools
05:22They already give us a video player
05:23So now we don't have to worry about how to build a video player
05:26We just dropped the video player and now we could focus about making the website even more sophisticated
05:30Than what we used to do five six years ago