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.
While HTML5 is not a technology dedicated purely to managing data on the web, the advances in that regard and the latest version of our most basic web language are substantial. In this lesson, we'll take a look at the key enhancements that make it far easier to work with data on the web. The primary data-oriented features in HTML5 are a slew of new input types. The ability to store and retrieve data on the client side, the multipurpose data attribute, and the new data list tag.
Let's break those down starting with the input types. There are in all 13 new input types including URL, date, tel for telephone and e-mail. Most are partially supported in modern browsers with the primary changes coming in mobile browsers. Input types are covered in depth in Chapter 1. Local storage is a particularly useful HTML5 data-related feature, largely because it adds the ability to maintain state without resorting to server side technology.
That means if some data has been saved using local storage and its displayed on the webpage, if you close your browser and then reopen it, the data can be retrieved and displayed again. Unlike cookies, local storage is handled on a per browser basis. And the capacity is much larger, 5 MB versus 4 kb for cookies. Local storage uses a basic name value pair structure and is limited to strings. The two most common commands for local storage are very straightforward.
setItem takes two arguments, the ItemName and its value. While getItem only needs the name of the item to retrieve it. We'll continue to explore local storage later in this chapter. One of the more annoying problems with earlier versions of HTML, was that there was no way to add custom attributes to an element without invalidating the code. That problem is gone with the introduction of the data attribute. You can create any custom attribute you need, just add the data- prefix.
To apply a datalist to a select list, you use the new list attribute with the ID of the datalist as its value. Unfortunately, datalist has, for whatever reason, not garnered support in the current iOS browser set. So in my view, its use is still pretty restricted and we're not going to dive into it any more in this chapter. Now that you're armed with an overview of what's hot data-wise in HTML5, you're ready to put some of that knowledge to work in the next lesson.
There are currently no FAQs about Working with Data on the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.