--- a/README Sun Sep 08 06:10:03 2013 +0900
+++ b/README Sun Sep 08 06:11:09 2013 +0900
@@ -14,6 +14,7 @@
== Instructions ==
To use, you should do the following things:
+# Get an access key from http://talk.keio.w3.org/
# Include the `w3c_talks.js` script in your presentation HTML file, preferably at the end of the body, like so:
...
<script src="js/w3c_talks.js"></script>
@@ -27,9 +28,9 @@
<p>Teddies celebrated their 100th birthday in 2002</p>
</div>
-# Finally, when you're ready to start auto-tweeting, click the "Start" button that appears at the top-right of your presentation.
+# Finally, when you're ready to start auto-tweeting, enter your access key in the black dialog box and click the "Start". If you're just practising, don't click "Start"!
-That's it. When you show each slide, any notes you have added will be tweeted to [https://twitter.com/w3c_talks @w3c_talks].
+That's it. When you show each slide, any notes you have added will be tweeted to https://twitter.com/w3c_talks
== Support ==
--- a/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/intro.html.twig Sun Sep 08 06:10:03 2013 +0900
+++ b/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/intro.html.twig Sun Sep 08 06:11:09 2013 +0900
@@ -17,42 +17,61 @@
<div class="masthead">
<div class="mastheadbg">
<a href="{{ path('org_w3_autotweet_intro') }}">
- <img src="{{ asset('images/logo-masthead.png') }}" alt="W3C"></img></a>
+ <img src="{{ asset('images/w3c_talks_small.png') }}" alt="W3C"></img></a>
</div>
</div>
<div class="row-fluid detail">
<div class="span8 offset2 introdata">
-<h1>W3C Talk</h1></br>
+<h1>W3C talks</h1>
+
+<p>A script for automatically posting slide notes to Twitter (<a href="https://twitter.com/w3c_talks">@w3c_talks</a>) as you give an HTML presentation. Wow the crowd with your magic tweets!</p>
<h2>How to get started?</h2>
-<h3>1.Get Slide frameworks</h3>
-<p>You can get slide frameworks follwing link.
-Please download and unzip it.
+<h3>1.Get the script</h3>
+<p>Download and unzip from this link:
</p>
- <p><a class="btn btn-large btn-print" href="w3c_talk.zip">
- Download.
+ <p><a class="btn btn-large btn-print" href="{{ asset('images/w3c_talks.zip') }}">
+ Download
</a></p>
-<h3>2.Register your talk and get access key.</h3>
-<p>You can register the talk by following link.
-The reason for this registration is to distinguish each talks and prevent duplicated multi posts.
-</p>
+<h3>2. Get an access key</h3>
+<p>Once activated, this will register your slides on the server which prevents sending duplicate posts.</p>
<p><a class="btn btn-large btn-print" href="{{ path('org_w3_autotweet_newtalk') }}">
- Get an accesskey.
+ Get accesskey
</a></p>
-<h3>3.Edit the configuration</h3>
+<h3>3.Edit your presentation</h3>
<ul>
-<li>Edit js/w3c_talks.js with your access key on line 67.</li>
-<li>Put metadata on your slide like following.</li>
-<p>
-<meta name="hashtag" content="#testevent">
-<meta name="author" content="Bob Smith">
-</p>
-<li>include js/w3c_talk.js into just before </body> tag on your slide.</li>
+ <li>Include the <code>w3c_talk.js</code> file just before the closing <code></body></code> tag in your presentation, like so:
+ <pre><code>
+ ...
+ <script src="js/w3c_talk.js"></script>
+ </body>
+ </code></pre></li>
+ <li>Put metadata in your presentation like so:
+ <pre><code>
+ <head>
+ ...
+ <meta name="hashtag" content="#testevent">
+ <meta name="author" content="Bob Smith">
+ <title>My wonderful talk</title>
+ ...
+ </head>
+ </code></pre>
+ </li>
+ <li>For each slide you'd like to post/tweet a note for, add a <code>data-note</code> attribute like so:
+ <pre><code>
+ <div class="slide" data-note="80% of statistics are made up">
+ <h1>80% of statistics are made up</h1>
+ ...
+ </div>
+ </code></pre>
+ </li>
</ul>
+<p>Just before you start your presentation at the event, enter the access key in the black dialog box and as you present your slides, tweets will be posted to <a href="https://twitter.com/w3c_talks">@w3c_talks</a>. Don't worry - until you click "Start" nothing will be tweeted.</p>
+
<h2>Existing Talks</h2>
{% if talk|length > 0 %}
--- a/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/list.html.twig Sun Sep 08 06:10:03 2013 +0900
+++ b/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/list.html.twig Sun Sep 08 06:11:09 2013 +0900
@@ -17,7 +17,7 @@
<div class="masthead">
<div class="mastheadbg">
<a href="{{ path('org_w3_autotweet_intro') }}">
- <img src="{{ asset('images/logo-masthead.png') }}" alt="W3C"></img></a>
+ <img src="{{ asset('images/w3c_talks_small.png') }}" alt="W3C"></img></a>
</div>
</div>
<div class="row-fluid detail">
--- a/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/newtalk.html.twig Sun Sep 08 06:10:03 2013 +0900
+++ b/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/newtalk.html.twig Sun Sep 08 06:11:09 2013 +0900
@@ -16,7 +16,7 @@
<div class="masthead">
<div class="mastheadbg">
<a href="{{ path('org_w3_autotweet_intro') }}">
- <img src="{{ asset('images/logo-masthead.png') }}" alt="W3C"></img></a>
+ <img src="{{ asset('images/w3c_talks_small.png') }}" alt="W3C"></img></a>
</div>
</div>
<div class="row-fluid detail">
--- a/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/note.html.twig Sun Sep 08 06:10:03 2013 +0900
+++ b/autotweet-php/src/Org/W3/AutotweetBundle/Resources/views/Default/note.html.twig Sun Sep 08 06:11:09 2013 +0900
@@ -16,7 +16,7 @@
<div class="masthead">
<div class="mastheadbg">
<a href="{{ path('org_w3_autotweet_intro') }}">
- <img src="{{ asset('images/logo-masthead.png') }}" alt="W3C"></img></a>
+ <img src="{{ asset('images/w3c_talks_small.png') }}" alt="W3C"></img></a>
</div>
</div>
<div class="row-fluid detail">
--- a/autotweet-php/web/css/base_design.css Sun Sep 08 06:10:03 2013 +0900
+++ b/autotweet-php/web/css/base_design.css Sun Sep 08 06:11:09 2013 +0900
@@ -145,21 +145,55 @@
text-align: left;
}
-.btn-print {
- background-color: hsl(0, 69%, 22%) !important;
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
- background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
- background-image: -moz-linear-gradient(top, #b42121, #5e1111);
- background-image: -ms-linear-gradient(top, #b42121, #5e1111);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
- background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
- background-image: -o-linear-gradient(top, #b42121, #5e1111);
- background-image: linear-gradient(#b42121, #5e1111);
- border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
- color: #fff !important;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
- -webkit-font-smoothing: antialiased;
-}
+ .btn-print {
+ background-color: hsl(0, 69%, 22%) !important;
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
+ background-image: -moz-linear-gradient(top, #b42121, #5e1111);
+ background-image: -ms-linear-gradient(top, #b42121, #5e1111);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
+ background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
+ background-image: -o-linear-gradient(top, #b42121, #5e1111);
+ background-image: linear-gradient(#b42121, #5e1111);
+ border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
+ color: #fff !important;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
+ -webkit-font-smoothing: antialiased;
+ }
+ /* Style overrides */
+ body {
+ background-image: url("../images/w3c_talks_bg.png");
+ background-attachment: fixed;
+ background-color: #022330;
+ background-repeat: no-repeat;
+ }
+
+ .container-narrow {
+ -webkit-border-radius: 32px;
+ -moz-border-radius: 32px;
+ -ms-border-radius: 32px;
+ -o-border-radius: 32px;
+ border-radius: 32px;
+ }
+ .masthead, .footer {
+ background-color: transparent;
+ }
+
+ .mastheadbg, .footerbg {
+ background-color: #011821;
+ text-align:center;
+ }
+
+ .mastheadbg img{
+ display: inline-block;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ -ms-border-radius: 8px;
+ -o-border-radius: 8px;
+ border-radius: 8px;
+ margin: 8px auto;
+ }
+
Binary file autotweet-php/web/images/w3c_talks.zip has changed
Binary file autotweet-php/web/images/w3c_talks_bg.png has changed
Binary file autotweet-php/web/images/w3c_talks_small.png has changed
--- a/js/w3c_talks.js Sun Sep 08 06:10:03 2013 +0900
+++ b/js/w3c_talks.js Sun Sep 08 06:11:09 2013 +0900
@@ -49,7 +49,7 @@
};
// Add start box to top-right of page
- function makeUI() {
+ function init() {
// Create CSS for start box
var style = document.createElement('style');
style.innerHTML = '#w3c_talks {background:rgba(0, 0, 0, 0.7); border-radius:0 0 0 1em; color:#fff; display:inline-block; opacity:1; padding:0.5em 1em; position:absolute; right:0; text-align:center; top:0; z-index:1000;} #w3c_talks.hidden {opacity:0; -webkit-transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; transition:3s;} #w3c_talks_start {display:block; font-weight:bold; margin:0.5em; padding:0.5em 1em; width:100%;} #w3c_talks_start:hover, #w3c_talks_start:focus {color:blue; cursor:pointer;} #w3c_talks a {color:#e3e7ff; text-decoration:underline;} #w3c_talks a:hover, #w3c_talks:focus {text-decoration:none;}';
@@ -67,15 +67,42 @@
event = event || window.event;
event.preventDefault();
var target = event.target || event.srcElement;
- // Disable form button
- target.children['w3c_talks_start'].value = 'Ready';
- target.children['w3c_talks_start'].disabled = true;
- // Set access key and hide UI
- window.sessionStorage['accesskey'] = target.children['w3c_talks_key'].value;
- document.getElementById('w3c_talks').className = 'hidden';
+ // Set access key and check with server
+ if (target.children['w3c_talks_key'].value) {
+ window.sessionStorage['accesskey'] = target.children['w3c_talks_key'].value;
+ var data = 'accesskey=' + window.sessionStorage['accesskey'];
+ doPost('http://talk.keio.w3.org/checkkey', data, checkKey);
+ } else {
+ alert('Please enter the access key');
+ target.children['w3c_talks_key'].focus();
+ }
};
}
+
+ // Check with the server that the access key is correct
+ function checkKey(data) {
+ try {
+ var check = JSON.parse(data);
+ if (check.accepted === true) {
+ // Disable form button
+ var start = document.getElementById('w3c_talks');
+ start.value = 'Ready';
+ start.disabled = true;
+ document.getElementById('w3c_talks').className = 'hidden';
+ // Run the main "talking" function
+ startTalking();
+ } else {
+ throw 'WrongKey';
+ }
+ } catch(e) {
+ alert('The access key is wrong. Please try again');
+ var key_input = document.getElementById('w3c_talks_key');
+ key_input.value = '';
+ key_input.focus();
+ }
+ }
+ // Get the content attribute from a specific meta tag
function getMetaTag(name) {
var tag = document.querySelector('[name=' + name + ']');
@@ -88,7 +115,7 @@
}
// Use XHR to send data to specified URL
- function doPost(url, data) {
+ function doPost(url, data, successCallback) {
var httpRequest;
if (window.XMLHttpRequest) { // Modern browsers
@@ -114,6 +141,7 @@
} else {
// For debugging
console.log(httpRequest.response);
+ if (successCallback) successCallback(httpRequest.response);
}
}
};
@@ -122,6 +150,7 @@
httpRequest.send(data);
}
+ // Format and send the data-note attribute for a slide
function sendNote(slide) {
if (window.sessionStorage['accesskey']) {
try {
@@ -132,7 +161,6 @@
data += '&author=' + encodeURIComponent(author);
data += '&title=' + encodeURIComponent(title);
data += '&accesskey=' + window.sessionStorage['accesskey'];
- console.log(data);
doPost(url, data);
}
} catch(e) {
@@ -141,36 +169,39 @@
}
}
- makeUI();
-
- // The following is for Slidy:
- if (window.w3c_slidy) {
- // Store original "show_slide" method for later
- w3c_slidy.__show_slide = w3c_slidy.show_slide;
+ // Hijack methods in slide templates and add ability to post notes
+ function startTalking() {
+ // The following is for Slidy:
+ if (window.w3c_slidy) {
+ // Store original "show_slide" method for later
+ w3c_slidy.__show_slide = w3c_slidy.show_slide;
+
+ // Hijack "show_slide" method and add action to send note
+ w3c_slidy.show_slide = function(slide) {
+ this.__show_slide(slide);
+
+ sendNote(slide);
+ };
+ }
- // Hijack "show_slide" method and add action to send note
- w3c_slidy.show_slide = function(slide) {
- this.__show_slide(slide);
+ // The following is for Shower:
+ if (window.shower) {
+ var slides = document.querySelectorAll('.slide');
- sendNote(slide);
- };
+ // Store original "go" method for later
+ shower.__go = shower.go;
+
+ // Hijack "go" method and add action to send note
+ shower.go = function(slideNumber, callback) {
+ this.__go(slideNumber, callback);
+
+ if (slides.length > slideNumber) {
+ sendNote(slides[slideNumber]);
+ }
+ };
+ }
}
- // The following is for Shower:
- if (window.shower) {
- var slides = document.querySelectorAll('.slide');
-
- // Store original "go" method for later
- shower.__go = shower.go;
-
- // Hijack "go" method and add action to send note
- shower.go = function(slideNumber, callback) {
- this.__go(slideNumber, callback);
-
- if (slides.length > slideNumber) {
- sendNote(slides[slideNumber]);
- }
- };
- }
+ init();
})();