Slide 1

Joan Boone

jpboone@email.unc.edu

INLS 572Web Development

JavaScript Application Programming

Interfaces (APIs) and Libraries

Slide 2

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 3

What are APIs ?

• Provide building blocks of code that simplify the interface to complex functions by abstracting away the underlying details

• Provide common, frequently needed functions that allow developers to reuse existing code

Source: MDN Web Docs: Introduction to Web APIs

JavaScript (client-side) has many APIs that fall into 2 categories

• Browser APIs that are built into your browser, e.g., DOM API

• Third party APIs – not built into your browser, and you need to access the code and documentation from the vendor's website.

Application Programming Interfaces are collections of code and tools that are available in all programming languages, and that allow developers to create complex functionality more easily.

Slide 4

What can APIs do?Just about anything you need them to do: MDN Web APIs

Most common categories of browser APIs include DOM APIs for manipulating HTML and CSS

Fetching data from the server using XMLHttpRequest or Fetch API, and returning data in XML or JSON format

Drawing and manipulating graphics (Canvas, WebGL)

Audio and Video APIs that allow you to customize user interfaces

Device APIs to access device features such as GPS, camera, orientation, vibration

Client-side storage APIs that enable offline app use, and saving state of apps between page loads.

Many third-party APIs: Social media, news, open data, ...

Source: MDN Web Docs: Introduction to Web APIs

Slide 5

DOM APIs that we've already used to access and modify HTML content and style

Accessing HTML content var dateElement = document.querySelector("#todays-date");

Modifying HTML content dateElement.textContent = todaysDate;

dateElement.textContent = todaysDate.toDateString();

Modifying styles of HTML content dateElement.style.fontStyle = “italic”;

details.style.display = “none”;

Adding a click event to HTML element logo.addEventListener('click', changeLogo);

moreLess.addEventListener('click', toggleContent);

Slide 6

JavaScript Libraries Libraries, in any programming language, are typically a collection of files that contain functions. In JavaScript libraries, these are functions that you can reference in your web page, and have the advantages of

• Simplifying coding by providing functions for common tasks

• Reusing existing code that has already been tested

• Enabling faster development

Source: MDN Web Docs: Introduction to Web APIs

Frameworks are a “next step up” from libraries because they tend to be packages of HTML, CSS, and JavaScript that you install and use to build web applications.

The key difference between a library and framework is “Inversion of Control”. When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.

Your JavaScript can use these library functions by calling them via a documented interface, or an application programming interface (API).

Slide 7

Using JavaScript Libraries There are many free libraries available

How to use them? Generally, they are all structured in a similar way.• First, review the demos and examples to see if the library

has the functionality you are looking for

• Download the examples, and find one that is similar to what you want to do. Understand how it works!

• Link to, or download, the JavaScript and CSS files used by the library

• Modify the example code (or write your own version)

• Check the documentation for ways to customize the code

Slide 8

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 9

HTML Video & Audio• Video and Audio can be embedded in your HTML. These

elements have a browser API that provides built-in support for audio and visual elements that does not require the use of plug-ins (e.g., Flash), but may require some scripting for customization

• Elements <video> element embeds a video on a web page

<audio> element embeds an audio file on a web page

Many attributes can be modified with JavaScript

• autoplay, controls, loop, preload, src, height, width, muted

Default controls: play/pause, mute, volume control, progress bar

• MDN Web Docs: Audio and Video Delivery

• HTML Audio and Video DOM Reference

Slide 10

Basic Video Example (adapted from w3schools HTML Video)

<div id="video-container"> <video id="video1" controls> <source src="big-buck-bunny.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <p>Video courtesy of <a href="http://www.bigbuckbunny.org/">Big Buck Bunny</a>.</p></div>

video-big-buck-bunny-basic.html

Slide 11

Video with Custom User

Interface Controls

<div id="video-container"> <video id="video1"> <source src="big-buck-bunny.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <p>Video courtesy of <a href="http://www.bigbuckbunny.org/">Big Buck Bunny</a>.</p></div>

<div id="controls"> <i id="playpause" class="far fa-play-circle fa-2x"></i> <i id="stop" class="far fa-stop-circle fa-2x"></i></div>

HTML

video-big-buck-bunny-custom-ui.html

Slide 12

Video with Custom User Interface

Controls for Play/Pause, Stop

var myVideo = document.querySelector("#video1");

var playPauseButton = document.querySelector("#playpause");playPauseButton.addEventListener('click', playPause);

var stopButton = document.querySelector("#stop");stopButton.addEventListener('click', stop);

function playPause() { if (myVideo.paused) { myVideo.play(); playPauseButton.className = "far fa-pause-circle fa-2x"; } else { myVideo.pause(); playPauseButton.className = "far fa-play-circle fa-2x"; }}function stop() { myVideo.pause(); myVideo.currentTime = 0; playPauseButton.className = "far fa-play-circle fa-2x";}

JavaScript

video-big-buck-bunny-custom-ui.html

Slide 13

Video on the Web Benefits of video content• Visually engaging, increases conversion rates, …

• What is video used for?

State of the Web: Video Playback Metrics• Study based on 5M websites from HTTP Archive (August 2019)

• Median mobile web page weight: 1.7MB

• Median video size: 3.8MB; 19% of videos > 10MB

• Problems: slow startup times and stalling.

How to fix? Reduce the video size• Reduce the dimensions, lower the quality, change the encoding

Some guidelines• Of videos that successfully played in 200s, the median video is 3.8 MB,

and 20s long. The most common aspect ratio is 16:9, with 720p and 1080p video dimensions dominating.

Slide 14

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 15

Audio on the Web Smashing: Web Design Done Well: Making Use Of Audio • Sound takes many forms: radio, music players, interviews, narration

Examples

• Narration: The New Yorker's Audio Articles – Much of their writing is read by the authors themselves

NiemanReports: Audio Articles are Helping News Outlets Gain Loyal Audiences

• Radio: Listen to the world's radio stations at Radio Garden

• Audio tours

Explore the virtual garden of a legendary Polish composer

DataArt IT museum

• Interviews: Oral Histories of World War II

• Music players: SoundCloud’s Sticky Music Player Bar

Slide 16

Audio and UXThe UX of Sound: Designing Audio Experiences• Sound can be a useful tool when used appropriately: feedback,

notifications, branding, personalization, accessible interfaces

• Two considerations: only use sound when it helps, and choose the right type of audio

How sound design is transforming UX • How sound can improve online experiences

• What types of sound are there?

• The psychology of sound

• How can sound affect emotions?

• What are the challenges of sound?

• What are the major audio file formats?

• Where can I find sounds for my projects?

George Lucas: “Sound is half the experience in seeing a film”

Slide 17

HTML Audio ExampleStar Wars Theme by John Williams is available from the Internet Archive and there are several data formats.

Basic player, using video controls

audio-star-wars-theme-basic.html

Or, create your own audio player to customize the controls, maintain consistency with your website color scheme, and across browsers

Firefox

Chrome

audio-star-wars-theme-custom-ui.html

Slide 18

HTML AudioExample

<audio id="audio1"> <source src="https://ia902807.us.archive.org/....mp3" type="audio/mpeg"></audio>

<p>Star Wars Main Theme by John Williams</p><div id="progress"> <div id="bar"></div></div><div id="controls"> <span id="playpause" class="far fa-play-circle fa-2x"></span> <span id="stop" class="far fa-stop-circle fa-2x"></span> <span id="mute" class="fas fa-volume-up fa-2x"></span> <span id="volume-up"> <i class="fas fa-volume-up fa-1x"></i> <i class="fas fa-plus fa-1x"></i> </span> <span id="volume-down"> <i class="fas fa-volume-up fa-1x"></i> <i class="fas fa-minus fa-1x"></i> </span></div>

audio-star-wars-theme-custom-ui.html

Slide 19

Some Sources for Audio/Video Content

video-corn-flakes.html

Internet Archive: Video and Audio

Library of Congress: Video and Audio

Post: ToastiesCorn Flakes, 1960susing a Classic TV Commercial from Internet Archive

Slide 20

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 21

Google Maps JavaScript API: Getting Started...but, you “need a project with a billing account...”

Google Maps JavaScript APITutorial: Adding a Google Map to your website

Basic

Customized

Slide 22

Leaflet Map JavaScript Library

Basic Leaflet Map for San Francisco

leaflet-map.html

Leaflet Quick Start Guide• Include Leaflet CSS

• Include Leaflet JavaScript

• Add a map container, e.g., <div> element

• Initialize map with geographical coordinates

• Add a tile layer

Slide 23

Customized Leaflet Map

Leaflet Map with Marker and Popup

leaflet-map-customized.html

Leaflet Map with Esri Plugin Tile Layer

leaflet-map-esri.html

Slide 24

Using MapsMany ways...• Events: fundraisers, classes, studio tours – where?

• Selling a product: where do ingredients/materials come from, where sold?

• Narrative: personal travels, news, short stories, etc.

Some local business examples• YMCA of the Triangle – Locations

• Ronald McDonald House – Contact us

• DPAC – Getting here

Some inspiration...• 10 Creative Ways to Use (Google) Maps

• Interactive Maps on Websites

• Interactive Maps and Street View Experiences in Web Design

• Interactive Maps in Web Design

Slide 25

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 26

Data Visualization with ChartsGoogle Analytics example

Many chart libraries

• Datavisualization.ch Selected Tools

• Data Visualisation Catalogue

Data Visualization Resources and Tutorials

Data Visualization: Chart Dos and Don'ts

Design inspiration: information is beautiful

Slide 27

Data Visualization with Chart.js

• Easy way to visualize data on your website

• Many types of charts: Samples

• How it works Add Chart.js library to your web page using <script>

Define an area in your HTML to draw the chart using a <canvas> element

Prepare your data

Draw the chart

Slide 28

Chart.js Pie Chart

Example: pie-chart.html

Tobias Ahlin Blog: Documentation for example

Chart.js documentation for Doughut and Pie Charts

Slide 29

Basic Pie Chart <head> <title>Bar Chart - World Population</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </script> </head>

<body> <canvas id="pie-chart" width="800" height="450"></canvas> <script> new Chart(document.querySelector("#pie-chart"), { type: 'pie', data: { labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], datasets: [{ label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], data: [2478,5267,734,784,433] }] }, options: { plugins: { title: { display: true, text: 'Predicted world population (millions) in 2050' } } } }); </script>

Chart.jsJavaScript libraries

Where the chart is drawn

pie-chart.html

Customization options

Create the chart

Slide 30

Chart.js Bar Chart

Example: bar-chart.html

Tobias Ahlin Blog: Documentation for example

Chart.js documentation for Bar Charts

Slide 31

Chart.js Line Chart

Example: line-chart.html

Tobias Ahlin Blog: Documentation for example

Chart.js documentation for Line Charts

Slide 32

Part 1: Overview

Part 2: Video

Part 3: Audio

Part 4: Maps

Part 5: Charts

Part 6: W3.CSS and Slideshows

Slide 33

W3.CSS is a CSS framework• Smaller and faster than other CSS frameworks.

• Easier to learn and use than other CSS frameworks.

• Better cross-browser compatibility

• Uses standard CSS only (no jQuery or JavaScript library).

• Supports modern responsive mobile first design by default.

• Speeds up and simplifies web development

• And it's free!

Many Demos and Examples

W3.CSS Framework

Slide 34

How to use• Add a link to the W3.CSS style sheet on your web page <link rel="stylesheet"

href="https://www.w3schools.com/w3css/4/w3.css">

• Or, download w3.css from w3css_downloads and add a link to w3.css on your web page

<link rel="stylesheet" href="w3.css">

W3.CSS Reference• Description of all the classes for Containers, Tables, Cards, Layout,

Navigation, Button, Input, Modal, Animation, Fonts, Text, …

• Note that many of these classes are just pre-defined style rules that you already know how to define in CSS.

W3.CSS Framework

Slide 35

Automatic Slideshow Example• Several images are defined for the

slide show collection

• JavaScript displays the next image in the collection every 2 seconds

W3.CSS Slideshow

slide-show-automatic.html

var myIndex = 0;carousel();

function carousel() { var i; var x = document.querySelectorAll(".mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex = myIndex + 1; if (myIndex > x.length) { myIndex = 1; } x[myIndex-1].style.display = "block";

setTimeout(carousel, 2000); // Change image every 2 seconds}

Create a collection of the images.

Loop through all of the images and set their display to 'none'.

Display the first image by setting the display to 'block'.

Call the system timer every 2 seconds and display the next image.

Slide 36

Manual Slideshow Example• A slide index keeps track of which slide to

display

• The buttons increment/decrement the slide index to display the previous/next image.

W3.CSS Slideshow

var slideIndex = 1;showDivs(slideIndex);

function plusDivs(n) { showDivs(slideIndex += n); }

function showDivs(n) { var i; var x = document.querySelectorAll(".mySlides");

if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; }

x[slideIndex-1].style.display = "block";}

Create a collection of the images.

The plusDivs function increments or decrements the slide index based on which button was clicked.

The showDivs function ensures that the slide index is within the range of the number of images

Loop through all of the images and set their display to 'none'.

Set the display to 'block' for the image corresponding to the slide index.

slide-show-manual.html

Slide 37

Slideshow with Image Indicator• Thumbnail images are used to show

the available images and for selection.

• Click events are associated with the thumbnail images

W3.CSS Slideshow

slide-show-image-indicator.html