In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Making the HTML5 Video element interactiveCharles Hudson
From Streaming Media West Conference
Huntington Beach, CA
November 2013
C202: HOW TO: Making the HTML5 Video Element Interactive
The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers.
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010Patrick Lauke
Part II of the standards-next.org workshop on HTML5 with Bruce Lawson, concentrating on audio, video and canvas (plus hints of additional HTML5 API niceness)
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
Making the HTML5 Video element interactiveCharles Hudson
From Streaming Media West Conference
Huntington Beach, CA
November 2013
C202: HOW TO: Making the HTML5 Video Element Interactive
The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers.
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010Patrick Lauke
Part II of the standards-next.org workshop on HTML5 with Bruce Lawson, concentrating on audio, video and canvas (plus hints of additional HTML5 API niceness)
Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes providing offline installation, multimedia, performance, and more.
RSVP Node.js class at www.nycdatascience.com
NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes Multimedia, Offline, device hardware access, internationalization, and more.
Building Progressive Web Apps for Android and iOSFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Simon MacDonald, Adobe
Overview
Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.
Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.
He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.
Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.
Objective
To introduce developers to building progressive web apps for all platforms.
Target Audience
Web application developers
Five Things Audience Members Will Learn
What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app
In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
Writing a Space Shooter with HTML5 CanvasSteve Purkis
This talk reviews a Space Shooter game that I wrote to learn about HTML5 canvas. It covers:
* Basics of canvas 2D
* Overview of how the game is put together
* Some performance tips
First presented @ Ottawa JavaScript in September 2012.
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.
An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes providing offline installation, multimedia, performance, and more.
RSVP Node.js class at www.nycdatascience.com
NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/
Web developers now have a large number of APIs available allowing them to harness complex functionality via JavaScript and produce ever more interesting web experiences. This presentation looks at where we can from, where APIs are going in the future, and what problems we are currently in the process of solving. This includes Multimedia, Offline, device hardware access, internationalization, and more.
Building Progressive Web Apps for Android and iOSFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Simon MacDonald, Adobe
Overview
Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.
Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.
He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.
Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.
Objective
To introduce developers to building progressive web apps for all platforms.
Target Audience
Web application developers
Five Things Audience Members Will Learn
What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app
In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
Writing a Space Shooter with HTML5 CanvasSteve Purkis
This talk reviews a Space Shooter game that I wrote to learn about HTML5 canvas. It covers:
* Basics of canvas 2D
* Overview of how the game is put together
* Some performance tips
First presented @ Ottawa JavaScript in September 2012.
Dall'Usabilità delle Parole all'Usabilità delle Interfacceyvonnebindi
Seminario tenuto presso l'Università per Stranieri di Perugia, all'interno del corso di Architettura dell'Informazione del dott. Luca Rosati. Novembre 2010
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Craft 2019 - “The Upside Down” Of The Web - Video technologiesMáté Nádasdi
Video technologies are "The Upside Down” of the web for sure. Being a frontend engineer writing HTML5 video players, WebRTC broadcast clients, supporting 360/VR videos or maybe writing interactive movies like Bandersnatch is just like to live in a parallel universe where everything and nothing is the same. Working with video is an exciting combination of all the trendy stuff out there like new Web APIs, ByteArrays, Workers, WebRTC, WebGL, etc.
In this talk, Mate would like to share important insights of video specific frontend engineering nowadays. The purpose of sharing this adventure is to give you some sense of this universe, to explain how a web video player works, to talk about the key layers and challenges and to point out that every frontend engineer has the power in their hands to utilize this knowledge to boost the user experience in any kind of product.
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.
2. web apps
• HTML5 allows you to create immersive,
“app-like” experiences in the browser.
• The capability (and emerging ubiquity)
of HTML5 support allows you to deliver
experiences that are on par to those
delivered by traditional desktop, tablet
and mobile apps.
3.
4. #graph Sketchpad
http://hashgraph.iamanengineer.net/ http://mudcu.be/sketchpad/
HTML5 Canvas HTML5 Canvas
Drag and Drop Events Drag and Drop Events
5. flickr Browser Zygote Body
http://www.gabereiser.com/flickr/index.html http://www.zygotebody.com/
Flickr API WebGL
jQuery Animation Drag and Drop Events
6. web apps single page
visual momentum
audio / video media
tactile / drag and drop
persistent storage
offline capability
responsive layout
full screen on mobile
7. single page apps
• HTML5 Web Apps typically run “within a
single page.”
• Unlike a ‘traditional’ client-server app,
there are no links to ‘other’ pages or
‘traditional’ form submission events.
• This is because links to other pages
interrupt the user experience and cause
a “transitional jolt”
8. single page apps
• However, your app may still change
your page’s DOM, or download
fragments of HTML (structure) or XML /
JSON (data) from a server
• But the browser’s URL always points to
the same document (although the URL
after the fragment identifier (the #
symbol) may change.
9. single page apps
• Single page apps generally provide a
much more seamless user experience
because entire Web pages don’t need
to reload - providing faster response
times and overall greater visual
momentum.
11. <audio> and <video>
• The HTML5 <audio> and <video>
tags allow you to deploy media content
on your website / web app without the
use of a plug-in.
12. <audio> and <video>
• There are many audio and video
containers and codecs, and not all are
supported across all browsers.
• Containers are envelopes that contain
audio and video streams : e.g. - *.ogv,
*.webm and *.mp4 are container
formats.
13. <audio> and <video>
• Whereas video codecs determine how
visual data is compressed or
decompressed within a stream :
Theora, VP8 and H.264 are examples
of codecs.
• Audio containers and audio codecs are
often the same format standard :
examples include : Vorbis (*.ogg),
MP3 (*.mp3) and AAC (*.m4a, *.aac)
14. GOTCHA : not all browsers support all formats
It’s usually a good idea to encode video / audio in multiple
formats so that it can be played on a wide range of browsers.
Some good places to check for browser support :
http://en.wikipedia.org/wiki/HTML5_video#Browser_support
http://en.wikipedia.org/wiki/HTML5_audio#.3CAudio.
3E_element
15. HTML5 <video> element
<!-- Stream the video as H.264 - not supported across all browsers -->
<video src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v"
width="960" height="540" preload="none" controls>
<!-- Fallback content if the <video> tag not supported -->
<!-- Provide the video as a self-contained QuickTime MOV file -->
<p>Notation is a HTML5 location-based Web App.</p>
<p>We can't show you the video in the browser, but you can still view it : </p>
<p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p>
</video>
16.
17. <audio> <video>
• The src attribute indicates where the
video file is. (Although in many ways it’s
better to use the <source> element.
• For the <video> element, you should
also always explicitly set the width and
height attributes so that the element
doesn’t adjust / change size as the
video loads. (It looks very jarring
otherwise).
18. loading / playback
• The preload attribute indicates how
the media file should download to the
browser when the page loads : none
indicates that no pre-download should
occur, and auto, which indicates that
the movie should start downloading
automatically.
• Set autoplay="true" if you want
your media file to play when the page
loads.
19. other attributes
• controls - if you set this attribute
within the <video> or <audio>
element, your browser will overlay
playback controls for you over your
video
• loop - if set, it will restart the video
when it ends.
• muted - if set on <video>, it will mute
the volume by default when playback
starts.
20. the <source> element
• Used by both <audio> and <video>
elements, the <source> element allows
you to specify multiple source files
along with a MIME type and a codec, so
that your browser ‘knows’ which one to
download.
• It allows you to make your video work
across all browsers.
21. add cross-browser support for our video
we do this via converting our H.264 file into Theora and VP8
formats and using the <source> tag
<video width="960" height="540" preload="auto" controls>
<!-- Video is encoded in H.264, VP8 and Theora formats -->
<!-- The browser will decide which one to use -->
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v"
type="video/h264; codecs='avc1.640029, mp4a.40.2'">
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_theora.ogv"
type="video/ogg; codecs='vp8, vorbis'">
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_vp8.webm"
type="video/webm; codecs='theora, vorbis'">
<!-- Fallback content if the <video> tag not supported -->
<!-- Provide the video as a self-contained QuickTime MOV file -->
<p>Notation is a HTML5 location-based Web App.</p>
<p>We can't show you the video in the browser, but you can still view it : </p>
<p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p>
</video>
23. add a ‘poster image’ to our movie
This image is displayed as a placeholder before the movie is
played
<video width="960" height="540" preload="auto" poster="poster.jpg" controls>
<!-- Video is encoded in H.264, VP8 and Theora formats -->
<!-- The browser will decide which one to use -->
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_h264.m4v"
type="video/h264; codecs='avc1.640029, mp4a.40.2'">
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_theora.ogv"
type="video/ogg; codecs='vp8, vorbis'">
<source src="http://collectionweb.cs.uow.edu.au/isit207/notation_demo_vp8.webm"
type="video/webm; codecs='theora, vorbis'">
<!-- Fallback content if the <video> tag not supported -->
<!-- Provide the video as a self-contained QuickTime MOV file -->
<p>Notation is a HTML5 location-based Web App.</p>
<p>We can't show you the video in the browser, but you can still view it : </p>
<p><a href="http://collectionweb.cs.uow.edu.au/isit207/notation_demo.mov"></a></p>
</video>
26. HTML5 <canvas>
• HTML5 <canvas> allows you to
programmatically draw things.
• It grants you very fine control over the
individual pixels within your page.
• HTML5 <canvas> was, in some ways,
intended to replace Flash.
27. HTML5 <canvas>
• Canvas is not supported for Internet
Explorer 8 or below. But you can try :
• ExplorerCanvas (http://
excanvas.sourceforge.net/)
• Google Chrome Frame (http://
www.google.com/chromeframe)
28. drawing on <canvas>
• You draw on canvas via its 2D context
• Think of a context as the “imaginary
pen” : you tell it to create shapes, lines
and fills on a canvas, and then it
‘draws’ it for you.
38. write a function that creates the chequerboard
// Creates the chequerboard
function createChequerboard() {
// TODO : Create the chequerboard tiles
// TODO : Draw the chequerboard tiles
}
39. create the chequerboard tiles
var currentTileClass = 'chequerboard-tile-black';
// Add the chequerboard backgrounds and tiles
for (var leftOffset = 0; leftOffset < 245; leftOffset += 50) {
for (var topOffset = 0; topOffset < 245; topOffset += 50) {
// Add the tile's background
$('<canvas width="45" height="45" />').addClass('chequerboard-tile-background').css({
'left': leftOffset + 'px',
'top': topOffset + 'px'
}).appendTo('#chequerboard');
// Add the tile itself
$('<canvas width="45" height="45" />').addClass(currentTileClass).css({
'left': leftOffset + 'px',
'top': topOffset + 'px'
}).appendTo('#chequerboard');
// Switch the tile's colour (so it alternates black & white)
if (currentTileClass == 'chequerboard-tile-black') {
currentTileClass = 'chequerboard-tile-white';
} else if (currentTileClass == 'chequerboard-tile-white') {
currentTileClass = 'chequerboard-tile-black';
}
}
}
40. draw the chequerboard tiles
// Draw the black chequerboard tiles
$('.chequerboard-tile-black').each(function() {
var context = this.getContext('2d');
context.fillStyle = 'rgba(85, 85, 85, 1)';
context.fillRect(0, 0, 45, 45);
});
// Draw the white chequerboard tiles
$('.chequerboard-tile-white').each(function() {
var context = this.getContext('2d');
context.fillStyle = 'rgba(238, 238, 238, 1)';
context.strokeStyle = 'rgba(170, 170, 170, 1)';
context.fillRect(0, 0, 45, 45);
context.strokeRect(0, 0, 45, 45);
});
41.
42. drag and drop
• HTML5 supports the ability to natively
drag and drop elements.
• This is done by making elements
draggable, and handling the
dragstart, dragend, dragover and
drop events.
43. drag and drop capability to the chequerboard
// Creates the chequerboard
function createChequerboard() {
// DONE : Create the chequerboard tiles
// DONE : Draw the chequerboard tiles
// TODO : Make the tiles draggable
// TODO : Make the target respond to drag events
}
50. HTML5 storage
• HTML5 provides a new set of APIs to
store data persistently.
• HTML5 Local Storage allows you to do
this via simple key-value pairs
• There are other features, such as
WebSQL and IndexedDB that provide
SQL database-like access on the client.
51. HTML5 LocalStorage
• Uses key-value pairs
• localStorage.getItem(key) :
retrieves an item from local storage of a
specified key.
• localStorage.setItem(key, val) :
sets an item to local storage of a specified
key and value.
56. but ...
• Unlike a real native app, this Web App
still requires an Internet connection to
function.
• For a more “true” app-like experience,
it’s necessary for us to ...
58. HTML5 App Cache
• The HTML5 Application Cache allows
your web app to “work offline.”
• It works by looking up a file, called a
cache manifest, that determines the
files that are required for it to work
offline.
• The browser checks the cache manifest
for any updates, and downloads (or re-
downloads) files as necessary.
59. create the cache manifest
simple text file that describes files relative to index.html
CACHE MANIFEST
# version 0.1
index.html
styles.css
jquery.js
script.js
60. link it within index.html
<!DOCTYPE html>
<html lang="en" manifest="appcache.manifest">
<head>
<meta charset="utf-8">
<title>colourshift</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<!-- Body content goes here -->
</body>
</html>