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

2014年10月4日(土)
森和恵
とり残されないためのこれからのWeb制作の学び方、学び所
ふつうの人もコレは押さえたい

r360studio 森和恵
•
Web系のセミナー講師（iMedio）
•
書籍執筆「よくわかるFireworksの教科書」
•
勉強会「ガチンコバトル勉強会 in 大阪」
•
r360studio.com
•
Twitter @r360studio

昨年も、3Fオープンステージに登壇

私が、本を書いて出版するまで ~執筆から宣伝~

担当のWebセミナー（受講料無料）

Co:Laboで10月～12月に開催
http://r360studio.com/coworklabo/

iMedioにてお申込み受付中

今日お話しすること
•
HTML5を見直して驚いたこと
•
これから勉強したいキーワード
•
情報収集から実践までのフロー
•
情報を身につけるための５か条
•
HTML5＆CSS3セミナー告知

HTMLを見直して驚いたこと
例：画像を表示するimg要素（HTML5）

画像を表示する<img>
•
img要素
•
src属性で表示する画像ファイルを指定
•
alt属性で表示できなかった時の代替テキストを指定
•
width属性とheight属性で原寸でも表示サイズを指定
<img src=“画像ファイル指定“ alt=“代替テキスト”
width=“高さ” height=“幅”>

HTML5になり変更した<img>
•
サイズ指定は不要
•
alt属性で表示できなかった時の代替テキスト（置き換えても同等となるテキスト情報）を指定
<img src=“画像ファイル指定“ alt=“代替テキスト”>

HTML5になり変更したリンク画像
•
title属性でリンク先ページの説明を指定
•
title属性は、ポイント時のポップアップ表示に対応
•
alt属性は、ポップアップ表示しない
•
リンク画像の強制的なボーダー表示が、なくなった
<a href=“リンク先”><img src=“画像ファイル指定” title=“代替テキスト”></a>

知らないうちに仕様が変わってるこれって…まずくない？

怖いのは、変わったことを誰も教えてくれないこと・学校の勉強とは違う受け身ではダメ

これから勉強したいキーワード

画像でアニメーション
•
アニメーションGIF
+
シネマグラフ（一部分だけ動くアニメーションGIF）
+
6秒動画 Vine
•
アニメーションPNG（apng）

CSS3アニメーション「Transition」
http://caniuse.com/#search=transition

CSS3アニメーション「Animation」
http://caniuse.com/#search=animation

HTML5アニメーション「canvas要素」
Adobe Flashから、WebGL形式データを出力
WebGL とは、canvas要素を用いて記述する OpenGL 対応マシン用の3次元コンピュータグラフィックス

JavaScript
JavaScriptライブラリ(DOM)

JavaScript
JavaScriptのアプリケーションフレームワーク

プログラムやアニメーションの勉強
•
外注したり組んで仕事をしたりするのに理解が必要
+
専門的なものは、プロにまかせた方が結局割安
•
どんな時にどの技術が向くのか？の特長を掴む
•
簡単なものを初めから終わりまで作ってみる
+
データを入出力する掲示板作成がプログラムを理解しやすい

情報収集から実践までのフロー
例：「Sass」について調べる

Sass (CSSプリプロセッサ― )
•
独自の文法でCSSを記述し、後から変換
•
CSSで「変数・演算・関数」などが使える
•
Sass→CSS変換には、RubyとSassが必要
$blue: #007bbb;
.fonts{ color: $blue; }
.box1 { background: $blue; }
.fonts{ color: #007bbb; } .box1 { background: #007bbb; }

1 ）キーワードを見つける
•
はじめは、まだ言葉を知らない流行りを収集する中で、何度も目にするのがキーワード
•
Facebook 、Twitter 、Gunosy(ニュースサイト) 、メルマガ・・・など、自分に合った方法で収集する
•
最終的にはURLの形で一か所にまとめる
•
気になった記事は、ざっくりでも読んどく

Facebookのアクティビティログ

仕事前に見るor 読んで、URLをショートカットに
キーワード検索

2 ）キーワードがこなれるのを待つ
•
新しいキーワードほど、動向をうかがう
+
先行者利益を得たい場合は、早めに行動する（賭け）
•
興味のある記事は、じっくり読んで深堀しておく
•
めずらしさから、当たり前になる一歩手前ぐらいを狙う
+
イベントが開かれたり、書籍がでたり、特集が組まれる

3）実際に手を動かして使ってみる
•
使ってみて「自分にとって」よし悪しを判断
+
書籍を一冊じっくりマスターする
+
イベントやセミナーにでて、一日集中
+
ブログに感想をまとめる
•
実際に使うサイトを作ってみるのが一番
+
わたしの場合は、サイトの小さなコーナーを作る

コーナーごとに違うデザインで、新しいことを実験

情報を身につけるための５か条
1.
収集段階では、気楽に（キーワードを覚えるのが目的）
2.
気になることがあれば、気のすむまで深堀りする
3.
楽して一気に学ぶために、書籍やセミナーを使う（自分に合った人を探しておく）
4.
基礎知識は、惜しみなく強化する（HTML＋CSS＋画像加工＋プログラミング）
5.
点の情報をつなぎ、本質や流れをつかむ努力を（ワークフローのどこで使うか？など、役割で分類）

10月 HTML
第１回 10月18日 14～16時 HTML（1）
第２回 10月28日 19～21時 HTML（2）

11月 CSS
第３回 11月12日 19～21時 CSS（1）
第４回 11月26日 19～21時 CSS（2）

12月資格試験 HTML5レベル1
第５回 12月10日 19～21時資格試験 HTML5レベル1（1）
第６回 12月17日 19～21時資格試験 HTML5レベル1（2）

スタート記念で受講料無料
•
コワーキング施設 Co:Labo 1日利用料金 1,000円を入室時にお支払いください
•
ノートパソコンをお持込ください
•
テキストエディターとChrome を準備してください

2014年10月4日(土)
森和恵
http://r360studio.com/manifes3/
スライド公開予定

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Mehr von Mori Kazue

Mehr von Mori Kazue (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)