2h 21m – Intermediate
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
Introduction – 3m 19s
Welcome – 57s
About the exercise files – 1m 9s
Course and browser requirements – 1m 13s
1. The State of Data on the Web – 15m 34s
Surveying the top technologies – 5m 28s
Interacting with data through HTML forms – 4m 17s
Integrating HTML5 form controls – 5m 49s
2. Handling Client-Friendly CSV – 19m 54s
Storing data as comma-separated values – 10m 17s
Parsing CSV files – 5m 6s
Cross-platform CSV tools – 4m 31s
3. Exploring XML – 35m 20s
Understanding XML structure – 3m 26s
Saving data as XML – 10m 20s
Retrieving and displaying XML data – 12m 51s
Enhanced styling with XSLT – 8m 43s
4. Incorporating JSON – 25m 12s
Setting up JSON data – 2m 55s
Interacting with JavaScript – 11m 10s
Updating your JSON data – 6m 1s
Tools for working with JSON – 5m 6s
5. Investigating YAML – 23m 27s
Understanding YAML – 2m 54s
Creating a YAML data file – 6m 21s
Parsing YAML with JavaScript – 10m 8s
Working with YAML tools – 4m 4s
6. Applying HTML5 Solutions – 18m 2s
What’s available in HTML5 – 3m 58s
Utilizing local storage – 8m 23s
Incorporating data- attributes – 5m 41s
Conclusion – 15s
Next steps – 15s