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.

ふつうの人もコレは押さえたい とり残されないための、これからのWeb制作の学び方、学び所

2,131 views

Published on

2014年10月4日 大阪で開催された「まにまにフェスティバルP3」の3Fオープンステージで登壇しました。そのセッションのスライド資料です。

http://m2college.net/fes3/program.html#program_mori_kazue

Published in: Education
  • Be the first to comment

ふつうの人もコレは押さえたい とり残されないための、これからのWeb制作の学び方、学び所

  1. 1. 2014年10月4日(土) 森和恵 とり残されないための これからのWeb制作の学び方、学び所 ふつうの人もコレは押さえたい
  2. 2. r360studio 森和恵 • Web系のセミナー講師(iMedio) • 書籍執筆「 よくわかるFireworksの教科書 」 • 勉強会「 ガチンコバトル勉強会 in 大阪 」 • r360studio.com • Twitter @r360studio
  3. 3. 昨年も、3Fオープンステージに登壇
  4. 4. 私が、本を書いて出版するまで ~執筆から宣伝~
  5. 5. 担当のWebセミナー(受講料無料)
  6. 6. Co:Laboで10月~12月に開催 http://r360studio.com/coworklabo/
  7. 7. iMedioにてお申込み受付中
  8. 8. 今日お話しすること • HTML5を見直して驚いたこと • これから勉強したいキーワード • 情報収集から実践までのフロー • 情報を身につけるための5か条 • HTML5&CSS3セミナー告知
  9. 9. HTMLを見直して驚いたこと 例:画像を表示するimg要素(HTML5)
  10. 10. 画像を表示する<img> • img要素 • src属性で表示する画像ファイルを指定 • alt属性で表示できなかった時の代替テキストを指定 • width属性とheight属性で原寸でも表示サイズを指定 <img src=“画像ファイル指定“ alt=“代替テキスト” width=“高さ” height=“幅”>
  11. 11. <img src=“img/coworklabo-exterior.jpg” alt=“Co:Labo難波の外観写真 “ width=“150” height=“200”>
  12. 12. HTML5になり変更した<img> • サイズ指定は不要 • alt属性で表示できなかった時の代替テキスト (置き換えても同等となるテキスト情報)を指定 <img src=“画像ファイル指定“ alt=“代替テキスト”>
  13. 13. <img src="img/coworklabo-exterior.jpg" alt="Co:Labo難波の外観写真です。一階にはローソンがあり、 二階にCo:Labo難波があります。壁面に緑の大きな看板がかかげ られています。“>
  14. 14. HTML5になり変更したリンク画像 • title属性でリンク先ページの説明を指定 • title属性は、ポイント時のポップアップ表示に対応 • alt属性は、ポップアップ表示しない • リンク画像の強制的なボーダー表示が、なくなった <a href=“リンク先”><img src=“画像ファイル指定” title=“代替テキスト”></a>
  15. 15. <a href=“eventpage.html"><img src="addetail.jpg" title="iMedioセミナー 『ソーシャルメディア活用のポイント』詳細 ページへ"></a>
  16. 16. 知らないうちに仕様が変わってる これって…まずくない?
  17. 17. 怖いのは、変わったことを 誰も教えてくれないこと ・ 学校の勉強とは違う 受け身ではダメ
  18. 18. これから勉強したいキーワード
  19. 19. HTML5 & CSS3
  20. 20. 画像でアニメーション • アニメーションGIF + シネマグラフ(一部分だけ動くアニメーションGIF) + 6秒動画 Vine • アニメーションPNG(apng)
  21. 21. ムービー
  22. 22. CSS3アニメーション「Transition」 http://caniuse.com/#search=transition
  23. 23. CSS3アニメーション「Animation」 http://caniuse.com/#search=animation
  24. 24. HTML5アニメーション「canvas要素」 Adobe Flashから、WebGL形式データを出力 WebGL とは、canvas要素を用いて記述する OpenGL 対応マシン用の3次元コンピュータグラフィックス
  25. 25. JavaScript
  26. 26. JavaScript JavaScriptライブラリ(DOM)
  27. 27. JavaScript JavaScriptのアプリケーションフレームワーク
  28. 28. プログラムやアニメーションの勉強 • 外注したり組んで仕事をしたりするのに理解が必要 + 専門的なものは、プロにまかせた方が結局割安 • どんな時にどの技術が向くのか?の特長を掴む • 簡単なものを初めから終わりまで作ってみる + データを入出力する掲示板作成がプログラムを理解しやすい
  29. 29. 情報収集から実践までのフロー 例:「Sass」について調べる
  30. 30. Sass (CSSプリプロセッサ― ) • 独自の文法でCSSを記述し、後から変換 • CSSで「変数・演算・関数」などが使える • Sass→CSS変換には、RubyとSassが必要 $blue: #007bbb; .fonts{ color: $blue; } .box1 { background: $blue; } .fonts{ color: #007bbb; } .box1 { background: #007bbb; }
  31. 31. 1 )キーワードを見つける • はじめは、まだ言葉を知らない 流行りを収集する中で、何度も目にするのがキーワード • Facebook 、Twitter 、Gunosy(ニュースサイト) 、 メルマガ・・・など、自分に合った方法で収集する • 最終的にはURLの形で一か所にまとめる • 気になった記事は、ざっくりでも読んどく
  32. 32. Facebookのアクティビティログ
  33. 33. Twitterのお気に入り
  34. 34. Gunosyのクリップ
  35. 35. 仕事前に見るor 読んで、URLをショートカットに キーワード検索
  36. 36. 2 )キーワードがこなれるのを待つ • 新しいキーワードほど、動向をうかがう + 先行者利益を得たい場合は、早めに行動する(賭け) • 興味のある記事は、じっくり読んで深堀しておく • めずらしさから、当たり前になる一歩手前ぐらいを狙う + イベントが開かれたり、書籍がでたり、特集が組まれる
  37. 37. Sass関連
  38. 38. 3)実際に手を動かして使ってみる • 使ってみて「自分にとって」よし悪しを判断 + 書籍を一冊じっくりマスターする + イベントやセミナーにでて、一日集中 + ブログに感想をまとめる • 実際に使うサイトを作ってみるのが一番 + わたしの場合は、サイトの小さなコーナーを作る
  39. 39. コーナーごとに違うデザインで、新しいことを実験
  40. 40. 情報を身につけるための5か条 1. 収集段階では、気楽に (キーワードを覚えるのが目的) 2. 気になることがあれば、気のすむまで深堀りする 3. 楽して一気に学ぶために、書籍やセミナーを使う (自分に合った人を探しておく) 4. 基礎知識は、惜しみなく強化する (HTML+CSS+画像加工+プログラミング) 5. 点の情報をつなぎ、本質や流れをつかむ努力を (ワークフローのどこで使うか?など、役割で分類)
  41. 41. Co:Laboセミナー告知
  42. 42. Co:Laboで10月~12月に開催 http://r360studio.com/coworklabo/
  43. 43. 10月 HTML 第1回 10月18日 14~16時 HTML(1) 第2回 10月28日 19~21時 HTML(2)
  44. 44. 11月 CSS 第3回 11月12日 19~21時 CSS(1) 第4回 11月26日 19~21時 CSS(2)
  45. 45. 12月 資格試験 HTML5レベル1 第5回 12月10日 19~21時 資格試験 HTML5レベル1(1) 第6回 12月17日 19~21時 資格試験 HTML5レベル1(2)
  46. 46. スタート記念で受講料無料 • コワーキング施設 Co:Labo 1日利用料金 1,000円 を入室時にお支払いください • ノートパソコンをお持込くだ さい • テキストエディターとChrome を準備してください
  47. 47. 2014年10月4日(土) 森和恵 http://r360studio.com/manifes3/ スライド公開予定

×