Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added Learning Lab 3, WebRTC Data Channel. #119

Merged
merged 1 commit into from

2 participants

@jacobabrennan

Fixed typo from LL2.
Added Learning Lab 3, WebRTC data channel.

@rossbruniges rossbruniges merged commit da4e6bf into mozilla:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 9, 2013
  1. @jacobabrennan

    Added Learning Lab 3, WebRTC Data Channel.

    jacobabrennan authored
    Fixed typo from LL2.
This page is out of date. Refresh to see the latest.
View
261 media/ignite/resources/js/global_popcorn_events_webrtc_data.js
@@ -0,0 +1,261 @@
+ignite.link_node_manager.content[0] = {
+ notes: "This is the global group of non-link_node objects.",
+ content: [
+ {notes: "The Ignite logo", time_in: 1, time_out: 3,
+ start: function (){
+ var logo1 = document.getElementById("logo1");
+ logo1.className = "centered_logo";
+ logo1.style.display = "block";
+ logo1.style.opacity = "0"
+ logo1.transition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.MozTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.WebkitTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo1.OTransition = "left 2s, top 1s, opacity 1s, height 1s, width 1s";
+ setTimeout(function (){
+ logo1.style.opacity = "1";
+ }, 100);
+ if(!this.setup){
+ this.setup = true;
+ ignite.popcorn.cue(this.time_in+1, function (){
+ logo1.className = "positioned_logo";
+ })
+ }
+ },
+ end: function (){
+ var logo1 = document.getElementById("logo1");
+ logo1.transition = " ";
+ logo1.MozTransition = " ";
+ logo1.WebkitTransition = " ";
+ logo1.OTransition = " ";
+ logo1.style.display = "block";
+ logo1.style.opacity = "1";
+ logo1.className = "positioned_logo";
+ },
+ check: function (time_code){
+ var logo1 = document.getElementById("logo1");
+ if(time_code < this.time_in){
+ logo1.className = "centered_logo";
+ logo1.style.display = "none";
+ logo1.style.opacity = "0";
+ } else if(time_code > this.time_out){
+ this.end();
+ }
+ }
+ },
+ {notes: "The WebRTC logo", time_in: 3, time_out: 4,
+ start: function (){
+ var logo2 = document.getElementById("logo2");
+ logo2.className = "centered_logo";
+ logo2.style.display = "block";
+ logo2.transition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.MozTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.WebkitTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ logo2.OTransition = "right 2s, top 1s, opacity 1s, height 1s, width 1s";
+ setTimeout(function (){
+ logo2.style.opacity = "1";
+ }, 100);
+ if(!this.setup){
+ this.setup = true;
+ ignite.popcorn.cue(this.time_in+1, function (){
+ logo2.className = "positioned_logo";
+ })
+ }
+ },
+ end: function (){
+ var logo2 = document.getElementById("logo2");
+ logo2.transition = " ";
+ logo2.MozTransition = " ";
+ logo2.WebkitTransition = " ";
+ logo2.OTransition = " ";
+ logo2.style.display = "block";
+ logo2.style.opacity = "1";
+ logo2.className = "positioned_logo";
+ },
+ check: function (time_code){
+ var logo2 = document.getElementById("logo2");
+ if(time_code < this.time_in){
+ logo2.className = "centered_logo";
+ logo2.style.display = "none";
+ logo2.style.opacity = "0";
+ } else if(time_code > this.time_out){
+ this.end();
+ }
+ }
+ },
+ {notes: "Walkthrough", time_in: 5, time_out: 10,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var walkthrough_button = document.getElementById("walkthrough_link");
+ walkthrough_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ var passed_event = this;
+ walkthrough_button.addEventListener("click", function (){
+ ignite.start_walkthrough();
+ passed_event.end();
+ });
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(walkthrough_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var walkthrough_button = document.getElementById("walkthrough_link");
+ walkthrough_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(walkthrough_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ },
+ {notes: "Add Arrows", time_in: 10, time_out: 11,
+ started: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.started){ return;}
+ this.started = true;
+ setTimeout(function (){
+ ignite.arrow_left.style.opacity = "1";
+ ignite.arrow_right.style.opacity = "0";
+ }, 100);
+ },
+ end: function (){},
+ check: function (time_code){
+ if(time_code >= this.time_in){
+ this.start();
+ }
+ }
+ },
+ {notes: "Excercise", time_in: 543, time_out: 600,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var demo_button = document.getElementById("demo_link");
+ demo_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(demo_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(credits_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ },
+ {notes: "Credits", time_in: 463, time_out: 500,
+ displayed: undefined, // Needed for unexpected behavior in Chrome.
+ start: function (){
+ if(this.displayed){ return;}
+ this.displayed = true;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.display = "block";
+ if(!this.setup){
+ this.setup = true;
+ var passed_event = this;
+ credits_button.addEventListener("click", function (){
+ ignite.transition("right", true);
+ passed_event.end();
+ });
+ }
+ /* The following setTimeout call is necessary to prevent
+ * block and opacity from being set simultaneously, which would
+ * result in a spontaneous appearance instead of a fade-in.
+ */
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.opacity = "1";
+ }
+ })(credits_button), 1000);
+ },
+ end: function (){
+ if(!this.displayed){ return;}
+ this.displayed = false;
+ var credits_button = document.getElementById("credits_link");
+ credits_button.style.opacity = "0";
+ if(this.timeout_id){
+ clearTimeout(this.timeout_id);
+ }
+ this.timeout_id = setTimeout((function (passed_button){
+ return function (){
+ passed_button.style.display = "none";
+ }
+ })(credits_button), 1000);
+ },
+ check: function (time_code){
+ if(time_code > this.time_in && time_code < this.time_out){
+ this.start();
+ } else{
+ this.end();
+ }
+ }
+ }
+ ]
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
View
103 media/ignite/resources/js/ignite_ll_webrtc_data_resources.js
@@ -0,0 +1,103 @@
+// This is the list of "link nodes" appearing in the video.
+ignite.link_node_manager.content = [
+ null, // First element is empty. This will be filled in by another file.
+ /* Content is arranged in groups. Each group has a begin and end time.
+ * Within each group, each node has a begin time.
+ * Nodes with a set position will appear outside the node list.
+ */
+ {time_in: 12, time_out: 32, content: [
+ {resource_id: "about_webrtc", time_in: 13},
+ {resource_id: "about_webrtc.webrtc_org", time_in: 15}
+ ]},
+ {time_in: 47, time_out: 77, content: [
+ {resource_id: "background.cloud", time_in: 48},
+ {resource_id: "background.tcp", time_in: 56},
+ {resource_id: "background.udp", time_in: 57},
+ {resource_id: "contributors.kenny_katzgrau", time_in: 68}
+ ]},
+ {time_in: 119, time_out: 136, content: [
+ {resource_id: "background.vulnerabilities", time_in: 120},
+ {resource_id: "assorted.flash_thoughts", time_in: 127}
+ ]},
+ {time_in: 144, time_out: 160, content: [
+ {resource_id: "background.ajax", time_in: 147}
+ ]},
+ {time_in: 204, time_out: 215, content: [
+ {resource_id: "assorted.webrtc_io", time_in: 207},
+ {resource_id: "assorted.file_api", time_in: 209}
+ ]},
+ {time_in: 219, time_out: 229, content: [
+ {resource_id: "contributors.anants_blog", time_in: 220}
+ ]},
+ {time_in: 295, time_out: 327, content: [
+ {resource_id: "contributors.rob_hawkes", time_in: 296},
+ {resource_id: "assorted.point_clouds", time_in: 319}
+ ]},
+ {time_in: 389, time_out: 422, content: [
+ {resource_id: "assorted.twine", time_in: 390},
+ {resource_id: "assorted.ninja_blocks", time_in: 399},
+ {resource_id: "assorted.raspberry_pi", time_in: 405},
+ {resource_id: "assorted.firefox_os", time_in: 411}
+ ]},
+ {time_in: 444, time_out: 456, content:[
+ {resource_id: "assorted.firefox_nightly", time_in: 445},
+ {resource_id: "assorted.chrome_canary", time_in: 448}
+ ]}
+];
+// This is the expandable list in the resource section.
+ignite.resources.content = [
+ {id: "mozilla_ignite", title: 'Mozilla Ignite', content: [
+ {id: "official", title: 'Official', content: [
+ {id: "official_site", title: 'Official Site', content: 'http://www.mozillaignite.org'},
+ {id: "twitter", title: 'Twitter', content: 'http://twitter.com/MozillaIgnite'},
+ {id: "us_ignite", title: 'US Ignite', content: 'http://us-ignite.org/'},
+ {id: "nsf_gov", title: 'NSF.gov', content: 'http://www.nsf.gov/'}
+ ]},
+ {id: "press", title: 'Press', content: [
+ {id: "white_house", title: 'White House', content: 'http://www.whitehouse.gov/the-press-office/2012/06/13/we-can-t-wait-president-obama-signs-executive-order-make-broadband-const'},
+ {id: "launch_day_video", title: 'Launch Day Video', content: 'http://www.youtube.com/watch?v=H-t26owiZUQ'},
+ {id: "mark_surman", title: 'Mark Surman', content: 'http://www.nsf.gov/news/news_videos.jsp?cntn_id=124472&media_id=72664&org=NSF'}
+ ]},
+ {id: "geni", title: 'GENI', content: [
+ {id: "geni_site", title: 'Official Site', content: 'http://www.geni.net/'},
+ {id: "geni_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Global_Environment_for_Network_Innovations'},
+ {id: "kenny_1", title: 'Kenny on GENI, 1', content: 'http://www.screenr.com/2KL8'},
+ {id: "kenny_2", title: 'Kenny on GENI, 2', content: 'http://www.screenr.com/FIz8'}
+ ]}
+ ]},
+ {id: "about_webrtc", title: 'WebRTC', content: [
+ {id: "learn_webrtc", title: 'Learn WebRTC', content: [
+ {id: "quickstart", title: "Quickstart", content: "http://www.html5rocks.com/en/tutorials/webrtc/basics/"},
+ {id: "getusermedia", title: "getUserMedia()", content: "http://www.html5rocks.com/en/tutorials/getusermedia/intro/"},
+ {id: "peer_connection_api", title: "Peer Connection", content: "https://webrtc-demos.appspot.com/html/pc1.html"}
+ ]},
+ {id: "webrtc_org", title: "WebRTC.org", content: "http://www.webrtc.org"},
+ {id: "webrtc_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/WebRTC'},
+ {id: "w3c_specs", title: "W3C Specs", content: "http://dev.w3.org/2011/webrtc/editor/getusermedia.html"},
+ {id: "google_io", title: "Google I/O", content: "http://www.youtube.com/watch?v=E8C8ouiXHHk#t=24m35s"}
+ ]},
+ {id: "background", title: "Background", content: [
+ {id: "ajax", title: "AJAX", content: "http://en.wikipedia.org/wiki/Ajax_%28programming%29"},
+ {id: "vulnerabilities", title: "Vulnerabilities", content: "http://en.wikipedia.org/wiki/Browser_security#Plugins_and_extensions"},
+ {id: "cloud", title: "Cloud Computing", content: "http://en.wikipedia.org/wiki/Cloud_computing"},
+ {id: "tcp", title: "TCP", content: "http://en.wikipedia.org/wiki/Transmission_Control_Protocol"},
+ {id: "udp", title: "UDP", content: "http://en.wikipedia.org/wiki/User_Datagram_Protocol"},
+ ]},
+ {id: "contributors", title: "Contributors", content:[
+ {id: "kenny_katzgrau", title: "Kenny's Blog", content: "http://codefury.net/"},
+ {id: "anants_blog", title: "Anant's Blog", content: "http://kix.in/"},
+ {id: "rob_hawkes", title: "Rob's Blog", content: "http://rawkes.com/"}
+ ]},
+ {id: "assorted", display: "none", content: [
+ {id: "flash_thoughts", title: "Flash on Mobile", content: "http://www.apple.com/hotnews/thoughts-on-flash/"},
+ {id: "webrtc_io", title: "WebRTC.io", content: "https://github.com/webRTC/webRTC.io"},
+ {id: "file_api", title: "File API", content: "https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications"},
+ {id: "point_clouds", title: "Point Clouds", content: "http://en.wikipedia.org/wiki/Point_cloud"},
+ {id: "twine", title: "Twine", content: "http://supermechanical.com/"},
+ {id: "ninja_blocks", title: "Ninja Blocks", content: "http://new.ninjablocks.com/"},
+ {id: "raspberry_pi", title: "Raspberry Pi", content: "http://www.raspberrypi.org/"},
+ {id: "firefox_os", title: "Firefox OS", content: "http://www.mozilla.org/en-US/firefoxos/"},
+ {id: "firefox_nightly", title: "Firefox Nightly", content: "https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/"},
+ {id: "chrome_canary", title: "Chrome Canary", content: "https://www.google.com/intl/en/chrome/browser/canary.html"}
+ ]}
+];
View
2  media/ignite/resources/js/ignite_ll_webrtc_resources.js
@@ -89,7 +89,7 @@ ignite.resources.content = [
{id: "getusermedia", title: "getUserMedia()", content: "http://www.html5rocks.com/en/tutorials/getusermedia/intro/"},
{id: "peer_connection_api", title: "Peer Connection", content: "https://webrtc-demos.appspot.com/html/pc1.html"}
]},
- {id: "webrtc_org", title: "WebRTC.org", content: "http://wwww.webrtc.org"},
+ {id: "webrtc_org", title: "WebRTC.org", content: "http://www.webrtc.org"},
{id: "webrtc_wikipedia", title: 'Wikipedia', content: 'http://en.wikipedia.org/wiki/Webrtc'},
{id: "w3c_specs", title: "W3C Specs", content: "http://dev.w3.org/2011/webrtc/editor/getusermedia.html"}
]},
View
8 media/ignite/resources/js/webrtc_data_urls.js
@@ -0,0 +1,8 @@
+ignite.url = {
+ node_linkbox: ignite_bundle.data.MEDIA_URL + "resources/svg/linkbox_padding.svg",
+ node_logo: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ logo1: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_w_text.svg",
+ logo2: ignite_bundle.data.MEDIA_URL + "resources/svg/webrtc_w_text.svg",
+ resource_background: ignite_bundle.data.MEDIA_URL + "resources/svg/ignite_embossed_logo.svg",
+ hackable_demo: undefined // There is no hackable demo for WebRTC data.
+};
View
4 media/ignite/resources/js/webrtc_main.js
@@ -92,8 +92,8 @@ ignite = {
logo1.src = ignite.url.logo1;
var logo2 = document.getElementById("logo2");
logo2.src = ignite.url.logo2;
- var demo_link = document.getElementById("demo_link");
- demo_link.href = ignite.url.hackable_demo;
+ var demo_link = document.getElementById("demo_link");
+ demo_link.href = ignite.url.hackable_demo;
// Configure Custom Controls:
var controls = document.getElementById("controls");
if(this.compatibility.status & this.compatibility.CONTROLS){
View
178 media/ignite/resources/static/webrtc_data.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Mozilla Ignite Learning Lab - WebRTC Data</title>
+ <link rel="stylesheet" type="text/css" href="/media/ignite/resources/css/ignite_ll.css" />
+ <script src="../js/popcorn.min.js"></script>
+ <script src="../js/webrtc_main.js"></script>
+ <script src="../js/webrtc_data_urls.js"></script>
+ <script src="../js/ignite_ll_webrtc_data_resources.js"></script>
+ <script src="../js/global_popcorn_events_webrtc_data.js"></script>
+<!-- The elements with the following ids must be edited:
+source_walkthrough
+source_mp4
+source_ogv
+sourc_webm
+
+Also, remember to edit the file rtc_data_urls.js
+-->
+ </head>
+ <body>
+ <div id="support_message">
+ <div id="support_none">
+ <span>Your browser does not support HTML5. Please update your browser to view this video.</span>
+ </div>
+ <div id="support_limited">
+ <span>Your browser is out of date. Please update your browser to access all features of this video.</span>
+ <br />
+ <button id="support_button">Ok</button>
+ </div>
+ </div>
+ <div id="frame">
+ <div id="slider">
+ <div id="video_content">
+ <video id="lab_video">
+ <source id="source_mp4" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc_data.mp4"></source>
+ <source id="source_ogv" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc_data.ogv"></source>
+ <source id="source_webm" src="http://videos.mozilla.org/serv/webmademovies/ignite/ignite_ll_webrtc_data.webm"></source>
+ </video>
+ <div id="controls">
+ <svg id="control_big_play" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ #big_play:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <title>Big Play</title>
+ <path id="big_play" d="m10,10l80,40l-80,40l0,-80" opacity="0.8" id="svg_6" fill="white" />
+ </svg>
+ <div id="control_panel">
+ <svg id="control_play" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Play / Pause</title>
+ <style>
+ #pause{
+ opacity: 0;
+ }
+ .icon:hover{
+ fill: rgb(239, 72, 25);
+ }
+ </style>
+ <g class="icon" stroke-linejoin="round" fill="rgb(102, 102, 102)" stroke="#000000" stroke-width="0">
+ <g id="play">
+ <path id="play" d="m5,5l81,45l-81,45l0,-90z" />
+ </g>
+ <g id="pause">
+ <path d="m12,86l0,-72l20,0l0,71.20879l-20,0.79121z" />
+ <path d="m45,86l0,-72l20,0l0,71.20879l-20,0.79121z" />
+ </g>
+ </g>
+ </svg>
+ <div id="control_progress">
+ <div id="control_buffered_time"></div>
+ <div id="control_elapsed_time"></div>
+ </div>
+ <svg id="control_mute" width="100" height="100" viewBox="0 0 100 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Mute / Unmute</title>
+ <style>
+ .icon:hover{
+ fill: rgb(239, 72, 25);
+ }
+ </style>
+ <g stroke="#000000" stroke-width="0" stroke-linejoin="round">
+ <path class="icon" d="m8,30l0,40l20,0l25,25l0,-90l-25,25l-20,0z" fill="rgb(102, 102, 102)" />
+ <g id="sound" fill="none" stroke="rgb(102, 102, 102)" stroke-width="8">
+ <path d="m65,20a50,50 0 0 10,60" id="svg_6"/>
+ <path d="m75,10a50,50 0 0 10,80" id="svg_7"/>
+ </g>
+ </g>
+ </svg>
+ <svg id="control_timer" width="300" height="100" viewBox="0 0 225 100"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <title>Timer</title>
+ <text id="svg_timer" transform="matrix(2.0294, 0, 0, 2.0294, 4.73115, 22.9506)" text-anchor="left"
+ font-family="sans-serif" font-size="24" y="22" x="0" stroke="#000000"></text>
+ </svg>
+ </div>
+ </div>
+ <div id="walkthrough">
+ <a id="walkthrough_link" href="#"><div>Walkthrough</div></a>
+ <audio id="walkthrough_audio">
+ <source src="http://videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.m4a"></source>
+ <source src="http://videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.ogg"></source>
+ </audio>
+ </div>
+ <!-- Do not add the demo link here. Add the correct URL to the rtc_urls.js file. -->
+ <a id="demo_link" href="#"><div>Hackable Demo</div></a>
+ <a id="credits_link" href="#"><div>Credits</div></a>
+ </div>
+ <div id="resources">
+ <!-- This decorative img element is included here and not in CSS as a result of
+ issues with scaling of svg background images. -->
+ <img id="logo_background" alt="decorative background" />
+ <ul id="resource_list"></ul>
+ </div>
+ <div id="credits">
+<ul>
+ <li>Credits</li>
+ <li>
+<span class="credit_name">Open the Studio</span>
+<span class="credit_type">Design and Development</span>
+</li>
+<li>
+<span class="credit_name">Kenny Katzgrau</span>
+<span class="credit_type">Interviews And Writing</span>
+</li>
+ <li>Special Thanks</li>
+<li>
+<span class="credit_name">Anant Narayanan</span>
+<span class="credit_type">Interview, Mozilla</span>
+</li>
+<li>
+<span class="credit_name">Rob Hawkes</span>
+<span class="credit_type">Interview, Mozilla</span>
+</li>
+</ul>
+</div>
+ </div>
+ <img id="logo1" class="logo_centered" alt="Mozilla Ignite Logo" />
+ <img id="logo2" class="logo_centered" alt="WebRTC Learning Lab Logo" />
+ <svg id="arrow_left" class="slider_arrow interface" width="50px" height="200px" viewBox="0 0 50 200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ .arrow:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <polygon class="arrow" fill="#ffffff" opacity="0.4" points="50,0 0,100 50,200" />
+ </svg>
+ <svg id="arrow_right" class="slider_arrow interface" width="50px" height="200px" viewBox="0 0 50 200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:ev="http://www.w3.org/2001/xml-events">
+ <style>
+ .arrow:hover{
+ fill: rgb(239, 72, 25);
+ opacity: 1;
+ }
+ </style>
+ <polygon class="arrow" fill="#ffffff" opacity="0.4" points="0,0 50,100 0,200" />
+ </svg>
+ </div>
+ </body>
+</html>
Something went wrong with that request. Please try again.