2012年6月5日火曜日

Jquery.ascensor.jsつかったプレゼンと勉強会

オープンラボ備後&岡山JS行ってきた。
とは言っても既に一週間以上達、それぞれの講師の方が資料をあげてくださったり、職人がまとめてくれたりしてるのでそちらを参考に。
(かずさんときよくらさんの資料が見つけれませんでした、ごめんなさい。)


オープンラボ備後

Twitterまとめはこちら

1 playframeworkの紹介 javaWEBフレームワーク 吉田さん

オープンラボ備後でPlayframeworkのこと喋ってきたAdd Star

2 初めてのRails rubyWEBフレームワーク 山本さん

3 次世代JavaScritpUIフレームワーク!?“Knockout.js”を先取りしよう 保住さん

4 phpのFrameworkを選ぶコツ 俺

okayama-js


Twitterまとめはこちら

これの資料とかみんな公開してんのかな?
Twitterのまとめに上がってないヤツの仕入れ先があれば是非教えてください。
(@maeponさんとか知らないのかな?)

ついでに自分はOSH@2012のリベンジってことでこれしてきました。

そしてオープンラボ備後はJquery.ascensor.jsをつかってこれをしてきました。

phpこそ最強なのだ!!

ついでにFirefoxをお使いの方は音が出ません。
逆にChromeとかお使いの人は音が出るのでご注意ください。
で内容としては前者の三人のプレゼンが素晴らしい&当日駆動資料作りだったので内容が薄くてすんません。
伝えたかったことは

・ Rubyみたいな先進的なことは少ないけどRailsのいいとこを取り入れたFrameworkはPHPにもあるんだよ!

ことです。
後は補足としてRubyって開発者のための言語で無いものを楽しく作るのにすごく適した言語だと思うのだけど、phpは成果物を作るための言語だと思うのです。
なので車輪の再開発的な要素をなくすために標準の関数が山ほどあるし、あれもこれもとFrameworkがやるようなことでもPHPでに載せてあったりするわけで。
 なのでスピーディに目的を達成するための言語としてPHPは出来る子なので皆さんも優しく見守ってくれたらいいんじゃないかなw


でこれだけだと大したアウトプットになってないのでプレゼンの資料作りの方法を簡単に説明しておきます。
ブラウザでプレゼンしたい人の参考までに。

1 音楽の出し方
html5で可能になったaudio要素を使ってます。
細かい実装方法はこちらが分かりやすいです。
今まではflashだったりブラウザのプラグインだったりに頼ってたところがたったこれだけで実装出来るのは大変便利ですね。
ただブラウザによって流せる拡張子が違うのでそこが今後の課題かも。

2 タイトルのフォント
CSS3のWEBフォントを使ってます。
やり方としては

<link href='http://hogehoge.com/css?family=hoge' rel='stylesheet' type='text/css'/>
 
とCSSの読み込みと同じようにWEB上のフォントを読み込み

h1 {
    font-family: 'Love Ya Like A Sister', cursive;
    font-size:100pt;
}
とこんな感じでCSSでフォントを指定して上げるだけ。
日本語のWEBフォントもモリサワとかが出してたりするので、
今後はこういうプレゼンとかで大活躍するかもですね。
 
3 Jquery.ascensor.jsの使い方
デモにも書いてありますが
<div class="contenu">で括った範囲が一ページです。
またmyscript.jsというのがconfig的な役割を果たしており、
 
・ AscensorMapでMAPの広さ
・ ContentCoordでMAPのつなぎ方
・ Navigで右下にMAPの表示の有無
 
などなどが設定できます。
#house1の数字で該当のMAPに飛ぶこともできるます。
MAPの広げ方次第ではただのコマ送りじゃない遊び要素のあるページも作れそうです。
後は3ページ当りからクリックすると表示が次々出たりしますが、
これはJQueryのshow()とhide()を使ってます。
限られた時間(1時間ちょっとくらい)でとりあえず書いた感があるので、
自分のソースは汚いですがJQueryを触ったことが無い人の参考になれば幸いです。


とこんな感じですかね。
最近はブラウザでのプレゼンも珍しく無くなって来ましたが、
パワポにはない表現がある+WEBのいい勉強になると思います。
興味が有る人は是非試してみてください。
というわけで今日のところはこのへんで。

0 件のコメント:

コメントを投稿