社内、サイト内動きコンテスト反省
独りよがりになりすぎた。
課題サイトの持っている内容を表現するのではなくて、自分の技術力がすごい、ということを表現する動きを実装した。
（認めてもらいたい欲を押さえるつもりもなかったってのもある）
下記を意識していく。
人が気持ちいいと感じる動き
ある内容や機能を、より伝わりやすくするための動き
エラー、表示崩れ時対策
問題箇所を特定するために、広い範囲でコメントアウトし、少しずつ狭くしていく。
display:none;や、背景色などをつけて、問題を特定する
いらない空白ないか、全角になってないか
エラーは一つ一つ消していき、最終的に全部消す
絶対パスで書く必要があるときも
いらないクラスが無いか
秒数は正しいか
フォーマットは正しいか
各ブラウザが確実に同じ動作をするとは限らないので、動作部分を１つずつ確認していく
別の方法でやる（一つのやり方に固執しない）
それでも解決できない時は、聞く！
なんとなく憧れる肩書き
ゲームクリエイター
クリエイティブエージェンシー
もの書き
建築家
未来学者
科学者
発明家
制作側の最低限のSEO対策
対策キーワードを決める
高い評価を得ることができるようにする
内部対策
title、h1,altテキストのブラッシュアップ、キーワードを文頭に
内部リンクのテキストを、検索順位を上げたいキーワードに
SEOコンテンツなどつくる
外部対策
ランキングサイトへ登録
インデックスに登録する（登録されやすくする）
google web master toolでサイトマップの登録
パンくずリストの導入
欲しいパートナー
デザイナー系
センスのいいデザイナー
僕の好きな世界観を描くイラストレーター
エンジニア
ハードウェア
バックエンド
フロントエンド
刺さる文章、キャッチを書けるライター
映像クリエーター
フォトグラファー
サウンドクリエイター
ieに対しては、プログレッシブエンハウスメント
ieではリッチな表現ではなくusefullに重きを置く → プログレッシブエンハウスメント
瞬間的な切り替え(transition無し)
静止画(canvasアニメーション無し)
背景透過せずに黒背景
拡散するときのURLは個別のURLではなく共通のURLに(pushstateが使用できない)
開発後チェック
ソースの整理
各イベントごとに処理をまとめるなど
開発時に使った必要ないファイル、コード、console等を削除
ブラウザ・デバイスチェック
見た目はカンプ通りか
動きにおかしいところはないか
モンキーテスト
ウィンドウサイズ変更チェック→ゆっくりサイズを変更してもしっかり動くか
意地悪な使い方をする
ボタンを連打する
スクロールをぎゅいんっと動かす
機能は仕様を満たしているか
他にすることはあるっけ？
ie6-8で、html5とcss3を使えるようにするjsライブラリ
▼css3セレクタを使えるようにする
・selectivizr.js
・ie9.js
|
1 2 3 4 |
<script type="text/javascript" src="common/js/jquery.js"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="common/js/selectivizr.js"></script> <![endif]--> |
使えるようになるセレクタ
[foo^=”bar”],[foo$=”bar”],[foo*=”bar”],:root,:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n),:last-child,:first-of-type,:last-of-type,:only-child,:only-of-type,:empty,:target,:enabled,:disabled,:checked,:not(s)
注意点(selectivizr.js)
CSSは外部ファイルに記述しないと動かない
ローカルでは動かない
▼css3プロパティを使えるようにする
・PIE.htc
・PIE.js
使えるようになるプロパティ
・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient as background image
cf:http://www.hp-stylelink.com/news/2013/09/20130918.php#list03
▼html5タグを使えるようにする
・html5shiv.js
使えるようになるタグ（機能は使えない）
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section
注意点
head閉じタグ直前に読み込む必要あり（bodyタグ直前だと、html5要素が存在しないので、css,jsが効かない）
恵比寿ランチ：舞香
早い、安い、美味い、多い、と四拍子揃ってる。
スタミナ定食は、レバー入っているので、苦手な人は気をつけて下さい。
おすすめは肉辛味噌定食、800円なり。
http://tabelog.com/tokyo/A1303/A130302/13060639/
写真はつけ麺。
1 2