Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ADOBE CREATIVE SUITE 5 Web Premium 発売記念セミナー:マルチで行こう!

4,502 views

Published on

ADOBE CREATIVE SUITE 5 Web Premium 発売記念セミナーのスライドショーです。
DreamweaverでPCサイトをマルチプラットフォーム化する制作プロセスと抑えたいTIPS、Dreamweaverの新機能の紹介になっています。

動画はこちら
http://www.ustream.tv/channel/cs5wp-live

Published in: Technology
  • Be the first to comment

ADOBE CREATIVE SUITE 5 Web Premium 発売記念セミナー:マルチで行こう!

  1. 1. マルチで行こう!<br />面白法人カヤック<br />林真由美<br />
  2. 2. マルチで行こう!<br />
  3. 3. 本日のアジェンダ<br />自己紹介<br />面白法人カヤックって?<br />最近のWeb制作の傾向<br />DWを使いマルチプラットフォーム化するには<br />お知らせ<br />
  4. 4. 自己紹介<br />面白法人カヤック<br />意匠部<br />林真由美<br />@ barimi<br />
  5. 5. こんなもの作ってます<br />1アイデア100円から<br />元気玉<br />貧乏揺すりガジェットYUREX<br />寝言録音iPhoneアプリ<br />Let it Sleep<br />
  6. 6. 直近ではこんなのも…<br />萌えキャラが顔を洗ってくれるAR石鹸<br />世界初<br />
  7. 7. つづきはWebで!<br />林真由美 ORbarimiで 検索!<br />
  8. 8. ご感想・ご質問、お気軽に!<br />Twitter<br /><ul><li>@barimi
  9. 9. #cs5wp</li></ul>アンケート<br /><ul><li>配布されているアンケート用紙にご記入くださいませ。</li></li></ul><li>面白法人カヤックとは<br />経営理念つくる人を増やす<br />
  10. 10. どんなものを作っているの?<br />声で遊ぶコミュニティ<br />こえ部<br />iPhoneアプリDomino’s APP<br />モバゲーアプリ英雄になりたい!<br />
  11. 11. 最近のカヤックのWeb制作の傾向<br />携帯<br />iPhone<br />Android<br />PC<br />iPad<br />
  12. 12. 最近のカヤックのWeb制作の傾向<br />
  13. 13. 最近のカヤックのWeb制作の傾向<br />
  14. 14. 最近のカヤックのWeb制作の傾向<br />
  15. 15. 最近のカヤックのWeb制作の傾向<br />
  16. 16. 最近のカヤックのWeb制作の傾向<br />
  17. 17. ということを踏まえて今回のテーマ<br />
  18. 18. マルチで行こう!<br />Dreamweaverを使い<br />  マルチプラットフォーム化<br />するには?<br />素早く<br />
  19. 19. 今日持って帰って欲しいこと。<br />DW CS5の新機能<br />DWの便利な使い方<br />マルチプラットフォーム化の基礎知識<br />
  20. 20. 対象サイトはこれ<br />1アイデア100円から<br />元気玉<br />
  21. 21. 対象サイトはこれ<br /><ul><li>2007年オープン
  22. 22. PCのみ展開
  23. 23. DWとテキストエディタで作成</li></li></ul><li>PC<br />携帯<br />iPad<br />iPhone<br />Android<br />
  24. 24. 用意したもの:ハードウェア<br />漫画<br />ノートPC<br />Nexus-One<br />F-09A<br />iPhone 3GS(撮影中)<br />
  25. 25. 用意したもの:ソフトウェア<br />
  26. 26. 作り方について<br />取り掛かる前に、まずは考える。<br />
  27. 27. 理想の構造<br />新規作成<br />
  28. 28. 今回のポイント<br />素早く<br />簡単に<br />(゚ Д゚)ウマー<br />
  29. 29. 抑えておきたい!各プラットフォームの画面サイズ<br />
  30. 30. 抑えておきたい!各プラットフォームの画面サイズ<br />iPad<br />縦:768×1024<br />横:1024×768<br />
  31. 31. 抑えておきたい!各プラットフォームの画面サイズ<br />iPhone<br />縦:320×480<br />横:480×320<br />
  32. 32. 抑えておきたい!各プラットフォームの画面サイズ<br />Android(*)<br />縦:320×480横:480×320<br />
  33. 33. 抑えておきたい!各プラットフォームの画面サイズ<br />携帯(*)<br />横240×縦320<br />
  34. 34. じゃ、幅で分けよう<br />
  35. 35. なので、こうしよう。<br />
  36. 36. 理想の構造:その2<br />新規作成<br />
  37. 37. ところが…<br />無理じゃん!<br />
  38. 38. 携帯は別HTMLにしないといけない3つの主な理由。<br />ファイルサイズの問題<br />画像込みで100kb以内。<br />CSSの問題<br />HTMLに直接記述。<br />JSの問題<br />非対応。<br />
  39. 39. 現実はこうなった…<br />新規作成<br />
  40. 40. DW CS5 新機能!<br /><ul><li>CSSインスペクト
  41. 41. CSSプロパティー無効/有効の切替
  42. 42. PHPコードヒントをはじめとするコーディング環境強化
  43. 43. コンテンツ管理システム(CMS)の確認、編集、反映の強化
  44. 44. Subversion連携強化
  45. 45. Omniture連携(Test & Target)
  46. 46. すぐに作業開始できるシンプルなサイト定義
  47. 47. 日本語ヘルプも充実のCSS新規ドキュメント
  48. 48. ブラウザ互換性オンラインサービス”BrowserLab”</li></li></ul><li>マルチプラットフォーム化で使えそうなDW CS5 新機能!<br /><ul><li>CSSインスペクト
  49. 49. CSSプロパティー無効/有効の切替
  50. 50. PHPコードヒントをはじめとするコーディング環境強化
  51. 51. コンテンツ管理システム(CMS)の確認、編集、反映の強化
  52. 52. Subversion連携強化
  53. 53. Omniture連携(Test & Target)
  54. 54. すぐに作業開始できるシンプルなサイト定義
  55. 55. 日本語ヘルプも充実のCSS新規ドキュメント
  56. 56. ブラウザ互換性オンラインサービス”BrowserLab”</li></li></ul><li>使ってみたい!DW CS5 新機能!<br /><ul><li>CSSインスペクト
  57. 57. CSSプロパティー無効/有効の切替
  58. 58. PHPコードヒントをはじめとするコーディング環境強化
  59. 59. コンテンツ管理システム(CMS)の確認、編集、反映の強化
  60. 60. Subversion連携強化
  61. 61. Omniture連携(Test & Target)
  62. 62. すぐに作業開始できるシンプルなサイト定義
  63. 63. 日本語ヘルプも充実のCSS新規ドキュメント
  64. 64. ブラウザ互換性オンラインサービス”BrowserLab”</li></li></ul><li>ブラウザラボハック<br />
  65. 65. マルチプラットフォーム化で使えそうないつもの便利な機能!<br /><ul><li>テンプレート、ライブラリ
  66. 66. デザインビュー
  67. 67. ライブビュー
  68. 68. Device Central
  69. 69. ブラウザプレビュー
  70. 70. Extension</li></li></ul><li>STEP1:要素の確認<br />
  71. 71. STEP2:テンプレート・ライブラリ化<br />
  72. 72. STEP3:携帯ページはさくっと<br />
  73. 73. おすすめDOCタイプ<br />xHTMLMobile Profile 1.0<br /><?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd" ><html xmlns="http://www.w3.org/1999/xhtml">xHTML 1.0 Transitional<?xml version=“1.0” encoding=“utf-8”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=“http://www.w3.org/1999/xhtml” lang=“ja” xml:lang=“ja”><br />
  74. 74. 携帯は完成<br />とりあえず、完成。<br />
  75. 75. 次はスマートフォン<br />どんどんいきましょー。<br />
  76. 76. スマートフォン用サイトといえば<br />CSS3HTML5<br />
  77. 77. HTML5が<br />したいです。<br />
  78. 78. http://labs.adobe.com/downloads/html5pack.html<br />
  79. 79. CS5 HTML5 PACKをさわってみたお<br />
  80. 80. HTML5/CSS3コードヒント属性と値(HTML5タグ)-moz, -webkit, -o (CSSプロパティ)<br />マルチスクリーンプレビュー&メディアクエリー<br />最新のWebKit搭載<br />HTML5対応レイアウト<br />
  81. 81.
  82. 82. すごい!!<br />
  83. 83. STEP3:スマートフォン用サイト制作の5つのポイント<br />基本1カラム<br />リキッドレイアウト<br />リンクエリアは大きく<br />Viewport<br />CSSの記述方法<br />
  84. 84. レイアウト<br />
  85. 85. Viewportについて<br />
  86. 86. Viewportについて<br />http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html<br />
  87. 87.
  88. 88. …………<br />何が何だか わからない<br />…………<br />…………<br />…………<br />…………<br />
  89. 89. Viewportについて<br />320px<br />980px<br />
  90. 90. Viewportについて<br /><meta name="viewport“<br /> content=“<br />width=device-width,<br /> user-scalable=no,<br /> maximum-scale=1.0,<br /> minimum-scale=1.0" /><br />
  91. 91. Viewportについて<br /><meta name="viewport“<br /> content=“<br /> width=device-width,<br /> user-scalable=no,<br /> maximum-scale=1.0,<br /> minimum-scale=1.0" /><br />コンテンツの幅<br />ピンチできるかどうか<br />拡大の上限<br />拡大の下限<br />
  92. 92. CSSの記述方法<br /><link media=“<br /> only screen and <br /> (max-device-width: 480px)" <br />href="/css/smartphone.css" type="text/css" rel="stylesheet“ /><br />
  93. 93. CSSの記述方法<br /><link media=“screen and (min-device-width:481px)" href="pc.css" type="text/css" <br />rel="stylesheet" /><!--[if IE]><br /><link href="pc.css" type="text/css“<br />rel="stylesheet" /><br /><![endif]--><br />
  94. 94. これらを踏まえまして<br />
  95. 95. どうしてもここが。。。<br />
  96. 96. ようせいさんが あらわれた<br />
  97. 97. USBバンドの同梱JSについて<br />
  98. 98. UAでソースの変換<br />varrules ={"rel属性で指定" : ["iPhone用変換ソース","Android用変換ソース"] }<br />
  99. 99. UAで読み込むCSSの切り替え<br />コメントアウトを外せば使えます。<br />
  100. 100. DW機能補完ブラウザ<br />
  101. 101. スマートフォンも完成<br />実機でみても大丈夫!<br />
  102. 102.
  103. 103. PC<br />完成<br />携帯<br />iPad<br />iPhone<br />Android<br />
  104. 104. マルチプラットフォーム化のポイント<br /><ul><li>随時DWのビューで確認しながらつくる。
  105. 105. 時間と労力をかければ誰でもマルチプラットフォーム化できる。
  106. 106. ただし、素早くつくるには、ビュー機能が豊富なDWが便利。
  107. 107. 今後も、プラットフォームは増えるので、新規製作する場合は、拡張性を考えつつ制作しておくと良い。(CSS3とか、HTML5とか。)</li></li></ul><li>告知です!<br />
  108. 108. Flashクリエイター専門求人情報サイトできました!<br />
  109. 109. お手元にこんなの<br />ありませんか?<br />
  110. 110. とは?<br />ブラウザだけで<br />Flashをつくる<br />オンラインサービス<br />ユーザー数<br />2万2000人<br />以上!<br />プログラムを<br />かくと…<br />Flashが<br />現れます<br />●Flashクリエイター<br />●Webデザイナー<br />●Webプログラマー<br />世界中から、ActionScriptを<br />使うユーザーが集まってます。<br />
  111. 111. そして今回、この機能をつかって、<br />Flashクリエイター専門の求人情報サイト<br />を立ち上げました。<br />wonderflFlash-Jobs<br />その名も、<br />
  112. 112. 国内外のFlashクリエイティブに特化した仕事、とりわけインタラクティブ要素の強い仕事を中心にご紹介<br />エントリーは…<br />wonderfl へ投稿した作品を<br />ポートフォリオとして活用できる!<br />アピール!<br />表現力<br />演出力<br />実装力<br />ご利用は無料、wonderflに登録するだけ!<br />詳しくは、お手元のフライヤー、または「flash Jobs」で検索!<br />
  113. 113. 会社の雰囲気は?<br />どんなものをつくっている会社?<br />企業からのメッセージ<br />どんなスキルが必要?<br />
  114. 114. flash jobs<br />
  115. 115. ご清聴ありがとうございました!<br />スペシャルサンクス<br />楳図かずお先生、井上雄彦先生、美内すずえ先生、小畑健先生、荒木飛呂彦先生、漫☆画太郎先生ありがとう<br />

×