siggraph2012course
所属分类:论文
开发工具:JavaScript
文件大小:0KB
下载次数:0
上传日期:2012-08-17 22:45:33
上 传 者:
sh-1993
说明: SIGGRAPH 2012网络图形编程课程材料,
(Materials for SIGGRAPH 2012 course on Graphics Programming for the Web,)
文件列表:
LocalHTTPServer.py (444, 2012-08-17)
app.yaml (345, 2012-08-17)
config.rb (867, 2012-08-17)
hello-webgl-texture.html (5675, 2012-08-17)
hello-webgl.html (4683, 2012-08-17)
images/ (0, 2012-08-17)
images/aquarium.png (63531, 2012-08-17)
images/barchart.png (17632, 2012-08-17)
images/body-selection.png (743338, 2012-08-17)
images/buffer-objects-and-vertex-shaders.svg (59432, 2012-08-17)
images/chart.png (94688, 2012-08-17)
images/chrome-logo-tiny.png (1381, 2012-08-17)
images/frame-structure.svg (54498, 2012-08-17)
images/google_developers_icon_128.png (4316, 2012-08-17)
images/google_developers_logo.png (14800, 2012-08-17)
images/google_developers_logo_tiny.png (3749, 2012-08-17)
images/google_developers_logo_white.png (7105, 2012-08-17)
images/io2012_logo.png (13016, 2012-08-17)
images/jsgamebench-asteroid.jpg (179059, 2012-08-17)
images/jsgamebench-explosion.jpg (267021, 2012-08-17)
images/jsgamebench-powerup.jpg (42886, 2012-08-17)
images/jsgamebench-ship.jpg (11240, 2012-08-17)
images/particles.png (167025, 2012-08-17)
images/red_arrow.png (4295, 2012-08-17)
images/relative-cost-of-operations.svg (51818, 2012-08-17)
images/shader-pipeline.svg (35045, 2012-08-17)
images/siggraph2012-header.jpg (230145, 2012-08-17)
images/siggraph2012-logo-with-alpha.png (38067, 2012-08-17)
images/siggraph2012-title.jpg (1500012, 2012-08-17)
images/sky.jpg (194552, 2012-08-17)
images/sprite-sheets.png (198654, 2012-08-17)
images/sprite-sheets.svg (383916, 2012-08-17)
images/stream-processing-with-shaders.svg (35368, 2012-08-17)
images/vertex-and-fragment-shader-diagram.svg (37159, 2012-08-17)
images/webgl-logo-pot.png (53088, 2012-08-17)
js/ (0, 2012-08-17)
js/hammer.js (17787, 2012-08-17)
js/modernizr.custom.45394.js (13245, 2012-08-17)
... ...
HTML5 Slide Template
## Hacks
The original slides come from
http://io-2012-slides.googlecode.com. They
have been modified to create a SIGGRAPH 2012 template.
## Configuring the slides
Much of the deck is customized by changing the settings in [`slide_config.js`](https://github.com/kenrussell/siggraph2012course/blob/master/slide_config.js).
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.
### Customizing the `#io12` hash
The bottom of the slides include `#io12` by default. If you'd like to change
this, please update the variable `$social-tags: '#io12';` in
[`/theme/scss/default.scss`](https://github.com/kenrussell/siggraph2012course/blob/master/theme/scss/default.scss).
See the next section on "Editing CSS" before you go editing things.
## Editing CSS
[Compass](https://github.com/kenrussell/siggraph2012course/blob/master/http://compass-style.org/install/) 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!
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 [`/theme/css`](https://github.com/kenrussell/siggraph2012course/blob/master/theme/css)). You can just edit those and bypass SCSS altogether.
However, our recommendation is to use Compass. It's super easy to install and use.
### Installing Compass and making changes
First, install compass:
sudo gem update --system
sudo gem install compass
Next, you'll want to watch for changes to the exiting .scss files in [`/theme/scss`](https://github.com/kenrussell/siggraph2012course/blob/master/theme/scss)
and any new one you add:
$ cd io-2012-slides
$ compass watch
This command automatically recompiles the .scss file when you make a change.
Its corresponding .css file is output to [`/theme/css`](https://github.com/kenrussell/siggraph2012course/blob/master/theme/css). Slick.
By default, [`config.rb`](https://github.com/kenrussell/siggraph2012course/blob/master/config.rb) 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:
compass watch -s expanded
*Note:* You should not need to edit [`_base.scss`](https://github.com/kenrussell/siggraph2012course/blob/master/theme/scss/_base.scss).
## Running the slides
The slides can be run locally from `file://` making development easy :)
### Running from a web server
If at some point you should need a web server, use [`serve.sh`](https://github.com/kenrussell/siggraph2012course/blob/master/serve.sh). It will
launch a simple one and point your default browser to [`http://localhost:8000/template.html`](https://github.com/kenrussell/siggraph2012course/blob/master/http://localhost:8000/template.html):
$ cd io-2012-slides
$ ./serve.sh
You can also specify a custom port:
$ ./serve.sh 8080
### Presenter mode
The slides contain a presenter mode feature (beta) to view + control the slides
from a popup window.
To enable presenter mode, add `presentme=true` to the URL: [http://localhost:8000/template.html?presentme=true](https://github.com/kenrussell/siggraph2012course/blob/master/http://localhost:8000/template.html?presentme=true)
To disable presenter mode, hit [http://localhost:8000/template.html?presentme=false](https://github.com/kenrussell/siggraph2012course/blob/master/http://localhost:8000/template.html?presentme=false)
Presenter mode is sticky, so refreshing the page will persist your settings.
---
That's all she wrote!
近期下载者:
相关文件:
收藏者: