Permalink
Browse files

Slide/demo commit

  • Loading branch information...
1 parent 0b4bb65 commit 1a64477e8b04fcf90f879bc6ad65c97c7ca6320a @ebidel committed Jun 28, 2012
Showing with 12,452 additions and 0 deletions.
  1. +25 −0 CHANGES.md
  2. +105 −0 README.html
  3. +37 −0 app.yaml
  4. +24 −0 config.rb
  5. BIN demos/.DS_Store
  6. +4 −0 demos/audio_streamer/README.md
  7. +456 −0 demos/audio_streamer/audio_streamer.js
  8. +359 −0 demos/audio_streamer/index.html
  9. +451 −0 demos/audio_streamer/jdataview.js
  10. +127 −0 demos/audio_streamer/server.js
  11. +17 −0 demos/audio_streamer/speaker.svg
  12. +5 −0 demos/audio_streamer/start_servers.sh
  13. +148 −0 demos/gamepad.html
  14. +7 −0 demos/popup.html
  15. BIN demos/screenshare/.DS_Store
  16. +7 −0 demos/screenshare/README.md
  17. +56 −0 demos/screenshare/app.js
  18. +27 −0 demos/screenshare/background.html
  19. +57 −0 demos/screenshare/background.js
  20. BIN demos/screenshare/img/.DS_Store
  21. BIN demos/screenshare/img/screen.png
  22. +26 −0 demos/screenshare/manifest.json
  23. +63 −0 demos/screenshare/options.html
  24. +38 −0 demos/screenshare/popup.html
  25. BIN demos/screenshare/screenshare.crx
  26. +62 −0 demos/screenshare/server.js
  27. +72 −0 demos/screenshare/viewer.html
  28. +24 −0 demos/screenshare/viewer.js
  29. BIN images/.DS_Store
  30. +98 −0 images/HTML5_Badge.svg
  31. BIN images/HTML5_Badge_128.png
  32. BIN images/HTML5_Badge_64.png
  33. BIN images/audio-routing-analysis.png
  34. BIN images/audio-routing-crossfade.png
  35. BIN images/audio-routing.png
  36. BIN images/barchart.png
  37. BIN images/browser_logos/.DS_Store
  38. BIN images/browser_logos/ff_logo.png
  39. BIN images/browser_logos/ie10_logo.png
  40. BIN images/browser_logos/opera_logo.png
  41. BIN images/browser_logos/safari_logo.png
  42. BIN images/chart.png
  43. BIN images/chrome-logo-tiny.png
  44. BIN images/chrome_logo.png
  45. BIN images/google_developers_icon_128.png
  46. BIN images/google_developers_logo.png
  47. BIN images/google_developers_logo_white.png
  48. BIN images/html_can_not_do_that.jpg
  49. BIN images/icons/bug.png
  50. BIN images/icons/bug_closed.png
  51. +25 −0 images/icons/gears.svg
  52. +8 −0 images/icons/radar.svg
  53. BIN images/io2012_logo.png
  54. BIN images/my_book_cover.jpg
  55. BIN images/slides/.DS_Store
  56. BIN images/slides/binding.jpg
  57. BIN images/slides/blueprint.jpg
  58. BIN images/slides/fast.jpg
  59. +32 −0 images/slides/flexbox-holygrail.svg
  60. +35 −0 images/slides/flexbox-tools.svg
  61. BIN images/slides/rocket.jpg
  62. BIN images/slides/stream.jpg
  63. BIN images/slides/tools.jpg
  64. BIN images/slides/tools2.jpg
  65. BIN images/transferables.jpg
  66. BIN images/twitter_newbird_blue.png
  67. +1,531 −0 index.html
  68. +157 −0 js/angular-1.0.0.min.js
  69. +372 −0 js/app.js
  70. +586 −0 js/hammer.js
  71. +4 −0 js/modernizr.custom.45394.js
  72. +8 −0 js/order.js
  73. +2 −0 js/polyfills/classList.min.js
  74. +2 −0 js/polyfills/dataset.min.js
  75. +1 −0 js/polyfills/history.min.js
  76. +2 −0 js/prettify/lang-apollo.js
  77. +18 −0 js/prettify/lang-clj.js
  78. +2 −0 js/prettify/lang-css.js
  79. +1 −0 js/prettify/lang-go.js
  80. +2 −0 js/prettify/lang-hs.js
  81. +3 −0 js/prettify/lang-lisp.js
  82. +2 −0 js/prettify/lang-lua.js
  83. +2 −0 js/prettify/lang-ml.js
  84. +4 −0 js/prettify/lang-n.js
  85. +1 −0 js/prettify/lang-proto.js
  86. +2 −0 js/prettify/lang-scala.js
  87. +2 −0 js/prettify/lang-sql.js
  88. +1 −0 js/prettify/lang-tex.js
  89. +2 −0 js/prettify/lang-vb.js
  90. +3 −0 js/prettify/lang-vhdl.js
  91. +2 −0 js/prettify/lang-wiki.js
  92. +3 −0 js/prettify/lang-xq.js
  93. +2 −0 js/prettify/lang-yaml.js
  94. +1 −0 js/prettify/prettify.css
  95. +28 −0 js/prettify/prettify.js
  96. +33 −0 js/require-1.0.8.min.js
  97. +109 −0 js/slide-controller.js
  98. +765 −0 js/slide-deck.js
  99. +5 −0 js/slides.js
  100. +15 −0 serve.sh
  101. +32 −0 slide_config.js
  102. +404 −0 template.html
  103. BIN theme/css/.DS_Store
  104. +3,813 −0 theme/css/animate.css
  105. +1 −0 theme/css/custom.css
  106. +1 −0 theme/css/default.css
  107. +1 −0 theme/css/phone.css
  108. +104 −0 theme/scss/_base.scss
  109. +79 −0 theme/scss/_variables.scss
  110. +863 −0 theme/scss/custom.scss
  111. +1,051 −0 theme/scss/default.scss
  112. +35 −0 theme/scss/phone.scss
View
@@ -0,0 +1,25 @@
+Modifications to the original template
+
+- created variables.scss from variables in _base.scss so it could be included in
+ custom.scss sheet.
+- moved mixins from _base.scss to _variables.scss
+- text-shadow to slide
+- added .button to default.scss along with button
+- added .bold to default.scss along with default b
+- added animate.css
+- added @include column-break-after mixin to variables.scss
+
+Deck specific changes that should not be upstreamed.
+- removed document.body.classList.add('loaded'); in slide-deck.js. Moved to app.js
+
+
+Tech used:
+- Compass/ SaSS
+- Mutation Observers (flexbox columns)
+- rAF
+- flexbox (slide layouts)
+- transitions/transforms/animations
+- requirejs
+- window.postMessage() for speaker mode
+- CORs to bring in webkit bugs
+- transforms, user-select: none, pointer-events: none; for readonly live preview iframes
View
@@ -0,0 +1,105 @@
+<style>
+@import "http://fonts.googleapis.com/css?family=Open Sans:regular,semibold,italic,italicsemibold|Inconsolata&amp;v2";
+body {
+ font-family: "Open Sans";
+ margin: 6em 2em 2em 2em;
+}
+body:before {
+ content: '';
+ position: fixed;
+ top: 2%;
+ right: 3%;
+ height: 100px;
+ width: 100px;
+ background: url(http://www.html5rocks.com/static/images/identity/HTML5_Badge_128.png) no-repeat 50% 50%;
+ background-size: contain;
+ z-index: 10;
+ opacity: 0.1;
+}
+h1, h2, h3, h4 {
+ font-weight: 600;
+}
+h1 {
+ position: fixed;
+ background: -webkit-linear-gradient(top, white 65%, rgba(255,255,255,0));
+ background: -moz-linear-gradient(top, white 65%, rgba(255,255,255,0));
+ background: -ms-linear-gradient(top, white 65%, rgba(255,255,255,0));
+ background: -o-linear-gradient(top, white 65%, rgba(255,255,255,0));
+ width: 100%;
+ height: 80px;
+ padding: 10px 10px 10px 1em;
+ left: 0;
+ top: 0;
+ margin: 0;
+}
+h1 img {
+ height: 30px;
+ vertical-align: middle;
+ margin-bottom: 8px;
+}
+a { color: navy; }
+pre {
+ background: #eee;
+ margin-left: 2em;
+ padding: 5px;
+ border-left: 3px solid #ccc;
+}
+</style>
+
+<h1><img src="images/io2012_logo.png"> HTML5 Slide Template</h1>
+
+<h2>Configuring the slides</h2>
+<p>Much of the deck is customized by changing the settings in <a href="slide_config.js"><code>slide_config.js</code></a>.
+Some of the customizations include the title, Analytics tracking ID, speaker
+information (name, social urls, blog), web fonts to load, themes, and other
+general behavior.</p>
+<h3>Customizing the <code>#io2012</code> hash</h3>
+<p>The bottom of the slides include <code>#io2012</code> by default. If you'd like to change
+this, please update the variable <code>$social-tags: '#io2012';</code> in
+<a href="theme/scss/default.scss"><code>/theme/scss/default.scss</code></a>.</p>
+<p>See the next section on "Editing CSS" before you go editing things.</p>
+<h2>Editing CSS</h2>
+<p><a href="http://compass-style.org/install/">Compass</a> is a CSS preprocessor used to compile
+SCSS/SASS into CSS. We chose SCSS for the new slide deck for maintainability,
+easier browser compatibility, and because...it's the future!</p>
+<p>That said, if not comfortable working with SCSS or don't want to learn something
+new, not a problem. The generated .css files can already be found in
+(see <a href="theme/css"><code>/theme/css</code></a>). You can just edit those and bypass SCSS altogether.
+However, our recommendation is to use Compass. It's super easy to install and use.</p>
+<h3>Installing Compass and making changes</h3>
+<p>First, install compass:</p>
+<pre><code>sudo gem update --system
+sudo gem install compass
+</code></pre>
+<p>Next, you'll want to watch for changes to the exiting .scss files in <a href="theme/scss"><code>/theme/scss</code></a>
+and any new one you add:</p>
+<pre><code>$ cd io-2012-slides
+$ compass watch
+</code></pre>
+<p>This command automatically recompiles the .scss file when you make a change.
+Its corresponding .css file is output to <a href="theme/css"><code>/theme/css</code></a>. Slick.</p>
+<p>By default, <a href="config.rb"><code>config.rb</code></a> in the main project folder outputs minified
+.css. It's a best practice after all! However, if you want unminified files,
+run watch with the style output flag:</p>
+<pre><code>compass watch -s expanded
+</code></pre>
+<p><em>Note:</em> You should not need to edit <a href="theme/scss/_base.scss"><code>_base.scss</code></a>.</p>
+<h2>Running the slides</h2>
+<p>The slides can be run locally from <code>file://</code> making development easy :)</p>
+<h3>Running from a web server</h3>
+<p>If at some point you should need a web server, use <a href="serve.sh"><code>serve.sh</code></a>. It will
+launch a simple one and point your default browser to <a href="http://localhost:8000/template.html"><code>http://localhost:8000/template.html</code></a>:</p>
+<pre><code>$ cd io-2012-slides
+$ ./serve.sh
+</code></pre>
+<p>You can also specify a custom port:</p>
+<pre><code>$ ./serve.sh 8080
+</code></pre>
+<h3>Presenter mode</h3>
+<p>The slides contain a presenter mode feature (beta) to view + control the slides
+from a popup window.</p>
+<p>To enable presenter mode, add <code>presentme=true</code> to the URL: <a href="http://localhost:8000/template.html?presentme=true">http://localhost:8000/template.html?presentme=true</a></p>
+<p>To disable presenter mode, hit <a href="http://localhost:8000/template.html?presentme=false">http://localhost:8000/template.html?presentme=false</a></p>
+<p>Presenter mode is sticky, so refreshing the page will persist your settings.</p>
+<hr />
+<p>That's all she wrote!</p>
View
@@ -0,0 +1,37 @@
+application: html5can
+version: 1
+runtime: python27
+api_version: 1
+threadsafe: yes
+
+handlers:
+- url: /images/chrome-logo-tiny\.png
+ static_files: images/chrome-logo-tiny.png
+ upload: images/chrome-logo-tiny\.png
+
+- url: /js
+ static_dir: js
+
+- url: /images
+ static_dir: images
+
+- url: /demos
+ static_dir: demos
+
+- url: /theme
+ static_dir: theme
+
+- url: /slide_config.js
+ static_files: slide_config.js
+ upload: slide_config.js
+
+- url: /
+ static_files: index.html
+ upload: index.html
+
+#- url: .*
+# script: main.app
+
+# libraries:
+# - name: webapp2
+# version: "2.5.1"
View
@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "theme/css"
+sass_dir = "theme/scss"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+output_style = :compressed #:expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
Binary file not shown.
@@ -0,0 +1,4 @@
+To run:
+
+node server.js
+python -m SimpleHTTPServer 8000;
Oops, something went wrong.

0 comments on commit 1a64477

Please sign in to comment.