Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2.168 visualizaciones

Publicado el

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

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

Publicado en: Educación
  • Sé el primero en comentar

ふつうの人もコレは押さえたい とり残されないための、これからの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/ スライド公開予定

×