Mercurial > ff-herdict-preso
changeset 11:9c2325f7bcb1
Added subtitles, though they currently are hard to see on a dark background and also override all dynamic clickable content of the actual slideshow.
| author | Atul Varma <varmaa@toolness.com> |
|---|---|
| date | Wed, 10 Feb 2010 13:32:36 -0800 |
| parents | b8b3aaf44c1c |
| children | ca63f0dd6b0e |
| files | css/ff-herdict-preso.css ff-herdict-preso.html js/ff-herdict-preso.js |
| diffstat | 3 files changed, 71 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/css/ff-herdict-preso.css Wed Feb 10 12:29:29 2010 -0800 +++ b/css/ff-herdict-preso.css Wed Feb 10 13:32:36 2010 -0800 @@ -10,16 +10,36 @@ } h1 { + font-weight: normal; font-size: 24pt; } +#container { + width: 660px; + margin: 0 auto; +} + #subtitles { + height: 400px; + width: 660px; + margin: 0 auto; + display: table; + font-size: 12pt; + position: absolute; + top: 0px; +} + +#subtitles p { + vertical-align: bottom; display: none; } +#subtitles .visible { + display: table-cell; +} + #slides { height: 400px; - width: 660px; margin: 0 auto; display: table; position: static;
--- a/ff-herdict-preso.html Wed Feb 10 12:29:29 2010 -0800 +++ b/ff-herdict-preso.html Wed Feb 10 13:32:36 2010 -0800 @@ -75,47 +75,57 @@ </div> </div> <div id="subtitles"> - <p>Firefox's network error pages are familiar to everyone.</p> - <p>But they're not very useful. Most people, if they're like me, see this - wall of text and interpret it to mean "the internet broke and we have - no idea why."</p> - <p>The fundamental question users want answered when they see this is: is - there something <em>I</em> can do to fix this?</p> - <p>Now, the architecture of the internet makes it fairly hard to pinpoint - why a network is down.</p> - <p>As James Fallows explains in his article "The Connection Has Been - Reset" from The Atlantic's March 2008 issue, some national governments + <p data-at="0.0" class="visible">Firefox's network error pages are + familiar to everyone.</p> + <p data-at="4.0">But they're not very useful. Most people, if + they're like me, see this wall of text and interpret it to mean + "the internet broke and we have no idea why."</p> + <p data-at="14.0">The fundamental question users want answered + when they see this is: is there something <em>I</em> can do to fix + this?</p> + <p data-at="22.0">Now, the architecture of the internet makes it + fairly hard to actually pinpoint why a network is down.</p> + <p data-at="28.0">As James Fallows explains in his article "The + Connection Has Been Reset" from The Atlantic's March 2008 + issue...</p> + <p data-at="34.5">some national governments even exploit this to prevent their people from seeing things that the government doesn't want them to see.</p> - <p>All this means that a "server not found" error page could have been - raised because the user's network connection got unplugged; or it - could be because their local router is down; or it could be because - their ISP is having problems; or it could be because their corporation - is blocking access to the site; or it could be because their - government has outlawed access to that particular site; or it could be - because the site is actually down.</p> - <p>Firefox should do its best to answer that fundamental question: - is there something <em>I</em> can do to fix this and get where I want - to go?</p> - <p>Enter Herdict.</p> - <p>Herdict is a project of the Berkman Center for Internet & Society at - Harvard University, a brainchild of Professor Jonathan Zittrain, that - attempts to use crowdsourcing to generate a global picture of internet - connectivity.</p> - <p>Put simply, it uses the power of the internet itself to ask the - question: <em>can other people on the internet see this site? If so, - who?</em></p> - <p>Firefox can use the answers to these questions to help answer the - user's fundamental question: is there something *I* can do to fix - this?</p> - <p>This Labs Experiment is an attempt at picturing what - Firefox-Herdict-integration might look like. It's intended to be as + <p data-at="42.0">All this means that a "server not found" error + page could have been raised because...</p> + <p data-at="49.0">the user's network connection got unplugged...</p> + <p data-at="53.5">or it could be because their local router is + down...</p> + <p data-at="56.0">or it could be because their ISP is having + problems...</p> + <p data-at="59.5">or because their corporation is blocking access + to the site...</p> + <p data-at="63.0">or because their government is...</p> + <p data-at="68.0">or it could be because the site is actually down.</p> + <p data-at="70.0">Firefox should do its best to answer that + fundamental question: is there something <em>I</em> can do to fix + this and get where I want to go?</p> + <p data-at="79.0">Enter Herdict.</p> + <p data-at="82.0">Herdict is a project of the Berkman Center for + Internet & Society at Harvard University, a brainchild of + Professor Jonathan Zittrain, that attempts to use crowdsourcing to + generate a global picture of internet connectivity.</p> + <p data-at="95.0">Put simply, it uses the power of the internet + itself to ask the question: <em>can other people on the internet + see this site? If so, who?</em></p> + <p data-at="106.0">Firefox can use the answers to these questions + to help answer the user's fundamental question: is there something + <em>I</em> can do to fix this?</p> + <p data-at="116.0">This Labs Experiment is an attempt at picturing what + Firefox-Herdict integration might look like.</p> + <p data-at="122.0">It's intended to be as unintrusive as possible to the user experience, so it only aims to improve upon the already notoriously unhelpful network error pages.</p> - <p>Rather than being a final solution, this Labs Experiment is intended - to build mindshare and catalyze discussion about what a better network - error page might look like, following Mozilla's philosophy of creating + <p data-at="133.0">Rather than being a final solution, this Labs + Experiment is intended to build mindshare and catalyze discussion + about what a better network error page might look like...</p> + <p data-at="143.0">in keeping with Mozilla's tradition of creating things that do stuff to make the internet better.</p> </div> <audio id="main" controls="indeed" autobuffer="indeed">
--- a/js/ff-herdict-preso.js Wed Feb 10 12:29:29 2010 -0800 +++ b/js/ff-herdict-preso.js Wed Feb 10 13:32:36 2010 -0800 @@ -117,4 +117,8 @@ // movie UI. syncVisualsWithAudio({audio: "audio#main", visuals: "#slides > div"}); + + // Sync the audio with subtitles. + syncVisualsWithAudio({audio: "audio#main", + visuals: "#subtitles > p[data-at]"}); });