зеркало из https://github.com/mozilla/popcorn-js.git
[#246] initial conversion of 0.1 semantic demo
This commit is contained in:
ScottDowne
Родитель
a904282d32
Коммит
3cdf6a0e2e
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 216 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 622 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 380 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 18 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 311 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 599 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 731 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 671 B |
|
|
@ -0,0 +1,550 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Video Demo Using popcorn.js</title>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
<script src="http://google.com/jsapi"></script>
|
||||
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
|
||||
<script>google.load("language", "1");</script>
|
||||
<script>google.load("elements", "1", {packages : ["newsshow"]});</script>
|
||||
<script src="../../popcorn.js"></script>
|
||||
|
||||
<script src="../../plugins/webpage/popcorn.webpage.js"></script>
|
||||
<script src="../../plugins/googleMap/popcorn.googleMap.js"></script>
|
||||
<script src="../../plugins/footnote/popcorn.footnote.js"></script>
|
||||
|
||||
<script src="../../parsers/parserXML/popcorn.parseXML.js"></script>
|
||||
|
||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
//Show hide the contents
|
||||
$(".collapse").click(function () {
|
||||
$(this).next(".content").slideToggle("fast");
|
||||
});
|
||||
//Swap class names
|
||||
$(".collapse").toggle(function () {
|
||||
$(this).addClass("expand");
|
||||
}, function () {
|
||||
$(this).removeClass("expand");
|
||||
});
|
||||
$(".collapse").toggle(function () {
|
||||
$("span", this).text('Expand');
|
||||
}, function () {
|
||||
$("span", this).text('Collapse');
|
||||
});
|
||||
$('section').hover(function() {
|
||||
$(this).addClass('hover')
|
||||
}, function() {
|
||||
$(this).removeClass('hover')
|
||||
})
|
||||
setInterval(function() {
|
||||
$('section.hover').each(function() {
|
||||
if ($(this).attr('hoveron')) {
|
||||
if ($('video')[0].currentTime-$(this).attr('hoveron')>1) {
|
||||
$(this).removeAttr('hoveron').removeClass('hover');
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 500);
|
||||
|
||||
$('.clickhere').click(function(){
|
||||
$('.popup').fadeIn();
|
||||
$('.pop-overlay').fadeIn()
|
||||
});
|
||||
|
||||
$('.pop-overlay').click(function(){
|
||||
$('.pop-overlay').fadeOut();
|
||||
$('.popup').fadeOut();
|
||||
});
|
||||
|
||||
$('.close_btn').click(function(){
|
||||
$('.pop-overlay').fadeOut();
|
||||
$('.popup').fadeOut();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Start First Container Div -->
|
||||
<div class="container-top">
|
||||
<!-- Start Second Container Div -->
|
||||
<div class="container-bot">
|
||||
<!-- Start Wrapper Div -->
|
||||
<div class="wrapper">
|
||||
<!-- Start Header -->
|
||||
<header id="global-header">
|
||||
<a href="http://www.drumbeat.org/" class="logo"><img src="images/drumbeat_logo.png" alt="drumbeat_logo" width="255" height="87" /></a>
|
||||
|
||||
<!-- Start Login/Signup -->
|
||||
<!--nav id="login">
|
||||
<ul>
|
||||
<li><a href="#">log in</a></li>
|
||||
<li><a href="#">sign up</a></li>
|
||||
</ul>
|
||||
</nav-->
|
||||
<!-- End Login/Signup -->
|
||||
|
||||
<!-- Start Primary Links -->
|
||||
<nav id="demo-info">
|
||||
<ul>
|
||||
<li><a href="#" onClick="javascript:void();" class="clickhere green"><img src="images/video_icon.png" alt="" width="18" height="14" />watch a video and learn more about this demo</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- End Primary Links -->
|
||||
|
||||
</header>
|
||||
<!-- End Header -->
|
||||
<!-- Start Contents -->
|
||||
<div id="contents">
|
||||
<!-- Start Left Contents -->
|
||||
<div class="left-content">
|
||||
<!-- Start Video Div -->
|
||||
<div id="videoContainer" class="video-div">
|
||||
<div id="credits" style="display:none">
|
||||
<div id="credit_inner">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// Credits
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$("#credits")
|
||||
.width(530)
|
||||
.height(299);
|
||||
var displayCredits = function() {
|
||||
$("#credits").show();
|
||||
$("#choices").animate({ right:'+=200px' }, 1000);
|
||||
add( [
|
||||
{
|
||||
text: "Play Again",
|
||||
click:function() {
|
||||
killCol(0);
|
||||
$('video')[0].currentTime=0;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "People",
|
||||
next :[
|
||||
{
|
||||
text: "Steve Song", href: "http://www.google.ca/"
|
||||
},
|
||||
{
|
||||
text: "Jeffrey Warren"
|
||||
},
|
||||
{
|
||||
text: "Michael Adeyeye"
|
||||
},
|
||||
{
|
||||
text: "Charlie Schmidt"
|
||||
},
|
||||
{
|
||||
text: "Jonathan Zittrain"
|
||||
},
|
||||
{
|
||||
text: "Mona Kasra"
|
||||
},
|
||||
{
|
||||
text: "Noah Workman"
|
||||
},
|
||||
{
|
||||
text: "Wilken Sanches"
|
||||
},
|
||||
{
|
||||
text: "Keechang Kim"
|
||||
},
|
||||
{
|
||||
text: "Celine Celines"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Places",
|
||||
next: [
|
||||
{
|
||||
text: "Sao Paulo", href: "http://en.wikipedia.org/wiki/S%C3%A3o_Paulo"
|
||||
},
|
||||
{
|
||||
text: "Cape Town", href: "http://en.wikipedia.org/wiki/Cape_Town"
|
||||
},
|
||||
{
|
||||
text: "Grande Isle, Louisiana", href: "http://en.wikipedia.org/wiki/Grand_Isle,_Louisiana"
|
||||
},
|
||||
{
|
||||
text: "MIT Media Lab", href: "http://www.media.mit.edu/"
|
||||
},
|
||||
{
|
||||
text: "Austin, Texas", href: "http://en.wikipedia.org/wiki/Austin,_Texas"
|
||||
},
|
||||
{
|
||||
text: "New York, New York", href: "http://en.wikipedia.org/wiki/New_York_City"
|
||||
},
|
||||
{
|
||||
text: "Seoul, Republic of South Korea", href: "http://en.wikipedia.org/wiki/Seoul"
|
||||
},
|
||||
{
|
||||
text: "Montreal, Quebec", href: "http://en.wikipedia.org/wiki/Montreal"
|
||||
},
|
||||
{
|
||||
text: "Harvard Law School", href: "http://www.law.harvard.edu/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Articles",
|
||||
next: [
|
||||
{
|
||||
text: "The Internet", href: "http://en.wikipedia.org/wiki/internet"
|
||||
},
|
||||
{
|
||||
text: "The Village Telco", href: "http://en.wikipedia.org/wiki/Village_telco"
|
||||
},
|
||||
{
|
||||
text: "Deepwater Horizon Oil Spill", href: "http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill"
|
||||
},
|
||||
{
|
||||
text: "Jonathan Zittrain", href: "http://en.wikipedia.org/wiki/Jonathan_Zittrain"
|
||||
},
|
||||
{
|
||||
text: "Compuserve", href: "http://en.wikipedia.org/wiki/Compuserve"
|
||||
},
|
||||
{
|
||||
text: "AOL", href: "http://en.wikipedia.org/wiki/AOL"
|
||||
},
|
||||
{
|
||||
text: "Prodigy", href: "http://en.wikipedia.org/wiki/Prodigy_%28online_service%29"
|
||||
},
|
||||
{
|
||||
text: "Internet Protocol", href: "http://en.wikipedia.org/wiki/Internet_Protocol"
|
||||
},
|
||||
{
|
||||
text: "Tim Berners-Lee", href: "http://en.wikipedia.org/wiki/Tim_Berners-Lee"
|
||||
},
|
||||
{
|
||||
text: "World Wide Web", href: "http://en.wikipedia.org/wiki/World_wide_web"
|
||||
},
|
||||
{
|
||||
text: "Wikipedia", href: "http://en.wikipedia.org/wiki/Wikipedia"
|
||||
},
|
||||
{
|
||||
text: "Open Standards", href: "http://en.wikipedia.org/wiki/Open_Standards"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Developers",
|
||||
next: [
|
||||
{
|
||||
text: "Brett Gaylor",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/remixmanifesto"},
|
||||
{ text: "Email", href: "mailto:brett@eyesteelfilm.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Scott Downe",
|
||||
next: [{ text: "Email", href: "mailto:scott.downe@senecac.on.ca" }]
|
||||
},
|
||||
|
||||
{
|
||||
text: "Nick Cammarata",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/nicklovescode"},
|
||||
{ text: "Email", href: "mailto:nick@nickcammarata.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Anna Sobiepanek",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/annasob"},
|
||||
{ text: "Email", href: "mailto:anna.sobiepanek@gmail.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Daniel Hodgin",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/dhhodgin"},
|
||||
{ text: "Email", href: "mailto:daniel.hodgin@senecac.on.ca"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "David Humphrey",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/humphd"},
|
||||
{ text: "Email", href: "mailto:david.humphrey@senecac.on.ca"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Sources",
|
||||
next: [
|
||||
|
||||
]
|
||||
}
|
||||
]);
|
||||
};
|
||||
var removeCredits = function() {
|
||||
$("#choices").css("right","-200px");
|
||||
$("#credits").hide();
|
||||
};
|
||||
var colIndex = 0;
|
||||
var killCol = function(index, callback) {
|
||||
$(".column").each(function() {
|
||||
if ($(this).attr("colindex")>index) {
|
||||
$(this).addClass("removing").animate( { left: -$(this).outerWidth() + "px" }, 1200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var add = function(items) {
|
||||
colIndex++;
|
||||
var ul = $("<ul></ul>")
|
||||
.addClass('column')
|
||||
.attr('colindex',parseInt(colIndex, 10));
|
||||
$.each(items, function(i, val) {
|
||||
var li = $(document.createElement('li'))
|
||||
.append($(document.createElement('a'))
|
||||
.text(val.text)
|
||||
.attr("href",val.href||"#")
|
||||
.attr("target",val.href?"_blank":""))
|
||||
.appendTo(ul)
|
||||
.addClass('play')
|
||||
.click(function() {
|
||||
if (val.href) {
|
||||
return true;
|
||||
}
|
||||
var colIndex2 = $(this).parent().attr('colindex');
|
||||
if (colIndex>colIndex2) {
|
||||
killCol(colIndex2);
|
||||
colIndex = colIndex2;
|
||||
}
|
||||
var hasClass = $(this).hasClass('selected');
|
||||
if (!hasClass) {
|
||||
if (val.click) {
|
||||
val.click();
|
||||
}
|
||||
if (val.next) {
|
||||
add(val.next);
|
||||
}
|
||||
}
|
||||
$(this)
|
||||
.parent()
|
||||
.find('.selected')
|
||||
.removeClass('selected');
|
||||
if (!hasClass) {
|
||||
$(this).addClass('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
var width = 0;
|
||||
$(".column:not(.removing)").each(function() {
|
||||
width+=$(this).outerWidth();
|
||||
});
|
||||
ul
|
||||
.appendTo("#credit_inner")
|
||||
.css("z-index",1000 - colIndex)
|
||||
.css("left",-ul.outerWidth())
|
||||
.animate({
|
||||
left: width + "px"
|
||||
},750);
|
||||
};
|
||||
</script>
|
||||
<video id="webmademovies" width="530" height="299" data-timeline-sources="xml/webMadeMovies.xml" controls loop>
|
||||
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
|
||||
</video>
|
||||
<div id="overlaydiv" style="position:absolute;top:1px;left:1px"></div>
|
||||
<script>
|
||||
/*overlayDiv = document.getElementById("overlaydiv");
|
||||
var createImage = function(src) {
|
||||
var image = document.createElement('img');
|
||||
image.setAttribute('src', src);
|
||||
image.setAttribute('style', "display:none");
|
||||
overlayDiv.appendChild(image);
|
||||
return image;
|
||||
};
|
||||
popcorn.VideoManager.prototype.loaded = function() {
|
||||
for (var i in this.commandObjects) {
|
||||
if (this.commandObjects[i].name === 'flickr' || this.commandObjects[i].name === 'footnote' || this.commandObjects[i].name === 'location' || this.commandObjects[i].name === 'twitter' || this.commandObjects[i].name === 'wiki' || this.commandObjects[i].name === 'lastfm') {
|
||||
this.commandObjects[i].extension.image = createImage("images/overlay/" + this.commandObjects[i].name + ".png");
|
||||
this.commandObjects[i].extension.onIn = function() {
|
||||
this.image.setAttribute('style', "display:inline");
|
||||
};
|
||||
this.commandObjects[i].extension.onOut = function() {
|
||||
this.image.setAttribute('style', "display:none");
|
||||
};
|
||||
}
|
||||
}
|
||||
};*/
|
||||
</script>
|
||||
<!-- Start Video Info -->
|
||||
<div class="video-info">
|
||||
<!-- Start Choose Language -->
|
||||
<div class="choose-language">
|
||||
<h2>Choose your language</h2>
|
||||
<select id="language">
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="en" selected="selected">English</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="fa">Persian</option>
|
||||
<option value="pl">Polish</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
<div id="credit">
|
||||
with help from
|
||||
<br />
|
||||
<a href="http://google.com/translate">Google Translate</a> and <a href="http://jquery.com">
|
||||
jQuery</a><br />
|
||||
<input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Choose Language -->
|
||||
|
||||
<!-- Start Foot Notes -->
|
||||
<div class="foot-notes">
|
||||
<h2>This video's footnotes</h2>
|
||||
<p id="footnotediv"></p>
|
||||
</div>
|
||||
<!-- End Foot Notes -->
|
||||
</div>
|
||||
<!-- End Video Info -->
|
||||
</div>
|
||||
<!-- End Video Div -->
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="iframes" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
<span>In this video: <strong id="inthisvideo"></strong></span>
|
||||
</h1>
|
||||
<!-- Start Column A -->
|
||||
<div class="columna">
|
||||
<section>
|
||||
<h3><img src="images/logo_twitter.png" alt="Twitter Updates" width="80" height="19" />
|
||||
<span> </span></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="personaltwitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column A -->
|
||||
|
||||
<!-- Start Column B -->
|
||||
<div class="columnb">
|
||||
<section>
|
||||
<h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
|
||||
<span> </span></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="personalflickr" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column B -->
|
||||
</div>
|
||||
<!-- End Left Contents -->
|
||||
<!-- Start Right Contents -->
|
||||
<div class="right-content">
|
||||
<h1><span>Related to this video</span></h1>
|
||||
<!-- Start Column A -->
|
||||
<div class="columna">
|
||||
<section>
|
||||
<div id="container3" class="google-map-title">
|
||||
<h4>Filmed in:</h4>
|
||||
<span id="mapinfo"></span>
|
||||
</div>
|
||||
|
||||
<div id="container2" class="google-map"></div>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_twitter.png" alt="Twitter" width="80" height="19" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="twitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<!-- End Column A -->
|
||||
<!-- Start Column B -->
|
||||
<div class="columnb">
|
||||
<section>
|
||||
<h3><img src="images/logo_wiki.png" alt="Wikipedia" width="92" height="13" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div class="content" id="wikidiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_google_news.png" alt="Google News" width="74" height="33" />
|
||||
</h3>
|
||||
<div id="googlenewsdiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_lastfm.png" alt="Lastfm" width="80" height="24" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div class="content" id="lastfmdiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column B -->
|
||||
<h1><span>This video's copyright information</span></h1>
|
||||
<section>
|
||||
<div id="container5"></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Right Contents -->
|
||||
</div>
|
||||
<!-- End Contents -->
|
||||
<footer>
|
||||
<div class="footer_drumbeat">
|
||||
<img src="images/footer_webmade.png" alt="footer_drumbeat" width="115" height="91" />
|
||||
<p>Web Made Movies is Mozilla's<br /> Open video lab<br />
|
||||
<a href="http://www.drumbeat.org/webmademovies">Learn More and find the source code for this demo<span>»</span></a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer_drumbeat">
|
||||
<img src="images/footer_drumbeat.png" alt="footer_drumbeat" width="200" height="68" /><p>Innovation on the open web,<br />powered by everybody.</p>
|
||||
</div>
|
||||
<div class="copyright">Portions of this content are ©2010 by individual drumbeat.org contributors. Content available under a Creative Commons license.</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- End Wrapper Div -->
|
||||
</div>
|
||||
<!-- End Second Container Div -->
|
||||
</div>
|
||||
<!-- End First Container Div -->
|
||||
|
||||
<!-- Start Popup -->
|
||||
<div class="pop-overlay">
|
||||
</div>
|
||||
|
||||
<div class="popup">
|
||||
<span class="close_btn">x</span>
|
||||
|
||||
<div class="popup-content">
|
||||
<h1>Info about this page</h1>
|
||||
<p>This demo was created by Scott Downe, Anna Sobiepanek, Daniel Hodgin, Nick Cammarata, and Brett Gaylor as part of Web Made Movies. To download the source code and find out how you can contribute, click on the Web Made Movies logo at the bottom of this page.</p>
|
||||
|
||||
<p>
|
||||
<strong>Are you having trouble getting this demo to play?</strong><br />
|
||||
This video will only play in modern browsers, such as Firefox 3.5+ or Safari 3+. Unfortunately, Internet Explorer does not currently support open video codecs, so the won't work in that browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Popup -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,545 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Video Demo Using popcorn.js</title>
|
||||
<meta charset="UTF-8" />
|
||||
<script src="http://code.jquery.com/jquery.js"></script>
|
||||
<script src="http://google.com/jsapi"></script>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
|
||||
<script>google.load("language", "1");</script>
|
||||
<script>google.load("elements", "1", {packages : ["newsshow"]});</script>
|
||||
<script src="../../popcorn.js"></script>
|
||||
|
||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
//Show hide the contents
|
||||
$(".collapse").click(function () {
|
||||
$(this).next(".content").slideToggle("fast");
|
||||
});
|
||||
//Swap class names
|
||||
$(".collapse").toggle(function () {
|
||||
$(this).addClass("expand");
|
||||
}, function () {
|
||||
$(this).removeClass("expand");
|
||||
});
|
||||
$(".collapse").toggle(function () {
|
||||
$("span", this).text('Expand');
|
||||
}, function () {
|
||||
$("span", this).text('Collapse');
|
||||
});
|
||||
$('section').hover(function() {
|
||||
$(this).addClass('hover')
|
||||
}, function() {
|
||||
$(this).removeClass('hover')
|
||||
})
|
||||
setInterval(function() {
|
||||
$('section.hover').each(function() {
|
||||
if ($(this).attr('hoveron')) {
|
||||
if ($('video')[0].currentTime-$(this).attr('hoveron')>1) {
|
||||
$(this).removeAttr('hoveron').removeClass('hover');
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 500);
|
||||
|
||||
$('.clickhere').click(function(){
|
||||
$('.popup').fadeIn();
|
||||
$('.pop-overlay').fadeIn()
|
||||
});
|
||||
|
||||
$('.pop-overlay').click(function(){
|
||||
$('.pop-overlay').fadeOut();
|
||||
$('.popup').fadeOut();
|
||||
});
|
||||
|
||||
$('.close_btn').click(function(){
|
||||
$('.pop-overlay').fadeOut();
|
||||
$('.popup').fadeOut();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Start First Container Div -->
|
||||
<div class="container-top">
|
||||
<!-- Start Second Container Div -->
|
||||
<div class="container-bot">
|
||||
<!-- Start Wrapper Div -->
|
||||
<div class="wrapper">
|
||||
<!-- Start Header -->
|
||||
<header id="global-header">
|
||||
<a href="http://www.drumbeat.org/" class="logo"><img src="images/drumbeat_logo.png" alt="drumbeat_logo" width="255" height="87" /></a>
|
||||
|
||||
<!-- Start Login/Signup -->
|
||||
<!--nav id="login">
|
||||
<ul>
|
||||
<li><a href="#">log in</a></li>
|
||||
<li><a href="#">sign up</a></li>
|
||||
</ul>
|
||||
</nav-->
|
||||
<!-- End Login/Signup -->
|
||||
|
||||
<!-- Start Primary Links -->
|
||||
<nav id="demo-info">
|
||||
<ul>
|
||||
<li><a href="#" onClick="javascript:void();" class="clickhere green"><img src="images/video_icon.png" alt="" width="18" height="14" />watch a video and learn more about this demo</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- End Primary Links -->
|
||||
|
||||
</header>
|
||||
<!-- End Header -->
|
||||
<!-- Start Contents -->
|
||||
<div id="contents">
|
||||
<!-- Start Left Contents -->
|
||||
<div class="left-content">
|
||||
<!-- Start Video Div -->
|
||||
<div id="videoContainer" class="video-div">
|
||||
<div id="credits" style="display:none">
|
||||
<div id="credit_inner">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// Credits
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$("#credits")
|
||||
.width(530)
|
||||
.height(299);
|
||||
var displayCredits = function() {
|
||||
$("#credits").show();
|
||||
$("#choices").animate({ right:'+=200px' }, 1000);
|
||||
add( [
|
||||
{
|
||||
text: "Play Again",
|
||||
click:function() {
|
||||
killCol(0);
|
||||
$('video')[0].currentTime=0;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "People",
|
||||
next :[
|
||||
{
|
||||
text: "Steve Song", href: "http://www.google.ca/"
|
||||
},
|
||||
{
|
||||
text: "Jeffrey Warren"
|
||||
},
|
||||
{
|
||||
text: "Michael Adeyeye"
|
||||
},
|
||||
{
|
||||
text: "Charlie Schmidt"
|
||||
},
|
||||
{
|
||||
text: "Jonathan Zittrain"
|
||||
},
|
||||
{
|
||||
text: "Mona Kasra"
|
||||
},
|
||||
{
|
||||
text: "Noah Workman"
|
||||
},
|
||||
{
|
||||
text: "Wilken Sanches"
|
||||
},
|
||||
{
|
||||
text: "Keechang Kim"
|
||||
},
|
||||
{
|
||||
text: "Celine Celines"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Places",
|
||||
next: [
|
||||
{
|
||||
text: "Sao Paulo", href: "http://en.wikipedia.org/wiki/S%C3%A3o_Paulo"
|
||||
},
|
||||
{
|
||||
text: "Cape Town", href: "http://en.wikipedia.org/wiki/Cape_Town"
|
||||
},
|
||||
{
|
||||
text: "Grande Isle, Louisiana", href: "http://en.wikipedia.org/wiki/Grand_Isle,_Louisiana"
|
||||
},
|
||||
{
|
||||
text: "MIT Media Lab", href: "http://www.media.mit.edu/"
|
||||
},
|
||||
{
|
||||
text: "Austin, Texas", href: "http://en.wikipedia.org/wiki/Austin,_Texas"
|
||||
},
|
||||
{
|
||||
text: "New York, New York", href: "http://en.wikipedia.org/wiki/New_York_City"
|
||||
},
|
||||
{
|
||||
text: "Seoul, Republic of South Korea", href: "http://en.wikipedia.org/wiki/Seoul"
|
||||
},
|
||||
{
|
||||
text: "Montreal, Quebec", href: "http://en.wikipedia.org/wiki/Montreal"
|
||||
},
|
||||
{
|
||||
text: "Harvard Law School", href: "http://www.law.harvard.edu/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Articles",
|
||||
next: [
|
||||
{
|
||||
text: "The Internet", href: "http://en.wikipedia.org/wiki/internet"
|
||||
},
|
||||
{
|
||||
text: "The Village Telco", href: "http://en.wikipedia.org/wiki/Village_telco"
|
||||
},
|
||||
{
|
||||
text: "Deepwater Horizon Oil Spill", href: "http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill"
|
||||
},
|
||||
{
|
||||
text: "Jonathan Zittrain", href: "http://en.wikipedia.org/wiki/Jonathan_Zittrain"
|
||||
},
|
||||
{
|
||||
text: "Compuserve", href: "http://en.wikipedia.org/wiki/Compuserve"
|
||||
},
|
||||
{
|
||||
text: "AOL", href: "http://en.wikipedia.org/wiki/AOL"
|
||||
},
|
||||
{
|
||||
text: "Prodigy", href: "http://en.wikipedia.org/wiki/Prodigy_%28online_service%29"
|
||||
},
|
||||
{
|
||||
text: "Internet Protocol", href: "http://en.wikipedia.org/wiki/Internet_Protocol"
|
||||
},
|
||||
{
|
||||
text: "Tim Berners-Lee", href: "http://en.wikipedia.org/wiki/Tim_Berners-Lee"
|
||||
},
|
||||
{
|
||||
text: "World Wide Web", href: "http://en.wikipedia.org/wiki/World_wide_web"
|
||||
},
|
||||
{
|
||||
text: "Wikipedia", href: "http://en.wikipedia.org/wiki/Wikipedia"
|
||||
},
|
||||
{
|
||||
text: "Open Standards", href: "http://en.wikipedia.org/wiki/Open_Standards"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Developers",
|
||||
next: [
|
||||
{
|
||||
text: "Brett Gaylor",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/remixmanifesto"},
|
||||
{ text: "Email", href: "mailto:brett@eyesteelfilm.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Scott Downe",
|
||||
next: [{ text: "Email", href: "mailto:scott.downe@senecac.on.ca" }]
|
||||
},
|
||||
|
||||
{
|
||||
text: "Nick Cammarata",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/nicklovescode"},
|
||||
{ text: "Email", href: "mailto:nick@nickcammarata.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Anna Sobiepanek",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/annasob"},
|
||||
{ text: "Email", href: "mailto:anna.sobiepanek@gmail.com"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Daniel Hodgin",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/dhhodgin"},
|
||||
{ text: "Email", href: "mailto:daniel.hodgin@senecac.on.ca"}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "David Humphrey",
|
||||
next: [
|
||||
{ text: "Twitter", href: "http://twitter.com/humphd"},
|
||||
{ text: "Email", href: "mailto:david.humphrey@senecac.on.ca"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Sources",
|
||||
next: [
|
||||
|
||||
]
|
||||
}
|
||||
]);
|
||||
};
|
||||
var removeCredits = function() {
|
||||
$("#choices").css("right","-200px");
|
||||
$("#credits").hide();
|
||||
};
|
||||
var colIndex = 0;
|
||||
var killCol = function(index, callback) {
|
||||
$(".column").each(function() {
|
||||
if ($(this).attr("colindex")>index) {
|
||||
$(this).addClass("removing").animate( { left: -$(this).outerWidth() + "px" }, 1200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var add = function(items) {
|
||||
colIndex++;
|
||||
var ul = $("<ul></ul>")
|
||||
.addClass('column')
|
||||
.attr('colindex',parseInt(colIndex, 10));
|
||||
$.each(items, function(i, val) {
|
||||
var li = $(document.createElement('li'))
|
||||
.append($(document.createElement('a'))
|
||||
.text(val.text)
|
||||
.attr("href",val.href||"#")
|
||||
.attr("target",val.href?"_blank":""))
|
||||
.appendTo(ul)
|
||||
.addClass('play')
|
||||
.click(function() {
|
||||
if (val.href) {
|
||||
return true;
|
||||
}
|
||||
var colIndex2 = $(this).parent().attr('colindex');
|
||||
if (colIndex>colIndex2) {
|
||||
killCol(colIndex2);
|
||||
colIndex = colIndex2;
|
||||
}
|
||||
var hasClass = $(this).hasClass('selected');
|
||||
if (!hasClass) {
|
||||
if (val.click) {
|
||||
val.click();
|
||||
}
|
||||
if (val.next) {
|
||||
add(val.next);
|
||||
}
|
||||
}
|
||||
$(this)
|
||||
.parent()
|
||||
.find('.selected')
|
||||
.removeClass('selected');
|
||||
if (!hasClass) {
|
||||
$(this).addClass('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
var width = 0;
|
||||
$(".column:not(.removing)").each(function() {
|
||||
width+=$(this).outerWidth();
|
||||
});
|
||||
ul
|
||||
.appendTo("#credit_inner")
|
||||
.css("z-index",1000 - colIndex)
|
||||
.css("left",-ul.outerWidth())
|
||||
.animate({
|
||||
left: width + "px"
|
||||
},750);
|
||||
};
|
||||
</script>
|
||||
<video width="530" height="299" data-timeline-sources="xml/webMadeMovies.xml" controls>
|
||||
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
|
||||
</video>
|
||||
<div id="overlaydiv" style="position:absolute;top:1px;left:1px"></div>
|
||||
<script>
|
||||
overlayDiv = document.getElementById("overlaydiv");
|
||||
var createImage = function(src) {
|
||||
var image = document.createElement('img');
|
||||
image.setAttribute('src', src);
|
||||
image.setAttribute('style', "display:none");
|
||||
overlayDiv.appendChild(image);
|
||||
return image;
|
||||
};
|
||||
popcorn.VideoManager.prototype.loaded = function() {
|
||||
for (var i in this.commandObjects) {
|
||||
if (this.commandObjects[i].name === 'flickr' || this.commandObjects[i].name === 'footnote' || this.commandObjects[i].name === 'location' || this.commandObjects[i].name === 'twitter' || this.commandObjects[i].name === 'wiki' || this.commandObjects[i].name === 'lastfm') {
|
||||
this.commandObjects[i].extension.image = createImage("images/overlay/" + this.commandObjects[i].name + ".png");
|
||||
this.commandObjects[i].extension.onIn = function() {
|
||||
this.image.setAttribute('style', "display:inline");
|
||||
};
|
||||
this.commandObjects[i].extension.onOut = function() {
|
||||
this.image.setAttribute('style', "display:none");
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<!-- Start Video Info -->
|
||||
<div class="video-info">
|
||||
<!-- Start Choose Language -->
|
||||
<div class="choose-language">
|
||||
<h2>Choose your language</h2>
|
||||
<select id="language">
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="en" selected="selected">English</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="fa">Persian</option>
|
||||
<option value="pl">Polish</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
<div id="credit">
|
||||
with help from
|
||||
<br />
|
||||
<a href="http://google.com/translate">Google Translate</a> and <a href="http://jquery.com">
|
||||
jQuery</a><br />
|
||||
<input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Choose Language -->
|
||||
|
||||
<!-- Start Foot Notes -->
|
||||
<div class="foot-notes">
|
||||
<h2>This video's footnotes</h2>
|
||||
<p id="footnotediv"></p>
|
||||
</div>
|
||||
<!-- End Foot Notes -->
|
||||
</div>
|
||||
<!-- End Video Info -->
|
||||
</div>
|
||||
<!-- End Video Div -->
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="iframes" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
<span>In this video: <strong id="inthisvideo"></strong></span>
|
||||
</h1>
|
||||
<!-- Start Column A -->
|
||||
<div class="columna">
|
||||
<section>
|
||||
<h3><img src="images/logo_twitter.png" alt="Twitter Updates" width="80" height="19" />
|
||||
<span> </span></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="personaltwitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column A -->
|
||||
|
||||
<!-- Start Column B -->
|
||||
<div class="columnb">
|
||||
<section>
|
||||
<h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
|
||||
<span> </span></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="personalflickr" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column B -->
|
||||
</div>
|
||||
<!-- End Left Contents -->
|
||||
<!-- Start Right Contents -->
|
||||
<div class="right-content">
|
||||
<h1><span>Related to this video</span></h1>
|
||||
<!-- Start Column A -->
|
||||
<div class="columna">
|
||||
<section>
|
||||
<div id="container3" class="google-map-title">
|
||||
<h4>Filmed in:</h4>
|
||||
<span id="mapinfo"></span>
|
||||
</div>
|
||||
|
||||
<div id="container2" class="google-map"></div>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_twitter.png" alt="Twitter" width="80" height="19" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div id="twitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<!-- End Column A -->
|
||||
<!-- Start Column B -->
|
||||
<div class="columnb">
|
||||
<section>
|
||||
<h3><img src="images/logo_wiki.png" alt="Wikipedia" width="92" height="13" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div class="content" id="wikidiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_google_news.png" alt="Google News" width="74" height="33" />
|
||||
</h3>
|
||||
<div id="googlenewsdiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
<section>
|
||||
<h3><img src="images/logo_lastfm.png" alt="Lastfm" width="80" height="24" /></h3>
|
||||
<a href="#" class="collapse"><span>Collapse</span></a>
|
||||
<div class="content" id="lastfmdiv"><div class="overlay"></div><div class="inactive"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Column B -->
|
||||
<h1><span>This video's copyright information</span></h1>
|
||||
<section>
|
||||
<div id="container5"></div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- End Right Contents -->
|
||||
</div>
|
||||
<!-- End Contents -->
|
||||
<footer>
|
||||
<div class="footer_drumbeat">
|
||||
<img src="images/footer_webmade.png" alt="footer_drumbeat" width="115" height="91" />
|
||||
<p>Web Made Movies is Mozilla's<br /> Open video lab<br />
|
||||
<a href="http://www.drumbeat.org/webmademovies">Learn More and find the source code for this demo<span>»</span></a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer_drumbeat">
|
||||
<img src="images/footer_drumbeat.png" alt="footer_drumbeat" width="200" height="68" /><p>Innovation on the open web,<br />powered by everybody.</p>
|
||||
</div>
|
||||
<div class="copyright">Portions of this content are ©2010 by individual drumbeat.org contributors. Content available under a Creative Commons license.</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- End Wrapper Div -->
|
||||
</div>
|
||||
<!-- End Second Container Div -->
|
||||
</div>
|
||||
<!-- End First Container Div -->
|
||||
|
||||
<!-- Start Popup -->
|
||||
<div class="pop-overlay">
|
||||
</div>
|
||||
|
||||
<div class="popup">
|
||||
<span class="close_btn">x</span>
|
||||
|
||||
<div class="popup-content">
|
||||
<h1>Info about this page</h1>
|
||||
<p>This demo was created by Scott Downe, Anna Sobiepanek, Daniel Hodgin, Nick Cammarata, and Brett Gaylor as part of Web Made Movies. To download the source code and find out how you can contribute, click on the Web Made Movies logo at the bottom of this page.</p>
|
||||
|
||||
<p>
|
||||
<strong>Are you having trouble getting this demo to play?</strong><br />
|
||||
This video will only play in modern browsers, such as Firefox 3.5+ or Safari 3+. Unfortunately, Internet Explorer does not currently support open video codecs, so the won't work in that browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Popup -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,751 @@
|
|||
html, body, div, span, object,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
html, body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-family: Helvetica, Arial, "Lucida Grande";
|
||||
font-size: 12px;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* remember to highlight inserts somehow! */
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #cc433d;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #f27c77;
|
||||
}
|
||||
|
||||
input[type="button"], input[type="submit"], input[type="reset"], button{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="text"], textarea{
|
||||
-moz-border-radius:13px;
|
||||
-webkit-border-radius:13px;
|
||||
border-radius:13px;
|
||||
border:1px solid #E2E2E2;
|
||||
padding: 5px;
|
||||
-webkit-box-shadow: 1px 1px 0px #f9f9f9;
|
||||
-moz-box-shadow:inset 1px 1px 0px #f9f9f9;
|
||||
box-shadow:inset 1px 1px 0px #f9f9f9;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input[type="text"]{
|
||||
padding: 0 5px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
input[type="text"]:hover, textarea:hover{
|
||||
border-color: #CCC;
|
||||
-moz-box-shadow:inset 1px 1px 0px #e2e2e2;
|
||||
box-shadow:inset 1px 1px 0px #e2e2e2;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, textarea:focus{
|
||||
-webkit-box-shadow: 0px 0px 5px #d6ecd6;
|
||||
-moz-box-shadow: 0px 0px 5px #d6ecd6;
|
||||
box-shadow: 0px 0px 5px #d6ecd6;
|
||||
}
|
||||
|
||||
header, footer, nav, article, section {display:block;}
|
||||
|
||||
select{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
body{
|
||||
background: #f8f8f8 url(images/body_bg.jpg) repeat-x center top;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
width:1090px;
|
||||
margin:0 auto;
|
||||
min-height:880px;
|
||||
background: url(images/header.jpg) no-repeat center top;
|
||||
}
|
||||
|
||||
.container-bot, .container-top{
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container-top{
|
||||
background: url(images/footer_bg.jpg) repeat-x center bottom;
|
||||
}
|
||||
|
||||
.container-bot{
|
||||
background: url(images/footer.jpg) repeat-x center bottom;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
header#global-header{
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
a.logo{
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav#demo-info{
|
||||
float: left;
|
||||
margin-left:101px;
|
||||
margin-top:27px;
|
||||
}
|
||||
|
||||
a.clickhere{
|
||||
color: #FFF;
|
||||
padding: 7px 11px 7px 16px;
|
||||
display: block;
|
||||
background-image: -moz-linear-gradient(top, #e9726d, #cc433c);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cc433c),color-stop(1, #e9726d));/* Safari & Chrome */
|
||||
-moz-border-radius:8px;
|
||||
border-radius:8px;
|
||||
-webkit-border-radius:8px;
|
||||
font-size:21px;
|
||||
letter-spacing:1px;
|
||||
}
|
||||
|
||||
a.clickhere:hover{
|
||||
background-image: -moz-linear-gradient(top, #ea362e, #ba1b13);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ba1b13),color-stop(1, #ea362e));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
a.clickhere:active, a.clickhere:focus{
|
||||
background-image: -moz-linear-gradient(top, #cc433c, #e9726d);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e9726d),color-stop(1, #cc433c));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
|
||||
|
||||
a.clickhere.green{
|
||||
background-image: -moz-linear-gradient(top, #05B276, #00A252);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00A252),color-stop(1, #05B276));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
|
||||
a.clickhere.green:hover{
|
||||
background-image: -moz-linear-gradient(top, #009d61, #009047);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #009047),color-stop(1, #009d61));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
a.clickhere.green:active,a.clickhere.green:focus{
|
||||
background-image: -moz-linear-gradient(top, #00A252, #05B276);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #05B276),color-stop(1, #00A252));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
|
||||
a.clickhere img{
|
||||
float: left;
|
||||
margin:2px 14px 0 0;
|
||||
}
|
||||
|
||||
nav#demo-info ul li{
|
||||
padding:0 0 10px 0;
|
||||
}
|
||||
|
||||
/* nav#demo-info ul li a{
|
||||
display: block;
|
||||
-moz-border-radius:8px;
|
||||
border-radius:8px;
|
||||
-webkit-border-radius:8px;
|
||||
background:none repeat scroll 0 0 #969089;
|
||||
color:#FFFFFF;
|
||||
font-size: 20px;
|
||||
padding: 5px 10px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
nav#demo-info ul li a:hover{
|
||||
opacity:.8;
|
||||
}*/
|
||||
|
||||
nav#demo-info ul{
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav#login{
|
||||
float:right;
|
||||
font-size:12px;
|
||||
width:90px;
|
||||
}
|
||||
|
||||
nav#login a{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
nav#login a:hover{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
nav#login ul li{
|
||||
float: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.left-content, .right-content{
|
||||
width:534px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-content{
|
||||
float: right;
|
||||
}
|
||||
|
||||
#contents h1{
|
||||
padding-bottom: 15px;
|
||||
background: url(images/bubble_pointer.png) no-repeat 10px 24px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#contents h1 span{
|
||||
border: 1px solid #9f9f9f;
|
||||
background-color:#1c749d;
|
||||
-moz-border-radius:8px;
|
||||
border-radius:8px;
|
||||
-webkit-border-radius:8px;
|
||||
background-image: -moz-linear-gradient(top, #3d96c0, #1a729b);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1a729b),color-stop(1, #3d96c0));/* Safari & Chrome */
|
||||
padding: 5px 20px 6px 12px;
|
||||
min-width:300px;
|
||||
font-size:15px;
|
||||
color: #FFF;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
border-bottom-color: #1c749d;
|
||||
/*box-shadow:inset 0 0 1px #FFF;
|
||||
-moz-box-shadow:inset 0 1px 0 #6fb9db;*/
|
||||
}
|
||||
|
||||
#contents h1 span p{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Left Content */
|
||||
|
||||
.about-us{
|
||||
display: block;
|
||||
padding: 11px 14px 11px 11px;
|
||||
text-align: right;
|
||||
left:157px;
|
||||
top:41px;
|
||||
background: url(images/arro.png) no-repeat right 12px;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.about-us:hover{
|
||||
color: #d04c3e;
|
||||
background: url(images/arro.png) no-repeat right -21px;
|
||||
}
|
||||
|
||||
.video-div{
|
||||
position:relative;
|
||||
border: 2px solid #cc433c;
|
||||
margin-bottom: 15px;
|
||||
-webkit-box-shadow: -1px 1px 1px #d9d9d9;
|
||||
-moz-box-shadow: -1px 1px 1px #d9d9d9;
|
||||
box-shadow: -1px 1px 1px #d9d9d9;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.video-div .video-info{
|
||||
padding: 10px;
|
||||
background-color: #cc433c;
|
||||
background-image: -moz-linear-gradient(top, #e9726d, #cc433c);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cc433c),color-stop(1, #e9726d));/* Safari & Chrome */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twtr-ft{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.gns-sstitle, .gns-sstitle-link{
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.gns-root{
|
||||
width:238px !important;
|
||||
height:216px !important;
|
||||
}
|
||||
.gns-clusterresults, .gns-pausable{
|
||||
width:82px !important;
|
||||
}
|
||||
|
||||
.gns-title-link, .gns-publisher-link, .gns-cluster-publishers, .gns-cluster-link, .gns-linktrackable, .gns-cluster, .gns-clearim, .gns-poweredby{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.gns-result, .gns-linktrackable, .gns-qtitle, .gns-snippet{
|
||||
width:220px !important;
|
||||
}
|
||||
|
||||
.gns-cursorcontrols{
|
||||
width:236px !important;
|
||||
}
|
||||
|
||||
.gns-basecanvas{
|
||||
width:236px !important;
|
||||
height:214px !important;
|
||||
background-image:none !important;
|
||||
}
|
||||
|
||||
.video-div .video-info .foot-notes{
|
||||
width:332px;
|
||||
height:90px;
|
||||
position: absolute;
|
||||
right:-9px;
|
||||
top:3px;
|
||||
background: url(images/footnote.png) no-repeat 0 0;
|
||||
}
|
||||
|
||||
.video-div .video-info .foot-notes h2{
|
||||
color:#cc5236;
|
||||
padding:13px 10px 0;
|
||||
}
|
||||
|
||||
.video-div .video-info .foot-notes p{
|
||||
padding: 10px 27px 10px 10px;
|
||||
}
|
||||
|
||||
.choose-language h2, .choose-language div{
|
||||
color: #FFF;
|
||||
opacity:.8;
|
||||
}
|
||||
|
||||
.choose-language h2{
|
||||
font-size: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.choose-language a{
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.choose-language a:hover{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#credit{
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.choose-language select, .choose-language select *{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
|
||||
.columna, .columnb{
|
||||
width:260px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.columnb{
|
||||
float: right;
|
||||
}
|
||||
|
||||
section{
|
||||
padding: 10px;
|
||||
background: #FFF;
|
||||
position: relative;
|
||||
-webkit-box-shadow: -1px 1px 1px #d9d9d9;
|
||||
-moz-box-shadow: -1px 1px 1px #d9d9d9;
|
||||
box-shadow: -1px 1px 1px #d9d9d9;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.overlay{
|
||||
z-index: 9001;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: red;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inactive{
|
||||
z-index: 9001;
|
||||
display: inline;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: grey;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
section.hover{
|
||||
-webkit-box-shadow: -1px 1px 1px #bdc7c6;
|
||||
-moz-box-shadow: -1px 1px 1px #bdc7c6;
|
||||
box-shadow: -1px 1px 1px #bdc7c6;
|
||||
border: 1px solid #333;
|
||||
-moz-transform: scale(1.02);-webkit-transform: scale(1.02);
|
||||
z-index: 999;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
section h3{
|
||||
padding-bottom: 8px;
|
||||
min-height:18px;
|
||||
}
|
||||
|
||||
section .content{
|
||||
padding-top: 8px;
|
||||
border-top:1px dotted #dddddd;
|
||||
line-height: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
section:hover .content{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
section h3 img{
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.more{
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
section h3 span{
|
||||
font-weight: normal;
|
||||
padding: 3px 0 0 0;
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
section a.collapse, section a.expand{
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
font-size: 8px;
|
||||
top:10px;
|
||||
right:10px;
|
||||
padding: 5px 0 5px 5px;
|
||||
letter-spacing: 1px;
|
||||
border: 1px solid #e3e3e3;
|
||||
background-image: -moz-linear-gradient(top, #FFFFFF, #f5f5f5);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #f5f5f5),color-stop(1, #FFFFFF));/* Safari & Chrome */
|
||||
-moz-border-radius:8px;
|
||||
border-radius:8px;
|
||||
-webkit-border-radius:8px;
|
||||
line-height: 7px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
section a.collapse:hover, section a.expand:hover{
|
||||
background-image: -moz-linear-gradient(top, #FFFFFF, #FAFAFA);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #FAFAFA),color-stop(1, #FFFFFF));/* Safari & Chrome */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
section a.collapse:active,
|
||||
section a.expand:active{
|
||||
background-image: -moz-linear-gradient(top, #f5f5f5, #FFFFFF);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #FFFFFF),color-stop(1, #f5f5f5));/* Safari & Chrome */
|
||||
}
|
||||
|
||||
section a.collapse span, section a.expand span{
|
||||
padding: 0 15px 0 0;
|
||||
background: url(images/expand_collapse.png) no-repeat 93% 1px;
|
||||
}
|
||||
|
||||
section a.expand span{
|
||||
background: url(images/expand_collapse.png) no-repeat 93% -12px;
|
||||
}
|
||||
|
||||
.google-map-title h4{
|
||||
font-size:14px;
|
||||
float: left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.google-map-title span{
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.google-map-title{
|
||||
height: 35px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.google-map{
|
||||
clear: both;
|
||||
height:250px;
|
||||
border:1px solid #E2E2E2;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/*Footer */
|
||||
|
||||
footer{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
footer .copyright{
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
background: url(images/footer_border.jpg) no-repeat center top;
|
||||
}
|
||||
|
||||
footer .footer_webmade, footer .footer_drumbeat{
|
||||
float: left;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
footer .footer_webmade{
|
||||
width:570px;
|
||||
}
|
||||
|
||||
footer .footer_webmade *{
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
footer .footer_drumbeat *{
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
footer .footer_webmade a{
|
||||
display: block;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
footer .footer_webmade a span{
|
||||
font-family: Arial, Helvetica, Verdana;
|
||||
}
|
||||
|
||||
footer img{
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
footer .footer_webmade img{
|
||||
margin-top: -15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
footer p{
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
footer .footer_drumbeat{
|
||||
width:480px;
|
||||
}
|
||||
|
||||
#sub {
|
||||
position:absolute;
|
||||
top:350px;
|
||||
left:300px;
|
||||
color:white;
|
||||
font-weight:bold;
|
||||
font-family:sans-serif;
|
||||
text-shadow:black 1px 1px 3px;
|
||||
width:820px;
|
||||
font-size:22px;
|
||||
}
|
||||
|
||||
/* Credits */
|
||||
#credits {
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
background-color:#333;
|
||||
border-left:1px solid #333;
|
||||
}
|
||||
|
||||
#credits .column {
|
||||
float:left;
|
||||
position:absolute;
|
||||
height:100%;
|
||||
top:0px;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
background-color:#555;
|
||||
overflow:auto;
|
||||
border-right:1px #666 solid;
|
||||
}
|
||||
|
||||
#credits li {
|
||||
list-style-type:none;
|
||||
}
|
||||
#credits li.selected { border-left:2px solid #FADBAF; }
|
||||
|
||||
#credits li a {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
color:#efefef;
|
||||
font-weight:bold;
|
||||
font-family:sans-serif;
|
||||
text-shadow:black 1px 1px 3px;
|
||||
padding:12px 14px;
|
||||
border-bottom:1px solid #666;
|
||||
}
|
||||
|
||||
#credits li a:hover {
|
||||
color:#FADBAF;
|
||||
}
|
||||
|
||||
|
||||
/* Popup */
|
||||
|
||||
.pop-overlay{
|
||||
display:block;
|
||||
height:100%;
|
||||
opacity:0.8;
|
||||
width:100%;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left: 0;
|
||||
z-index: 9002;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
margin-left: -240px;
|
||||
top:15%;
|
||||
z-index: 10000;
|
||||
border: 10px solid #000;
|
||||
background: #FFF;
|
||||
-webkit-box-shadow: 3px 3px 6px #000;
|
||||
-moz-box-shadow:3px 3px 6px #000;
|
||||
box-shadow:3px 3px 6px #000;
|
||||
-moz-border-radius:6px;
|
||||
-webkit-border-radius:6px;
|
||||
border-radius:6px;
|
||||
width:480px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup embed, .popup object{
|
||||
display:block;
|
||||
height:300px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
width:480px;
|
||||
z-index:99999;
|
||||
}
|
||||
|
||||
|
||||
.popup-content h1, .popup-content p{
|
||||
padding:5px 10px;
|
||||
line-height:17px;
|
||||
color: #FFF;
|
||||
opacity:0.8;
|
||||
}
|
||||
|
||||
.popup-content h1{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.popup-content{
|
||||
padding: 10px;
|
||||
background-color: #cc433c;
|
||||
background-image: -moz-linear-gradient(top, #e9726d, #cc433c);/* Firefox 3.6 */
|
||||
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cc433c),color-stop(1, #e9726d));/* Safari & Chrome */
|
||||
border-top:2px solid #CC433C;
|
||||
}
|
||||
|
||||
.close_btn{
|
||||
-moz-border-radius:10px 10px 10px 10px;
|
||||
-moz-box-shadow:0 0 10px #353535;
|
||||
background:none repeat scroll 0 0 #353535;
|
||||
color:#FFFFFF;
|
||||
font-family:Helvetica,sans-serif;
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
height:23px;
|
||||
line-height:23px;
|
||||
position:absolute;
|
||||
right:-22px;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
top:-22px;
|
||||
width:23px;
|
||||
cursor: pointer;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
<popcorn>
|
||||
<manifest>
|
||||
<people>
|
||||
<person id="celine" name="Celine" salutation="Miss." >
|
||||
<resource id="celinehomepage" src="http://www.celinecelines.com/" description="Celine's Homepage" />
|
||||
</person>
|
||||
<person id="brian" name="brian" >
|
||||
</person>
|
||||
<person id="SteveSong" name="Steve Song" >
|
||||
</person>
|
||||
<person id="mona" name="Mona" >
|
||||
<resource id="monahomepage" src="http://www.monakasra.com/" description="Mona's Homepage"/>
|
||||
</person>
|
||||
<person id="dave" name="Dave" >
|
||||
</person>
|
||||
<person id="noah" name="Noah" >
|
||||
</person>
|
||||
</people>
|
||||
<places>
|
||||
<place id="saopaulo" type="city" name="Sao Paulo">
|
||||
<resource id="saopaulowiki" src="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" description="Sao Paulo city, Brazil"/>
|
||||
</place>
|
||||
|
||||
<place id="CapeTown" type="city" name="Cape Town">
|
||||
<resource id="capetownwiki" src="http://en.wikipedia.org/wiki/Cape_Town" description="Cape Town, South Africa"/>
|
||||
</place>
|
||||
|
||||
<place id="GrandIsle" type="city" name="Grande Isle, Louisiana">
|
||||
<resource id="grandeislewiki" src="http://en.wikipedia.org/wiki/Grand_Isle,_Louisiana" description="Grande Isle, Louisiana"/>
|
||||
</place>
|
||||
|
||||
<place id="MITMediaLab" type="building" name="MIT Media Lab">
|
||||
<resource id="mitmedialabhome" src="http://www.media.mit.edu/" description="MIT Media Lab"/>
|
||||
</place>
|
||||
|
||||
<place id="Austin" type="city" name="Austin, Texas">
|
||||
<resource id="austinwiki" src="http://en.wikipedia.org/wiki/Austin,_Texas" description="Austin, Texas"/>
|
||||
</place>
|
||||
|
||||
<place id="NewYork" type="city" name="New York, New York">
|
||||
<resource id="newyorkwiki" src="http://en.wikipedia.org/wiki/New_York_City" description="New York, New York"/>
|
||||
</place>
|
||||
|
||||
<place id="Seoul" type="city" name="Seoul, Republic of South Korea">
|
||||
<resource id="seoulwiki" src="http://en.wikipedia.org/wiki/Seoul" description="Seoul, Republic of South Korea"/>
|
||||
</place>
|
||||
|
||||
<place id="Montreal" type="city" name="Montreal, Quebec">
|
||||
<resource id="montrealwiki" src="http://en.wikipedia.org/wiki/Montreal" description="Montreal, Quebec"/>
|
||||
</place>
|
||||
|
||||
<place id="harvard" type="building" name="Harvard Law School">
|
||||
<resource id="harvardlawhome" src="http://www.law.harvard.edu/index.html" description="Harvard Law School"/>
|
||||
</place>
|
||||
|
||||
</places>
|
||||
<attributions>
|
||||
<attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
|
||||
<attribution id="villagetelcoattrib" nameofwork="Village Telco" copyrightholder="Richard Mills" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
|
||||
<attribution id="prodigyattrib" nameofwork="Prodigy Commercial" nameofworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" />
|
||||
<attribution id="compuserveattrib" nameofwork="1991 Compuserve Internet" nameworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" />
|
||||
<attribution id="aolattrib" nameofwork="1996 AOL Commercial" nameworkurl="http://www.youtube.com/watch?v=0kf1DBg5vJs" />
|
||||
<attribution id="chronicles1attrib" nameofwork="Internet" nameworkurl="http://www.archive.org/details/CC1232_internet" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" />
|
||||
<attribution id="chronicles2attrib" nameofwork="The Internet" nameworkurl="http://www.archive.org/details/episode_1134" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" />
|
||||
<attribution id="bankattrib" nameofwork="Using the Bank (1947)" nameworkurl="http://www.archive.org/details/Usingthe1947" copyrightholder="The Prelinger Archives" />
|
||||
<attribution id="networksattrib" nameofwork="Computer Networks - The Heralds of Resource Sharing" nameofworkurl="http://video.google.com/videoplay?docid=4989933629762859961#" copyrightholder="MIT"/>
|
||||
</attributions>
|
||||
<articles>
|
||||
<resource id="theinternet" src="http://en.wikipedia.org/wiki/internet" description="The Internet"/>
|
||||
<resource id="villagetelco" src="http://en.wikipedia.org/wiki/Village_telco" description="The Village Telco"/>
|
||||
<resource id="oilspill" src="http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill" description="Deepwater Horizon Oil Spill"/>
|
||||
<resource id="zittrain" src="http://en.wikipedia.org/wiki/Jonathan_Zittrain" description="Jonathan Zittrain"/>
|
||||
<resource id="compuserve" src="http://en.wikipedia.org/wiki/Compuserve" description="Compuserve"/>
|
||||
<resource id="aol" src="http://en.wikipedia.org/wiki/AOL" description="AOL"/>
|
||||
<resource id="prodigy" src="http://en.wikipedia.org/wiki/Prodigy_%28online_service%29" description="Prodigy"/>
|
||||
<resource id="internetprotocol" src="http://en.wikipedia.org/wiki/Internet_Protocol" description="Internet Protocol"/>
|
||||
<resource id="timbernerslee" src="http://en.wikipedia.org/wiki/Tim_Berners-Lee" description="Tim Berners-Lee"/>
|
||||
<resource id="worldwideweb" src="http://en.wikipedia.org/wiki/World_wide_web" description="World Wide Web"/>
|
||||
<resource id="wikipedia" src="http://en.wikipedia.org/wiki/Wikipedia" description="Wikipedia"/>
|
||||
<resource id="openstandards" src="http://en.wikipedia.org/wiki/Open_Standards" description="Open Standards"/>
|
||||
</articles>
|
||||
</manifest>
|
||||
|
||||
<timeline>
|
||||
|
||||
<footnotes>
|
||||
<footnote in="00:00:00" out="00:14:00" target="footnotediv">Look around the page as info is updated!</footnote>
|
||||
</footnotes>
|
||||
<!--<resources>
|
||||
<footnote in="00:00:00" out="00:15:00" target="footnotediv">This video made exclusively for drumbeat.org </footnote>
|
||||
<videotag target="inthisvideo" in="00:00:05:02" out="00:00:10:07">Steve Song</videotag>
|
||||
<attribution in="00:00:05:02" out="00:00:10:07" target="container5" resourceid="villagetelcoattrib"></attribution>
|
||||
<twitter in="00:00:05:02" out="00:00:10:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120"/>
|
||||
<wiki in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberOfWords="200" lang="en" target="wikidiv"/>
|
||||
<flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/>
|
||||
<googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/>
|
||||
|
||||
<twitter in="00:00:10:07" out="00:00:18:04" title="Oil Spill" source="#oilspill" target="twitter" width="238" height="120"/>
|
||||
<googlenews in="00:00:10:07" out="00:00:18:04" target="googlenewsdiv" topic="Oil Spill"/>
|
||||
<attribution in="00:00:10:07" out="00:00:18:04" target="container5">Grassroots Mapping, Tungsten Monkey</attribution>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:18:04" out="00:00:25:02">Keyboard Cat</videotag>
|
||||
<twitter in="00:00:18:04" out="00:00:25:02" title="Keyboard Cat" source="#keyboardcat" target="twitter" width="238" height="120"/>
|
||||
<attribution in="00:00:18:04" out="00:00:25:02" target="container5">KeyBoard Cat, Charlie Schmidt</attribution>
|
||||
<googlenews in="00:00:18:04" out="00:00:25:02" target="googlenewsdiv" topic="Keyboard Cat"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:28:09" out="00:00:29:07">Jeffrey Warren</videotag>
|
||||
<attribution in="00:00:28:09" out="00:00:29:07" target="container5">Grassroots Mapping, Tungsten Monkey</attribution>
|
||||
<videotag target="inthisvideo" in="00:00:29:08" out="00:00:31:00">Village Telco Guy</videotag>
|
||||
|
||||
<wiki in="00:00:32:00" out="00:00:41:00" resourceid="theinternet" numberOfWords="200" target="wikidiv"/>
|
||||
<googlenews in="00:00:32:00" out="00:00:41:00" target="googlenewsdiv" topic="the internet"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:41:00" out="00:01:07:09">Jeffrey Warren</videotag>
|
||||
<flickr in="00:00:41:00" out="00:01:07:09" target="personalflickr" userid="35034346917@N01" numberofimages="8" padding="4px"/>
|
||||
<twitter in="00:00:41:00" out="00:01:07:09" title="Oil Spill" source="#oilspill" target="twitter" width="238" height="120"/>
|
||||
<googlenews in="00:00:41:00" out="00:01:07:09" target="googlenewsdiv" topic="Oil Spill"/>
|
||||
<location resourceid="grandislewiki" in="00:00:41:00" out="00:01:07:09" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
|
||||
<wiki in="00:00:41:00" out="00:01:07:09" resourceid="oilspill" numberOfWords="200" target="wikidiv"/>
|
||||
<footnote in="00:00:41:00" out="00:01:07:09" target="footnotediv">Learn more about Grass Roots mapping at www.grassrootsmapping.org</footnote>
|
||||
<twitter in="00:01:07:10" out="00:01:25:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120"/>
|
||||
<flickr in="00:01:07:10" out="00:01:25:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/>
|
||||
<location id="CapeTown" resourceid="capetownwiki" in="00:01:07:10" out="00:01:32:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
|
||||
<wiki in="00:01:07:10" out="00:01:32:07" resourceid="villagetelco" numberOfWords="200" target="wikidiv"/>
|
||||
<videotag target="inthisvideo" in="00:01:25:08" out="00:01:32:07">Michael Adeyeye</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:01:32:08" out="00:01:38:02">Charlie Schmidt</videotag>
|
||||
<twitter in="00:01:32:08" out="00:01:57:11" title="Charlie Schmidt" source="from:chuckieart" target="personaltwitter" width="238" height="120"/>
|
||||
<location id="MITMediaLab" resourceid="mitmedialabhome" in="00:01:32:08" out="00:01:57:11" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
|
||||
<videotag target="inthisvideo" in="00:01:38:02" out="00:01:41:10">Keyboard Cat</videotag>
|
||||
<videotag target="inthisvideo" in="00:01:41:11" out="00:01:57:11">Charlie Schmidt</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:02:09:00" out="00:03:07:05">Jonathan Zittrain</videotag>
|
||||
<twitter in="00:02:09:00" out="00:03:07:05" title="Jonathan Zittrain" source="from:zittrain" target="personaltwitter" width="238" height="120"/>
|
||||
<location resourceid="harvardlawhome" in="00:02:09:00" out="00:03:07:05" lat="42.4222" long="-88.6137" target="container2" zoom="12"/>
|
||||
<wiki in="00:02:09:00" out="00:02:20:00" resourceid="zittrain" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:20:01" out="00:02:23:00" resourceid="compuserve" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:23:01" out="00:02:26:00" resourceid="aol" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:26:01" out="00:02:33:00" resourceid="prodigy" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<attribution in="00:02:15:09" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution>
|
||||
<attribution in="00:02:17:01" out="00:02:20:00" target="container5" resourceid="aolattrib"></attribution>
|
||||
<attribution in="00:02:20:01" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution>
|
||||
<attribution in="00:02:17:01" out="00:02:26:00" target="container5" resourceid="aolattrib"></attribution>
|
||||
<attribution in="00:02:26:01" out="00:02:33:00" target="container5" resourceid="prodigyattrib"></attribution>
|
||||
<attribution in="00:02:37:00" out="00:02:47:00" target="container5" resourceid="networksattrib"></attribution>
|
||||
<attribution in="00:02:47:01" out="00:02:55:00" target="container5" resourceid="bankattrib"></attribution>
|
||||
<attribution in="00:03:07:10" out="00:03:29:00" target="container5" resourceid="bankattrib"></attribution>
|
||||
|
||||
<wiki in="00:02:41:00" out="00:02:57:00" resourceid="internetprotocol" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:57:01" out="00:03:03:00" resourceid="timbernerslee" numberOfWords="200" target="wikidiv"/>
|
||||
<twitter in="00:02:57:01" out="00:03:03:00" title="Tim Berners-Lee" source="from:timberners_lee" target="twitter" width="238" height="120"/>
|
||||
|
||||
<googlenews in="00:02:57:01" out="00:03:03:00" target="googlenewsdiv" topic="Tim Berners-Lee"/>
|
||||
|
||||
<wiki in="00:03:03:01" out="00:03:28:00" resourceid="worldwideweb" numberOfWords="200" target="wikidiv"/>
|
||||
<googlenews in="00:03:03:01" out="00:03:28:00" target="googlenewsdiv" topic="World Wide Web"/>
|
||||
|
||||
<googlenews in="00:03:28:00" out="00:03:32:00" target="googlenewsdiv" topic="Wikipedia"/>
|
||||
<wiki in="00:03:28:01" out="00:03:32:00" resourceid="wikipedia" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<wiki in="00:03:36:00" out="00:03:43:00" resourceid="openstandards" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:09:00" out="00:03:16:00">NCSA guy</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:16:01" out="00:03:18:05">Computer Chronicles guy #1</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:16:02" out="00:03:21:00">Computer Chronicles guy #2</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:21:01" out="00:03:28:06">Computer Chronicles guy #3</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:43:00" out="00:03:56:00">Jonathan Zittrain</videotag>
|
||||
<twitter in="00:03:43:00" out="00:03:56:00" title="Jonathan Zittrain" source="from:zittrain" target="personaltwitter" width="238" height="120"/>
|
||||
<footnote in="00:03:43:00" out="00:03:57:00" target="footnotediv">Read Zittrain's book 'The Future of the Internet — And How to Stop It'</footnote>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:59:00" out="00:04:03:05">Mona Kasra</videotag>
|
||||
<videotag target="inthisvideo" in="00:04:03:06" out="00:04:07:00">Noah Workman</videotag>
|
||||
<twitter in="00:04:03:06" out="00:04:07:00" title="Noah Workman" source="from:noahworkman" target="personaltwitter" width="238" height="120"/>
|
||||
<videotag target="inthisvideo" in="00:04:03:06" out="00:04:13:01">Wilken Sanches</videotag>
|
||||
<attribution in="00:04:10:00" out="00:04:13:00" target="container5" resourceid="attrib"></attribution>
|
||||
<videotag target="inthisvideo" in="00:04:13:02" out="00:04:19:05">Keechang Kim</videotag>
|
||||
<twitter in="00:04:19:06" out="00:04:24:01" title="Celine Celines" source="from:celinecelines" target="personaltwitter" width="238" height="120"/>
|
||||
<videotag target="inthisvideo" in="00:04:19:06" out="00:04:24:01">Celine Celines</videotag>
|
||||
<flickr in="00:04:19:06" out="00:04:24:01" target="personalflickr" userid="13072070@N00" numberofimages="8" padding="4px"/>
|
||||
<lastfm in="00:40:00" out="01:24:00" artist="yacht" target="lastfmdiv"/>
|
||||
|
||||
</resources>
|
||||
|
||||
<map>
|
||||
<googleMap resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
|
||||
<googleMap resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
|
||||
<googleMap resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
|
||||
|
||||
<googleMap resourceid="austinwiki" in="00:03:59:00" out="00:04:03:05" lat="45.5089" long="-73.5542" target="container2" zoom="8"/>
|
||||
<googleMap resourceid="newyorkwiki" in="00:04:03:06" out="00:04:07:01" lat="40.7143" long="-74.0060" target="container2" zoom="8"/>
|
||||
<googleMap resourceid="saopaulowiki" in="00:04:07:02" out="00:04:13:01" lat="-23.5489" long="-46.6388 " target="container2" zoom="8"/>
|
||||
<googleMap resourceid="seoulwiki" in="00:04:13:02" out="00:04:19:05" lat="37.5665" long="126.9780" target="container2" zoom="8"/>
|
||||
<googleMap resourceid="montrealwiki" in="00:04:19:06" out="00:04:24:01" lat="45.5089" long="-73.5542 " target="container2" zoom="8"/>
|
||||
</map>
|
||||
|
||||
<subtitles languagesrc="language" accessibilitysrc="accessibility">
|
||||
<subtitles language="en" align="center">
|
||||
<subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle>
|
||||
<subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the Internet</subtitle>
|
||||
<subtitle in="00:00:05:00" out="00:00:07:00">Have you ever wondered if there is a common thread</subtitle>
|
||||
<subtitle in="00:00:07:01" out="00:00:09:00">that exists between open source</subtitle>
|
||||
<subtitle in="00:00:09:01" out="00:00:11:00">phone hackers in South Africa, </subtitle>
|
||||
<subtitle in="00:00:12.5:00" out="00:00:16:00">adventurers using kites to map an oil spill, </subtitle>
|
||||
<subtitle in="00:00:19:00" out="00:00:22:03">and a video of a cat seen by tens of millions of people?</subtitle>
|
||||
<subtitle in="00:00:27:00" out="00:00:28:06">Well it's the Internet</subtitle>
|
||||
<subtitle in="00:00:28:06" out="00:00:31:06">the cat, the kite, and the phone hackers</subtitle>
|
||||
<subtitle in="00:00:31:07" out="00:00:33:06">would all be impossible without the Internet</subtitle>
|
||||
<subtitle in="00:00:33:07" out="00:00:35:09">an open network that lets anyone</subtitle>
|
||||
<subtitle in="00:00:35:10" out="00:00:37:11">participate without asking permission.</subtitle>
|
||||
<subtitle in="00:00:39:00" out="00:00:41:11">The Internet is what lets M.I.T student Jeffrey Warren</subtitle>
|
||||
<subtitle in="00:00:42:00" out="00:00:45:06">use kites to map an oil spill. </subtitle>
|
||||
<subtitle in="00:00:47:06" out="00:00:48:07">well wait a second why do we have to go all the way</subtitle>
|
||||
<subtitle in="00:00:48:08" out="00:00:50:00">into space to take pictures of things</subtitle>
|
||||
<subtitle in="00:00:50:02" out="00:00:52:00">that are right, literally right next to us, you know. </subtitle>
|
||||
<subtitle in="00:00:53:00" out="00:00:55:00">We can use simple tools like balloons or kites.</subtitle>
|
||||
<subtitle in="00:00:55:06" out="00:00:57:00">Have the camera taking pictures every five seconds </subtitle>
|
||||
<subtitle in="00:00:58:00" out="00:01:00:00">the idea is to get a lot of people involved </subtitle>
|
||||
<subtitle in="00:01:00:06" out="00:01:03:00">in producing maps and then share all of the information</subtitle>
|
||||
<subtitle in="00:01:03:03" out="00:01:05:00">like Wikipedia style you know?</subtitle>
|
||||
<subtitle in="00:01:06:00" out="00:01:08:09">The Internet is what allows Steve Song and his friends</subtitle>
|
||||
<subtitle in="00:01:08:10" out="00:01:10:11">to create a D.I.Y. phone network</subtitle>
|
||||
<subtitle in="00:01:11:00" out="00:01:12:00">called the Village Telco.</subtitle>
|
||||
<subtitle in="00:01:12:00" out="00:01:16:00">Everyone that has a device, that we call a mesh potato,</subtitle>
|
||||
<subtitle in="00:01:16:00" out="00:01:18:00">actually has a phone number</subtitle>
|
||||
<subtitle in="00:01:18:06" out="00:01:20:06">and can call anyone else on the mesh at no charge.</subtitle>
|
||||
<subtitle in="00:01:21:06" out="00:01:24:06">So taking open-source principles to a telephone company.</subtitle>
|
||||
<subtitle in="00:01:25:00" out="00:01:28:05">Everything is open, anyone can come and anyone can join</subtitle>
|
||||
<subtitle in="00:01:29:05" out="00:01:31:00">anyone can make contributions </subtitle>
|
||||
<subtitle in="00:01:31:00" out="00:01:32:00">and that's why I'm here.</subtitle>
|
||||
<subtitle in="00:01:32:05" out="00:01:34:05">The Internet is what allowed Charlie Schmidt</subtitle>
|
||||
<subtitle in="00:01:35:00" out="00:01:36:05">to film his cat on his keyboard</subtitle>
|
||||
<subtitle in="00:01:37:00" out="00:01:38:00">and the rest is history. </subtitle>
|
||||
<subtitle in="00:01:41:00" out="00:01:45:00">I remember having two profound thoughts back to back </subtitle>
|
||||
<subtitle in="00:01:45:05" out="00:01:47:08">and the first one was any pervert in his basement </subtitle>
|
||||
<subtitle in="00:01:48:02" out="00:01:51:00">can compete with NBC. </subtitle>
|
||||
<subtitle in="00:01:52:04" out="00:01:58:00">And then I thought, ohh I am that pervert in his basement.</subtitle>
|
||||
<subtitle in="00:01:58:04" out="00:01:59:05">It wasn't always this way</subtitle>
|
||||
<subtitle in="00:02:00:05" out="00:02:02:05">before the web our computers could only network</subtitle>
|
||||
<subtitle in="00:02:02:08" out="00:02:05:05">through a series of walled gardens, and we had to ask</subtitle>
|
||||
<subtitle in="00:02:06:00" out="00:02:08:00">permission to publish our content or create new services.</subtitle>
|
||||
<subtitle in="00:02:08:05" out="00:02:10:05">There were some big companies in there that thought</subtitle>
|
||||
<subtitle in="00:02:11:00" out="00:02:13:01">they would run the mainframes that we </subtitle>
|
||||
<subtitle in="00:02:13:02" out="00:02:16:05">might be mediating data through.</subtitle>
|
||||
<subtitle in="00:02:15:00" out="00:02:18:03">CompuServe, America Online, The Source,</subtitle>
|
||||
<subtitle in="00:02:18:04" out="00:02:19:12">MCI Mail,Prodigy.</subtitle>
|
||||
<subtitle in="00:02:20:00" out="00:02:21:00">if you go to CompuServe,</subtitle>
|
||||
<subtitle in="00:02:21:00" out="00:02:23:00">you'll get whatever CompuServe has put under its roof.</subtitle>
|
||||
<subtitle in="00:02:23:00" out="00:02:26:00">If you subscribe to AOL you'll get whatever AOL has.</subtitle>
|
||||
<subtitle in="00:02:26:00" out="00:02:28:06">Prodigy even has a twenty-one volume electronic</subtitle>
|
||||
<subtitle in="00:02:28:06" out="00:02:30:00">encyclopedia that's updated quarterly</subtitle>
|
||||
<subtitle in="00:02:30:00" out="00:02:32:00">including thirty messages.</subtitle>
|
||||
<subtitle in="00:02:32:00" out="00:02:33:06">Alright, Prodigy :D</subtitle>
|
||||
<subtitle in="00:02:33:06" out="00:02:37:00">No one really factored in that off in a quiet corner,</subtitle>
|
||||
<subtitle in="00:02:37:00" out="00:02:40.5:00">there were tinkerers doing foundational technologies</subtitle>
|
||||
<subtitle in="00:02:40:06" out="00:02:41:06">for networking,</subtitle>
|
||||
<subtitle in="00:02:42:00" out="00:02:46:06">and they had a certain freedom that the firms didn't have.</subtitle>
|
||||
<subtitle in="00:02:46:06" out="00:02:50:00">You didn't have to do a business development deal</subtitle>
|
||||
<subtitle in="00:02:50:00" out="00:02:53:06">with the owner of the Internet...</subtitle>
|
||||
<subtitle in="00:02:53:06" out="00:02:55:00">before you could put up a website.</subtitle>
|
||||
<subtitle in="00:02:55:00" out="00:02:58:00">So that's what allowed Tim Berners-Lee</subtitle>
|
||||
<subtitle in="00:02:58:00" out="00:03:00:00">to develop a protocol for an application,</subtitle>
|
||||
<subtitle in="00:03:00:00" out="00:03:03:00">that would just run on top of the Internet,</subtitle>
|
||||
<subtitle in="00:03:03:00" out="00:03:04:00">called the web.</subtitle>
|
||||
<subtitle in="00:03:04:06" out="00:03:07:00">And then he was like, OK world go to it.</subtitle>
|
||||
<subtitle in="00:03:09:00" out="00:03:11:00">Ordinary people are becoming electronic publishers.</subtitle>
|
||||
<subtitle in="00:03:11:01" out="00:03:12:06">They are putting up the things</subtitle>
|
||||
<subtitle in="00:03:12:07" out="00:03:14:00">that mean something to them</subtitle>
|
||||
<subtitle in="00:03:14:01" out="00:03:16:00">and they want to share it with the rest of the world.</subtitle>
|
||||
<subtitle in="00:03:16:01" out="00:03:18:00">Why is it better than CompuServe or Prodigy?</subtitle>
|
||||
<subtitle in="00:03:18:01" out="00:03:19:09">That anyone can put any servers on </subtitle>
|
||||
<subtitle in="00:03:19:10" out="00:03:21:06">and have it do anything they want.</subtitle>
|
||||
<subtitle in="00:03:21:07" out="00:03:23:00">In fact most browsers have the ability</subtitle>
|
||||
<subtitle in="00:03:23:01" out="00:03:24:06">for you to view that source code.</subtitle>
|
||||
<subtitle in="00:03:24:07" out="00:03:26:02">I can go in then and start changing it</subtitle>
|
||||
<subtitle in="00:03:26:03" out="00:03:27:10">myself for free. Ok great.</subtitle>
|
||||
<subtitle in="00:03:27:11" out="00:03:29:09">Listen there’s even an encyclopedia</subtitle>
|
||||
<subtitle in="00:03:29:10" out="00:03:31:06">Awesome. All right.</subtitle>
|
||||
<subtitle in="00:03:31:09" out="00:03:34:00">We owe everything about the Internet</subtitle>
|
||||
<subtitle in="00:03:34:01" out="00:03:36:00">to the fact that its open.</subtitle>
|
||||
<subtitle in="00:03:36:01" out="00:03:38:00">And the hacker spirit that the people</subtitle>
|
||||
<subtitle in="00:03:38:01" out="00:03:40:00">who created it believed it.</subtitle>
|
||||
<subtitle in="00:03:40:01" out="00:03:42:04">But all that could change.</subtitle>
|
||||
<subtitle in="00:03:42:06" out="00:03:44:10">The way things are… are not the way</subtitle>
|
||||
<subtitle in="00:03:44:11" out="00:03:47:00">things will inevitably be.</subtitle>
|
||||
<subtitle in="00:03:48:00" out="00:03:50:01">The Internet itself is evolving</subtitle>
|
||||
<subtitle in="00:03:50:02" out="00:03:51:01">and can be pushed</subtitle>
|
||||
<subtitle in="00:03:51:02" out="00:03:53:06">in one direction or another.</subtitle>
|
||||
<subtitle in="00:03:53:07" out="00:03:55:09">And some futures are much better than others.</subtitle>
|
||||
<subtitle in="00:03:55:10" out="00:03:57:06">It’s great to have the example of the World Wide Web.</subtitle>
|
||||
<subtitle in="00:03:57:07" out="00:03:58:11">It’s great to have the example of Wikipedia.</subtitle>
|
||||
<subtitle in="00:03:59:00" out="00:04:00:01">There’s more where that came from.</subtitle>
|
||||
|
||||
<subtitle in="00:04:17:00" out="00:04:19:00">And I help make a better Internet</subtitle>
|
||||
<subtitle in="00:04:19:01" out="00:04:21:06">By making things easier to use</subtitle>
|
||||
<subtitle in="00:04:22:09" out="00:04:24:00">At Web Made Movies</subtitle>
|
||||
<subtitle in="00:04:24:01" out="00:04:26:03">we want to build a better Internet</subtitle>
|
||||
<subtitle in="00:04:26:04" out="00:04:28:04">by making video more open.</subtitle>
|
||||
<subtitle in="00:04:28:06" out="00:04:31:00">The page your watching is a good example</subtitle>
|
||||
<subtitle in="00:04:31:06" out="00:04:34:05">We’re going to keep exploring how video</subtitle>
|
||||
<subtitle in="00:04:34:06" out="00:04:35:06">can be more like the web.</subtitle>
|
||||
<subtitle in="00:04:35:07" out="00:04:37:06">And tell the story of some web heroes</subtitle>
|
||||
<subtitle in="00:04:37:07" out="00:04:38:06">along the way.</subtitle>
|
||||
<subtitle in="00:04:39:02" out="00:04:40:08">Explore our credits section to see</subtitle>
|
||||
<subtitle in="00:04:41:00" out="00:04:45:00">how you can get involved.</subtitle>
|
||||
</subtitles>
|
||||
<subtitles language="fa" align="center">
|
||||
<subtitle in="00:04:00:08" out="00:04:01:09">My name is Mona Kasra</subtitle>
|
||||
<subtitle in="00:04:01:10" out="00:04:03:11">and I'm building a better Internet</subtitle>
|
||||
</subtitles>
|
||||
<subtitles language="pt" align="center">
|
||||
<subtitle in="00:04:05:03" out="00:04:07:00">I make the Internet better</subtitle>
|
||||
<subtitle in="00:04:07:01" out="00:04:08:06">producing and sharing music</subtitle>
|
||||
<subtitle in="00:04:08:07" out="00:04:10:01">using Creative Commons</subtitle>
|
||||
</subtitles>
|
||||
</subtitles>-->
|
||||
<webpages>
|
||||
<webpage in="00:04:00:08" out="00:04:19:00" target="iframes" resourceid="monahomepage" width="100"/>
|
||||
<webpage in="00:04:19:06" out="00:04:24:01" target="iframes" resourceid="celinehomepage" width="100"/>
|
||||
</webpages>
|
||||
<!--<script in="4:45:00" start="displayCredits" stop="removeCredits"/>-->
|
||||
</timeline>
|
||||
</popcorn>
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
<popcorn>
|
||||
<manifest>
|
||||
<people>
|
||||
<person id="celine" name="Celine" salutation="Miss." >
|
||||
<resource id="celinehomepage" src="http://www.celinecelines.com/" description="Celine's Homepage" />
|
||||
</person>
|
||||
<person id="brian" name="brian" >
|
||||
</person>
|
||||
<person id="SteveSong" name="Steve Song" >
|
||||
</person>
|
||||
<person id="mona" name="Mona" >
|
||||
<resource id="monahomepage" src="http://www.monakasra.com/" description="Mona's Homepage"/>
|
||||
</person>
|
||||
<person id="dave" name="Dave" >
|
||||
</person>
|
||||
<person id="noah" name="Noah" >
|
||||
</person>
|
||||
</people>
|
||||
<places>
|
||||
<place id="saopaulo" type="city" name="Sao Paulo">
|
||||
<resource id="saopaulowiki" src="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" description="Sao Paulo city, Brazil"/>
|
||||
</place>
|
||||
|
||||
<place id="CapeTown" type="city" name="Cape Town">
|
||||
<resource id="capetownwiki" src="http://en.wikipedia.org/wiki/Cape_Town" description="Cape Town, South Africa"/>
|
||||
</place>
|
||||
|
||||
<place id="GrandIsle" type="city" name="Grande Isle, Louisiana">
|
||||
<resource id="grandeislewiki" src="http://en.wikipedia.org/wiki/Grand_Isle,_Louisiana" description="Grande Isle, Louisiana"/>
|
||||
</place>
|
||||
|
||||
<place id="MITMediaLab" type="building" name="MIT Media Lab">
|
||||
<resource id="mitmedialabhome" src="http://www.media.mit.edu/" description="MIT Media Lab"/>
|
||||
</place>
|
||||
|
||||
<place id="Austin" type="city" name="Austin, Texas">
|
||||
<resource id="austinwiki" src="http://en.wikipedia.org/wiki/Austin,_Texas" description="Austin, Texas"/>
|
||||
</place>
|
||||
|
||||
<place id="NewYork" type="city" name="New York, New York">
|
||||
<resource id="newyorkwiki" src="http://en.wikipedia.org/wiki/New_York_City" description="New York, New York"/>
|
||||
</place>
|
||||
|
||||
<place id="Seoul" type="city" name="Seoul, Republic of South Korea">
|
||||
<resource id="seoulwiki" src="http://en.wikipedia.org/wiki/Seoul" description="Seoul, Republic of South Korea"/>
|
||||
</place>
|
||||
|
||||
<place id="Montreal" type="city" name="Montreal, Quebec">
|
||||
<resource id="montrealwiki" src="http://en.wikipedia.org/wiki/Montreal" description="Montreal, Quebec"/>
|
||||
</place>
|
||||
|
||||
<place id="harvard" type="building" name="Harvard Law School">
|
||||
<resource id="harvardlawhome" src="http://www.law.harvard.edu/index.html" description="Harvard Law School"/>
|
||||
</place>
|
||||
|
||||
</places>
|
||||
<attributions>
|
||||
<attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
|
||||
<attribution id="villagetelcoattrib" nameofwork="Village Telco" copyrightholder="Richard Mills" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
|
||||
<attribution id="prodigyattrib" nameofwork="Prodigy Commercial" nameofworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" />
|
||||
<attribution id="compuserveattrib" nameofwork="1991 Compuserve Internet" nameworkurl="http://www.youtube.com/watch?v=TSlb7-FJr3k" />
|
||||
<attribution id="aolattrib" nameofwork="1996 AOL Commercial" nameworkurl="http://www.youtube.com/watch?v=0kf1DBg5vJs" />
|
||||
<attribution id="chronicles1attrib" nameofwork="Internet" nameworkurl="http://www.archive.org/details/CC1232_internet" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" />
|
||||
<attribution id="chronicles2attrib" nameofwork="The Internet" nameworkurl="http://www.archive.org/details/episode_1134" copyrightholder="The Computer Chronicles" license="CC-BY-NC-ND" licenseurl="http://creativecommons.org/licenses/by-nc-nd/2.0/" />
|
||||
<attribution id="bankattrib" nameofwork="Using the Bank (1947)" nameworkurl="http://www.archive.org/details/Usingthe1947" copyrightholder="The Prelinger Archives" />
|
||||
<attribution id="networksattrib" nameofwork="Computer Networks - The Heralds of Resource Sharing" nameofworkurl="http://video.google.com/videoplay?docid=4989933629762859961#" copyrightholder="MIT"/>
|
||||
</attributions>
|
||||
<articles>
|
||||
<resource id="theinternet" src="http://en.wikipedia.org/wiki/internet" description="The Internet"/>
|
||||
<resource id="villagetelco" src="http://en.wikipedia.org/wiki/Village_telco" description="The Village Telco"/>
|
||||
<resource id="oilspill" src="http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill" description="Deepwater Horizon Oil Spill"/>
|
||||
<resource id="zittrain" src="http://en.wikipedia.org/wiki/Jonathan_Zittrain" description="Jonathan Zittrain"/>
|
||||
<resource id="compuserve" src="http://en.wikipedia.org/wiki/Compuserve" description="Compuserve"/>
|
||||
<resource id="aol" src="http://en.wikipedia.org/wiki/AOL" description="AOL"/>
|
||||
<resource id="prodigy" src="http://en.wikipedia.org/wiki/Prodigy_%28online_service%29" description="Prodigy"/>
|
||||
<resource id="internetprotocol" src="http://en.wikipedia.org/wiki/Internet_Protocol" description="Internet Protocol"/>
|
||||
<resource id="timbernerslee" src="http://en.wikipedia.org/wiki/Tim_Berners-Lee" description="Tim Berners-Lee"/>
|
||||
<resource id="worldwideweb" src="http://en.wikipedia.org/wiki/World_wide_web" description="World Wide Web"/>
|
||||
<resource id="wikipedia" src="http://en.wikipedia.org/wiki/Wikipedia" description="Wikipedia"/>
|
||||
<resource id="openstandards" src="http://en.wikipedia.org/wiki/Open_Standards" description="Open Standards"/>
|
||||
</articles>
|
||||
</manifest>
|
||||
|
||||
<timeline>
|
||||
|
||||
<footnotes>
|
||||
<footnote in="00:00:00" out="00:14:00" target="footnotediv">Look around the page as info is updated!</footnote>
|
||||
</footnotes>
|
||||
<resources>
|
||||
<footnote in="00:00:00" out="00:15:00" target="footnotediv">This video made exclusively for drumbeat.org </footnote>
|
||||
<videotag target="inthisvideo" in="00:00:05:02" out="00:00:10:07">Steve Song</videotag>
|
||||
<attribution in="00:00:05:02" out="00:00:10:07" target="container5" resourceid="villagetelcoattrib"></attribution>
|
||||
<twitter in="00:00:05:02" out="00:00:10:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120"/>
|
||||
<wiki in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberOfWords="200" lang="en" target="wikidiv"/>
|
||||
<flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/>
|
||||
<googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/>
|
||||
|
||||
<twitter in="00:00:10:07" out="00:00:18:04" title="Oil Spill" source="#oilspill" target="twitter" width="238" height="120"/>
|
||||
<googlenews in="00:00:10:07" out="00:00:18:04" target="googlenewsdiv" topic="Oil Spill"/>
|
||||
<attribution in="00:00:10:07" out="00:00:18:04" target="container5">Grassroots Mapping, Tungsten Monkey</attribution>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:18:04" out="00:00:25:02">Keyboard Cat</videotag>
|
||||
<twitter in="00:00:18:04" out="00:00:25:02" title="Keyboard Cat" source="#keyboardcat" target="twitter" width="238" height="120"/>
|
||||
<attribution in="00:00:18:04" out="00:00:25:02" target="container5">KeyBoard Cat, Charlie Schmidt</attribution>
|
||||
<googlenews in="00:00:18:04" out="00:00:25:02" target="googlenewsdiv" topic="Keyboard Cat"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:28:09" out="00:00:29:07">Jeffrey Warren</videotag>
|
||||
<attribution in="00:00:28:09" out="00:00:29:07" target="container5">Grassroots Mapping, Tungsten Monkey</attribution>
|
||||
<videotag target="inthisvideo" in="00:00:29:08" out="00:00:31:00">Village Telco Guy</videotag>
|
||||
|
||||
<wiki in="00:00:32:00" out="00:00:41:00" resourceid="theinternet" numberOfWords="200" target="wikidiv"/>
|
||||
<googlenews in="00:00:32:00" out="00:00:41:00" target="googlenewsdiv" topic="the internet"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:00:41:00" out="00:01:07:09">Jeffrey Warren</videotag>
|
||||
<flickr in="00:00:41:00" out="00:01:07:09" target="personalflickr" userid="35034346917@N01" numberofimages="8" padding="4px"/>
|
||||
<twitter in="00:00:41:00" out="00:01:07:09" title="Oil Spill" source="#oilspill" target="twitter" width="238" height="120"/>
|
||||
<googlenews in="00:00:41:00" out="00:01:07:09" target="googlenewsdiv" topic="Oil Spill"/>
|
||||
<location resourceid="grandislewiki" in="00:00:41:00" out="00:01:07:09" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
|
||||
<wiki in="00:00:41:00" out="00:01:07:09" resourceid="oilspill" numberOfWords="200" target="wikidiv"/>
|
||||
<footnote in="00:00:41:00" out="00:01:07:09" target="footnotediv">Learn more about Grass Roots mapping at www.grassrootsmapping.org</footnote>
|
||||
<twitter in="00:01:07:10" out="00:01:25:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120"/>
|
||||
<flickr in="00:01:07:10" out="00:01:25:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px"/>
|
||||
<location id="CapeTown" resourceid="capetownwiki" in="00:01:07:10" out="00:01:32:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
|
||||
<wiki in="00:01:07:10" out="00:01:32:07" resourceid="villagetelco" numberOfWords="200" target="wikidiv"/>
|
||||
<videotag target="inthisvideo" in="00:01:25:08" out="00:01:32:07">Michael Adeyeye</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:01:32:08" out="00:01:38:02">Charlie Schmidt</videotag>
|
||||
<twitter in="00:01:32:08" out="00:01:57:11" title="Charlie Schmidt" source="from:chuckieart" target="personaltwitter" width="238" height="120"/>
|
||||
<location id="MITMediaLab" resourceid="mitmedialabhome" in="00:01:32:08" out="00:01:57:11" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
|
||||
<videotag target="inthisvideo" in="00:01:38:02" out="00:01:41:10">Keyboard Cat</videotag>
|
||||
<videotag target="inthisvideo" in="00:01:41:11" out="00:01:57:11">Charlie Schmidt</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:02:09:00" out="00:03:07:05">Jonathan Zittrain</videotag>
|
||||
<twitter in="00:02:09:00" out="00:03:07:05" title="Jonathan Zittrain" source="from:zittrain" target="personaltwitter" width="238" height="120"/>
|
||||
<location resourceid="harvardlawhome" in="00:02:09:00" out="00:03:07:05" lat="42.4222" long="-88.6137" target="container2" zoom="12"/>
|
||||
<wiki in="00:02:09:00" out="00:02:20:00" resourceid="zittrain" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:20:01" out="00:02:23:00" resourceid="compuserve" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:23:01" out="00:02:26:00" resourceid="aol" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:26:01" out="00:02:33:00" resourceid="prodigy" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<attribution in="00:02:15:09" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution>
|
||||
<attribution in="00:02:17:01" out="00:02:20:00" target="container5" resourceid="aolattrib"></attribution>
|
||||
<attribution in="00:02:20:01" out="00:02:17:00" target="container5" resourceid="compuserveattrib"></attribution>
|
||||
<attribution in="00:02:17:01" out="00:02:26:00" target="container5" resourceid="aolattrib"></attribution>
|
||||
<attribution in="00:02:26:01" out="00:02:33:00" target="container5" resourceid="prodigyattrib"></attribution>
|
||||
<attribution in="00:02:37:00" out="00:02:47:00" target="container5" resourceid="networksattrib"></attribution>
|
||||
<attribution in="00:02:47:01" out="00:02:55:00" target="container5" resourceid="bankattrib"></attribution>
|
||||
<attribution in="00:03:07:10" out="00:03:29:00" target="container5" resourceid="bankattrib"></attribution>
|
||||
|
||||
<wiki in="00:02:41:00" out="00:02:57:00" resourceid="internetprotocol" numberOfWords="200" target="wikidiv"/>
|
||||
<wiki in="00:02:57:01" out="00:03:03:00" resourceid="timbernerslee" numberOfWords="200" target="wikidiv"/>
|
||||
<twitter in="00:02:57:01" out="00:03:03:00" title="Tim Berners-Lee" source="from:timberners_lee" target="twitter" width="238" height="120"/>
|
||||
|
||||
<googlenews in="00:02:57:01" out="00:03:03:00" target="googlenewsdiv" topic="Tim Berners-Lee"/>
|
||||
|
||||
<wiki in="00:03:03:01" out="00:03:28:00" resourceid="worldwideweb" numberOfWords="200" target="wikidiv"/>
|
||||
<googlenews in="00:03:03:01" out="00:03:28:00" target="googlenewsdiv" topic="World Wide Web"/>
|
||||
|
||||
<googlenews in="00:03:28:00" out="00:03:32:00" target="googlenewsdiv" topic="Wikipedia"/>
|
||||
<wiki in="00:03:28:01" out="00:03:32:00" resourceid="wikipedia" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<wiki in="00:03:36:00" out="00:03:43:00" resourceid="openstandards" numberOfWords="200" target="wikidiv"/>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:09:00" out="00:03:16:00">NCSA guy</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:16:01" out="00:03:18:05">Computer Chronicles guy #1</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:16:02" out="00:03:21:00">Computer Chronicles guy #2</videotag>
|
||||
<videotag target="inthisvideo" in="00:03:21:01" out="00:03:28:06">Computer Chronicles guy #3</videotag>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:43:00" out="00:03:56:00">Jonathan Zittrain</videotag>
|
||||
<twitter in="00:03:43:00" out="00:03:56:00" title="Jonathan Zittrain" source="from:zittrain" target="personaltwitter" width="238" height="120"/>
|
||||
<footnote in="00:03:43:00" out="00:03:57:00" target="footnotediv">Read Zittrain's book 'The Future of the Internet — And How to Stop It'</footnote>
|
||||
|
||||
<videotag target="inthisvideo" in="00:03:59:00" out="00:04:03:05">Mona Kasra</videotag>
|
||||
<videotag target="inthisvideo" in="00:04:03:06" out="00:04:07:00">Noah Workman</videotag>
|
||||
<twitter in="00:04:03:06" out="00:04:07:00" title="Noah Workman" source="from:noahworkman" target="personaltwitter" width="238" height="120"/>
|
||||
<videotag target="inthisvideo" in="00:04:03:06" out="00:04:13:01">Wilken Sanches</videotag>
|
||||
<attribution in="00:04:10:00" out="00:04:13:00" target="container5" resourceid="attrib"></attribution>
|
||||
<videotag target="inthisvideo" in="00:04:13:02" out="00:04:19:05">Keechang Kim</videotag>
|
||||
<twitter in="00:04:19:06" out="00:04:24:01" title="Celine Celines" source="from:celinecelines" target="personaltwitter" width="238" height="120"/>
|
||||
<videotag target="inthisvideo" in="00:04:19:06" out="00:04:24:01">Celine Celines</videotag>
|
||||
<flickr in="00:04:19:06" out="00:04:24:01" target="personalflickr" userid="13072070@N00" numberofimages="8" padding="4px"/>
|
||||
<lastfm in="00:40:00" out="01:24:00" artist="yacht" target="lastfmdiv"/>
|
||||
|
||||
</resources>
|
||||
|
||||
<map>
|
||||
<location resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
|
||||
<location resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
|
||||
<location resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
|
||||
|
||||
<location resourceid="austinwiki" in="00:03:59:00" out="00:04:03:05" lat="45.5089" long="-73.5542" target="container2" zoom="8"/>
|
||||
<location resourceid="newyorkwiki" in="00:04:03:06" out="00:04:07:01" lat="40.7143" long="-74.0060" target="container2" zoom="8"/>
|
||||
<location resourceid="saopaulowiki" in="00:04:07:02" out="00:04:13:01" lat="-23.5489" long="-46.6388 " target="container2" zoom="8"/>
|
||||
<location resourceid="seoulwiki" in="00:04:13:02" out="00:04:19:05" lat="37.5665" long="126.9780" target="container2" zoom="8"/>
|
||||
<location resourceid="montrealwiki" in="00:04:19:06" out="00:04:24:01" lat="45.5089" long="-73.5542 " target="container2" zoom="8"/>
|
||||
</map>
|
||||
|
||||
<subtitles languagesrc="language" accessibilitysrc="accessibility">
|
||||
<subtitles language="en" align="center">
|
||||
<subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle>
|
||||
<subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the Internet</subtitle>
|
||||
<subtitle in="00:00:05:00" out="00:00:07:00">Have you ever wondered if there is a common thread</subtitle>
|
||||
<subtitle in="00:00:07:01" out="00:00:09:00">that exists between open source</subtitle>
|
||||
<subtitle in="00:00:09:01" out="00:00:11:00">phone hackers in South Africa, </subtitle>
|
||||
<subtitle in="00:00:12.5:00" out="00:00:16:00">adventurers using kites to map an oil spill, </subtitle>
|
||||
<subtitle in="00:00:19:00" out="00:00:22:03">and a video of a cat seen by tens of millions of people?</subtitle>
|
||||
<subtitle in="00:00:27:00" out="00:00:28:06">Well it's the Internet</subtitle>
|
||||
<subtitle in="00:00:28:06" out="00:00:31:06">the cat, the kite, and the phone hackers</subtitle>
|
||||
<subtitle in="00:00:31:07" out="00:00:33:06">would all be impossible without the Internet</subtitle>
|
||||
<subtitle in="00:00:33:07" out="00:00:35:09">an open network that lets anyone</subtitle>
|
||||
<subtitle in="00:00:35:10" out="00:00:37:11">participate without asking permission.</subtitle>
|
||||
<subtitle in="00:00:39:00" out="00:00:41:11">The Internet is what lets M.I.T student Jeffrey Warren</subtitle>
|
||||
<subtitle in="00:00:42:00" out="00:00:45:06">use kites to map an oil spill. </subtitle>
|
||||
<subtitle in="00:00:47:06" out="00:00:48:07">well wait a second why do we have to go all the way</subtitle>
|
||||
<subtitle in="00:00:48:08" out="00:00:50:00">into space to take pictures of things</subtitle>
|
||||
<subtitle in="00:00:50:02" out="00:00:52:00">that are right, literally right next to us, you know. </subtitle>
|
||||
<subtitle in="00:00:53:00" out="00:00:55:00">We can use simple tools like balloons or kites.</subtitle>
|
||||
<subtitle in="00:00:55:06" out="00:00:57:00">Have the camera taking pictures every five seconds </subtitle>
|
||||
<subtitle in="00:00:58:00" out="00:01:00:00">the idea is to get a lot of people involved </subtitle>
|
||||
<subtitle in="00:01:00:06" out="00:01:03:00">in producing maps and then share all of the information</subtitle>
|
||||
<subtitle in="00:01:03:03" out="00:01:05:00">like Wikipedia style you know?</subtitle>
|
||||
<subtitle in="00:01:06:00" out="00:01:08:09">The Internet is what allows Steve Song and his friends</subtitle>
|
||||
<subtitle in="00:01:08:10" out="00:01:10:11">to create a D.I.Y. phone network</subtitle>
|
||||
<subtitle in="00:01:11:00" out="00:01:12:00">called the Village Telco.</subtitle>
|
||||
<subtitle in="00:01:12:00" out="00:01:16:00">Everyone that has a device, that we call a mesh potato,</subtitle>
|
||||
<subtitle in="00:01:16:00" out="00:01:18:00">actually has a phone number</subtitle>
|
||||
<subtitle in="00:01:18:06" out="00:01:20:06">and can call anyone else on the mesh at no charge.</subtitle>
|
||||
<subtitle in="00:01:21:06" out="00:01:24:06">So taking open-source principles to a telephone company.</subtitle>
|
||||
<subtitle in="00:01:25:00" out="00:01:28:05">Everything is open, anyone can come and anyone can join</subtitle>
|
||||
<subtitle in="00:01:29:05" out="00:01:31:00">anyone can make contributions </subtitle>
|
||||
<subtitle in="00:01:31:00" out="00:01:32:00">and that's why I'm here.</subtitle>
|
||||
<subtitle in="00:01:32:05" out="00:01:34:05">The Internet is what allowed Charlie Schmidt</subtitle>
|
||||
<subtitle in="00:01:35:00" out="00:01:36:05">to film his cat on his keyboard</subtitle>
|
||||
<subtitle in="00:01:37:00" out="00:01:38:00">and the rest is history. </subtitle>
|
||||
<subtitle in="00:01:41:00" out="00:01:45:00">I remember having two profound thoughts back to back </subtitle>
|
||||
<subtitle in="00:01:45:05" out="00:01:47:08">and the first one was any pervert in his basement </subtitle>
|
||||
<subtitle in="00:01:48:02" out="00:01:51:00">can compete with NBC. </subtitle>
|
||||
<subtitle in="00:01:52:04" out="00:01:58:00">And then I thought, ohh I am that pervert in his basement.</subtitle>
|
||||
<subtitle in="00:01:58:04" out="00:01:59:05">It wasn't always this way</subtitle>
|
||||
<subtitle in="00:02:00:05" out="00:02:02:05">before the web our computers could only network</subtitle>
|
||||
<subtitle in="00:02:02:08" out="00:02:05:05">through a series of walled gardens, and we had to ask</subtitle>
|
||||
<subtitle in="00:02:06:00" out="00:02:08:00">permission to publish our content or create new services.</subtitle>
|
||||
<subtitle in="00:02:08:05" out="00:02:10:05">There were some big companies in there that thought</subtitle>
|
||||
<subtitle in="00:02:11:00" out="00:02:13:01">they would run the mainframes that we </subtitle>
|
||||
<subtitle in="00:02:13:02" out="00:02:16:05">might be mediating data through.</subtitle>
|
||||
<subtitle in="00:02:15:00" out="00:02:18:03">CompuServe, America Online, The Source,</subtitle>
|
||||
<subtitle in="00:02:18:04" out="00:02:19:12">MCI Mail,Prodigy.</subtitle>
|
||||
<subtitle in="00:02:20:00" out="00:02:21:00">if you go to CompuServe,</subtitle>
|
||||
<subtitle in="00:02:21:00" out="00:02:23:00">you'll get whatever CompuServe has put under its roof.</subtitle>
|
||||
<subtitle in="00:02:23:00" out="00:02:26:00">If you subscribe to AOL you'll get whatever AOL has.</subtitle>
|
||||
<subtitle in="00:02:26:00" out="00:02:28:06">Prodigy even has a twenty-one volume electronic</subtitle>
|
||||
<subtitle in="00:02:28:06" out="00:02:30:00">encyclopedia that's updated quarterly</subtitle>
|
||||
<subtitle in="00:02:30:00" out="00:02:32:00">including thirty messages.</subtitle>
|
||||
<subtitle in="00:02:32:00" out="00:02:33:06">Alright, Prodigy :D</subtitle>
|
||||
<subtitle in="00:02:33:06" out="00:02:37:00">No one really factored in that off in a quiet corner,</subtitle>
|
||||
<subtitle in="00:02:37:00" out="00:02:40.5:00">there were tinkerers doing foundational technologies</subtitle>
|
||||
<subtitle in="00:02:40:06" out="00:02:41:06">for networking,</subtitle>
|
||||
<subtitle in="00:02:42:00" out="00:02:46:06">and they had a certain freedom that the firms didn't have.</subtitle>
|
||||
<subtitle in="00:02:46:06" out="00:02:50:00">You didn't have to do a business development deal</subtitle>
|
||||
<subtitle in="00:02:50:00" out="00:02:53:06">with the owner of the Internet...</subtitle>
|
||||
<subtitle in="00:02:53:06" out="00:02:55:00">before you could put up a website.</subtitle>
|
||||
<subtitle in="00:02:55:00" out="00:02:58:00">So that's what allowed Tim Berners-Lee</subtitle>
|
||||
<subtitle in="00:02:58:00" out="00:03:00:00">to develop a protocol for an application,</subtitle>
|
||||
<subtitle in="00:03:00:00" out="00:03:03:00">that would just run on top of the Internet,</subtitle>
|
||||
<subtitle in="00:03:03:00" out="00:03:04:00">called the web.</subtitle>
|
||||
<subtitle in="00:03:04:06" out="00:03:07:00">And then he was like, OK world go to it.</subtitle>
|
||||
<subtitle in="00:03:09:00" out="00:03:11:00">Ordinary people are becoming electronic publishers.</subtitle>
|
||||
<subtitle in="00:03:11:01" out="00:03:12:06">They are putting up the things</subtitle>
|
||||
<subtitle in="00:03:12:07" out="00:03:14:00">that mean something to them</subtitle>
|
||||
<subtitle in="00:03:14:01" out="00:03:16:00">and they want to share it with the rest of the world.</subtitle>
|
||||
<subtitle in="00:03:16:01" out="00:03:18:00">Why is it better than CompuServe or Prodigy?</subtitle>
|
||||
<subtitle in="00:03:18:01" out="00:03:19:09">That anyone can put any servers on </subtitle>
|
||||
<subtitle in="00:03:19:10" out="00:03:21:06">and have it do anything they want.</subtitle>
|
||||
<subtitle in="00:03:21:07" out="00:03:23:00">In fact most browsers have the ability</subtitle>
|
||||
<subtitle in="00:03:23:01" out="00:03:24:06">for you to view that source code.</subtitle>
|
||||
<subtitle in="00:03:24:07" out="00:03:26:02">I can go in then and start changing it</subtitle>
|
||||
<subtitle in="00:03:26:03" out="00:03:27:10">myself for free. Ok great.</subtitle>
|
||||
<subtitle in="00:03:27:11" out="00:03:29:09">Listen there’s even an encyclopedia</subtitle>
|
||||
<subtitle in="00:03:29:10" out="00:03:31:06">Awesome. All right.</subtitle>
|
||||
<subtitle in="00:03:31:09" out="00:03:34:00">We owe everything about the Internet</subtitle>
|
||||
<subtitle in="00:03:34:01" out="00:03:36:00">to the fact that its open.</subtitle>
|
||||
<subtitle in="00:03:36:01" out="00:03:38:00">And the hacker spirit that the people</subtitle>
|
||||
<subtitle in="00:03:38:01" out="00:03:40:00">who created it believed it.</subtitle>
|
||||
<subtitle in="00:03:40:01" out="00:03:42:04">But all that could change.</subtitle>
|
||||
<subtitle in="00:03:42:06" out="00:03:44:10">The way things are… are not the way</subtitle>
|
||||
<subtitle in="00:03:44:11" out="00:03:47:00">things will inevitably be.</subtitle>
|
||||
<subtitle in="00:03:48:00" out="00:03:50:01">The Internet itself is evolving</subtitle>
|
||||
<subtitle in="00:03:50:02" out="00:03:51:01">and can be pushed</subtitle>
|
||||
<subtitle in="00:03:51:02" out="00:03:53:06">in one direction or another.</subtitle>
|
||||
<subtitle in="00:03:53:07" out="00:03:55:09">And some futures are much better than others.</subtitle>
|
||||
<subtitle in="00:03:55:10" out="00:03:57:06">It’s great to have the example of the World Wide Web.</subtitle>
|
||||
<subtitle in="00:03:57:07" out="00:03:58:11">It’s great to have the example of Wikipedia.</subtitle>
|
||||
<subtitle in="00:03:59:00" out="00:04:00:01">There’s more where that came from.</subtitle>
|
||||
|
||||
<subtitle in="00:04:17:00" out="00:04:19:00">And I help make a better Internet</subtitle>
|
||||
<subtitle in="00:04:19:01" out="00:04:21:06">By making things easier to use</subtitle>
|
||||
<subtitle in="00:04:22:09" out="00:04:24:00">At Web Made Movies</subtitle>
|
||||
<subtitle in="00:04:24:01" out="00:04:26:03">we want to build a better Internet</subtitle>
|
||||
<subtitle in="00:04:26:04" out="00:04:28:04">by making video more open.</subtitle>
|
||||
<subtitle in="00:04:28:06" out="00:04:31:00">The page your watching is a good example</subtitle>
|
||||
<subtitle in="00:04:31:06" out="00:04:34:05">We’re going to keep exploring how video</subtitle>
|
||||
<subtitle in="00:04:34:06" out="00:04:35:06">can be more like the web.</subtitle>
|
||||
<subtitle in="00:04:35:07" out="00:04:37:06">And tell the story of some web heroes</subtitle>
|
||||
<subtitle in="00:04:37:07" out="00:04:38:06">along the way.</subtitle>
|
||||
<subtitle in="00:04:39:02" out="00:04:40:08">Explore our credits section to see</subtitle>
|
||||
<subtitle in="00:04:41:00" out="00:04:45:00">how you can get involved.</subtitle>
|
||||
</subtitles>
|
||||
<subtitles language="fa" align="center">
|
||||
<subtitle in="00:04:00:08" out="00:04:01:09">My name is Mona Kasra</subtitle>
|
||||
<subtitle in="00:04:01:10" out="00:04:03:11">and I'm building a better Internet</subtitle>
|
||||
</subtitles>
|
||||
<subtitles language="pt" align="center">
|
||||
<subtitle in="00:04:05:03" out="00:04:07:00">I make the Internet better</subtitle>
|
||||
<subtitle in="00:04:07:01" out="00:04:08:06">producing and sharing music</subtitle>
|
||||
<subtitle in="00:04:08:07" out="00:04:10:01">using Creative Commons</subtitle>
|
||||
</subtitles>
|
||||
</subtitles>
|
||||
<webpages>
|
||||
<webpage in="00:04:00:08" out="00:04:19:00" target="iframes" resourceid="monahomepage" />
|
||||
<webpage in="00:04:19:06" out="00:04:24:01" target="iframes" resourceid="celinehomepage" />
|
||||
</webpages>
|
||||
<script in="4:45:00" start="displayCredits" stop="removeCredits"/>
|
||||
</timeline>
|
||||
</popcorn>
|
||||
|
|
@ -16,6 +16,21 @@
|
|||
},
|
||||
manifestData = {};
|
||||
|
||||
// Simple function to convert 0:05 to 0.5 in seconds
|
||||
// acceptable formats are HH:MM:SS:MM, MM:SS:MM, SS:MM, SS
|
||||
var toSeconds = function(time) {
|
||||
var t = time.split(":");
|
||||
if (t.length === 1) {
|
||||
return parseFloat(t[0], 10);
|
||||
} else if (t.length === 2) {
|
||||
return parseFloat(t[0], 10) + parseFloat(t[1] / 12, 10);
|
||||
} else if (t.length === 3) {
|
||||
return parseInt(t[0] * 60, 10) + parseFloat(t[1], 10) + parseFloat(t[2] / 12, 10);
|
||||
} else if (t.length === 4) {
|
||||
return parseInt(t[0] * 3600, 10) + parseInt(t[1] * 60, 10) + parseFloat(t[2], 10) + parseFloat(t[3] / 12, 10);
|
||||
}
|
||||
};
|
||||
|
||||
// turns a node tree element into a straight up javascript object
|
||||
// also converts in and out to start and end
|
||||
// also links manifest data with ids
|
||||
|
|
@ -30,10 +45,10 @@
|
|||
|
||||
// converts in into start
|
||||
if (key === "in") {
|
||||
returnObject.start = data;
|
||||
returnObject.start = toSeconds( data );
|
||||
// converts out into end
|
||||
} else if ( key === "out" ){
|
||||
returnObject.end = data;
|
||||
returnObject.end = toSeconds( data );
|
||||
// this is where ids in the manifest are linked
|
||||
} else if ( key === "resourceid" ) {
|
||||
Popcorn.extend( returnObject, manifestData[data] );
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче