Working with Data on the Web
Illustration by John Hersey

Incorporating data- attributes


From:

Working with Data on the Web

with Joseph Lowery

Video: Incorporating data- attributes

I'm a really big fan of customization in code, and pretty much everything else. But I recognize the value of standards as well. And that's why I think the data attribute is a really big deal, because I can have both. In this lesson I'm going to show you how I use the data attribute in an HTML 5 project for incorporating video bumpers. Short videos that play on either side of the main video. Let me give you a demo of how that works. So I have open the index.htm file from the chapter six 0603 folder and I'm going to scroll down to the video area here.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Working with Data on the Web
2h 21m Intermediate Aug 21, 2013

Viewers: in countries Watching now:

Often, designers need to convey simple data without the overhead of a relational database such as MySQL. This course introduces web technologies that make it easy for a designer or developer to store, retrieve, and display data online.

First, discover how data is collected via standard and advanced HTML5 forms. Then look at a client-friendly approach to storing that data using simple CSV files. Next, Joseph shows how to store, manage, and style data with the three big players: the granddaddy of static data, XML; the popular JavaScript-based JSON; and the recursively named YAML (YAML Ain't Markup Language), frequently used in Ruby-based projects. Plus, take a close look at basic HTML5 data options, including local storage and the flexible data attribute.

Topics include:
  • Interacting with data through HTML forms
  • Storing data as comma-separated values
  • Saving, retrieving, and displaying data as XML
  • Setting up and updating JSON data
  • Creating a YAML data file
  • Using HTML5 data storage solutions
Subjects:
Developer Web
Software:
HTML XML CSS JSON YAML
Author:
Joseph Lowery

Incorporating data- attributes

I'm a really big fan of customization in code, and pretty much everything else. But I recognize the value of standards as well. And that's why I think the data attribute is a really big deal, because I can have both. In this lesson I'm going to show you how I use the data attribute in an HTML 5 project for incorporating video bumpers. Short videos that play on either side of the main video. Let me give you a demo of how that works. So I have open the index.htm file from the chapter six 0603 folder and I'm going to scroll down to the video area here.

And, I'll just go ahead and click Play. >> It's happening all over the world. Every day people are harnessing the power of the sun and it's literally lighting up their lives. (MUSIC). >> That's the end of video bumper. >> To see the faces of our customers when we first turn on the solar system and watched the meter go backwards.

It is such a happy moment and makes me very proud. >> And this is the main video. Lemme go ahead and scrub towards the end here. >> Some/g. >> Solar energy is awesome. Lower your energy costs and help create a cleaner, healthier planet for generations to come. Connect to the sun and power up. And that's the bumper out. Pretty seamless, eh? In the intro to this chapter, I gave a couple of examples showing the data attribute, already inserted into the code.

So that it could be read by JavaScript or another technology. In this project, the data attribute is inserted via jQuery and its values manipulated, so different videos can be loaded and displayed dynamically. I'm going to take you on a tour of the final code, so you can see how it's used. Let's head over to the code editor, where I have open that same file that we just looked at in the browser. So let me show you first how the HTML is set up. I'm going to scroll down to around line 66, and there's a container called videoContainer that holds a HTML5 video tag, along with three different sources.

I'll need all three to cover the range of modern browsers. That's the HTML. Let's scroll down to where our script starts, which I think is down around line 92. After some initialization in lines 93 and 94, the very first four loop goes through each of the video sources and does three things. First, it gets the current source attribute and stores it in the variable called orig, short for original. Second, and this is key, it creates a new attribute called data-orig with the value that was just stored.

Finally, it replaces the source attribute with the bumper in source. We store this data-orig value in order to use it later and replace it. I need to scroll down just a little bit more, so that we can see the next group of code. Now the data-orig attribute is used again, in the routine that is used on line 104. This code chunk waits for whatever video is playing to end, then acts accordingly. Again, it loops through the sources and straightaway gets the data orig value.

Now if there is a value in the data orig attribute, it means that the first video bumper has just ended and we're ready to play the main video. So the source is adjusted. You see that in this section here. If there isn't a data orig value, it's because the main video has just finished. And we're either ready for the bumper out, which is handled here, or we've just paused. And that's how the data attribute is used in this particular project.

Now let's go back and demo the video one more time with the coders commentary track turned on if you will. I'll hit Refresh, and click Play. >> It's happening all over the world. >> Okay, so we just loaded the page and our data orig attribute has been created. I'm going to go ahead and jump to the end of the first bumper, which as you can see is about 22 seconds long. Now when I press Play, the bumper in will reach the end. >> To see the faces of our customers.

>> And the data orig value has been swapped,so the main video is now playing. So let's scrub to the end of the main video, which is substantially longer, but we've gotta get the cute kids in here. >> Solar power is awesome. >> Solar energy is awesome. >> That's correct , it is. And what's even more awesome is our data-orig value, which made it possible to swap the values in and out.

So that we could seamlessly present a bumper in, a main video clip, and a bumper out. Of course, this is a very specialized use of the data attribute, but that's kind of the point. All uses of the data attribute are specialized, so they can do exactly what you need and still stay valid HTML5 code. If you'd like to see how the video bumpers are integrated from top to bottom, take a look at my lynda.com course HTML5 Projects Video Bumpers.

There are currently no FAQs about Working with Data on the Web.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Working with Data on the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.