More Related Content Similar to HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile (20) More from Robert Nyman (20) 6. Mozilla is a
global non-
profit dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public good
10. <video controls>
<source src="nasa.mp4"></source>
<source src="nasa.webm"></source>
<p>Hello, older web browser</p>
</video>
21. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);
24. context.fillRect(350, 50, 100, 100);
context.lineWidth = "10";
context.lineJoin = "round";
context.moveTo(50, 50);
context.lineTo(200, 200);
context.lineTo(100, 300);
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.strokeStyle = "#00f";
context.arc(200, 400, 75, 0, Math.PI*2, false);
context.stroke();
29. context.strokeStyle = "transparent";
context.arc(100, 100, 75, 0, Math.PI*2, false);
context.clip();
context.stroke();
context.fillStyle = "#fff";
context.fillRect(0, 0, 200, 200);
context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 100, 100, 100);
31. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d"),
img = document.createElement("img");
img.addEventListener("load", function () {
context.drawImage(img, 0, 0, 600, 200);
// Get canvas content as a base64 image
var base64Img = canvas.toDataURL("image/png");
}, false);
img.setAttribute("src", "view.jpg");
41. var anthonyWeiner = {
"Interest" : "Photography",
"Social" : "Twitter"
};
localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner));
console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
44. if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}
45. // Poll the navigator.onLine property
setInterval(function () {
console.log(navigator.onLine);
}, 1000);
49. if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert(position.coords.latitude + ", " + position.coords.longitude);
});
}
54. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state, title, url);
57. LiveConnect
Forever Frame
HTTP Long-Polling and XHR Streaming
What came before WebSockets?
AJAX
HTTP Polling
Cross Frame Communication
58. var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// Send data
ws.send("Some data");
// Close the connection
ws.close();
59. var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// When connection is opened
ws.onopen = function () {
console.log("Connection opened!");
};
// When you receive a message
ws.onmessage = function (evt) {
console.log(evt.data);
};
// When you close the connection
ws.onclose = function () {
console.log("Connection closed");
};
// When an error occurred
ws.onerror = function () {
console.log("An error occurred");
};
63. <!--
The multiple attribute allows for
uploading of multiple files
-->
<input id="files-upload" type="file" multiple>
64. var filesUpload = document.getElementById("files-upload");
filesUpload.onchange = function () {
// Access to data about all files
var files = this.files,
file;
for (var i=0, l=files.length; i<l; i++) {
file = file[i];
file.name; // Get the name of the file
file.size; // Get the size of the file, in bytes
file.type; // Get the type of the file
};
};
65. for (var i=0, l=files.length, file, img; i<l; i++) {
file = files[i];
if (typeof FileReader !== "undefined") {
img = document.createElement("img");
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
}
66. // For Firefox, Google Chrome and Safari
var xhr = new XMLHttpRequest();
xhr.open("post", "upload/upload.php", true);
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
// File uploaded
}
};
// Upload file: Firefox, Google Chrome and Safari
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.fileName);
xhr.setRequestHeader("X-File-Size", file.fileSize);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.send(file);
73. squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
74. var teapotPositions = new Float32Array([ 17.83489990234375, 0, 30.573999404907227,
16.452699661254883, -7.000179767608643, 30.573999404907227, 16.223100662231445,
-6.902520179748535, 31.51460075378418, 17.586000442504883, 0, 31.51460075378418,
16.48940086364746, -7.015810012817383, 31.828100204467773, 17.87470054626465, 0,
31.828100204467773, 17.031099319458008, -7.246280193328857, 31.51460075378418,
18.46190071105957, 0, 31.51460075378418, 17.62779998779297, -7.500199794769287,
30.573999404907227, 19.108800888061523, 0, 30.573999404907227, 12.662699699401855,
-12.662699699401855, 30.573999404907227, 12.486100196838379, -12.486100196838379,
31.51460075378418, 12.690999984741211, -12.690999984741211, 31.828100204467773,
13.10789966583252, -13.10789966583252, 31.51460075378418, 13.56719970703125,
-13.56719970703125, 30.573999404907227, 7.000179767608643, -16.452699661254883,
30.573999404907227, 6.902520179748535, -16.223100662231445, 31.51460075378418,
7.015810012817383, -16.48940086364746, 31.828100204467773, 7.246280193328857,
-17.031099319458008, 31.51460075378418, 7.500199794769287, -17.62779998779297,
30.573999404907227, 0, -17.83489990234375, 30.573999404907227, 0, -17.586000442504883,
31.51460075378418, 0, -17.87470054626465, 31.828100204467773, 0, -18.46190071105957,
31.51460075378418, 0, -19.108800888061523, 30.573999404907227, 0, -17.83489990234375,
30.573999404907227, -7.483870029449463, -16.452699661254883, 30.573999404907227,
-7.106579780578613, -16.223100662231445, 31.51460075378418, 0, -17.586000442504883,
31.51460075378418, -7.07627010345459, -16.48940086364746, 31.828100204467773, 0,
-17.87470054626465, 31.828100204467773, -7.25383996963501, -17.031099319458008,
31.51460075378418, 0, -18.46190071105957, 31.51460075378418, -7.500199794769287,
-17.62779998779297, 30.573999404907227, 0, -19.108800888061523, 30.573999404907227,
-13.092700004577637, -12.662699699401855, 30.573999404907227, -12.667499542236328,
-12.486100196838379, 31.51460075378418, -12.744799613952637, -12.690999984741211,
31.828100204467773, -13.11460018157959, -13.10789966583252, 31.51460075378418,
-13.56719970703125, -13.56719970703125, 30.573999404907227, -16.61389923095703,
-7.000179767608643, 30.573999404907227, -16.291099548339844, -6.902520179748535,
31.51460075378418, -16.50950050354004, -7.015810012817383, 31.828100204467773,
-17.033599853515625, -7.246280193328857, 31.51460075378418, -17.62779998779297,
-7.500199794769287, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227,
-17.586000442504883, 0, 31.51460075378418, -17.87470054626465, 0, 31.828100204467773,
-18.46190071105957, 0, 31.51460075378418, -19.108800888061523, 0, 30.573999404907227,
-17.83489990234375, 0, 30.573999404907227, -16.452699661254883, 7.000179767608643,
85. HTML5
-
The beauty of the Open Web
86. We are drowning in
information, while starving
for wisdom
- E.O. Wilson
