html5 caravan 福岡・adobe＆htmlのスライド

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe & HTML HTML5 Caravan 福岡｜アンディホール


だれだこいつ

§  日本在住歴もFlash歴も十ん年

§  物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々

§  現在の肩書がテクニカルエバンジェリスト

§  興味はデザインとコードをまたぐところ

§  カタコトでゴメンね

§  ゲーム好き、などなど

@fenomas アットフェノマス


過去のウェブ：

§  HTML §  CSS §  SVG §  DHTML

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. github.com/SirPepe/SpecGraph

現在のウェブ


Adobeとしての活躍

contribute to a better web

better web experience

bring innovations to the web better tools for the web


詳細情報：

html.adobe.com/jp


Tools


ツールの紹介：


Improving the web


Contributing to the web

表示ブレンドモードカスタムフィルター

Clip Paths

レイアウト CSS Regions CSS Shapes

プラットフォーム Apache Cordova (PhoneGap)

コミュニティー＆テスト Test the Web Forward

Web Platform ドキュメンテーション


CSS フィルター

Webの進化の事例：

現状の対応： Chrome, Safari, iOS, Opera （プレフィックス）


CSS フィルター



CSS フィルター


filter: sepia(0.8);


Edge Animate、Reflow でビジュアルに作る


カスタムフィルター


現状の対応： Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


カスタムフィルター



r

カスタムフィルターのデモ

git.io/zxtapw （ chrome://flags でCSS シェーダを有効にしよう）


r

CSS FilterLab

github.com/adobe/cssfilterlab （ chrome://flags でCSS シェーダを有効にしよう）


CSS シェイプ


現状の対応： Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


CSS Regions


現状の対応： iOS7 （標準対応！） IE、Safari （プレフィックス） Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


Reflow でビジュアルに作る


Helping creators make the web better


コミュニティ！

testthewebforward.org

webplatform.org


フリー・オープンソース HTML5モバイルアプリ開発フレームワーク


クラウド上でパッケージを生成 build.phonegap.com

PhoneGap Build


ツールの入手はCreative Cloudから

creative.adobe.com/


github.com/adobe-webplatform/ Demo-for-Alice-s-Adventures-in-Wonderland


Follow us! html.adobe.com/jp

github.com/adobe-webplatform codepen.io/adobe

質問など： @fenomas

[email protected]

html5 caravan 福岡・adobe＆htmlのスライド

Technology