Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Merging up 2nd Web RTC learning lab through staging to live #122

Merged
merged 5 commits into from

2 participants

Ross Bruniges jacobabrennan
Ross Bruniges

No description provided.

Ross Bruniges rossbruniges merged commit b377220 into from
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.
Commits on Jan 10, 2013
  1. Ross Bruniges
  2. Ross Bruniges

    Quick fix

    rossbruniges authored
  3. Ross Bruniges

    Merge pull request #120 from rossbruniges/dev

    rossbruniges authored
    Adding in resource template for new learning web RTC data learning lab
  4. Ross Bruniges

    Merge pull request #121 from mozilla/dev

    rossbruniges authored
    Merging up 2nd Web RTC learning lab through dev to staging
This page is out of date. Refresh to see the latest.
261 media/ignite/resources/js/global_popcorn_events_webrtc_data.js
View
@@ -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();
+ }
+ }
+ }
+ ]
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
103 media/ignite/resources/js/ignite_ll_webrtc_data_resources.js
View
@@ -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"}
+ ]}
+];
2  media/ignite/resources/js/ignite_ll_webrtc_resources.js
View
@@ -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"}
]},
8 media/ignite/resources/js/webrtc_data_urls.js
View
@@ -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.
+};
4 media/ignite/resources/js/webrtc_main.js
View
@@ -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){
178 media/ignite/resources/static/webrtc_data.html
View
@@ -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>
68 templates_ignite/ignite_resources/pages/webrtc_data.html
View
@@ -0,0 +1,68 @@
+{% extends 'ignite_resources/pages/base.html' %}
+
+{% block page_title %}WebRTC Data Learning Lab | {% endblock %}
+{% block page_id %}webrtc-data{% endblock %}
+{% block section_class %}learning-lab{% endblock %}
+
+{% block page_files %}
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}resources/css/ignite_ll.css" />
+<script src="{{ MEDIA_URL }}resources/js/popcorn.min.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/webrtc_main.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/webrtc_data_urls.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/ignite_ll_webrtc_data_resources.js"></script>
+<script src="{{ MEDIA_URL }}resources/js/global_popcorn_events_webrtc_data.js"></script>
+{% endblock %}
+
+{% block video %}
+<video id="lab_video">
+ <source id="source_mp4" src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc_data.mp4"></source>
+ <source id="source_ogv" src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc_data.ogv"></source>
+ <source id="source_webm" src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/ignite_ll_webrtc_data.webm"></source>
+</video>
+{% endblock %}
+
+{% block walkthrough %}
+<div id="walkthrough">
+ <a id="walkthrough_link" href="#"><div>Walkthrough</div></a>
+ <audio id="walkthrough_audio">
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.m4a"></source>
+ <source src="//videos-cdn.mozilla.net/serv/webmademovies/ignite/walkthrough.ogg" />
+ </audio>
+</div>
+{% endblock %}
+
+{% block resources %}
+<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>
+<a id="demo_link" href="#"><div>Hackable Demo</div></a>
+{% endblock %}
+
+{% block 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>
+{% endblock %}
+
+{% block extra_assets %}
+<img id="logo2" class="logo_centered" alt="WebGL Learning Lab Logo" src="{{ MEDIA_URL }}resources/svg/webgl_w_text.svg" />
+{% endblock %}
Something went wrong with that request. Please try again.